JS数组方法(遍历方法)

发布时间:2024年01月17日

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

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]

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]

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

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

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 }

findLast 数组数据查找方法

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

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

findLastIndex 数组数据索引查找方法

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

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

reduceRight 数组累计方法(反向)

  • 语法、作用以及返回值都与reduce方法一样
    • 不同的是reduce是从数组开头的数据开始从前往后依次执行传入的函数
    • 但是reduceRight是从数组最后的数据开始从后往前依次执行传入的函数
文章来源:https://blog.csdn.net/weixin_56560654/article/details/135626146
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。