JS 数组循环遍历方法的对比

以下介绍比较简单,最好把代码复制到控制台敲一遍

原生for

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

forEach 语句

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

for-in 语句

一般会使用for-in来遍历对象的属性的,不过属性需要 enumerable,才能被读取到.
(关于enumerable,参见我的另一篇博客defineproperty)

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

for-of 语句 (ES 6)

for-of语句在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环

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

map 方法 (不改变原数组)

map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数,callback 每次执行后的返回值（包括 undefined）组合起来形成一个新数组。

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 方法 (不改变原数组)

通过 callback 测试的元素会被跳过，不会被包含在新数组中。筛选出过滤出数组中符合条件的项,组成新数组.

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

every 方法

当且仅当数组每一项都满足callback里的条件时该方法才返回true

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

some 方法

数组任意一项满足callback里的条件时该方法都返回true

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

性能排序

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