JavaScript ES6数组新增遍历方法

Javascript ES6中的语法知识，伴随着发展尤其是互联网浏览器的发展，在当前网页开发中占重要地位，变量声明，箭头函数，数组对象新增方法，还有class类，异步解决方案等等，前端开发主流框架Vue，React等ES6语法应用非常普遍，因此学习使用ES6的知识点是很有必要的，再者说，面试过程中有很大几率会被问到ES6的掌握程度，甚至会有说请自己实现ES6 forEach()方法，因为很多现在开发都是基于Vue等框架开发，并且速度快，效率高。

这次记录中主要记录的ES6中数组中的一些新的遍历的方法，在Vue以及React中应用非常广泛。

1.forEach

forEach()：数组每个元素都执行一次回调函数。
注意: forEach() 对于空数组是不会执行回调函数的。

语法：array.forEach(function(currentValue, index, arr), thisValue)；
注意：它的第二个参数不经常使用，因此我们下文所说的参数大都是指forEach的第一个参数函数的参数，如currentValue,index,arr。具体参阅：https://www.runoob.com/jsref/jsref-obj-array.html

参数：
currentValue :必需，当前元素；
index: 可选，当前元素索引；
arr:可选，当前元素所属的数组对象；
返回值：无返回值，即undefind;
原理实现：

var arr = [1,2,3];
Array.prototype.LforEach = function(callback){
    for(var i = 0; i<this.length; i++){
        callback(this[i],i,this)
    }
}
arr.LforEach((item,index,arr)=>{
    console.log(item,index,arr);
})

2.filter

filter() ：检测数值元素，并返回符合条件所有元素的数组
注意： filter() 不会对空数组进行检测。
注意： filter() 不会改变原始数组。

语法：array.filter(function(currentValue,index,arr))
参数
参数：
currentValue :必需，当前元素；
index: 可选，当前元素索引；
arr:可选，当前元素所属的数组对象；
返回值：返回数组，包含了符合条件的所有元素。如果没有符合条件的元素则返回空数组。
原理实现：

Array.prototype.LFilter = function(callback){
    var arr = [];
    for(var i = 0; i< this.length; i++){
        callback(this[i],i,this) && arr.push(this[i]);
    }
    return arr;
}
var arr1 = arr.LFilter((item,index,arr)=>{
    return item > 2         
})
console.log(arr1);

3.find

find()：返回符合传入测试（函数）条件的数组元素;
注意: find() 对于空数组，函数是不会执行的。
注意: find() 并没有改变数组的原始值。

语法：同上语法；
参数：同上参数；
返回值：返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回 undefined。
原理实现：

Array.prototype.Lfind = function(callback){
    var result = '';
    for(var i = 0; i<this.length; i++){
        if(callback(this[i],i,this)){
            result = this[i]
        }
    }
    return result;
}
var result= arr.Lfind((item,index,arr)=>{
      return item == 2
})
console.log(result);

4.findIndex

findIndex()：返回符合传入测试（函数）条件的数组元素索引。
注意: findIndex() 对于空数组，函数是不会执行的。
注意: findIndex() 并没有改变数组的原始值。

语法：同上；
参数：同上；
返回值：返回符合测试条件的第一个数组元素索引，如果没有符合条件的则返回 -1。
原理实现：

Array.prototype.LfindIndex = function(callback){
    for(var i = 0; i<this.length;i++){
        if(callback(this[i],i,this)){
            return i
        }
    }
}
var index=arr.LfindIndex((item,index,arr)=>{
    return item == 1
})
console.log(index);

5.map

map()：通过指定函数处理数组的每个元素，并返回处理后的数组。
注意： map() 不会对空数组进行检测。
注意： map() 不会改变原始数组。

语法：同上。
参数：同上。
返回值：返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
实现原理：

Array.prototype.Lmap = function(callback){
    var newArr = [];
    for(var i = 0; i<this.length; i++){
        newArr.push(callback(this[i],i,this))
    }
    return newArr;
}
var arr5 = arr.Lmap((item,index,arr)=>{
    return `<div>${item}</div>`;
})
console.log(arr5)

6.some

some()：检测数组元素中是否有元素符合指定条件。
注意： some() 不会对空数组进行检测。
注意： some() 不会改变原始数组。

语法：同上。
参数：同上。
返回值：布尔值。如果数组中有元素满足条件返回 true，否则返回 false。
实现原理：

Array.prototype.Lsome = function(callback){ 
    for(var i = 0; i<this.length; i++){
        if(callback(this[i],i,this)){
            return true;
        }
    }
        return false;
}
var flag = arr.Lsome((item,index,arr)=>{
    return item >2
})
console.log(flag);

7.every

every()：检测数值元素的每个元素是否都符合条件。
注意： every() 不会对空数组进行检测。
注意： every() 不会改变原始数组。

语法：同上。
参数：同上。
返回值：布尔值。如果所有元素都通过检测返回 true，否则返回 false。
实现原理：

Array.prototype.Levery = function(callback){
    for(var i = 0; i<this.length; i++){
        if(!callback(this[i],i,arr)){
            return false;
        }
    }
    return true;
}
var flag2 = arr.Levery((item,index,arr)=>{
    return item < 2
})
console.log(flag2);

8.reduce

reduce()：将数组元素计算为一个值（从左到右）

语法：array.reduce(function(total, currentValue, currentIndex, arr),initialValue)；
参数：
total：必需。初始值, 或者计算结束后的返回值。
currentValue：必需。当前元素；
currentIndex：可选。当前元素索引；
arr:可选。当前元素所属数组对象。
initialValue:可选。传递给函数的初始值。
返回值：返回计算结果。
原理实现：

Array.prototype.Lreduce = function(callback,initVal){
    for(var i = 0; i<this.length; i++){
        initVal = callback(initVal,this[i],i,arr);
    }
    return initVal;
}
var Add4 = arr.Lreduce((val,item,index,arr)=>{
    return val+item
},10)
console.log(Add4);

总结：一共总结了大概有八个方法，因为自己之前面试经历就有被问到自己实现forEach(),reduce()等。其实我在刚开始接触的时候因为也比较多，也容易记混等等，其实发现了一定规律后也挺好记住的，比如以下是我在学习的总结：
forEach()就类似与for循环，它与其他遍历方法最大的不同就是没有返回值。
filter()过滤，通过一定的条件筛选，最终返回符合条件的元素。
some()也可以理解为过滤，只不过它返回值为一个布尔值，当数组中有一项符合条件，那么就返回true;
every()就有点和some()不一样的东西了，它是指过滤后当所有的元素都符合过滤条件是才返回true。否则返回false。
map()映射，将数组中的所有元素一一映射再加工，返回出去为利用原数组加工后的数组。
find()根据条件去数组中查找是否有所匹配的元素，有的话将该元素返回出来，没有则返回undefind。
findIndex()与find()类似，一个是返回整个元素，一个是返回该元素在数组中的索引。
reduce()可以理解为缩减，缩减什么呢？缩减的是数组的项，缩减到哪里了呢？如果有初始值传入，那么，数组的各项都累加到初始值上边了，如果没有初始值传入，数组的所有项都累加到数组的第一项了。

有需要的同学学习的时候可以在菜鸟教程中查阅文档，再然后动手可以将我上面写的代码敲一遍，当然我上面写的也很不完善，但是大体逻辑功能没问题，有问题可以在评论区提出一起交流学习。