数组遍历的常用方法
* 1. forEach
* * 语法: 数组.forEach(function (item, index, origin) {})
* * item: 数组的每一项 的值
* * index: 数组的每一项 对应的下标
* * origin: 原始数组 (了解即可, 一般没人用)
* * 作用: 遍历数组
* * 返回值: 该方法永远没有返回值 (undefined)
*
* 2. map
* * 语法: 数组.map(function (item, index, origin) {}) 三个参数的意义与 forEach 相同
* * 作用: 映射数组
* * 返回值: 返回一个和原数组长度相同的数组, 但是内部数据可以经过我们的映射加工
* * 映射加工: 就是在函数内 以 return 的形式书写
*
* 有一道面试题: 数组常用的遍历方法中, 有一个forEach 和 一个 map, 这两个方法有什么区别?
* 1. forEach 的作用是用来遍历数组, 而 map 的作用是用来映射数组
* 2. forEach 没有返回值, 而 map 是可以有返回值的
*
* 3. filter
* * 语法: 数组.filter(function (item, index, origin) {}) 三个参数的意义与 forEach 相同
* * 作用: 过滤数组
* * 返回值: 返回一个新数组, 内部存储的是原始数组过滤出来的部分内容
* * 过滤条件: 过滤条件以 return 的形式书写
*
* 4. find
* * 语法: 数组.find(function (item, index, origin) {}) 三个参数的意义 与 forEach 相同
* * 作用: 在数组内查找满足条件的第一项
* * 返回值: 找到的数据, 如果没找到返回的是 undefined
* * 查找条件以 return 的形式书写
*
* 5. findIndex
* * 语法: 数组.findIndex(function (item, index, origin) {}) 三个参数的意义 与 forEach 相同
* * 作用: 在数组内查找满足条件的第一项 的下标
* * 返回值: 找到的数据 的下标, 如果没找到返回的是 -1
* * 查找条件以 return 的形式书写
*
* 6. some
* * 语法: 数组.some(function (item, index, origin) {}) 三个参数的意义 与 forEach 相同
* * 作用: 判断数组内是否有一个满足条件
* * 返回值: 一个布尔值 true/false
* * 判断条件以 return 的形式书写
*
* 7. every
* * 语法: 数组.every(function (item, index, origin) {}) 三个参数的意义 与 forEach 相同
* * 作用: 判断数组内是否全都满足条件
* * 返回值: 一个布尔值 true/false
* * 判断条件以 return 的形式书写
*
* 8. reduce
* * 语法: 数组.reduce(function (prev, item, index, origin) {}, init)
* * prev: 表示初始值或者上一次的运算结果
* * item: 表示数组的每一项 的值
* * index: 表示数组的每一项 的下标(索引)
* * origin: 原始数组
* * 作用: 用来实现叠加效果
* * 返回值: 最终叠加的结果
* * 注意:
* + 叠加条件以 return 的形式书写
* + prev 第一次的值, 如果你传递了 init, 就是 init 的值, 如果没有传递 init, 那么就是 数组[0] 的值
* + 如果传递了 init, 循环执行 数组.length 次, 如果没有传递 init, 循环执行 数组.length - 1 次
实例
var arr = [100, 200, 300, 400, 500, 600]
console.log('原始数组: ', arr)
-
forEach
arr.forEach(function (item, index, origin) { console.log(item, index) console.log(origin) }) -
map
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) -
filter
var newArr = arr.filter(function (item, index, origin) { return item > 350 // 过滤数组的内容, 只留下 item 大于 350 的成员 }) console.log(newArr) -
find
var newArr1 = arr.find(function (item, index, origin) { return item > 3500 // 在数组中查找第一个符合条件的成员 }) console.log(newArr1) -
findIndex
var newArr2 = arr.findIndex(function (item, index, origin) { return item > 3500 }) console.log(newArr2)
实例
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log('原始数组: ', arr)
6. some
var bo1 = arr.some(function (item, index, origin) {
// return item % 2 === 0 // 判断数组内是否有 一个 满足条件的
return item > 500 // 判断数组内是否有 一个 满足条件的
})
console.log(bo1) // true / false
7. every
var bo2 = arr.every(function (item, index, origin) {
// return item % 2 === 0 // 判断数组内 是否 全都 满足条件
return item > 0 // 判断数组内 是否 全都 满足条件
})
console.log(bo2)
var arr = [1, 2, 3, 4]
console.log('原始数组: ', arr)
8. reduce
var str = arr.reduce(function (prev, item, index, origin) {
return prev + item
}, 0)
console.log(str) // 10
* 在 第 1 轮执行的时候
* prev === 0 (因为我使用 reduce 方法的时候传递了 第二个参数, 默认给的值为 0)
* item === 1 他的值就是数组第一项的值
* 在第一轮代码执行的时候, 运行了 return prev + item, 这个结果 会传递给 第二轮循环开始的时候的 prev
*
* 在 第 2 轮执行的时候
* prev === 1 (因为上一轮执行了 prev + item 的到的值是 1)
* item === 2 因为是第二轮循环, 所以他的值就是数组第二个元素的值
* 在第二轮代码执行的时候, 运行了 return prev + item, 这个结果会传递给 第三轮循环开始的时候的 prev
*
* 在 第 3 轮执行的时候
* prev === 3 (因为上一轮执行了 prev + item 得到的值是 3)
* item === 3 因为是第三轮循环, 所以他的值就是数组第三个元素的值
* 在第三轮代码执行的时候, 运行了 return prev + item, 这个结果会传递给 第四轮循环开始的时候的 prev
*
* 在 第 4 轮执行的时候
* prev === 6 (因为上一轮执行了 prev + item 得到的值是 6)
* item === 4 因为是第四轮循环, 所以他的值就是数组第四个元素的值
* 在第四轮代码执行的时候, 运行了 return prev + item, 这个结果会传递给 第五轮循环开始的时候的 prev
*
* 因为后续数组没有元素了, 所以循环到此结束, 然后将 最后一轮 prev 的值 return 出去, 外部可以使用一个变量去接收
var str = arr.reduce(function (prev, item, index, origin) {
return prev + item
})
console.log(str) // 10
* 第 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])
* 第 2 轮 运行代码 return prev + item 这个结果会传递给 下一轮循环开始时的 prev
*
* 第 3 轮
* prev === 6 (因为上一轮执行了 prev + item 得到的值 6)
* item === 4 (因为上一轮item的值是[2], 所以本轮的值是 [3])
* 第 3 轮 运行代码 return prev + item 这个结果会传递给 下一轮循环开始是的 prev
*
* 因为后续数组没有元素了, 所以循环到此结束, 然后将最后一轮 prev 的值 return 出去, 外部可以使用一个变量去接收
var arr = [100, 200, 150, 300]
// 0 1 2 3
var str = arr.reduce(function (prev, item, index, origin) {
return prev + item
})
console.log(str) // 750
* 第 1 轮
* prev === 100 (因为没有传递 init, 所以 prev 第一次的值是数组 下标 0 的值)
* item === 200 (因为没有传递 init, 所以 prev 的值是 [0], 那么 item 的值就是 [1])
* 执行代码 return prev + item
*
* 第 2 轮
* prev === 300 (因为 上一轮执行了 prev + item 得到的值 300 )
* item === 150 (因为上一轮item的值是[1], 所以这一轮是[2])
* 执行代码 return prev + item
*
* 第 3 轮
* prev === 450 (因为上一轮执行了 prev + item 得到的值 450)
* item === 300 因为上一轮item的值是 [2], 所以这一轮是[3]
* 执行代码 return prev + item
*
* 后续数组没有元素了, 循环到此结束, 最终的 prev === 750, 然后将这个 750 return 出去
