js面试题：数组方法详解，从增删改查到转换迭代

前言

前面我们对一个面试考点------CSS已经讲解过了，现在我将为大家介绍一下在面试中的另一个考点------js。与js相关的考点有很多，下面是我对js面试部分的总结，然后我会为大家一一讲解，如有不足之处请加以补充。金三银四在即，让我们一起为进大厂加油！！！

题目一：js数组上有哪些方法？

在JavaScript的数组中，有着很多内置的方法用于执行各种操作，增删改查只是基础的用法，除了这些还有其他几种特殊的方法。总共有如下的方法：

实现增加的功能：

• push()： 将一个或多个元素添加到数组的末尾，并返回新数组的长度。
• unshift()： 将一个或多个元素添加到数组的开头，并返回新数组的长度。
• splice()： 从数组中添加或删除元素。
• concat()： 将两个或多个数组合并成一个新数组。

示例

let arr1 = [1, 2];
let arr2 = [3, 4];

// push：
arr1.push(3);
console.log(arr1); // 输出: [1, 2, 3]

// unshift：
arr2.unshift(0);
console.log(arr2); // 输出: [0, 3, 4]

// splice：
arr1.splice(1, 0, 'a', 'b');
console.log(arr1); // 输出: [1, 'a', 'b', 2, 3]

// concat：
let newArr = arr1.concat(arr2);
console.log(newArr); // 输出: [1, 'a', 'b', 2, 3, 0, 3, 4]

实现删除的功能：

• pop()： 删除并返回数组最后一个元素。
• shift()： 删除并返回数组的第一个元素
• splice()： 删除元素
• slice()： 返回数组的一部分，不会修改原数组。

示例

let arr3 = [1, 2, 3, 4, 5];

// pop：
let lastElement = arr3.pop();
console.log(lastElement); // 输出: 5
console.log(arr3); // 输出: [1, 2, 3, 4]

// shift：
let firstElement = arr3.shift();
console.log(firstElement); // 输出: 1
console.log(arr3); // 输出: [2, 3, 4]

// splice：
arr3.splice(1, 2);
console.log(arr3); // 输出: [2, 4]

// slice：
let slicedArr = arr3.slice(1);
console.log(slicedArr); // 输出: [4]

实现修改的方法：

以下两个方法经常会使用到，需要牢记

• reverse()： 将数组中的元素颠倒顺序。
• sort()： 将数组中的元素排序。

示例

let arr4 = [3, 1, 2];

// reverse：
arr4.reverse();
console.log(arr4); // 输出: [2, 1, 3]

// sort：
arr4.sort();
console.log(arr4); // 输出: [1, 2, 3]

实现查询操作的方法：

indexOf()： 返回数组中指定元素的第一个匹配项的索引，如果不存在则返回 -1。 includes()： 判断数组是否包含指定的元素，返回布尔值。 lastIndexOf()： 返回指定元素在数组中最后一次出现的索引，不存在返回-1 find()： 返回数组中满足提供的测试函数的第一个元素的值，如果找不到则返回 undefined

示例

let arr5 = [1, 2, 3, 4, 5];

// indexOf：
let index = arr5.indexOf(3);
console.log(index); // 输出: 2

// includes：
let isIncluded = arr5.includes(6);
console.log(isIncluded); // 输出: false

// lastIndexOf：
let lastIndex = arr5.lastIndexOf(3);
console.log(lastIndex); // 输出: 2

// find：
let foundElement = arr5.find(item => item > 3);
console.log(foundElement); // 输出: 4

实现转换操作的方法：

join()： 将数组中的所有元素连接成一个字符串

示例

let arr6 = ['Hello', 'World'];

// join：
let str = arr6.join(' ');
console.log(str); // 输出: "Hello World"

实现迭代操作的方法：

• forEach()： 对数组中的每个元素执行指定的函数
• map()： 对数组中的每个元素执行指定的函数，并返回一个新数组
• filter()： 返回满足指定条件的所有元素组成的新数组
• some()： 检测数组中是否有至少一个元素满足指定条件，返回布尔值
• every()： 检测数组中是否所有元素都满足指定条件，返回布尔值

示例

let arr7 = [1, 2, 3, 4, 5];

// forEach：
arr7.forEach(item => {
    console.log(item * 2); // 输出: 2, 4, 6, 8, 10
});

// map：
let newArr7 = arr7.map(item => item * 2);
console.log(newArr7); // 输出: [2, 4, 6, 8, 10]

// filter：
let filteredArr = arr7.filter(item => item % 2 === 0);
console.log(filteredArr); // 输出: [2, 4]

// some：
let isSome = arr7.some(item => item > 3);
console.log(isSome); // 输出: true

// every：
let isEvery = arr7.every(item => item > 3);
console.log(isEvery); // 输出: false

两个特殊的方法：

• Array.from()： 将类数组对象或可迭代对象转换为数组
• Array.of()： 根据传入的参数创建一个新数组

示例

// Array.from()：
let arrayLike = { 0: 'a', 1: 'b', length: 2 };
let newArr8 = Array.from(arrayLike);
console.log(newArr8); // 输出: ['a', 'b']

// Array.of()：
let newArr9 = Array.of(1, 2, 3);
console.log(newArr9); // 输出: [1, 2, 3]

总结

在面试中遇到了这类问题时，我们就可以这样回答了，对于JavaScript中数组常见的方法有如下几种：

1. 增加操作：

   • push(): 将一个或多个元素添加到数组的末尾。
   • unshift(): 将一个或多个元素添加到数组的开头。
   • splice(): 从数组中添加或删除元素。
   • concat(): 将两个或多个数组合并成一个新数组。

2. 删除操作：

   • pop(): 删除并返回数组的最后一个元素。
   • shift(): 删除并返回数组的第一个元素。
   • splice(): 删除元素。
   • slice(): 返回数组的一部分，不修改原数组。

3. 修改操作：

   • reverse(): 将数组中的元素颠倒顺序。
   • sort(): 将数组中的元素排序。

4. 查询操作：

   • indexOf(): 返回指定元素的第一个匹配项的索引。
   • includes(): 判断数组是否包含指定的元素。
   • lastIndexOf(): 返回指定元素在数组中最后一次出现的索引。
   • find(): 返回数组中满足条件的第一个元素的值。

5. 转换操作：

   • join(): 将数组中的所有元素连接成一个字符串。

6. 迭代操作：

   • forEach(): 对数组中的每个元素执行指定的函数。
   • map(): 对数组中的每个元素执行指定的函数，并返回一个新数组。
   • filter(): 返回满足条件的所有元素组成的新数组。
   • some(): 检测数组中是否有至少一个元素满足条件。
   • every(): 检测数组中是否所有元素都满足条件。

7. 特殊方法：

   • Array.from(): 将类数组对象或可迭代对象转换为数组。
   • Array.of(): 根据传入的参数创建一个新数组。