2019-10-10

JavaScript数组遍历方法总结

1. 常见方法
2. Other 循环方法

常见方法

for 语句

代码:

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

这是标准for循环的写法也是最传统的语句，字符串也支持，定义一个变量i作为索引，以跟踪访问的位置，len是数组的长度，条件就是i不能超过len。

forEach 语句

forEach方法对数组的每个元素执行一次提供的CALLBACK函数,forEach是一个数组方法，可以用来把一个函数套用在一个数组中的每个元素上，forEach为每个数组元素执行callback函数只可用于数组.遍历一个数组让数组每个元素做一件事情.那些已删除（使用delete方法等情况）或者未初始化的项将被跳过（但不包括那些值为 undefined 的项）（例如在稀疏数组上)；不像map() 或者reduce() ，它总是返回 undefined值，并且不可链式调用。典型用例是在一个链的最后执行副作用。如果想要终止循环，只能抛异常
代码:

const array1 = ['a', 'b', 'c'];

array1.forEach(
    (element,index) => { // index是数组下标
        console.log(element,index)
    }
);

for-in 语句

一般会使用for-in来遍历对象的属性的,不过属性需要 enumerable,才能被读取到.
for-in 循环只遍历可枚举属性。一般常用来遍历对象，包括非整数类型的名称和继承的那些原型链上面的属性也能被遍历。像 Array和 Object使用内置构造函数所创建的对象都会继承自Object.prototype和String.prototype的不可枚举属性就不能遍历了.
代码:

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 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。只要是一个iterable的对象,就可以通过for-of来迭代.
代码:

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

for-of 获得数组下标的方法

for (let [index,item] of radioList.entries()) {
	console.log(item);
	console.log(index);
}

for-of 和 for-in 的区别

推荐在循环对象属性的时候，使用for...in,在遍历数组的时候的时候使用for...of。
for...in循环出的是key，for...of循环出的是value
注意，for...of是ES6新引入的特性。修复了ES5引入的for...in的不足
for...of不能循环普通的对象，需要通过和Object.keys()搭配使用

假设我们要遍历一个数组的valuelet aArray = ['a',123,{a:'1',b:'2'}]

使用for...in循环：

1
2
3

for(let index in aArray){
    console.log(`${aArray[index]}`);
}

使用for...of循环：

1
2
3

for(var value of aArray){
    console.log(value);
}

咋一看好像好像只是写法不一样而已，那为什么说for...of修复了for...in的缺陷和不足。
假设我们往数组添加一个属性name:
aArray.name = 'demo',再分别查看上面写的两个循环：

for(let index in aArray){
    console.log(`${aArray[index]}`); //Notice!!aArray.name也被循环出来了
}
for(var value of aArray){
    console.log(value);
}

所以说，作用于数组的for-in循环除了遍历数组元素以外,还会遍历自定义属性。

for...of循环不会循环对象的key，只会循环出数组的value，因此for...of不能循环遍历普通对象,对普通对象的属性遍历推荐使用for...in

Other 循环方法

map 方法 (不改变原数组)

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

1 2	var arr = [1,2,3] var firearr = arr.map((current,index) => 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 的值的元素创建一个新数组。callback 只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。筛选出过滤出数组中符合条件的项，组成新数组。
代码:

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

every 方法（数组中的每一项均符合条件则返回true）

every 方法为数组中的每个元素执行一次 callback 函数，直到它找到一个使 callback 返回 false（表示可转换为布尔值 false 的值）的元素。如果发现了一个这样的元素，every 方法将会立即返回 false。否则，callback 为每一个元素返回 true，every 就会返回 true。检测数组中的每一项是否符合条件,如果每一项都符合条件,就会返回true,否则返回false,有点像遍历数组且操作callback。只会为那些已经被赋值的索引调用。不会为那些被删除或从来没被赋值的索引调用。
代码:

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

some 方法（数组中的任意一项符合条件则返回true）

some 为数组中的每一个元素执行一次 callback 函数，直到找到一个使得 callback 返回一个“真值”（即可转换为布尔值 true 的值）。如果找到了这样一个值，some 将会立即返回 true。否则，some 返回 false。callback 只会在那些”有值“的索引上被调用，不会在那些被删除或从来未被赋值的索引上调用。检查数组中是否有某些项符号条件,如果有一项就返回true,否则返回false,有点像遍历数组或者操作.
代码:

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

转自：JavaScript 数组遍历方法的对比