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]
複製代碼

let arr= [
    {id:1,name: "Alex", age: 18},
    {id:2,name: "Teamo", age: 15},
    {id:3,name: "Lily", age: 16},
    {id:4,name: "Lucy", age: 17},
    {id:5,name: "Tom", age: 19}
]
let arr1=arr.filter(function(item){
    return item.age>15
})
console.log(arr1)
//[ {id: 1, name: "Alex", age: 18},
{id: 3, name: "Lily", age: 16},
{id: 4, name: "Lucy", age: 17},
{id: 5, name: "Tom", age: 19}]
複製代碼

原理的實現

Array.prototype.filter1 = function (fn) {
  if (typeof fn !== "function") {
	throw new TypeError(`${fn} is not a function`);
  }
  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) {
   if (typeof fn !== "function") {
	throw new TypeError(`${fn} is not a function`);
   }
    let newArr = [];
    for (let i = 0; i < this.length; i++) {
        newArr.push(fn(this[i]))
    };
    return newArr;
}
複製代碼

reduce用法和原理

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

用法

let 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) {
    if (typeof fn !== "function") {
	throw new TypeError(`${fn} is not a function`);
    }
    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) {
    if (typeof fn !== "function") {
	throw new TypeError(`${fn} is not a function`);
    }
    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) {
    if (typeof fn !== "function") {
	throw new TypeError(`${fn} is not a function`);
    }
    for(let i=0;i<this.length;i++){
        if(!fn(this[i])) {
            return false
        }
    }
    return true
};
複製代碼

---

更多angular1/2/4/五、ionic1/2/三、react、vue、微信小程序、nodejs等技術文章、視頻教程和開源項目，請關注微信公衆號——全棧弄潮兒。

腦筋急轉彎：

生活小竅門