JavaScript数组方法速通

李佳琪 曾经说过：今天你有没有好好利用 JavaScript 数组的方法？这么多年你技术涨没涨？你是不是还不会用 flatMap() 这类新方法来减少filter 链式 map的使用呢？有没有了解过 toSpliced()、toReversed() 和 toSorted() 新数组方法呢？是不是还在使用 arr[arr.length-1] 获取最后的数组元素？... 看看自己进步了没有！”

答：嗨呀我知道了，马上。。。

常用方法（必须掌握）

原数组
const array = [{ id: 1, name: 'tom', age: 14 }, { id: 2, name: 'sam', age: 16 }, { id: 3, name: 'linlin', age: 16 }]

1. filter

const filterArray = array.filter(item => item.age === 16)

使用场景: 当你需要筛选出一组满足某些条件的元素时，例如查找所有符合某个年龄的人群。

2. map

const mapArray = array.map(item => item.name)

使用场景: 当需要提取某些属性或对每个元素进行转换。例如，从对象数组中提取所有 name 字段。

3. find、findIndex、findLast、findLastIndex

const findArray = array.find(item => item.age === 16)
const findIndexArray = array.findIndex(item => item.age === 16)
const findLastArray = array.findLast(item => item.age === 16)
const findLastIndexArray = array.findLastIndex(item => item.age === 16)

输出:

相似API: filter。区别在于：

使用场景: 当你只关心第一个符合条件的结果或其索引时。例如，查找数组中的第一个特定值或从后向前查找。

4. forEach、for...in、for...of

array.forEach(item => { ... })
for (const key in array) { ... }
for (const value of array) { ... }

输出: 无返回值，仅执行副作用（例如打印日志）。

相似API: map。区别在于：

使用场景: 当你只需要对每个元素进行操作，而不关心返回值时。例如，遍历一个数组并执行一些逻辑，如日志记录或修改外部变量。

5. pop、push、shift、unshift

deepCloneArray.pop()
deepCloneArray.push({ id: 4, name: 'jack', age: 18 })
deepCloneArray.shift()
deepCloneArray.unshift({ id: 5, name: 'jerry', age: 20 })

输出:

相似API: splice。区别在于：

使用场景: 常用于堆栈和队列的实现，例如 push 和 pop 实现堆栈，shift 和 unshift 实现队列。

6. includes、indexOf、lastIndexOf

deepCloneArray.includes({ id: 5, name: 'jerry', age: 20 })
deepCloneArray.indexOf({ id: 5, name: 'jerry', age: 20 })
deepCloneArray.lastIndexOf({ id: 5, name: 'jerry', age: 20 })

输出: 因为对象比较是引用类型，所以都返回 false 和 -1。

相似API: find。区别在于：

使用场景: 当需要快速检查数组中是否包含某个简单值（如数字或字符串）。

7. splice、slice、toSpliced

deepCloneArray.splice(1, 1)
deepCloneArray.slice(1, 2)
const toSplicedArray = deepCloneArray.toSpliced(1, 1)

输出:

相似API: pop 和 shift 也删除元素，但只能在数组两端操作，而 splice 可在数组中间操作。

使用场景: splice 用于需要对数组进行增删改时，slice 用于不修改原数组的情况下提取部分数据。

8. join

const joinedString = array.map(item => item.name).join(', ')

9. flat

flat 方法用于将多维数组按指定的深度扁平化为一维数组。

const flatArray = [1, [23, 45], 6, [7, [8, [9]]]];
// 将数组扁平化到指定的深度
const flatDepth2 = flatArray.flat(2);
// console.log(flatDepth2); // [ 1, 23, 45, 6, 7, 8, [9] ]
const flatInfinity = flatArray.flat(Infinity);
// console.log(flatInfinity); // [ 1, 23, 45, 6, 7, 8, 9 ]

输出:

相似 API: reduce 和 concat。区别在于：

使用场景:

10. every、some

const everyArray = array.every(item => item.age > 15)
const someArray = array.some(item => item.age === 16)

输出:

相似API: filter 和 find。区别在于：

使用场景:

11. toSorted 和 sort

toSorted 和 sort 都可以用于排序数组，但有不同的行为和输出。

const toSortedArray = array.toSorted((a, b) => a.age - b.age);
// console.log(toSortedArray); // [ { id: 1, name: 'tom', age: 15 }, { id: 2, name: 'sam', age: 17 }, { id: 3, name: 'linlin', age: 17 } ]
const sortArray = array.sort((a, b) => b.age - a.age);
// console.log(sortArray); // [ { id: 2, name: 'sam', age: 17 }, { id: 3, name: 'linlin', age: 17 }, { id: 1, name: 'tom', age: 15 } ]

输出:

相似 API: reverse。区别在于：

使用场景:

12. reverse 和 toReversed

reverse 和 toReversed 都用于反转数组，但它们的行为和输出不同。

const reverseArray = array.reverse();
// console.log(reverseArray); // [ { id: 3, name: 'linlin', age: 17 }, { id: 2, name: 'sam', age: 17 }, { id: 1, name: 'tom', age: 15 } ]
const toReversedArray = array.toReversed();
// console.log(toReversedArray); // [ { id: 3, name: 'linlin', age: 17 }, { id: 2, name: 'sam', age: 17 }, { id: 1, name: 'tom', age: 15 } ]

输出:

使用场景:

13. concat 和 扩展运算符 ...

concat 和扩展运算符 ... 都可以用于合并数组。

const concatArray = array.concat([{ id: 4, name: 'jerry', age: 18 }]);
// console.log(concatArray); // [ { id: 1, name: 'tom', age: 15 }, { id: 2, name: 'sam', age: 17 }, { id: 3, name: 'linlin', age: 17 }, { id: 4, name: 'jerry', age: 18 } ]
const spreadArray = [...array, { id: 4, name: 'jerry', age: 18 }];
// console.log(spreadArray); // [ { id: 1, name: 'tom', age: 15 }, { id: 2, name: 'sam', age: 17 }, { id: 3, name: 'linlin', age: 17 }, { id: 4, name: 'jerry', age: 18 } ]

输出:

使用场景:

小技巧类1. at

at 方法用于从数组中获取相对于数组末尾的元素。

const atArray = array.at(-1);
// console.log(atArray); // { id: 2, name: 'sam', age: 17 }

使用场景: 用于获取数组末尾的元素，尤其是在不知道数组长度的情况下访问最后几个元素时非常方便。

2. flatMap

flatMap 方法用于将每个元素先映射到一个新数组，然后将所有这些数组合并成一个新的数组。

const flatMapArray = array.flatMap(item => item.age > 16 ? item.name : []).join('、');
// console.log(flatMapArray); // sam、linlin

输出:

相似 API: filter 和 map。区别在于：

使用场景:

3. reduce 和 reduceRight

reduce 和 reduceRight 都是 JavaScript 数组的方法，用于对数组进行迭代并产生一个最终的结果。它们的主要区别在于迭代的顺序不同。

const reduceArray = array.reduce((prev, curr) => {
    curr.age += 2;
    prev.push(curr);
    return prev;
}, []);
const reduceRightArray = array.reduceRight((prev, curr) => {
    curr.age -= 1;
    prev.push(curr);
    return prev;
}, []);

使用场景: 常用于累加、统计等复杂操作，如计算数组的总和或将数组转换为对象。

4. structuredClone

const deepCloneArray = structuredClone(array)

使用场景: 当你需要创建一个不受原数组影响的独立副本，且这个数组有深层嵌套对象时。

一般用不到（知道即可）1. fill

fill 方法用于填充数组的指定部分，用新的值替换数组中的元素。

const fillArray = array.fill({ id: 9, name: 'lisa', age: 18 }, 0, 1);
// console.log(fillArray); // [ { id: 9, name: 'lisa', age: 18 }, { id: 9, name: 'lisa', age: 18 }, { id: 2, name: 'sam', age: 17 } ]

使用场景: 用于初始化数组的部分内容或将数组中某一部分元素替换为相同的值，适合在需要批量修改数组数据时使用。

2. values, keys, entries

values, keys, 和 entries 方法用于获取数组的不同视图，它们都返回一个迭代器对象，支持 for...of 循环遍历。

const array = [
  { id: 1, name: 'tom', age: 15 },
  { id: 3, name: 'linlin', age: 17 },
  { id: 2, name: 'sam', age: 17 }
];
const valuesArray = array.values();
const keysArray = array.keys();
const entriesArray = array.entries();
for (let value of valuesArray) {
    // console.log(value); // { id: 1, name: 'tom', age: 15 } { id: 3, name: 'linlin', age: 17 } { id: 2, name: 'sam', age: 17 }
}
for (let key of keysArray) {
    // console.log(key); // 0 1 2
}
for (let [key, value] of entriesArray) {
    // console.log(key, value); // 0 { id: 1, name: 'tom', age: 15 } 1 { id: 3, name: 'linlin', age: 17 } 2 { id: 2, name: 'sam', age: 17 }
}

输出:

3. copyWithin 和 with

copyWithin 和 with 都是用于操作数组的方法，但它们的功能和用途不同。

const copyWithinArray = array.copyWithin(0, 2);
// console.log(copyWithinArray); // [ { id: 2, name: 'sam', age: 17 }, { id: 3, name: 'linlin', age: 17 }, { id: 2, name: 'sam', age: 17 } ]
const withArray = array.with(0, { id: 8, name: 'linda', age: 18 });
// console.log(withArray); // [ { id: 8, name: 'linda', age: 18 }, { id: 3, name: 'linlin', age: 17 }, { id: 2, name: 'sam', age: 17 } ]

输出:

相似 API: splice。区别在于：

使用场景:

总结

本文主要梳理回顾了数组的方法，这环境，卷起来吧各位，地基打好解决问题的方式就多了，最后，阿lin祝大家都能找到好的工作(涨薪)啦