js數組中filter、map、reduce、find等方法實現的原理

filter用法和原理實現

• filter 過濾,filter()使用指定的函數測試全部元素，並建立一個包含全部經過測試的元素的新數組。

let arr=[2,4,6,8];
let arr1=arr.filter(function(item){
    return item>5
})
console.log(arr1) //[6,8]
複製代碼

• 原理的實現

Array.prototype.filter1 = function (fn) {
  let newArr=[];
  for(let i=0;i<this.length;i++){
      fn(this[i]) && newArr.push(this[i]);
  }
  return newArr;
};
let arr=[2,4,6,8];
let arr1=arr.filter1(function(item){
    return item>5
})
console.log(arr1) //[6,8]
複製代碼

• 看完以後是否是so easy，其它的幾個實現大同小異,建議都手寫遍

map用法和原理實現

• map 映射,map()方法返回一個新數組，數組中的元素爲原始數組元素調用函數處理的後值。

let arr = ['bob', 'grex', 'tom'];
let arr1 = arr.map(function(item) {
    return `<li>${item}</li>`;
});
console.log(arr1); //[ '<li>bob</li>', '<li>grex</li>', '<li>tom</li>' ]

複製代碼

• 原理實現

Array.prototype.map = function(fn) {
    let newArr = [];
    for (let i = 0; i < this.length; i++) {
        newArr.push(fn(this[i]))
    };
    return newArr;
}

複製代碼

reduce用法和原理

• reduce() 方法接收一個函數做爲累加器，數組中的每一個值（從左到右）開始縮減，最終計算爲一個值。

var arr=[2,4,6,8];
let result=arr.reduce(function (val,item,index,origin) {
    return val+item
},0);
console.log(result) //20

複製代碼

• reduce原理實現

Array.prototype.reduce = function (reducer,initVal) {
    for(let i=0;i<this.length;i++){
        initVal =reducer(initVal,this[i],i,this);
    }
    return initVal
};

複製代碼

find用法和原理實現

• find() 方法返回經過測試（函數內判斷）的數組的第一個元素的值。

let arr = [1,2,3];
let arr1=arr.find(function (item) {
    return item>=2
});
console.log( arr5); //2

複製代碼

• find原理實現

Array.prototype.find = function(fn) {
    for (let i = 0; i < this.length; i++) {
        if (fn(this[i])) return this[i]
    }
}

複製代碼

some用法和原理實現

• some() 方法會依次執行數組的每一個元素：

若是有一個元素知足條件，則表達式返回true , 剩餘的元素不會再執行檢測。

若是沒有知足條件的元素，則返回false。

let arr = [2, 4, 6, 8];
let flag = arr.some(function(item) {
    return item > 5
});
console.log(flag); //true

複製代碼

• some原理實現

Array.prototype.some=function (fn) {
    for(let i=0;i<this.length;i++){
        if(fn(this[i])) {
            return true
        }
    }
    return false
};

複製代碼

every用法和原理實現

• every方法用於檢測數組全部元素是否都符合指定條件（經過函數提供）。

let arr = [2, 4, 6, 8];
let flag = arr.every(function(item) {
    return item > 5
});
console.log(flag); //false

複製代碼

• 原理實現

Array.prototype.every=function (fn) {
    for(let i=0;i<this.length;i++){
        if(!fn(this[i])) {
            return false
        }
    }
    return true
};

複製代碼