web前端

各种数组遍历的方法

for语句

var arr = [1,2,4,6]
for(var i = 0, len = arr.length; i < len; i++){
    console.log(arr[i])
}

forEach 语句

forEach方法是一种数组方法，对数组的每个元素执行一个callback函数。

var arr = [1,5,8,9]
arr.forEach(function(item) {
    console.log(item);
})

for-in 语句

主要用来遍历对象。

var obj = {
    name: 'test',
    color: 'red',
    day: 'sunday',
    number: 5
}
for (var key in obj) {
    console.log(obj[key])
}
//test red sunday 5

for-of 语句 (ES 6)

for-of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。只要是一个iterable的对象,就可以通过for-of来迭代.

var arr = [{name:'bb'},5,'test']
for (item of arr) {
    console.log(item)
}

for-of 和 for-in 的区别

for-in 语句以原始插入顺序迭代对象的可枚举属性。for-in会把继承链的对象属性都会遍历一遍,所以会更花时间.

for-of 语句只遍历可迭代对象的数据。

map 方法 (不改变原数组)

map 方法会给原数组中的每个元素都按顺序调用一次  callback 函数。callback 每次执行后的返回值（包括 undefined）组合起来形成一个新数组。 callback 函数只会在有值的索引上被调用；那些从来没被赋过值或者使用 delete 删除的索引则不会被调用。让数组通过某种计算产生一个新数组,影射成一个新的数组。

var arr = [1,2,3]
var firearr = arr.map(current => current * 5)

reduce 方法

让数组中的前项和后项做某种计算,并累计最终值。

var wallets = [4,7.8,3]
var totalMoney = wallets.reduce( function (countedMoney, wallet) {
    return countedMoney + wallet.money;
}, 0)

filter 方法 (不改变原数组)

filter 为数组中的每个元素调用一次 callback 函数，并利用所有使得 callback 返回 true 或 等价于 true 的值 的元素创建一个新数组。

var arr = [2,3,4,5,6]
var morearr = arr.filter(function (number) {
    return number > 3
})

every 方法

every方法为数组中的每个元素执行一次 callback 函数，直到它找到一个使 callback 返回 false（表示可转换为布尔值 false 的值）的元素。

var arr = [1,2,3,4,5]
var result = arr.every(function (item, index) {
    return item > 0
})

some 方法

some为数组中的每一个元素执行一次 callback 函数，直到找到一个使得 callback 返回一个“真值”（即可转换为布尔值 true 的值）。

var arr = [1,2,3,4,5]
var result = arr.some(function (item,index) {
    return item > 3
})

对比遍历速度

可以看到 for循环的速度是最快的,是最老的循环,也是优化得最好的,其次是for-of这个是es6才新增的循环非常好用,最慢是for-in我们可以作一下速度排序。

for > for-of > forEach > filter > map > for-in

附：一张图展示JavaScript数组方法