数组遍历的方法

1. forEach

• 语法: 数组.forEach(function (item, index, origin) {})
• item: 数组的每一项 的值
• index: 数组的每一项 对应的下标
• origin: 原始数组 (了解即可, 一般没人用)
• 作用: 遍历数组
• 返回值: 该方法永远没有返回值 (undefined)

  var arr = [100, 200, 300, 400, 500, 600]
        console.log('原始数组: ', arr)
        arr.forEach(function (item, index, origin) {
            console.log(item, index)
            console.log(origin)
        })
       

2.map

• 语法: 数组.map(function (item, index, origin) {}) 三个参数的意义与 forEach 相同
• 作用: 映射数组
• 返回值: 返回一个和原数组长度相同的数组, 但是内部数据可以经过我们的映射加工
• 映射加工: 就是在函数内 以 return 的形式书写

var arr = [100, 200, 300, 400, 500, 600]
 console.log('原始数组: ', arr)
 var newArr = arr.map(function (item, index, origin) {
            return item * 2
 })
console.log('映射出来的数组: ', newArr)

3.filter

• 语法: 数组.filter(function (item, index, origin) {}) 三个参数的意义与 forEach 相同
• 作用: 过滤数组
• 返回值: 返回一个新数组, 内部存储的是原始数组过滤出来的部分内容
• 过滤条件: 过滤条件以 return 的形式书写

 var arr = [100, 200, 300, 400, 500, 600]
        console.log('原始数组: ', arr)
   var newArr = arr.filter(function (item, index, origin) {
            return item > 350   // 过滤数组的内容, 只留下 item 大于 350 的成员
        })
        console.log(newArr)

4.find

• 语法: 数组.find(function (item, index, origin) {}) 三个参数的意义 与 forEach 相同
• 作用: 在数组内查找满足条件的第一项
• 返回值: 找到的数据, 如果没找到返回的是 undefined
• 查找条件以 return 的形式书写

 var arr = [100, 200, 300, 400, 500, 600]
        console.log('原始数组: ', arr)
 var newArr1 = arr.find(function (item, index, origin) {
            return item > 3500   // 在数组中查找第一个符合条件的成员
        })
        console.log(newArr1)//undefined

5.findIndex

• 语法: 数组.findIndex(function (item, index, origin) {}) 三个参数的意义 与 forEach 相同
• 作用: 在数组内查找满足条件的第一项 的下标
• 返回值: 找到的数据 的下标, 如果没找到返回的是 -1
• 查找条件以 return 的形式书写

  var newArr2 = arr.findIndex(function (item, index, origin) {
            return item > 3500
        })
        console.log(newArr2)//-1

6.some

• 语法: 数组.some(function (item, index, origin) {}) 三个参数的意义 与 forEach 相同
• 作用: 判断数组内是否有一个满足条件
• 返回值: 一个布尔值 true/false
• 判断条件以 return 的形式书写

  var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]
        console.log('原始数组: ', arr)
        var bo1 = arr.some(function (item, index, origin) {
            // return item % 2 === 0   // 判断数组内是否有  一个  满足条件的 结果:true
            return item > 500   // 判断数组内是否有 一个 满足条件的
        })
        console.log(bo1)    // false

7.every

• 语法: 数组.every(function (item, index, origin) {}) 三个参数的意义 与 forEach 相同
• 作用: 判断数组内是否全都满足条件
• 返回值: 一个布尔值 true/false
• 判断条件以 return 的形式书写

  var bo2 = arr.every(function (item, index, origin) {
            // return item % 2 === 0   // 判断数组内 是否  全都 满足条件 结果:false
            return item > 0     // 判断数组内 是否  全都    满足条件
        })
        console.log(bo2)//true

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 = [1, 2, 3, 4]
        console.log('原始数组: ', arr)
        var str = arr.reduce(function (prev, item, index, origin) {
            return prev + item
        }, 0)
        console.log(str)    // 10

var arr = [1, 2, 3, 4]
        console.log('原始数组: ', arr)
 var str = arr.reduce(function (prev, item, index, origin) {
            return prev + item
        })
        console.log(str)    // 10

 var arr = [100, 200, 150, 300]
        var str = arr.reduce(function (prev, item, index, origin) {
            return prev + item
        })
        console.log(str)    // 750