Chipmunk & Panda

-- 鼠熊部落格

All work and no play makes Jack a dull boy.

JavaScript 遍历数组方法总结

  前端  

for、.forEach()、for-in 和 for-of。

问题确立

1
2
3
4
5
6
const arr1 = [1, 2, 3, 4, 5]

const arr2 = [1, , 3, , 5]

const arr3 = [1, 2, 3, 4, 5]
arr3.code = 9527

上述三个数组分别是普通数组、含空元素数组和含非数组元素属性数组。

for

for 循环是最基本的方式。

1
2
3
4
5
6
7
8
9
10
11
for (let i = 0; i < arr1.length; i++) {
  console.log(arr1[i]) // 1, 2, 3, 4, 5
}

for (let i = 0; i < arr2.length; i++) {
  console.log(arr2[i]) // 1, undefined, 3, undefined, 5
}

for (let i = 0; i < arr3.length; i++) {
  console.log(arr3[i]) // 1, 2, 3, 4, 5
}

不会忽略空元素，会忽略非数组元素。

.forEach()

数组方法。

1
2
3
4
5
6
7
8
9
10
11
arr1.forEach((v, i) => {
  console.log(v) // 1, 2, 3, 4, 5
})

arr2.forEach((v, i) => {
  console.log(v) // 1, 3, 5
})

arr3.forEach((v, i) => {
  console.log(v) // 1, 2, 3, 4, 5
})

会忽略空元素，会忽略非数组元素

for-in

for-in 方法遍历非符号键属性。

1
2
3
4
5
6
7
8
9
10
11
for (let i in arr1) {
  console.log(arr1[i]) // 1, 2, 3, 4, 5
}

for (let i in arr2) {
  console.log(arr2[i]) // 1, 3, 5
}

for (let i in arr3) {
  console.log(arr3[i]) // 1, 2, 3, 4, 5, 9527
}

会忽略空元素，不会忽略非数组元素。

for-of

for-of 遍历对象元素值。

1
2
3
4
5
6
7
8
9
10
11
for (let v of arr1) {
  console.log(v) // 1, 2, 3, 4, 5
}

for (let v of arr2) {
  console.log(v) // 1, undefined, 3, undefined, 5
}

for (let v of arr3) {
  console.log(v) // 1, 2, 3, 4, 5
}

不会忽略空元素，会忽略非数组元素。

此外，可以借助 .entries() 方法来访问数组索引。

1
2
3
for (let [i, v] of arr1.entries()) {
  console.log(i) // 0, 1, 2, 3, 4
}

总结

方法 忽略空元素 忽略非数组元素
for 否 是
.forEach() 是 是
for-in 是 否
for-of 否 是

一般来说，在遍历数组方面，for-of 方法是最为推荐的，比较 elegant；for-in 不推荐。