reduce實現filter,map 陣列扁平化等

nanfeiyan發表於2019-04-30
Filter陣列

map函式接收一個函式作為引數，作為引數的函式接收三個引數值，分別是遍歷陣列的每一項元素，元素的索引和陣列本身。這三個引數剛好和reduce函式接收的第一個函式引數的第2、3、4個引數是對應的。這是實現的核心

實現思路是，將每次遍歷的元素，作為傳入的函式的引數，並將函式執行的結果放入新的陣列中。

reduce實現map

Array.prototype._map = function (callback) {
  if(typeof callback === 'function') {
    return this.reduce((prev,item,index,arr) => {
      prev.push(callback(item, index, arr))
      return prev
    }, [])
  } else {
    console.log(new Error('callback is not function'))
  }
}

let val = [1, 5, 6]._map(item => item+ 1)
console.log(val);  // [2, 6, 7]
複製程式碼

實現filter的思路和實現map是一致的，只不過前者是一股腦的把執行結果全放入陣列中，而filter需要做一個判斷：如果filter函式傳入的引數(引數是一個函式)執行後有返回值，即經過了檢驗，才將遍歷的當前元素放入陣列中，如果沒有返回值，就忽略

reduce實現filter

  Array.prototype._filter = function (callback) {
    if(typeof callback === 'function') {
      return this.reduce((prev,item,index,arr) => {
        callback(item, index, arr) ? prev.push(item) : null
        return prev
      }, [])
    } else {
      console.log(new Error('callback is not function'))
    }
  }
  let val = [1, 5, 6]._filter(item => item > 2)
  console.log(val);  // [5, 6]
複製程式碼

求最大值/最小值

  let arr = [1, 2, 3, 4, 5]

console.log(arr.reduce((prev, cur) => Math.max(prev, cur))); // 5

console.log(arr.reduce((prev, cur) => Math.min(prev, cur))); // 1
複製程式碼

陣列去重

let arr = [1, 2, 3, 1, 1, 2, 3, 3, 4, 3, 4, 5]

let result = arr.reduce((prev, item, index, arr) => {
!prev.includes(item) && prev.push(item);
return prev
}, [])
console.log(result);  //[1, 2, 3, 4, 5]

複製程式碼

陣列扁平化

let arr = [1, 2, '3js', [4, 5, [6], [7, 8, [9, 10, 11], null, 'abc'], {age: 58}, [13, 14]], '[]', null];
function f(arr) {
    if(Array.isArray(arr)) {
      return arr.reduce((prev, item) => {
        return Array.isArray(item) ? prev.concat(f(item)) : prev.concat(item)
      }, [])
    } else {
      throw new Error("arr + ' is not array'")
    }
}
複製程式碼

結果:

結果

相關文章