Logo
高效 JavaScript 编程:数组方法全攻略
所属分类:开发日常
阅读量:835
评论数量:0
发布时间:2023-01-23 10:46

必看大字最新消息重磅公众号首图.jpg

高效 JavaScript 编程:数组方法全攻略

在这篇文章中,我将全面解析 JavaScript 中的各种数组方法,帮助你在实际项目中快速实现数据操作和处理

map

该方法会在每一次循环时通过 return 将新值覆盖旧值,最终形成一个新的数组

let arr = [10, 20, 30, 40, 50]
let newArr = arr.map(item => {
    return item += 5
})
console.log(newArr);
// [15, 25, 35, 45, 55]

forEach

该方法与 map 在使用上十分相似,都可以对数组进行循环操作,但不同的是 forEach 不返回值,只能用于操作数据,可以理解为 for 循环的替代者。

如果以得到返回值为目,则需要使用 map 方法, 否则两者之间没有任何区别

let arr = [10, 20, 30, 40, 50]
arr.forEach((item, index) => {
    console.log("索引:", index, "每一项的值:", item);
})
// 索引: 0 当前项的值: 10
// 索引: 1 当前项的值: 20
// 索引: 2 当前项的值: 30
// 索引: 3 当前项的值: 40
// 索引: 4 当前项的值: 50

注意在 forEach 循环中 return 将无效

let arr = [10, 20, 30, 40, 50]
let newArr = arr.forEach((item, index) => {
    return item += 5
})
console.log(newArr); // undefined

forEach 主要用于替代传统的 for 循环,因为 forEach 非常方便

filter

该方法顾名思义,它主要用于过滤数组中的数据

比如过滤数组中大于等于 30 的数据,最终会返回一个新数组

let arr = [10, 20, 30, 40, 50]
let newArr = arr.filter(item => {
    return item >= 30
})
console.log(newArr);
// [30, 40, 50]

some

该方法用于判断数组中返回的每一项值是否为 true,只要有一个条件为 true 则它的返回值就为 true

let arr = [10, 20, 30, 40, 50]
let newArr = arr.some(item => {
    return item === 30
})
console.log(newArr);
// true

全部为 false,返回值才为 false

let arr = [10, 20, 30, 40, 50]
let newArr = arr.some(item => {
    return item === 60
})
console.log(newArr);
// false

every

该方法与 some 恰恰相反,它的作用是只要有一个值为 false,那么结果就为 false

该方法通常用于商品购物车全选功能,只要有一个按钮没有被选中,全选按钮就不会被选中

find

该方法用于查找数组中某个元素

let arr = [10, 20, 30, 40, 50]
let index = arr.find(item => {
    return item === 30
})
console.log(index); //30

findIndex

该方法用于查找数组中指定元素的索引下标

let arr = [10, 20, 30, 40, 50]
let index = arr.findIndex(item => {
    return item === 30
})
console.log(index); //2

reduce

该方法主要用于计算数组中的累加和,参数一表示累加和的变量,参数二表示每一项的值,参数三表示从多少开始累加

let arr = [10, 20, 30, 40, 50]
let sum = arr.reduce((sum, item) => {
    return sum += item
}, 0)
console.log(sum); //150

sort

该方法主要用于对数组进行排序,例如:

const list = [3, 1, 2, 7, 9]

// 默认从小到大排序
list.sort()
console.log(list);
// [1, 2, 3, 7, 9]

可以发现 sort 方法会改变原数组(重点!)

接下来演示一下复杂的应用场景:循环每一项通过 cid 的大小进行排序

const list = [
  {
    name: "zs",
    cid: 1
  },
  {
    name: "ls",
    cid: 3
  },
  {
    name: "ww",
    cid: 6
  },
  {
    name: "xm",
    cid: 2
  },
]

// 从小到大排序
list.sort((a, b) => a.cid - b.cid)
console.log(list);
// { name: 'zs', cid: 1 }
// { name: 'xm', cid: 2 }
// { name: 'ls', cid: 3 }
// { name: 'ww', cid: 6 }

// 从大到小排序 只需要将a与b的位置互换即可
list.sort((a, b) => b.cid - a.cid)
console.log(list);
// { name: 'ww', cid: 6 }
// { name: 'ls', cid: 3 }
// { name: 'xm', cid: 2 }
// { name: 'zs', cid: 1 }

作者:宇阳

版权:此文章版权归 宇阳 所有,如有转载,请注明出处!

空状态
评论列表为空~
目录
作者头像

一直对网站开发领域很感兴趣,从小就希望有一个属于自己的网站,在17年时候成功进入站长圈,并通过各种自学,以及各种折腾,才有了你现在看到的这个网站

月亮搜索返回顶部