这是我参与「第四届青训营」笔记创作活动的第8天

话接上回，继续了解一下其他数组对象的遍历方法

一、For

普通的遍历方法

二、for...of

val取键值

①for...of —— 数组

②for...of —— 对象

问题：for...of无法直接遍历对象

解决：使用Object.keys（）获取自身的所有可遍历属性数组（不包括继承属性）

三、数组的遍历方法：

1、forEach

（修改item不会修改原数组array，修改arrs会修改原数组array）forEach的逻辑和for差不多，对每一项都执行了回调；但不支持continue和break；返回undefined

Continue的实现：用return

Break的实现：

①splice：用splice在需要break的地方进行元素去除，但splice会修改原数组，所以需要Array.from来创建一个和原数组一样的序列

②try...catch：在需要break的地方throw报错

2、map

返回一个新数组（不会改变原数组），该数组是每个元素经过回调处理后的新数组。

3、filter

返回一个新数组（不会改变原数组），该数组是原数组的一个子集，以回调函数的返回值作为逻辑判断，为true则自动将其添加到返回的新数组中。

4、Filter的实现

Array.prototype._filter = function(fn){
    //判断this和传入的fn类型
    if(Array.isArray(this) == false || this.length == 0 || typeof(fn) != 'function'){
        return new TypeError('出错了')
    }
    let newArr = []
    //遍历每个元素
    for(let i = 0; i< this.length; i++){
        //fn作为判断逻辑
        if(fn(this[i])){
            newArr.push(this[i])
        }
    }
    //返回新数组
    return newArr
}

解释：

如果调用_filter方法的不是数组，或者该数组长度为0，或者传入的回调函数类型不是函数，则返回出错了
Fn作为逻辑判断，fn(this[i])为true则进入if中，将该元素添加进新数组中
遍历结束后，返回符合逻辑判断的新数组

四、总结：

For：适合遍历数组

For...in：适合遍历数组或遍历对象的属性（只遍历自身属性则需要hasOwnProperty配合）

For...of：适合遍历数组，遍历对象需要配合Object.keys

遍历数组的方法：

forEach：每一项都传入了回调，逻辑和for差不多

Map：返回新数组（不改变原数组），元素是经过回调的新元素

Filter：返回新数组（不改变原数组），是原数组的子集

遍历数组对象（二）｜ 青训营笔记