JS-数组方法-遍历方法

1. forEach 数组遍历方法

• 语法：数组.forEach(function(v, i, ar) {}, thisArg)
• 传入的第一个参数必须是一个函数：每个数组数据都会执行传入函数（循环执行）
  • 传入函数执行次数为数组长度
  • 每次函数执行中参数的含义
    • v 表示本次执行函数的数组数据
    • i 表示本次执行函数的数组数据对应的索引
    • ar 表示调用forEach方法的数组本身
• 传入的第二个参数（可传可不传）指的是将传入的第一个参数（函数）中的this指向更改为thisArg
• 作用：遍历数组数据
• 返回值：undefined（没有返回值）

var arr = ['a', 'b', 'c', 'd']

var r = arr.forEach(function(v, i, ar) {
    // 执行代码
    console.log(this) // { a: 1 }
}, { a: 1 })

console.log(r) // undefined

2. map 数组映射方法

• 语法：数组.map(function(v, i, ar) {})
• 传入的参数必须是一个函数：每个数组数据都会执行传入函数（循环执行）
  • 传入函数执行次数为数组长度
  • 每次函数执行中参数的含义
    • v 表示本次执行函数的数组数据
    • i 表示本次执行函数的数组数据对应的索引
    • ar 表示调用map方法的数组本身
• 作用：映射数组数据
• 返回值：一个新数组，新数组数据是每次传入函数执行的返回值
  • 返回的新数组长度和原数组一致

var arr = [10, 20, 30, 40]

var resArr = arr.map(function(v, i, ar) {
    return v * 3
})

console.log(resArr) // [30, 60, 90, 120]

3. filter 数组过滤方法

• 语法：数组.filter(function(v, i, ar) {})
• 传入的参数必须是一个函数：每个数组数据都会执行传入函数（循环执行）
  • 传入函数执行次数为数组长度
  • 每次函数执行中参数的含义
    • v 表示本次执行函数的数组数据
    • i 表示本次执行函数的数组数据对应的索引
    • ar 表示调用filter方法的数组本身
• 作用：过滤数组数据
• 返回值：一个新数组
  • 每次传入函数执行的返回值转布尔为true则执行传入函数的原数组数据作为新数组数据

var arr = [10, 20, 30, 40]

var resArr = arr.filter(function(v, i, ar) {
    return v >= 30
})

console.log(resArr) // [30, 40]

4. some 数组判断方法

• 语法：数组.some(function(v, i, ar) {})
• 传入的参数必须是一个函数：逐个数组数据会执行传入函数
  • 每次函数执行中参数的含义
    • v 表示本次执行函数的数组数据
    • i 表示本次执行函数的数组数据对应的索引
    • ar 表示调用some方法的数组本身
  • 如果传入函数执行的返回值转布尔值为true，则传入函数不再继续执行
• 作用：判断数组数据（数组某一个数据满足条件即可）
• 返回值：布尔值
  • 如果传入函数某一次执行的返回值为true，则some的返回值为true
  • 如果传入函数每次执行的返回值都为false，则some的返回值为false

var arr = [10, 20, 30, 40]

var r = arr.some(function(v, i, ar) {
    return v >= 40
})

console.log(r) // true

5. every 数组判断方法

• 语法：数组.every(function(v, i, ar) {}, thisArg)
• 传入的第一个参数必须是一个函数：逐个数组数据会执行传入函数
  • 每次函数执行中参数的含义
    • v 表示本次执行函数的数组数据
    • i 表示本次执行函数的数组数据对应的索引
    • ar 表示调用every方法的数组本身
  • 如果传入函数执行的返回值转布尔值为false，则传入函数不再继续执行
• 传入的第二个参数（可传可不传）指的是将传入的第一个参数（函数）中的this指向更改为thisArg
• 作用：判断数组数据（数组每一个数据满足条件才行）
• 返回值：布尔值
  • 如果传入函数某一次执行的返回值为false，则every的返回值为false
  • 如果传入函数每次执行的返回值都为true，则every的返回值为true

var arr = [10, 20, 30, 40]

var r = arr.every(function(v, i, ar) {
    console.log(this) // { a: 1 }
    return v <= 40
}, { a: 1 })

console.log(r) // true

6. find 数组数据查找方法

• 语法：数组.find(function(v, i, ar) {})
• 传入的参数必须是一个函数：逐个数组数据会执行传入函数
  • 每次函数执行中参数的含义
    • v 表示本次执行函数的数组数据
    • i 表示本次执行函数的数组数据对应的索引
    • ar 表示调用find方法的数组本身
  • 如果传入函数执行的返回值转布尔值为true，则传入函数不再继续执行
• 作用：查找数组数据（第一个满足条件的数组数据）
• 返回值：
  • 如果传入函数某一次执行的返回值为true，则返回值为执行此次函数的数组数据v
  • 如果传入函数每次执行的返回值都为false，则返回undefined

var arr = [
    { id: 1, user: 'zs', age: 17, score: 180 },
    { id: 2, user: 'ls', age: 18, score: 280 },
    { id: 3, user: 'ww', age: 19, score: 380 },
    { id: 4, user: 'zl', age: 20, score: 480 }
]

var r = arr.find(function(v, i, ar) {
    return v.id == 2
})

console.log(r) // { id: 2, user: 'ls', age: 18, score: 280 }

7. findLast 数组数据查找方法

• 语法、作用以及返回值都与find方法一样
  • 不同的是find是从数组开头的数据开始从前往后依次执行传入的函数
  • 但是findLast是从数组最后的数据开始从后往前依次执行传入的函数

8. findIndex 数组数据索引查找方法

• 语法：数组.findIndex(function(v, i, ar) {})
• 传入的参数必须是一个函数：逐个数组数据会执行传入函数
  • 每次函数执行中参数的含义
    • v 表示本次执行函数的数组数据
    • i 表示本次执行函数的数组数据对应的索引
    • ar 表示调用findIndex方法的数组本身
  • 如果传入函数执行的返回值转布尔值为true，则传入函数不再继续执行
• 作用：查找数组数据索引（第一个满足条件的数组数据）
• 返回值：
  • 如果传入函数某一次执行的返回值为true，则返回值为执行此次函数的数组数据的索引i
  • 如果传入函数每次执行的返回值都为false，则返回-1

var arr = [
    { id: 1, user: 'zs', age: 17, score: 180 },
    { id: 2, user: 'ls', age: 18, score: 280 },
    { id: 3, user: 'ww', age: 19, score: 380 },
    { id: 4, user: 'zl', age: 20, score: 480 }
]

var r = arr.findIndex(function(v, i, ar) {
    return v.id == 2
})

console.log(r) // 1

9. findLastIndex 数组数据索引查找方法

• 语法、作用以及返回值都与findIndex方法一样
  • 不同的是findIndex是从数组开头的数据开始从前往后依次执行传入的函数
  • 但是findLastIndex是从数组最后的数据开始从后往前依次执行传入的函数

10. reduce 数组累计方法

• 语法1：数组.reduce(function(prev, item, index, ar) {})
• 传入的参数必须是一个函数：逐个数组数据会执行传入函数
  • 传入函数执行数组长度-1次
  • 第一次执行传入函数（参数含义）
    • prev：表示本次执行函数的数组的第一个数据
    • item：表示本次执行函数的数组的第二个数据
    • index：表示item参数对应的数组数据索引
    • ar：表示调用reduce方法的数组本身
  • 第二次执行传入函数（参数含义）
    • prev：表示第一次传入函数执行的返回值
    • item：表示本次执行函数的数组的第三个数据
    • index：表示item参数对应的数组数据索引
    • ar：表示调用reduce方法的数组本身
  • 后续每次执行传入函数（参数含义）
    • prev：表示上一次传入函数执行的返回值
    • item：表示依次执行函数的数组数据
    • index：表示item参数对应的数组数据索引
    • ar：表示调用reduce方法的数组本身
• 返回值：就是传入函数最后一次执行的返回值

var arr = [10, 20, 30, 40]

var res = arr.reduce(function(prev, item, index, ar) {
    console.log(prev, '--', item, '--', index)
    // 10 -- 20 -- 1
    // 30 -- 30 -- 2
    // 60 -- 40 -- 3
    return prev + item
})

console.log(res) // 100

• 语法2：数组.reduce(function(prev, item, index, ar) {}, init数据)
• 传入的第一个参数必须是一个函数：每个数组数据都会执行传入函数（循环执行）
  • 第一次执行传入函数（参数含义）
    • prev：表示reduce方法传入的第二个参数init数据的值
    • item：表示本次执行函数的数组的第一个数据
    • index：表示item参数对应的数组数据索引
    • ar：表示调用reduce方法的数组本身
  • 第二次执行传入函数（参数含义）
    • prev：表示第一次传入函数执行的返回值
    • item：表示本次执行函数的数组的第二个数据
    • index：表示item参数对应的数组数据索引
    • ar：表示调用reduce方法的数组本身
  • 后续每次执行传入函数（参数含义）
    • prev：表示上一次传入函数执行的返回值
    • item：表示依次执行函数的数组数据
    • index：表示item参数对应的数组数据索引
    • ar：表示调用reduce方法的数组本身
• 返回值：就是传入函数最后一次执行的返回值

var arr = [10, 20, 30, 40]

var res = arr.reduce(function(prev, item, index, ar) {
    console.log(prev, '--', item, '--', index)
    // 50 -- 10 -- 0
    // 60 -- 20 -- 1
    // 80 -- 30 -- 2
    // 110 -- 40 -- 3
    return prev + item
}, 50)

console.log(res) // 150

• 使用reduce方法模拟map方法

var arr = [10, 20, 30, 40]

var resArr = arr.reduce(function(prev, item, index, ar) {
    prev.push(item * 3)
    return prev
}, [])

console.log(resArr) // [30, 60, 90, 120]

• 使用reduce方法模拟filter方法

var arr = [10, 20, 30, 40]

var resArr = arr.reduce(function(prev, item, index, ar) {
    if(item >= 30) prev.push(item)
    return prev
}, [])

console.log(resArr) // [30, 40]

• 使用reduce方法模拟some方法

var arr = [10, 20, 30, 40]

var res = arr.reduce(function(prev, item, index, ar) {
    if (!prev) {
        if (item >= 40) prev = true
    }
    return prev
}, false)

console.log(res) // true

11. reduceRight 数组累计方法（反向）

• 语法、作用以及返回值都与reduce方法一样
  • 不同的是reduce是从数组开头的数据开始从前往后依次执行传入的函数
  • 但是reduceRight是从数组最后的数据开始从后往前依次执行传入的函数