1. 常见遍历方式

forEach

forEach() 方法用于调用数组的每个元素，并将元素传递给回调函数，注意的是他对于空数组是不会执行回调函数的。

语法

array.forEach(function(currentValue, index, arr), thisValue)

示例

let arr = [1, 2, 3, 4, 5, 6]; 
arr.forEach(function (item) {
   if (item % 3 === 0) {
       console.log(item); 
   }
});

// 结果 3， 6

for - i

for....i是最基础，最常见的遍历方法

语法

for (语句 1; 语句 2; 语句 3) {
     要执行的代码块
}

示例

for (i = 0; i < 5; i++) {
   console.log(i); 
}

// 结果 0 1 2 3 4

for - of

for - of 是ES6的语法，for - of 允许你遍历 Arrays（数组）, Strings（字符串）, Maps（映射）, Sets（集合）等可迭代的数据结构等，直接访问的是实际元素

语法

for (变量 of 迭代对象) { 
    执行的代码块
}

示例

const arr = [1, 2, 3, 4, 5, 6, 7]
for (let item of arr) {
    if (item === 7) {
        break
    }

    console.log(item);
}

// 结果 1 2 3 4 5 6

for - in

for - in是ES5标准，遍历的是key，可遍历对象、数组或字符串的key

语法

for (变量 in 迭代对象) {
     执行的代码块
}

示例

let person = {
   fname:"John", 
   lname:"Doe", 
   age:25
}; 

for (item in person) {
 console.log(person[item]);
}

// 结果 John Doe 25

上面说了四种常见的JavaScript遍历方式，都是遍历他们有什么区别呢？

for - of 适合数组遍历，可能效率稍微差一些
forEach 无法跳出循环；for 和 for - of 可以使用 break 或者 continue 跳过或中断
for - of 直接访问的是实际元素。for 遍历数组索引，forEach 回调函数参数更丰富，元素、索引、原数组都可以获取
for - of 与 for 如果数组中存在空元素，同样会执行
优先使用 for - of 和 forEach

下面来看一些不常用的遍历方式

2. filter & map

filter
- filter() 方法创建一个新数组，新数组中的元素是通过检查指定数组中符合条件的所有元素，不会对空数组进行检测，不会改变原始数组。filter() 和 map() 都是接收一个函数，和map()不同的是，filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素
- 语法
```
let newArray = arr.filter(callback, thisValue)
```
- 示例
```
const arr = [
    {id: 1},
    {id: 2},
    {id: 3}
]

const newArr = arr.filter(item => {
    return item.id === 2
})
console.log(newArr) 

// 结果 {id: 2}
```

map

map() 方法使用为每个数组元素调用函数的结果创建新数组，方法按顺序为数组中的每个元素调用一次提供的函数。对没有值的数组元素不执行函数，不会改变原始数组。

语法

    let newMap = array.map(callback, thisValue)

示例

const arr = [
    {id: 1, name: '小米'},
    {id: 2, name: 'oppo'},
    {id: 3, name: '华为'}
]
const newMap1 = arr.map(item => {
    return item.id * 3
})
console.log(newMap1)
// 结果 [ 3, 6, 9 ]

const newMap2 = arr.map(item => {
    return item.id + '-' + item.name
})
console.log(newMap2)

// 结果 [ '1-小米', '2-oppo', '3-华为' ]

filter 和 map 异同点？

filter 会将符合回调函数条件的元素组成一个新数组，数组长度与原数组可能不同，filter 生成的新数组元素不可自定义，与对应原数组元素一致
二者都是生成一个新数组，都不会改变原数组（不包括遍历对象数组是，在回调函数中操作元素对象），二者都会跳过空元素
map 会将回调函数的返回值组成一个新数组，数组长度与原数组一致，map 生成的新数组元素是可自定义

你不知道的JS遍历 - 1

1. 常见遍历方式

2. filter & map