js 数组遍历的几种方式_js 的of循环有序数吗

js数组，表示的是有序的数据集合，是一种特殊的对象，对象是无序的数据结合。

1. for循环
2. for in
3. for each
4. for of
5. es6中数组实例的keys().values()、entries()
6. map、everyvery等函数

1.for循环
2.for in
3.for each
4.for of
5.es6中数组实例的keys().values()、entries()

1.for 循环

for循环访问的是数组的下标。

const arr = ['a','b','c','d',124]
for (let i=0; i<arr.length;i++) {
  console.log(i,arr[i])  
}
//0 'a'
1 'b'
2 'c'
3 'd'
4 124
1
2
3
4
5
6
7
8
9

2.for in

for循环访问的是数组的下标。

const arr = ['a','b','c','d',124]
for (let i in arr) {
  console.log(i,arr[i])
}
//0 a
  1 b
  2 c
  3 d
  4 124
1
2
3
4
5
6
7
8
9

3.for each

const arr = ['a','b','c','d',124]
arr.forEach( (element,index,array) => {
  console.log(element,index,array)
})
//
a 0 [ 'a', 'b', 'c', 'd', 124 ]
b 1 [ 'a', 'b', 'c', 'd', 124 ]
c 2 [ 'a', 'b', 'c', 'd', 124 ]
d 3 [ 'a', 'b', 'c', 'd', 124 ]
124 4 [ 'a', 'b', 'c', 'd', 124 ]
1
2
3
4
5
6
7
8
9
10

forEach()参数是一个回调函数，回调函数有三个参数，第一个必须，表示数组的value，第二、三可选，分别表示数组的下标（key）和整个数组。

4.for of

const arr = ['a','b','c','d',124]
for (let i of arr) {
  console.log(i)
}
//
a
b
c
d
124
1
2
3
4
5
6
7
8
9
10

for of 循环访问的是数组的值（value）。

5.es6中数组实例的keys().values()、entries()

这些都是搭配for …of 使用的

const arr = ['a','b','c','d',124]
for (let i of arr.keys()) {
  console.log(i)
}
//
0
1
2
3
4
1
2
3
4
5
6
7
8
9
10

const arr = ['a','b','c','d',124]
for (let i of arr.values()) {
  console.log(i)
}
//
a
b
c
d
124
1
2
3
4
5
6
7
8
9
10

const arr = ['a','b','c','d',124]
for (let i of arr.entries()) {
  console.log(i)
}
//
[ 0, 'a' ]
[ 1, 'b' ]
[ 2, 'c' ]
[ 3, 'd' ]
[ 4, 124 ]
1
2
3
4
5
6
7
8
9
10

key()、values()、entries()，分别遍历key、value和整个数组。

总结

1. for、for …in遍历的是数组的下标
2. for…of 遍历的是数组的值
3. forEach()下标、值、数组都可以通过传参获取
4. for…of 搭配es6数组的实例方法可实现forEach()的效果。
5. for…in常用在对象上，for…of常用在数组上，关于对象的遍历可以看 专栏：
   es6标准入门《07 对象的扩展》