前端面试篇之JS数组（一）

前面已经总结完了一些常见的css常考知识点，现在来总结一下js的内容

js数组上有哪些方法？

像这样的题目一看，感觉没什么难度脑海里已经蹦出来很多js数组身上的方法。但是当你真的去说出来的话，80%可能就说不全了。所以回答这样的问题就得有个方法，先总再分。

先将列出功能分为增删改查、转换、遍历迭代，然后我们再细化每种功能下有哪些方法。

增加元素

push()

向数组末尾添加一个或多个元素，并返回新的长度。

let arr = [1, 2];
arr.push(3);
console.log(arr); // 输出 [1, 2, 3]

unshift()

向数组开头添加一个或多个元素，并返回新的长度。

let arr = [1, 2];
arr.unshift(0);
console.log(arr); // 输出 [0, 1, 2]

splice()

可以用于插入、删除和替换元素。

let arr = [1, 2, 3];
arr.splice(1, 0, 'a'); // 在索引1前插入'a'
console.log(arr); // 输出 [1, 'a', 2, 3]

concat()

连接两个或更多的数组，并返回结果。

let arr1 = [1, 2];
let arr2 = [3, 4];
let arr3 = arr1.concat(arr2);
console.log(arr3); // 输出 [1, 2, 3, 4]

删除元素

pop()

删除并返回数组的最后一个元素。

let arr = [1, 2, 3];
let last = arr.pop();
console.log(last); // 输出 3
console.log(arr); // 输出 [1, 2]

shift()

删除并返回数组的第一个元素。

let arr = [1, 2, 3];
let first = arr.shift();
console.log(first); // 输出 1
console.log(arr); // 输出 [2, 3]

splice()

用于删除元素，还可以用于插入和替换。

let arr = [1, 2, 3, 4];
arr.splice(1, 2); // 删除索引1开始的2个元素
console.log(arr); // 输出 [1, 4]

slice()

不会修改原数组，而是返回一个新数组，包括从开始到结束（但不包括结束）的数组的一部分浅拷贝。

let arr = [1, 2, 3, 4];
let newArr = arr.slice(1, 3);
console.log(newArr); // 输出 [2, 3]

修改元素

splice()

可以用于替换元素。

let arr = [1, 2, 3];
arr.splice(1, 1, 'a');
console.log(arr); // 输出 [1, 'a', 3]

fill()

用给定的静态值填充数组的一部分或全部。

let arr = [1, 2, 3, 4, 5];
arr.fill(0, 1, 3); // 从索引1开始到索引3（不包括）用0填充
console.log(arr); // 输出 [1, 0, 0, 4, 5]

查询元素

includes()

检查数组中是否包含特定的元素，返回布尔值。

let arr = [1, 2, 3];
let hasTwo = arr.includes(2);
console.log(hasTwo); // 输出 true

indexOf()

返回数组中第一个匹配指定值的元素的索引，如果没有找到则返回-1。

let arr = [1, 2, 3];
let index = arr.indexOf(2);
console.log(index); // 输出 1

lastIndexOf()

类似于 indexOf()，但是是从数组的末尾向前查找。

let arr = ['apple', 'banana', 'cherry', 'banana'];
console.log(arr.lastIndexOf('banana')); // 输出 3
console.log(arr.lastIndexOf('kiwi')); // 输出 -1

find()

返回通过测试的数组中的第一个元素的值，否则返回 undefined。

let arr = [{id: 1}, {id: 2}];
let found = arr.find(item => item.id === 2);
console.log(found); // 输出 {id: 2}

findIndex()

返回通过测试的数组中的第一个元素的索引位置，否则返回 -1。

let arr = [1, 2, 3];
let index = arr.findIndex(x => x > 1);
console.log(index); // 输出 1

findLast()

ES2022 引入，返回从后往前查找的数组中第一个匹配条件的元素，否则返回 undefined。

let arr = [1, 2, 3, 4, 3];
let result = arr.findLast(item => item === 3);
console.log(result); // 输出 4

findLastIndex()

ES2022 引入，返回从后往前查找的数组中第一个匹配条件的元素的索引，否则返回 -1。

let arr = [1, 2, 3, 4, 3];
let index = arr.findLastIndex(item => item === 3);
console.log(index); // 输出 4

转换数组

reverse()

反转数组中元素的顺序。

let arr = [1, 2, 3];
arr.reverse();
console.log(arr); // 输出 [3, 2, 1]

toReversed()

ES2022引入的方法，返回一个新的反转后的数组副本。

let arr = [1, 2, 3];
let reversed = arr.toReversed();
console.log(reversed); // 输出 [3, 2, 1]

sort()

对数组的元素进行排序。

let arr = [3, 1, 2];
arr.sort((a, b) => a - b);
console.log(arr); // 输出 [1, 2, 3]

toSorted()

ES2022引入的方法，返回一个新的排序后的数组副本。

let arr = [3, 1, 2];
let sorted = arr.toSorted();
console.log(sorted); // 输出 [1, 2, 3]

toString()

将数组转换为字符串，元素之间用逗号分隔。

let arr = [1, 2, 3];
let str = arr.toString();
console.log(str); // 输出 "1,2,3"

join()

将数组的所有元素放入一个字符串，并通过指定的分隔符分隔数组的每个元素。

let arr = [1, 2, 3];
let str = arr.join('-');
console.log(str); // 输出 "1-2-3"

迭代元素

forEach()

遍历数组中的每个元素。

let arr = [1, 2, 3];
arr.forEach(item => console.log(item));
// 输出
// 1
// 2
// 3

map()

创建一个新数组，其结果是调用数组中的每个元素上的函数。

let arr = [1, 2, 3];
let newArr = arr.map(item => item * 2);
console.log(newArr); // 输出 [2, 4, 6]

filter()

创建一个新数组，其包含通过所提供函数实现的测试的所有元素。

let arr = [1, 2, 3, 4];
let even = arr.filter(item => item % 2 === 0);
console.log(even); // 输出 [2, 4]

reduce()

对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

let arr = [1, 2, 3, 4];
let sum = arr.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 输出 10

讲到迭代这里可能面试官会问一下forEach、map、filter有什么区别吗。这里我简单总结一下：

• forEach() 更适合用于执行副作用，如打印日志、修改全局变量等，不生成新数组。
• map() 用于创建新数组，数组中的元素是原数组元素经过某种转换后的结果。
• filter() 用于创建新数组，数组中的元素是原数组中符合条件的元素。