前言：
JavaScript这门强大而灵活的编程语言中，数组（Array）无疑是最基础且使用最频繁的数据结构之一。它允许我们以有序的方式存储多个值，并提供了丰富的内置方法来操作这些值，包括但不限于添加、删除、搜索、遍历等。掌握JavaScript数组的方法，不仅能够提高我们的编程效率，还能让我们在处理复杂数据结构时更加得心应手。本文将全面解析JavaScript数组的各种常用方法，并通过实战示例展示它们的应用场景，帮助读者深入理解并灵活运用这些强大的工具。
数组方法：
1.at()方法
at()方法接受一个参数，参数为想要获取元素的索引，如果索引为正数，它将从数组的开头开始计数，如果索引为负数，它将从数组的末尾开始计数，如果索引超出了数组的范围，则 at() 方法将返回 undefined。
let array = ["张三", "李四", "王五"];
console.log(array.at(0)); // 张三
console.log(array.at(-1)); // 王五
console.log(array.at(-2)); // 李四
console.log(array.at(3)); // undefined2.concat()方法
concat()方法在 JavaScript 中用于合并两个或多个数组。这个方法不会改变现有的数组，而是返回一个新数组。
let array1 = ["a", "b", "c"];
let array2 = ["d", "e", "f"];
let array3 = array1.concat(array2);
console.log(array3); // ["a", "b", "c", "d", "e", "f"]
let array4 = array1.concat(array2, "g", "h");
console.log(array4); // ["a", "b", "c", "d", "e", "f", "g", "h"]
console.log(array1); // ["a", "b", "c"]
console.log(array2); // ["d", "e", "f"]上述代码中声明一个变量array3用来接受array1.concat(array2)，打印结果可以看出concat()方法将array2合并到了array1数组的后面，声明一个变量array4并打印可以发现也可以合并数组和单个元素 ，最后打印出array1和array2可以发现原始数组不会被修改。
3.copyWithin()方法
copyWithin()方法是 JavaScript 中的一个数组方法，它允许你将数组内指定范围的元素复制到数组的另一个位置，并覆盖原有元素，但不改变数组的长度。这个方法会改变原数组。这个方法有三个参数，第一个参数target 是以0 为基数的索引，复制序列到该位置。如果是负数，则表示倒数；第二个参数start也是以复制序列的起始位置。如果为负值，表示倒数；第三个参数end 是以复制序列的结束位置（默认为 array.length）。如果 end 被省略，copyWithin 方法会一直复制到 array.length 的末尾。如果为负值，表示倒数。
let array1 = [1, 2, 3, 4, 5, 6];
//从索引 0 开始，一直到索引 6（但不包括 6），将这些元素复制到从索引 4 开始的位置
console.log(array1.copyWithin(4)); // [1, 2, 3, 4, 1, 2]
console.log(array1); // [1, 2, 3, 4, 1, 2]
let array2 = [1, 2, 3, 4, 5, 6];
//参数为负数时，则表示倒数，这里相当于array2.copyWithin(2)
console.log(array2.copyWithin(-4)); // [1, 2, 1, 2, 3, 4]
let array3 = [1, 2, 3, 4, 5, 6];
// 如果第三个被省略，copyWithin 会一直复制到数组末尾
console.log(array3.copyWithin(3, 1)); // [1, 2, 3, 2, 3, 4]
let array4 = [1, 2, 3, 4, 5, 6];
//将索引2到4的元素（即3, 4, 5）复制到索引0的位置
console.log(array4.copyWithin(0, 2, 5)); // [3, 4, 5, 4, 5, 6]注意事项：
1.如果 target 大于等于数组长度，则不会进行任何操作，因为新元素不会被添加到数组中。
2.如果 start 或 end 是负数，它们表示从数组末尾开始的索引。
3.如果 end 被省略，copyWithin 方法会复制直到数组末尾。
4.如果 start 或 end 大于数组长度，copyWithin 会将其视为数组长度。
5.如果 start 大于 end，则不会进行任何复制操作。
6.该方法不会改变原数组的长度。
4.entries()方法
entries()方法返回一个新的 Array Iterator 对象，该对象包含数组中每个索引的键/值对。每个索引值被视作数组的键（key），而数组元素被视作值（value）。这个方法主要用于迭代数组，特别是在使用 for...of 循环时，它允许你同时访问数组的索引和值。
let array = ['张三','李四','王五']
// 返回一个新的 Array Iterator 对象
console.log(array.entries()); // Array Iterator {}
for(let [index,value] of array.entries()){
console.log(index,value)
}
// 输出结果：
// 0 '张三'
// 1 '李四'
// 2 '王五'5.every()方法
every()方法是用于测试数组的所有元素是否都通过了被提供的函数测试。它返回一个布尔值（true 或 false）。
语法：
arr.every(function(currentValue, index, arr), thisValue)该方法有两个参数：
1.第一个参数是用来测试每个元素的函数。它接受三个参数：
（1）currentValue（必需）：数组中正在处理的当前元素。
（2）index(可选)：数组中正在处理的当前元素的索引。
（3）arr(可选)：调用的数组本身
2.第二个参数thisValue（可选）：执行回调函数时用作 this 的值。
let array = [10, 20, 30];
var isArray1 = array.every(function (item) {
return item > 9;
});
console.log(isArray1); //true
var isArray2 = array.every(function (item) {
return item > 10;
});
// 只有全部满足时，才输出true
console.log(isArray2); //true6.fill()方法
fill()方法它用于将一个固定值填充到一个新数组或者覆盖数组中从起始索引到终止索引内的所有元素（不包括终止索引处的元素）。这个方法不会改变原数组的长度。返回修改后的数组。
语法：
arr.fill(value[, start[, end]])1.value(必需)：用来填充数组元素的值。
2.start(可选)：起始索引，默认值为 0。
3.end(可选)：终止索引（不包含该索引），默认值为数组的长度。
let array1 = [1, 2, 3, 4];
// 使用 0 填充数组
array1.fill(0);
console.log(array1); // [0, 0, 0, 0]
let array2 = [1, 2, 3, 4];
// 从索引 1 开始，用 0 填充到数组末尾（不包含索引 3）
array2.fill(0, 1, 3);
console.log(array2); // [1, 0, 0, 4]
let array3 = [1, 2, 3, 4];
// 如果为负数则表示倒数，相当于array3.fill(0, 2, 3)
array3.fill(0, -2, -1);
console.log(array3); // [1, 2, 0, 4]
let array4 = [1, 2, 3, 4];
// 如果 start 索引大于 end 索引，则 fill() 方法不会执行任何操作
array4.fill(0, 3, 1);
console.log(array4); // [1, 2, 3, 4]7.filter()方法
filter()它用于创建一个新数组，这个新数组包含通过所提供函数实现的测试的所有元素。换句话说，filter() 方法遍历数组中的每个元素，并对每个元素执行一次提供的函数。如果该函数对某个元素返回 true，则该元素会被包含在返回的数组中。
语法：
const newArray = arr.filter(function(currentValue, index, arr), thisValue)该方法有两个参数：
1.第一个参数是用来测试每个元素的函数。它接受三个参数：
（1）currentValue（必需）：数组中正在处理的当前元素。
（2）index(可选)：数组中正在处理的当前元素的索引。
（3）arr(可选)：调用的数组本身
2.第二个参数thisValue（可选）：执行回调函数时用作 this 的值。
let array = [10, 20, 30];
// 会将满足条件的元素放到新数组中
var isArray1 = array.filter(function (item) {
return item > 10;
});
console.log(isArray1); // [20, 30]8.find()方法
find()方法它返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
语法：
arr.find(function(currentValue, index, arr), thisValue)该方法有两个参数：
1.第一个参数是用来测试每个元素的函数。它接受三个参数：
（1）currentValue（必需）：数组中正在处理的当前元素。
（2）index(可选)：数组中正在处理的当前元素的索引。
（3）arr(可选)：调用的数组本身
2.第二个参数thisValue（可选）：执行回调函数时用作 this 的值。
let array = [10, 20, 30];
let isArray1 = array.find(function (item) {
// 查找数组中第一个大于 10 的元素
return item > 10;
});
console.log(isArray1); // 20
let isArray2 = array.find(function (item) {
// 没有符合条件的输出undefined
return item > 100;
});
console.log(isArray2); // undefined9.findIndex()
findIndex()方法跟find()方法相似，不同的是，findindex()方法它返回数组中满足提供的测试函数的第一个元素的索引，没有则返回-1。
语法：
arr.findIndex(function(currentValue, index, arr), thisValue)该方法有两个参数：
1.第一个参数是用来测试每个元素的函数。它接受三个参数：
（1）currentValue（必需）：数组中正在处理的当前元素。
（2）index(可选)：数组中正在处理的当前元素的索引。
（3）arr(可选)：调用的数组本身
2.第二个参数thisValue（可选）：执行回调函数时用作 this 的值。
let array = [10, 20, 30];
let isArray1 = array.findIndex(function (item) {
// 查找数组中第一个大于 10 的元素的索引
return item > 10;
});
console.log(isArray1); // 1
let isArray2 = array.findIndex(function (item) {
// 没有符合条件的输出-1
return item > 100;
});
console.log(isArray2); // -110.findLast()方法
findLast()方法和find()方法相似，唯一不同点是findLast()方法是从右到左查找元素，与find()方法相反
语法：
arr.findLast(function(currentValue, index, arr), thisValue)该方法有两个参数：
1.第一个参数是用来测试每个元素的函数。它接受三个参数：
（1）currentValue（必需）：数组中正在处理的当前元素。
（2）index(可选)：数组中正在处理的当前元素的索引。
（3）arr(可选)：调用的数组本身
2.第二个参数thisValue（可选）：执行回调函数时用作 this 的值。
let array = [10, 20, 30, 9, 13];
let isArray1 = array.findLast(function (item) {
// 查找数组中从右到左第一个大于 20 的元素
return item > 20;
});
console.log(isArray1); // 30
let isArray2 = array.findLast(function (item) {
// 没有符合条件的输出undefined
return item > 100;
});
console.log(isArray2); // undefined11.findLastIndex()方法
findLastIndex()方法与findIndex()方法相似，唯一不同点是findLastIndex()方法是从右到左查找元素的索引，与findIndex()方法相反
语法：
arr.findLastIndex(function(currentValue, index, arr), thisValue)该方法有两个参数：
1.第一个参数是用来测试每个元素的函数。它接受三个参数：
（1）currentValue（必需）：数组中正在处理的当前元素。
（2）index(可选)：数组中正在处理的当前元素的索引。
（3）arr(可选)：调用的数组本身
2.第二个参数thisValue（可选）：执行回调函数时用作 this 的值。
let array = [10, 20, 30, 9, 13];
let isArray1 = array.findLastIndex(function (item) {
// 查找数组中从右到左第一个大于 20 的元素的索引
return item > 20;
});
console.log(isArray1); // 2
let isArray2 = array.findLastIndex(function (item) {
// 没有符合条件的输出-1
return item > 100;
});
console.log(isArray2); // -112.flat()方法
flat()方法，它可以将一个多维数组展开成一个新的数组，并返回这个新数组。你可以指定一个深度（depth）参数，来限制展开的层数；如果不指定深度，则默认展开所有层级的嵌套数组。
语法：
arr.flat([depth])多维数组：
多维数组就是数组里的元素还是一个数组，我们将这个数组称为多维数组，比方说[ 1, 2, 3, [ 4, 5]]我们称这个数组为二维数组。[ 1, 2, 3, [ 4, 5, [ 6, 7]]]这个称为三维数组，以此类推。
const arr1 = [1, 2, [3, 4]];
console.log(arr1.flat()); // [1, 2, 3, 4]
// 原数组未被修改
console.log(arr1); // [1, 2, [3, 4]];
const arr2 = [1, 2, [3, [4, 5]]];
// 注意：只有一层的嵌套数组被展开了
console.log(arr2.flat()); // [1, 2, 3, [4, 5]]
// 如果想数组全部展开，可以使用 Infinity 作为深度，无论多少层的嵌套数组都被展开了
console.log(arr2.flat(Infinity)); // [1, 2, 3, 4, 5]13.flatMap()方法
flatMap()方法结合了 map 和 flat 的功能，它首先映射每个元素到另一个值（可能是一个数组），然后将结果“压平”成一个新数组
语法：
arr.flatMap(function(currentValue, index, arr), thisValue)该方法有两个参数：
1.第一个参数是用来测试每个元素的函数。它接受三个参数：
（1）currentValue（必需）：数组中正在处理的当前元素。
（2）index(可选)：数组中正在处理的当前元素的索引。
（3）arr(可选)：调用的数组本身
2.第二个参数thisValue（可选）：执行回调函数时用作 this 的值。
const arr = [1, 2, 3, 4];
const res = arr.flatMap((n) => [n * 2]); // [2, 4, 6, 8]
console.log(res) flatMap()方法收集所有由回调函数返回的新数组，并将它们“压平”成一个单一的数组。在这个例子中，它收集了四个数组 [2]、[4]、[6] 和 [8]，并将它们合并成一个数组 [2, 4, 6, 8]。
扫一扫
5万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
