46、数组遍历的常用方法
①. forEach
* 语法：数组.forEach(function(item, index, origin) {})
* * item:数组的每一项
* * index:数组的每一项 对应的下标
* * origin:原始数组 (了解即可，一般没人使用)
* 作用：遍历数组
* 返回值：该方法永远没有返回值(undefined)
```js
var arr = [100, 200, 300, 400, 500, 600]
console.log('原始的数组',arr)
arr.forEach(function (item, index, origin) {
console.log(item, index)
console.log(origin)
})
```
②.map
* 语法：数组.map(function (item, index, origin) {}) 三个参数的意义与forEach 相同
* 作用：映射数组
* 返回值：返回一个和原数组长度相同的数组，但是内部数据可以经过我们的映射加工
* 映射加工：就是在函数内 以return的形式书写
```js
var arr = [100, 200, 300, 400, 500, 600]
console.log('原始的数组',arr)
var newArr = arr.map(function (item, index, origin) {
// console.log(item, index, origin)
return item * 2
})
var newArr = arr.map(function (item) {
return item * 2
})
console.log('映射出来的数组:' ,newArr)
```
有一道面试题：数组常用的遍历方法中，有一个forEach和一个map,这两个方法有什么区别?
* 1.forEach的作用是用来遍历数组，而map的作用是用来映射数组
* 2.forEach 没有返回值，而 map 是可以有返回值的
!③.filter
* 语法：数组.filter(function (item, index, origin) {})
* 作用：过滤数组
* 返回值：返回一个新数组，内部存储的是原始数组过滤出来的部分内容
* 过滤条件：过滤条件以return 的形式书写
```js
var arr = [100, 200, 300, 400, 500, 600]
console.log('原始的数组',arr)
var newArr = arr.filter(function (item, index, origin) {
return item > 350
})
console.log(newArr)
```
!④.find
* 语法：数组.find(function (item, index, origin) {})
* 作用：在数组内查找满足条件的第一项
* 返回值:找到的数据， 如果没找到返回的是undefined
* 查找条件以return的形式书写
```js
var arr = [100, 200, 300, 400, 500, 600]
console.log('原始的数组',arr)
var newArr = arr.find(function (item, index, origin) {
return item > 350 //在数组中查找第一个符合条件的成员
})
console.log(newArr) //400
var newArr = arr.find(function (item, index, origin) {
return item > 3500 //在数组中查找第一个符合条件的成员
})
console.log(newArr) //undefined
```
⑤.findIndex
* 语法：数组.findIndex(function (item, index, origin) {})
* 作用：在数组内查找满足条件的第一项的下标
* 返回值:找到的数据的下标，如果没找到返回的是-1
* 查找条件以return的形式书写
```js
var arr = [100, 200, 300, 400, 500, 600]
console.log('原始的数组',arr)
var newArr = arr.findIndex(function(item, index, origin) {
return item > 350
})
console.log(newArr)
var newArr = arr.findIndex(function(item, index, origin) {
return item > 3500
})
console.log(newArr)
```
⑥.some
* 语法：数组.some(function (item, index, origin) {})
* 作用：判断数组内是否有一个满足条件
* 返回值:一个布尔值 true/false
* 判断条件以return的形式书写
```js
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log('原始数组:', arr)
var bol = arr.some(function (item, index, origin) {
return item % 2 === 0 //判断数组内是否有一 个满足条 件的
})
console.log(bol) //true
var bol = arr.some(function (item, index, origin) {
return item > 500 //判断数组内是否有一 个满足条 件的
})
console.log(bol) //false
```
⑦.every
* 语法：数组.every(function (item, index, origin) {})
* 作用：判断数组内是否全部满足条件
* 返回值:一个布尔值 true/false
* 判断条件以return的形式书写
```js
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log('原始数组:', arr)
var bol = arr.every(function (item, index, origin) {
return item % 2 === 0 //判断数组内是否全都 满足条件
})
console.log(bol) //false
var bol = arr.every(function (item, index, origin) {
return item > 0 //判断数组内是否全都 满足条件
})
console.log(bol) //true
```
!⑧.reduce
* 语法：数组.reduce(function (prev, item, index, origin) {}, init)
* * prev: 表示初始值或者上一次的运算结果
* * item:数组的每一项 的值
* * index:表示数组的每一项 对应的下标(索引)
* * origin:原始数组
* 作用：用来实现叠加效果
* 返回值:最终叠加效果
* 注意：
* + 叠加条件以return的形式书写
* + prev 第一次的值 如果你传递了init, 就是init 的值，如果没有传递init, 那么就是数组[0]的值
* + 如果传递了init, 循环执行 数组.length 次,如果没有传递init,循环执行 数组.length - 1 次
```js
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log('原始数组:', arr)
var str = arr.reduce(function (prev, item, index, origin) {
return prev + item
}, 0)
console.log(str) //45
```
/**
* 在第 1 轮执行的时候
* prev === 0 ((因为我使用reduce 方法的时候传递了第二个参数，默认给的值为0)
* item === 1 它的值就是数组第一项的值
* 在第一轮代码执行的时候， 运行了return prev + item, 这个结果 会传递给第二轮循环开始的时候的prev
*
* 在第 2 轮执行的时候
* prev === 1 (因为上一轮执行了prev + item 得到的值为1)
* item === 2 因为是第2轮循环， 所以他的值就是 数组第2个元素的值
* 在第2轮代码执行的时候， 运行了return prev + item, 这个结果 会传递给第3轮循环开始的时候的prev
*
* 在第 3 轮执行的时候
* prev === 3 (因为上一轮执行了prev + item 得到的值为3)
* item === 3 因为是第3轮循环， 所以他的值就是 数组第3个元素的值
* 在第3轮代码执行的时候， 运行了return prev + item, 这个结果 会传递给第4轮循环开始的时候的prev
*
* 在第 4 轮执行的时候
* prev === 6 (因为上一轮执行了prev + item 得到的值为6)
* item === 4 因为是第轮循环， 所以他的值就是 数组第个元素的值
* 在第4轮代码执行的时候， 运行了return prev + item, 这个结果 会传递给第5轮循环开始的时候的prev
* ...
*
* 因为后续数组没有元素了，所以循环到此结束，然后将 最后一轮 prev 的值return 出去，外部可以使用一个变量 去接收
*
* */
```js
var str = arr.reduce(function (prev, item, index, origin) {
return prev + item
}, '')
console.log(str) //字符串123456789
```
/**
* 在第 1 轮执行的时候
* prev === '' ((因为我使用reduce 方法的时候传递了第二个参数，默认给的值为0)
* item === 1 它的值就是数组第一项的值
* 在第一轮代码执行的时候， 运行了return prev + item, 这个结果 会传递给第二轮循环开始的时候的prev
*
* 在第 2 轮执行的时候
* prev === '1' (因为上一轮执行了prev + item 得到的值为1)
* item === 2 因为是第2轮循环， 所以他的值就是 数组第2个元素的值
* 在第2轮代码执行的时候， 运行了return prev + item, 这个结果 会传递给第3轮循环开始的时候的prev
*
* 在第 3 轮执行的时候
* prev === '12' (因为上一轮执行了prev + item 得到的值为3)
* item === 3 因为是第3轮循环， 所以他的值就是 数组第3个元素的值
* 在第3轮代码执行的时候， 运行了return prev + item, 这个结果 会传递给第4轮循环开始的时候的prev
*
* 在第 4 轮执行的时候
* prev === '123' (因为上一轮执行了prev + item 得到的值为6)
* item === 4 因为是第轮循环， 所以他的值就是 数组第个元素的值
* 在第4轮代码执行的时候， 运行了return prev + item, 这个结果 会传递给第5轮循环开始的时候的prev
* ...
*
* 因为后续数组没有元素了，所以循环到此结束，然后将 最后一轮 prev 的值return 出去，外部可以使用一个变量 去接收
*
* */
```js
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log('原始数组:', arr)
var str = arr.reduce(function (prev, item, index, origin) {
return prev + item
})
console.log(str) //45
```
/**
* 第1轮
* prev === 1 (因为没传递init,所以prev第一次的值是数组下标0位置上的值)
* item === 2 (因为没传递init,所以prev是下标[0] 的值，然后item就拿到了下标[1] 的值)
* 第1轮运行代码return prev + item 这个结果会传递给下轮循环开始时的prev
*
* 第2轮
* prev === 3 (因为上一轮执行了prev + item 得到的值3)
* item === 3 (因为上一轮item的值是[1]，所以本轮的值是[2])
* 第1轮运行代码return prev + item 这个结果会传递给下轮循环开始时的prev
*
* 第3轮
* prev === 6 (因为上一轮执行了prev + item 得到的值3)
* item === 4 (因为上一轮item的值是[2]，所以本轮的值是[3])
* 第1轮运行代码return prev + item 这个结果会传递给下轮循环开始时的prev
* ...
* 因为后续数组没有元素了，所以循环到此结束，然后将最后一轮prev的值return出去，外部可以使用一个变量去接收
* */
47、课后练习
```js
// 1.计算数组的和 var arr = [1, 2, 3, 4, 5]
var arr = [1, 2, 3, 4, 5]
// 方法1 reduce 用来实现叠加效果
var sum = arr.reduce(function (prev, item) {
return prev + item
},0)
console.log(sum)
// 方法2 for循环
function fn(arr){
var sum = 0
for(var i = 0
sum += arr[i]
}
return sum
}
console.log(sum)
// 方法3 forEach 遍历数组
var sum = 0
arr.forEach(function (item) {
sum += item
})
console.log(sum)
// 方法4 map 映射数组，一般不会使用
var sum = 0
arr.map(function (item) {
return sum += item
})
console.log(sum)
```
```js
// 3. 将数组的值 放大 10 倍 并返回一个新数组
var newArr = arr.map(function (item, index, origin) {
return item * 10
})
console.log('放大十倍的数组', newArr)
// forEach 有点麻烦
var newArr = []
arr.forEach(function (item, index, origin) {
newArr[newArr.length] = item * 10
})
console.log('放大十倍的数组', newArr)
```
```js
// 4. 过滤数组, 让数组内的值只有偶数 var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] -> 新数组: [2, 4, 6, 8, 10]
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
var newArr = arr.filter(function (item, index, origin) {
return item % 2 === 0
})
console.log(newArr)
var newArr = []
var newArr = arr.forEach(function (item, index, origin) {
if(item % 2 === 0) {
newArr.push(item)
}
})
console.log(newArr)
```
