【JS】数组魔法：探秘隐匿的方法宝库

前言

在 JavaScript 中，数组是一种极其常见且重要的数据结构，它为我们提供了许多强大的方法来操作和处理数据。例如我们熟知的 push、pop、forEach 等方法，JavaScript 数组还隐藏着许多鲜为人知的神奇方法，它们可以让我们在处理数组时更加高效、简洁。希望通过本文的学习，你会对数组身上的这些常用的方法有更加深刻的认识。

1.splice

splice() 方法可以用于删除、替换或插入数组中的元素。splice() 方法可以在任意位置修改数组，并返回包含被删除元素的新数组，如果没有删除任何元素，则返回空数组。

splice通常接受多个参数，语法：

splice(start, deleteCount, item1, item2, /* ..., */ itemN)

start

必需，指定修改的起始位置，即要删除或插入的元素的索引。如果索引为负数，则从数组末尾向后计数。

deleteCount

可选，指定要删除的元素个数。如果省略或超过数组长度，则删除从 start 索引开始到数组末尾的所有元素。

item1,....

可选，要添加到数组的新元素，从 start 索引处开始插入。

实例：

let arr = [1,2,3,4]
const res = arr.splice(1,1)
console.log(arr); //[1,3,4]
console.log(res);//[2]

arr.splice(1,0,2)
console.log(arr); //[1,2,3,4]

2. find

find方法用于查找满足指定条件的第一个元素，并返回该元素。 如果没有找到符合条件的元素，则返回 undefined，注意找到第一个匹配即返回。

find通常接受两个参数，语法：

find(callbackFn, thisArg)

callbackFn

必选，为数组中的每个元素执行的函数。它应该返回一个真值 来表示已经找到了匹配的元素。该函数被调用时将传入三个参数：el、index、array，分别对应数组中当前正在处理的元素。、正在处理元素在数组中的索引、调用了 find() 的数组本身。

thisArg

可选，执行 callbackFn 时用作 this 的值。

实例：

const array = [5, 12, 8, 130, 44];

const found = array.find(element => element > 10);
console.log(found); // 输出：12

3. slice

slice方法通过指定起始和结束索引来提取数组的一段子数组，并返回一个新数组。原始数组不会被修改。

slice接受两个参数，语法：

slice(start, end)

start

可选，表示起始位置，即要提取的起始索引。如果索引是负数，则从数组末尾开始计算，且使用 start + array.length。如果索引省略，则使用0

end

可选，表示结束位置，即要提取的结束索引（但不包括该位置的元素）。如果索引是负数，则从数组末尾开始计算，且使用 end + array.length。如果索引省略，则提取元素至末尾。

注意事项

• 如果 start 大于等于 end，则返回一个空数组。
• slice() 方法不会修改原始数组，而是返回一个新数组，其中包含指定范围的元素。
• slice() 方法不包括 end 位置的元素，即从 start 索引开始，直到 end 索引之前的位置（不包括 end 索引处的元素）。
• slice() 方法可以用于字符串，也可以用于类数组对象。

实例：

const array = [1, 2, 3, 4, 5]; 
const slicedArray1 = array.slice(1, 3); 
console.log(slicedArray1); // 输出: [2, 3] 

const slicedArray2 = array.slice(2); 
console.log(slicedArray2); // 输出: [3, 4, 5] 

const slicedArray3 = array.slice(-2); 
console.log(slicedArray3); // 输出: [4, 5]

4. fill

是 JavaScript 数组中非常实用的方法之一，它可以用指定的值填充数组中的所有元素。返回修改后的原始数组，而不是返回新数组。

接受三个参数，语法：

fill(value, start, end)

value

用来填充数组元素的值。

start

可选，表示填充的起始位置。默认为 0。负数索引从数组的末端开始计算，如果索引省略，则为0

end

可选，表示填充的结束位置（但不包括该位置的元素）。默认为数组的长度。负数索引从数组的末端开始计算，如果索引省略，则使用 array.length。

实例：

const array = [1, 2, 3, 4, 5];

// 使用 0 填充整个数组
const filledArray1 = array.fill(0);
console.log(filledArray1); // 输出: [0, 0, 0, 0, 0]

// 从索引 1 开始，到索引 3（不包括）填充 9
const filledArray2 = array.fill(9, 1, 3);
console.log(filledArray2); // 输出: [0, 9, 9, 0, 0]

5. filter

filter方法创建一个新数组，其中包含满足指定条件的所有原始数组元素。如果没有元素通过测试，则返回一个空数组。

接受两个参数，语法：

filter(callbackFn, thisArg)

与前面的find很类似。

callbackFn

用于测试每个元素的函数，接收三个参数：element(元素)、index（索引）、array（原始数组），返回一个真值以将元素保留在结果数组中，否则返回一个假值。

thisArg

执行 callbackFn 时用作 this 的值。

实例：

const array = [1, 2, 3, 4, 5, 6];

// 过滤出所有偶数
const evenNumbers = array.filter(element => element % 2 === 0);
console.log(evenNumbers); // 输出: [2, 4, 6]

6. join

join方法将数组中的所有元素连接成一个字符串，并返回该字符串 。通过指定一个可选的分隔符，可以在元素之间添加分隔符，以便更好地控制连接后的字符串格式。如果数组只有一个元素，那么将返回该元素而不使用分隔符。

接受一个参数，语法：

join(separator)

separator

指定一个字符串来分隔数组的每个元素。如果需要，将分隔符转换为字符串。如果省略，数组元素用逗号（,）分隔。如果 separator 是空字符串（""），则所有元素之间都没有任何字符。

注意事项

• 如果数组中的元素为 undefined 或 null，它们会被转换成空字符串。
• 如果数组中的元素是对象，则 join() 方法会将每个对象转换为字符串。
• 如果数组为空，则 join() 方法返回一个空字符串。
• join() 方法不会修改原始数组。

实例：

const array = ['apple', 'banana', 'orange'];

// 使用默认分隔符连接数组中的元素
const joinedString1 = array.join();
console.log(joinedString1); // 输出: "apple,banana,orange"

// 使用自定义分隔符连接数组中的元素
const joinedString2 = array.join(' | ');
console.log(joinedString2); // 输出: "apple | banana | orange"

7. concat

concat() 方法用于合并两个或多个数组。此方法不会更改原始数组，而是返回一个新数组。

语法：

concat(value0, value1, /* ... ,*/ valueN)

value1, value2, ..., valueN

必选，表示要合并到新数组中的数组或值。可以是数组，也可以是其他任意值。如果参数为空，则 concat() 方法将返回原始数组的一个副本。如果参数是空数组，则不会对结果产生影响，新数组将与原始数组相同。

实例：

const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = [1, 2, 3];

const newArray1 = array1.concat(array2);
console.log(newArray1); // 输出: ['a', 'b', 'c', 'd', 'e', 'f']

const newArray2 = array1.concat();
console.log(newArray2); // 输出: ['a', 'b', 'c']

8. map

map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

接受两个参数，语法：

map(callbackFn, thisArg)

callbackFn

为数组中的每个元素执行的函数。它的返回值作为一个元素被添加到新数组中。接收三个参数：element(元素)、index（索引）、array（原始数组）

thisArg

执行 callbackFn 时用作 this 的值

实例：

const array = [1, 2, 3, 4, 5];

// 对数组中的每个元素进行平方操作
const squaredArray = array.map(element => element * element);
console.log(squaredArray); // 输出: [1, 4, 9, 16, 25]

// 将数组中的每个元素转换为字符串，并添加 'th' 后缀
const stringArray = array.map((element, index) => element.toString() + 'th');
console.log(stringArray); // 输出: ['1th', '2th', '3th', '4th', '5th']

9. reduce

reduce() 方法对数组中的每个元素按序执行一个提供的 reducer 函数，每一次运行 reducer 会将先前元素的计算结果作为参数传入，最后将其结果汇总为单个返回值。

接受两个参数，语法：

reduce(callbackFn, initialValue)

callbackFn

其返回值将作为下一次调用 callbackFn 时的 accumulator 参数。对于最后一次调用，返回值将作为 reduce() 的返回值。接受四个参数：

• accumulator: 累积器，累积回调函数的返回值。如果指定了 initialValue，则初始值为 initialValue，否则初始值为数组的第一个元素。
• currentValue: 数组中正在处理的当前元素。
• index（可选）: 当前元素在数组中的索引。
• array（可选）: 调用 reduce() 方法的数组。

initialValue

可选，第一次调用回调时初始化 accumulator 的值。如果省略，则使用数组的第一个元素作为初始值，并跳过数组的第一个元素。

注意事项：

• 如果数组为空且未提供初始值，则 reduce() 方法会抛出 TypeError 异常。
• 如果数组只包含一个元素且未提供初始值，则返回数组的唯一元素。
• 如果提供了初始值，则 reduce() 方法会从数组的第一个元素开始累积。否则，从数组的第二个元素开始累积。
• reduce() 方法不会修改原始数组。
• 如果在累积过程中没有提供初始值，并且数组为空，则 reduce() 方法会抛出 TypeError 异常。

实例：

const array = [1, 2, 3, 4, 5];

// 对数组中的所有元素求和
const sum = array.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum); // 输出: 15

// 找出数组中的最大值
const max = array.reduce((accumulator, currentValue) => Math.max(accumulator, currentValue));
console.log(max); // 输出: 5

最后

这些是 JavaScript 数组中最常用的方法之一，它们为我们提供了处理和转换数组数据的强大工具。希望通过本篇文章，让你在面对数组时得心应手。

欢迎在评论区留言！

如果你也在准备春招，欢迎加我微信lyhGetup，一起交流，一起刷面经。