JS-数组方法forEach

重要数组的方法有哪些

1. forEach：用于遍历数组，没有返回值，可以对遍历出的数组项进行后续操作
2. filter：用于遍历数组，且筛选出符合条件的数组项，可以对筛选出的数组项进行后续操作
3. every：需要在回调函数中使用return true/false来返回单圈的执行，当所有都true才返回最终的true，否则返回false
4. some：和every差不多的原理和使用，最终返回布尔值，只要有一次循环为true，则true
5. reduce：（后续添加）

本篇章主要对forEach进行解析，一个例子，一个手写myForEach

本篇章不对其他函数做笔记，手写方式大同小异，reduce有所区别，后续补充

forEach

一、使用说明

在目标数组arr遍历出数组的每一项currentValue，在回调函数中操作数组项等

格式：
目标数组.forEach(function(currentValue, index, arr) {

},thisValue)

参数：

currentValue：数组项

index：数组下标

arr：目标数组本身

thisValue：this指向的目标，不填则指向window
复制代码

二、例子

将arr数组的name用无序列表方式呈现到页面中

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>
复制代码

let arr = [
    {"id":1,"name":"zanshan","sex":"m"},
    {"id":2,"name":"lisi","sex":"w"},
    {"id":3,"name":"wangwu","sex":"m"},
]
arr.forEach(function(ele,index,taget) {
    //console.log(ele,index,taget,this)
    this[index].innerHTML = ele.name
},document.getElementsByTagName("li"))
复制代码

例子说明：
第二个参数的传入使得this的指向document.getElementsByTagName(“li”)，所以可以直接操作this来操作dom树，在li标签中添加名字。

三、手写MyForEach

先附代码

let arr = [
    {"id":1,"name":"zanshan","sex":"m"},
    {"id":2,"name":"lisi","sex":"w"},
    {"id":3,"name":"wangwu","sex":"m"},
]
//MyForEach内容
Array.prototype.MyForEach = function(fun){
    let _arr = this,length = _arr.length,pram2 = arguments[1]||window
    for(let i = 0;i<length;i++){
        fun.call(pram2,_arr[i],i,_arr)
    }
}
//测试MyForEach和forEach是否功能上一致
arr.MyForEach(function(ele,index,taget) {
    console.log(ele,index,taget,this)
    this[index].innerHTML = ele.name
},document.getElementsByTagName("li"))
复制代码

注意：
测试MyForEach使用箭头函数，第二个参数就失效了

手写原理

1. 需要将taget指代对象arr，所以在API实现内部将this传给回调函数fun的第三个参数（由于此处使用到了call，所以表现为第四个参数），通过_arr=this，后将_arr传递进fun
2. 通过_arr.length获取到循环的总次数
3. call改变了调用fun方法的this指向，如果不传递MyForEach的第二个参数，则默认是window在调用fun函数，在API使用时，打印this，this就是window；如果传递MyForEach的第二个参数，在API使用时，打印this，this就是MyForEach的第二个参数，通过操作this，来操作dom
4. 对上面的两个this进行说明，一个是指向arr的，一个是fun的调用者，两者有啥区别：前者的this环境是MyForEach函数刚进去，遵循谁调用则指向谁，因此测试MyForEach时，arr.MyForEach就象征着this指向了MyForEach；后者this环境是fun函数的。以上即使区别
复制代码