JS数组遍历的6种方法

封面图 • 2023-05-20 • JavaScript

JS数组遍历的6种方法

####1. for 遍历数组
1.1 for 的普通遍历
```
var name = ['Peter','Stark','Jack'];
// for 循环
for(var i = 0; i < name.length; i++) {
  console.log(name[i]);
}
```
1.2 for 优化版遍历
```
var name = ['Peter','Stark','Jack'];
// 先缓存 name.length
for(var i = 0, len = name.length; i < len; i++) {
  console.log(name[i]);
}
```
####2、while 遍历数组
```
// while 循环
var i = 0;
while (i < name.length) {
  console.log(name[i]);
  i++;
}

//while 逆向遍历
var i = name.length;
while (i--) {
  console.log(name[i]);
}
```

####3. for...in 方法
数组既可遍历对象，也可遍历数组。遍历数组时也会遍历非数字键名,所以不推荐 for..in 遍历数组

3.1 遍历数组
```
var a = [1, 2, 3];
for (var key in a) {
  console.log(a[key]);
}

```

3.2 遍历对象
```
const object = {
  name: 'Peter',
  age: 12,
  isHuman: true
};
for (let key in object) {
  console.log(key + '---' + object[key]);
}
```

####4. for...of 方法 (ES6)
```
var arr = ['a','b','c'];
for(let item of arr) {
  console.log(item);
}
```
####5. forEach() 方法
用来遍历数组中的每一项，不影响原数组，性能差

缺陷 你不能使用break语句中断循环，也不能使用return语句返回到外层函数。

5.1 遍历普通数组
```
var arr = [1,2,3,4];
arr.forEach = (function(item) {
  console.log(item);
})
```
5.2 forEach() 遍历对象类型数组
```
const info = [
  {id: 1000, name: 'zhangsan'},
  {id: 1001, name: 'lisi'},
  {id: 1002, name: 'wangwu'}
]
arr.forEach( function(item) {
  console.log(item.id + '---' + item.name);
})

```
####6. map() 方法
支持return，相当与原数组克隆了一份，把克隆的每项改变了，不影响原数组
```
var arr = [1,2,3,4];
arr.map( function(item) {
  return item;
})
```
当然有了 箭头函数 => 后更方便
```
var arr = ['a','b','c'];
var newArray = arr.map(x => x);
alert(newArray); // ['a','b''c']
map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果

var newArray = arr.map(function (item) {
  return [expression];
})
```
例如
```
var arr = [1,2,3,4];
var newArray = arr.map(
  x => x * x
)
alert(newArray); 
```