高效 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 }