es6+ 数组语法规范（一）： 数组遍历方式、方法

Array在 ES6 中新增了很多实用的原生 API，方便开发者对 Array 的操控性更强，如 for…of、from、of、fill、find、findIndex等。

---

一、ES5 中数组遍历方式

let arr = [1, 2, 3, 2, 4]

1.1 for循环

for (let i = 0; i < arr.length; i++) {
   
    console.log(arr[i])
}

后来语法有所升级，到 ES5 遍历数组的 API 多了起来，其中有 forEach、every、filter等，同样的功能可以用 forEach 、 map 、 every 等方法来实现。

1.2 forEach() 没有返回值，只是针对每个元素调用func

arr.forEach(function(elem, index, array) {
   
    if (elem === 2) {
   
        continue
    }
    console.log(elem, index)
})

这个语法看起来要简洁很多，不需要通过索引去访问数组项，然而它的缺点也是很明显，不支持 break、continue 等。

[1, 2, 3, 4, 5].forEach(function(e) {
   
    if (e === 2) {
   
        return;
    } else {
   
        console.log(e)
    }
})

这段代码的"本意"是从第一个元素开始遍历，遇到数组项 2 之后就结束遍历，不然打印出所遍历过的数值项。可是，事实让你大跌眼镜，因为它的输出是 1, 3, 4, 5。

注意

forEach 的代码块中不能使用 break、continue，它会抛出异常。

1.3 map() 返回新的数组，每个元素为调用func的结果

let result = arr.map(function(value) {
   
    value += 1
    return value
})
console.log(arr, result)				// [1, 2, 3, 2, 4]  [2, 3, 4, 3, 5]

1.4 filter() 返回符合func条件的元素数组

let result = arr.filter(function(value) {
   
    return value == 2
})
console.log(arr, result)				// [1, 2, 3, 2, 4] [2,2]

1.5 some() 返回boolean，判断是否有元素符合func条件

let result = arr.some(function(value) {
   
    return value == 4
}