面试管：来，说说数组都有哪些方法并详细介绍，我就问基础细节，别给我整别的！

开始之前先发泄一下：

JS中数组有很多方法，但是猛的让你说一下，你还真不一定能说全，那这就是问题！

极少数个别一线城市前端wei专家开始登场了：

你学过JS吗？你的基础怎么这么差？你们二三线城市的前端开发人员都有这个通病(通病问题的延申探讨：毫无基础，半路出家，这群人拉低了前端门槛，很是刺毛，就知道临面试了背背高大上的八股文，满嘴造火箭)呀！

不行，我要骂街了！

我去你大爷的，我们要先活着才行，我们不做项目，谁特妈的招我们，你以为跟你们一线城市一样，天天的搞前端基建，逮着几个API研究来研究去，我们他妈的要生存，我们要性价比，要快速的完成项目，我们要赚钱，不赚钱谁特妈的招我们？你可以鄙视我们，但是你不能站在道德高点指责我们，嘲笑我们，这种面试官也是素质贼差，情商低，就你牛逼，你牛逼你咋不开发个框架呢？都特妈的是给老板打工的，非得划分个三六九等，觉得自己比别人高一等，至于吗？娘希匹！

哎，还是自己太菜了，怨不了别人，继续加油干吧！

访问数组元素

arr[index]: 获取指定索引的元素。
arr.length: 获取数组的长度。

修改数组

arr.push(item): 向数组末尾添加元素。
arr.pop(): 删除数组末尾的元素并返回该元素。
arr.shift(): 删除数组第一个元素并返回该元素。
arr.unshift(item): 向数组开头添加元素
arr.splice(start, deleteCount, item1, item2, ...): 从指定位置开始删除元素并插入新元素。

这个splice方法要好好的讲解一下，讲解它不是因为他是高频面试题，而是确实有用！

splice() 方法是 JavaScript 数组中用于修改数组内容的强大工具。它可以用于添加、删除或替换数组中的元素。

语法:
javascript 复制代码
array.splice(start, deleteCount, item1, item2, ...);
参数:

start: 必需参数，表示要开始操作的索引位置。

deleteCount: 可选参数，表示要删除的元素数量。如果省略该参数，则从 start 索引到数组末尾的所有元素都将被删除。

item1, item2, ...: 可选参数，表示要插入到数组中的新元素。这些元素将被插入到 start 索引的位置。

返回值: 该方法返回一个包含被删除元素的新数组。

背多了API记不住呀，拿起我的烂笔头，来，开始我的表演！

添加元素
javascript 复制代码
const numbers = [1, 2, 3];
// 从下标2的位置，删除0个，添加4，5
numbers.splice(2, 0, 4, 5);
console.log(numbers); // 输出：[1, 2, 4, 5, 3]

// 有些人第一反应不应该是从标2位置删除0个，之后添加4，5，不应该是[1, 2,  3, 4, 5]这样吗？
// 想要是[1, 2,  3, 4, 5]，要这样写numbers.splice(3, 0, 4, 5);
// 为啥呢？numbers.splice(3, 0, 4, 5); 其中的start是3已经超出了numbers的有效范围了，雇从末尾开始进行操作，
// 后边注意是事项中有这个说明！
// 有这样的想法扇自己两个大嘴巴，我就扇自己自己两个大嘴巴，男人吗，要对自己狠点，人不狠，站不稳！
删除元素
javascript 复制代码
const numbers = [1, 2, 3, 4, 5];
// 从下标2（包含下标）的位置，删除两个元素
numbers.splice(2, 2);
console.log(numbers); // 输出：[1, 2, 5]
替换元素
javascript 复制代码
const numbers = [1, 2, 3, 4, 5];
// 从下标2开始删除两个，并追加新元素10
numbers.splice(2, 2, 10);
console.log(numbers); // 输出：[1, 2, 10, 5]
现在要上点花活了，不整点花活怎么显得我API背诵的熟呢，

将数组中元素移到另一个位置
javascript 复制代码
const numbers = [1, 2, 3, 4, 5];
// 先删除第一元素并拿到值
const firstElement = numbers.splice(0, 1)[0];
// 放到指定位置
numbers.splice(3, 0, firstElement);
console.log(numbers); // 输出：[2, 3, 4, 1, 5]
将两个数组连接在一起
javascript 复制代码
const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];
numbers1.splice(numbers1.length, 0, ...numbers2);
console.log(numbers1); // 输出：[1, 2, 3, 4, 5, 6]
注意事项

splice() 方法会修改原始数组。

如果 start 索引超出有效范围，则会从数组的末尾开始计算。

如果 deleteCount 为负数，则不会删除任何元素。

如果要插入的元素数量大于要删除的元素数量，则数组的长度会增加。

如果要插入的元素数量小于要删除的元素数量，则数组的长度会减少

遍历数组

for (let i = 0; i < arr.length; i++) { ... }: 使用 for 循环遍历数组。
for (const element of arr) { ... }: 使用 for...of 循环遍历数组

一定要注意使用for...of 循环遍历数组是不能中断的！！！记不住那小本本记一下下。

for...of 设计初衷是遍历整个可迭代对象，并对每个元素执行指定的操作，而不是提供了中断的机制

arr.forEach(callback): 使用 forEach() 方法遍历数组。

这个也不能中断操作！！！

查找元素

arr.indexOf(item): 查找元素在数组中的第一个索引，如果不存在则返回 -1。
arr.lastIndexOf(item): 查找元素在数组中的最后一个索引，如果不存在则返回 -1。
arr.includes(item): 檢查数组是否包含指定元素。

includes方法也是很有用，需要展开详细的说一下！
includes() 方法是 JavaScript 数组中用于判断指定元素是否存在于数组中的一个便捷方法。它可以快速检查某个元素是否包含在数组中，而无需遍历整个数组。

语法:
javascript 复制代码
```
array.includes(searchElement, fromIndex = 0);
```
参数:
- searchElement: 必需参数，表示要查找的元素。
- fromIndex: 可选参数，表示从数组的哪个索引位置开始搜索。默认为 0，表示从头开始搜索。
返回值:

如果找到 searchElement，则返回 true；否则返回 false。

示例
javascript 复制代码
```
const numbers = [1, 2, 3, 4, 5];
const isPresent1 = numbers.includes(2); // true
const isPresent2 = numbers.includes(6); // false

const fruits = ['apple', 'banana', 'orange'];
const isPresent3 = fruits.includes('banana', 1); // true
const isPresent4 = fruits.includes('grape'); // false
```
includes() 方法的局限性:
- 只能判断元素是否相等：includes() 方法使用严格相等运算符 (===) 来比较元素，因此只能判断元素是否完全相同。例如，数字 1 和字符串 "1" 虽然值相同，但会被认为不相等。
- 不能判断元素的类型：includes() 方法只判断元素的值是否相同，而不会考虑元素的类型。例如，数字 1 和字符串 "1" 虽然值相同，但类型不同，includes() 方法会认为它们不相等。
上面这种情况，其实find()、findIndex()更具有优势，在日常开发中面对的场景更全面。
arr.find(callback[, thisArg]): 用于查找数组中满足指定条件的第一个元素，并返回该元素。如果找不到符合条件的元素，则返回 undefined。

arr.findIndex(callback[, thisArg]): 会返回符合条件的元素的第一个索引，而不是元素本身。如果找不到符合条件的元素，则返回 -1

其实业务开发中find使用的场景更加广泛，可以看一下下面的例子：

javascript 复制代码

const numbers = [1, 2, 3, 4, 5];
const evenNumber = numbers.find(function(number) {
  return number % 2 === 0;
});
console.log(evenNumber); // 输出：2

const fruits = ['apple', 'banana', 'orange'];
const citrusFruit = fruits.find(fruit => fruit.startsWith('c'));
console.log(citrusFruit); // 输出：citrus

数组转换

arr.join(separator): 将数组中的元素连接成字符串，并使用指定的分隔符。
arr.slice(start, end): 复制数组的一部分(注意：不会改变元组、浅拷贝)。
arr.concat(array2, array3, ...): 连接多个数组。
arr.sort(compareFunction): 对数组进行排序。

sort这个方法也是极其的有用，不展开详聊了！
arr.reverse(): 反转数组(这个看表面意思就行，肯定改变原数组，不要怀疑自己的直觉)。

其他方法

下面这个三个方法都是非常实用的，必须要展开细聊，map，filter 和 reduce方法！

Map方法

map() 方法是 JavaScript 数组中用于对数组中的每个元素进行转换的便捷方法。它可以创建一个新数组，其中每个元素都是原始数组中对应元素经过回调函数处理后的结果。

语法:

c 复制代码

array.map(callback[, thisArg]);

参数:

callback: 必需参数，表示用于处理数组元素的回调函数。该函数接收三个参数：
- currentValue: 当前正在处理的数组元素。
- currentIndex: 当前元素的索引。
- array: 正在被处理的数组。
thisArg: 可选参数，表示回调函数的 this 值。

返回值: 一个新数组，其中每个元素都是原始数组中对应元素经过回调函数处理后的结果。

相关示例:

javascript 复制代码

const numbers = [1, 2, 3, 4, 5];
const squaredNumbers = numbers.map(function(number) {
  return number * number;
});
console.log(squaredNumbers); // 输出：[1, 4, 9, 16, 25]

const fruits = ['apple', 'banana', 'orange'];
const upperCaseFruits = fruits.map(fruit => fruit.toUpperCase());
console.log(upperCaseFruits); // 输出：[APPLE', 'BANANA', 'ORANGE']

map() 方法的优点:

简洁易用：语法简单，易于理解和使用。
高效性能：与遍历整个数组并逐个处理元素相比，map() 方法的效率更高，尤其是在处理大型数组时。
可读性强：代码更易读，更容易理解其意图。

map() 方法的局限性:

只能对每个元素进行一次转换：map() 方法只能将每个元素转换一次，无法进行多次转换或累加操作。
不会修改原始数组：map() 方法会创建一个新数组，而不会修改原始数组。

与其他方法的比较:

forEach(): forEach() 方法用于遍历数组中的每个元素，但它不会返回任何值。如果您只想对每个元素执行操作而无需返回值，可以使用 forEach() 方法。
reduce(): reduce() 方法用于将数组中的元素逐个累加为一个值。如果您需要对数组中的元素进行累加操作，可以使用 reduce() 方法。

Filter方法

filter() 方法是 JavaScript 数组中用于从数组中过滤出符合特定条件的元素并返回一个新数组的便捷方法。它可以帮助您轻松地从数组中剔除不需要的元素，只保留符合您要求的元素。

语法:

javascript 复制代码

array.filter(callback[, thisArg]);

参数:

callback: 必需参数，表示用于测试数组元素的回调函数。该函数接收三个参数：
- currentValue: 当前正在处理的数组元素。
- currentIndex: 当前元素的索引。
- array: 正在被处理的数组。
thisArg: 可选参数，表示回调函数的 this 值。

返回值: 一个新数组，其中包含所有通过回调函数测试的元素。

相关示例:

javascript 复制代码

const numbers = [1, 2, 3, 4, 5];
const evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});
console.log(evenNumbers); // 输出：[2, 4]

const fruits = ['apple', 'banana', 'orange'];
const citrusFruits = fruits.filter(fruit => fruit.startsWith('c'));
console.log(citrusFruits); // 输出：[apple', 'orange']

filter() 方法的优点:

简洁易用：语法简单，易于理解和使用。
高效性能：与遍历整个数组并逐个判断元素相比，filter() 方法的效率更高，尤其是在处理大型数组时。
可读性强：代码更易读，更容易理解其意图。

filter() 方法的局限性:

只能过滤出符合条件的元素：filter() 方法只能根据回调函数的结果来过滤元素，无法进行更复杂的过滤操作。
不会修改原始数组：filter() 方法会创建一个新数组，而不会修改原始数组。

与其他方法的比较:

find() 和 findIndex(): find() 和 findIndex() 方法用于查找数组中满足特定条件的第一个元素或索引。如果您只想找到第一个符合条件的元素，可以使用 find() 或 findIndex() 方法。
forEach(): forEach() 方法用于遍历数组中的每个元素，但它不会返回任何值。如果您只想对符合条件的元素执行操作，可以使用 filter() 方法配合 forEach() 方法。

Reduce方法

reduce() 方法是 JavaScript 数组中用于对数组中的元素进行累积运算并返回单个值的强大工具。它可以将数组中的元素逐个处理，并将其结果汇总为一个值，从而简化复杂的操作。

语法:

javascript 复制代码

array.reduce(callback[, initialValue]);

参数:

callback: 必需参数，表示用于处理数组元素的回调函数。该函数接收四个参数：
- accumulator: 累积器，即上一次回调函数的返回值或 initialValue 参数的值。
- currentValue: 当前正在处理的数组元素。
- currentIndex: 当前元素的索引。
- array: 正在被处理的数组。
initialValue: 可选参数，表示累积器的初始值。如果省略该参数，则会使用数组的第一个元素作为初始值。

返回值: 最终的累积值。

相关示例:

计算数组元素的总和:

javascript 复制代码

const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);
console.log(sum); // 输出：15

计算数组中偶数的总和:

javascript 复制代码

const numbers = [1, 2, 3, 4, 5];
const evenSum = numbers.reduce(function(accumulator, currentValue) {
  if (currentValue % 2 === 0) {
    accumulator += currentValue;
  }
  return accumulator;
}, 0);
console.log(evenSum); // 输出：6

将数组中的元素连接成字符串:

javascript 复制代码

const words = ['hello', 'world', 'JavaScript'];
const sentence = words.reduce(function(accumulator, currentValue) {
  return accumulator + ' ' + currentValue;
}, '');
console.log(sentence); // 输出：hello world JavaScript

reduce() 方法的优点:

简洁易用：语法简单，易于理解和使用。
高效性能：与遍历整个数组并逐个处理元素相比，reduce() 方法的效率更高，尤其是在处理大型数组时。
可读性强：代码更易读，更容易理解其意图。
功能强大：可以用于各种累积运算，例如求和、求平均值、连接字符串等。

reduce() 方法的局限性:

只能对数组中的元素进行一次累积运算：reduce() 方法只能将数组中的元素逐个处理一次，无法进行多次累积运算或并行处理。
可能会导致性能问题：如果回调函数的执行比较耗时，则可能会导致性能问题。

与其他方法的比较:

forEach(): forEach() 方法用于遍历数组中的每个元素，但它不会返回任何值。如果您只想对每个元素执行操作而无需返回值，可以使用 forEach() 方法。
map(): map() 方法用于对数组中的每个元素进行转换，并返回一个新数组。如果您只想对每个元素进行转换而无需累积运算，可以使用 map() 方法。

Hello, brother, 欢迎来打新世界电梯战神-丁青系列二，不点赞，我刀你