前端宝典二十三：Array最常用的34个方法

这里列举了Array最常用的34个方法
其中静态方法两个、实例方法32个，对他们进行了分类比较，有助于更好的掌握。

一、前言：手写一个深拷贝

以下是一个用 JavaScript 手写的深拷贝方法，考虑了正则表达式、日期对象、数组和普通对象：

function deepCopy(obj) {if (obj === null || typeof obj!== 'object') {return obj;}let copy;if (Array.isArray(obj)) {copy = [];for (let i = 0; i < obj.length; i++) {copy[i] = deepCopy(obj[i]);}} else if (obj instanceof Date) {copy = new Date(obj);} else if (obj instanceof RegExp) {copy = new RegExp(obj.source, obj.flags);} else {copy = {};for (let key in obj) {if (obj.hasOwnProperty(key)) {copy[key] = deepCopy(obj[key]);}}}return copy;
}

使用示例：

const original = {number: 42,string: 'hello',date: new Date(),regex: /abc/g,array: [1, 2, { nested: 'value' }],object: { key: 'value' }
};const copied = deepCopy(original);console.log(copied);

这里要注意的是

通过obj instanceof Date判断是不是日期格式，如果是的话使用new Date(obj)
通过obj instanceof RegExp判断是不是正则格式，如果是的话使用new RegExp(obj.source, obj.flags)，这里涉及到了正则的知识点。

这个函数通过判断输入对象的类型，分别处理不同的情况，确保能够正确地深拷贝各种类型的数据。

二、Array静态方法

1、Array.from

静态方法从可迭代或类数组对象创建一个新的浅拷贝的数组实例。

let arr = Array.from('foo');
console.log(arr);
// ["f", "o", "o"]let lst = [1,2,3,{a: 1}];
let newList = Array.from(lst);
newList[3].a = 2;
console.log(newList);
console.log(lst);
// [ 1, 2, 3, { a: 2 } ]
// [ 1, 2, 3, { a: 2 } ]console.log(Array.from([1, 2, 3], (x) => x + x));
// [2, 4, 6]

2、Array.of

通过可变数量的参数创建一个新的 Array 实例，而不考虑参数的数量或类型。

console.log(Array.of('foo', 2, 'bar', true));
// [ 'foo', 2, 'bar', true ]

三、Array实例方法

Array.prototype._
可以在实例对象中使用的方法

1、at( )方法

接收一个整数值并返回该索引对应的元素，允许正数和负数。负整数从数组中的最后一个元素开始倒数。

let arr1 = [1,2,3,4,5];
let num = arr1.at(-1);
console.log(num);
// 5

2、concat( ) 方法

用于合并两个或多个数组。此方法不会更改现有数组，而是返回一个新数组。

let arr1 = [1,2,3,4,5];
let arr2 = [6,7,8];
let newArr = arr1.concat(arr2);
console.log(newArr);
console.log(arr1)
[1, 2, 3, 4,5, 6, 7, 8
]
[ 1, 2, 3, 4, 5 ]

3、copyWithin(atrget, start, end) 方法

浅复制数组的一部分到同一数组中的另一个位置，并返回它，不会改变原数组的长度。

target：序列开始替换的目标位置
start 可选：要复制的元素序列的起始位置
end 可选：要复制的元素序列的结束位置，但不包括

console.log([1, 2, 3, 4, 5].copyWithin(0, 2));
// [ 3, 4, 3, 4, 5 ]

同样下面代码可以相同输出

console.log([1, 2, 3, 4, 5].copyWithin(0, 2, 4));
// [ 3, 4, 3, 4, 5 ]

因为end忽略的话，默认从start到数组结尾都被复制

4、entries()方法

返回一个新的数组迭代器对象，该对象包含数组中每个索引的键/值对。

const array1 = ['a', 'b', 'c'];
const iterator1 = array1.entries();
console.log(iterator1.next().value);
console.log(iterator1.next().value);
console.log(iterator1.next().value);
console.log(iterator1.next().value);
//[ 0, 'a' ]
//[ 1, 'b' ]
//[ 2, 'c' ]
//undefined

由于返回一个数组迭代器对象，所以可以被遍历

const a = ["a", "b", "c"];for (const [index, element] of a.entries()) {console.log(index, element);
}// 0 'a'
// 1 'b'
// 2 'c'

接下来是几个遍历的方法了。

5、every() 方法

测试一个数组内的所有元素是否都能通过指定函数的测试。它返回一个布尔值。

const array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every((x => x < 40)));
// true

6、filter() 方法

创建给定数组一部分的浅拷贝，其包含通过所提供函数实现的测试的所有元素。

const words = ['spray', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter((word) => word.length > 6);
console.log(result);
// ["exuberant", "destruction", "present"]

7、forEach() 方法

对数组的每个元素执行一次给定的函数，这个最常用

const array1 = ['a', 'b', 'c'];array1.forEach((element) => console.log(element));// Expected output: "a"
// Expected output: "b"
// Expected output: "c"

8、map() 方法

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

const array1 = [1, 4, 9, 16];
// Pass a function to map
const map1 = array1.map((x) => x * 2);
console.log(map1);
// [2, 8, 18, 32]

9、some() 方法

测试数组中是否至少有一个元素通过了由提供的函数实现的测试。如果在数组中找到一个元素使得提供的函数返回 true，则返回 true；否则返回 false。它不会修改数组。

const array1 = [1, 30, 39, 29, 10, 13];
let res = array1.some((x => x%2 === 0));
console.log(res);

几个遍历方法的end

10、fill() 方法

用一个固定值填充一个数组中从起始索引（默认为 0）到终止索引（默认为 array.length）内的全部元素。它返回修改后的数组。

const array1 = [1, 2, 3, 4];// Fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// [1, 2, 0, 0]// Fill with 5 from position 1
console.log(array1.fill(5, 1));
// [1, 5, 5, 5]console.log(array1.fill(6));
// [6, 6, 6, 6]

11、find() 方法

返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

const array1 = [5, 12, 8, 130, 44];const found = array1.find((element) => element > 10);console.log(found);
// 12

12、findLast() 方法

反向迭代数组，并返回满足提供的测试函数的第一个元素的值。如果没有找到对应元素，则返回 undefined。

13、findIndex() 方法

返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1。

const array1 = [5, 12, 8, 130, 44];const found = array1.findIndex((element) => element > 10);console.log(found);
// 1

14、findLastIndex() 方法

反向迭代数组，并返回满足所提供的测试函数的第一个元素的索引。若没有找到对应元素，则返回 -1。

15、flat() 方法

创建一个新的数组，并根据指定深度递归地将所有子数组元素拼接到新的数组中。
可以传参，表示打平几次，如果不确定有几层，需要全打平，参数使用Infinity

const arr1 = [0, 1, 2, [3, 4]];console.log(arr1.flat());
// [0, 1, 2, 3, 4]const arr2 = [0, 1, [2, [3, [4, 5]]]];console.log(arr2.flat());
// [0, 1, 2, Array [3, Array [4, 5]]]console.log(arr2.flat(2));
// [0, 1, 2, 3, Array [4, 5]]console.log(arr2.flat(Infinity));
// [0, 1, 2, 3, 4, 5]

16、flatMap() 方法

对数组中的每个元素应用给定的回调函数，然后将结果展开一级，返回一个新数组。它等价于在调用 map() 方法后再调用深度为 1 的 flat() 方法（arr.map(…args).flat()），但比分别调用这两个方法稍微更高效一些。

const arr1 = [1, 2, 1];
const result = arr1.flatMap((num) => (num === 2 ? [2, 2] : 1));
console.log(result);
// [1, 2, 2, 1]

上面对数组中的2进行替换为[2, 2]并打平放进去了

const array1 = [1, 2, 1, 2];
const result = array1.flatMap((num) => (num === 2 ? [2, 2] : 1));
console.log(result);
//[ 1, 2, 2, 1, 2, 2 ]

17、includes() 方法

用来判断一个数组是否包含一个指定的值，根据情况，如果包含则返回 true，否则返回 false。

const array1 = [1, 2, 3];console.log(array1.includes(2));
// trueconst pets = ['cat', 'dog', 'bat'];console.log(pets.includes('cat'));
// trueconsole.log(pets.includes('at'));
// false

18、join() 方法

将一个数组（或一个类数组对象）的所有元素连接成一个字符串并返回这个字符串，用逗号或指定的分隔符字符串分隔。如果数组只有一个元素，那么将返回该元素而不使用分隔符。

const elements = ['Fire', 'Air', 'Water'];console.log(elements.join());
//  "Fire,Air,Water"console.log(elements.join(''));
//  "FireAirWater"console.log(elements.join('-'));
// "Fire-Air-Water"

如果没有给定分隔符，会默认使用‘，’如上面代码的第一个
这个方法和String里的split()方法相互互换：

const array1 = [1, 2, 1, 2];
let str = array1.join('');
console.log(str);
let arrs = str.split('');
console.log(arrs);
//1212
//[ '1', '2', '1', '2' ]

19、keys() 方法

返回一个新的数组迭代器对象，其中包含数组中每个索引的键。

const array1 = ['a', 'b', 'c'];
const iterator = array1.keys();for (const key of iterator) {console.log(key);
}// 0
// 1
// 2

20、values() 方法

返回一个新的数组迭代器对象，该对象迭代数组中每个元素的值。这个方法和第19的keys()刚好对应

const array1 = ['a', 'b', 'c'];
const iterator = array1.values();for (const value of iterator) {console.log(value);
}// "a"
// "b"
// "c"

21、push() 方法

将指定的元素添加到数组的末尾，并返回新的数组长度。

const animals = ['pigs', 'goats', 'sheep'];
const count = animals.push('cows');
console.log(count);
// 4
console.log(animals);
// ["pigs", "goats", "sheep", "cows"]

22、pop() 方法

从数组中删除最后一个元素，并返回该元素的值。此方法会更改数组的长度。

const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];console.log(plants.pop());
//  "tomato"console.log(plants);
// ["broccoli", "cauliflower", "cabbage", "kale"]plants.pop();console.log(plants);
// ["broccoli", "cauliflower", "cabbage"]

23、shift() 方法

从数组中删除第一个元素，并返回该元素的值。此方法更改数组的长度。

const array1 = [1, 2, 3];const firstElement = array1.shift();console.log(array1);
// [2, 3]console.log(firstElement);
// 1

24、unshift() 方法

将指定元素添加到数组的开头，并返回数组的新长度。

const array1 = [1, 2, 3];console.log(array1.unshift(4, 5));
// 5console.log(array1);
// [4, 5, 1, 2, 3]

以上四个方法，添加新元素的返回长度，删除元素的都是返回该元素。

25、reduce() 方法

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

const array1 = [1, 2, 3, 4];// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce((accumulator, currentValue) => accumulator + currentValue,initialValue,
);console.log(sumWithInitial);
// Expected output: 10

上面代码中传入了初始值initialValue = 0，如果不传结果也一样，因为默认是从列表第一个元素开始作为初始值

26、reverse() 方法

就地反转数组中的元素，并返回同一数组的引用。数组的第一个元素会变成最后一个，数组的最后一个元素变成第一个。换句话说，数组中的元素顺序将被翻转，变为与之前相反的方向。

const array1 = ['one', 'two', 'three'];
console.log('array1:', array1);
// ["one", "two", "three"]const reversed = array1.reverse();
console.log('reversed:', reversed);
// ["three", "two", "one"]console.log('array1:', array1);
// ["three", "two", "one"]

Careful: reverse is destructive – it changes the original array. 这个方法是修改原数组的
如果想不修改原数组而去翻转，请用下面的方法

27、toReversed() 方法

是 reverse() 方法对应的复制版本。它返回一个元素顺序相反的新数组。

const items = [1, 2, 3];
console.log(items); // [1, 2, 3]const reversedItems = items.toReversed();
console.log(reversedItems); // [3, 2, 1]
console.log(items); // [1, 2, 3]

28、sort() 方法

就地对数组的元素进行排序，并返回对相同数组的引用。默认排序是将元素转换为字符串，然后按照它们的 UTF-16 码元值升序排序。

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// ["Dec", "Feb", "Jan", "March"]const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// [1, 100000, 21, 30, 4]

这个方法是改变原数组的，如果想不改变原数组排序，请用下面的方法：

29、 toSorted() 方法

是 sort() 方法的复制方法版本。它返回一个新数组，其元素按升序排列。

const months = ["Mar", "Jan", "Feb", "Dec"];
const sortedMonths = months.toSorted();
console.log(sortedMonths); // ['Dec', 'Feb', 'Jan', 'Mar']
console.log(months); // ['Mar', 'Jan', 'Feb', 'Dec']const values = [1, 10, 21, 2];
const sortedValues = values.toSorted((a, b) => a - b);
console.log(sortedValues); // [1, 2, 10, 21]
console.log(values); // [1, 10, 21, 2]

30、slice() 方法

返回一个新的数组对象，这一对象是一个由 start 和 end 决定的原数组的浅拷贝（包括 start，不包括 end），其中 start 和 end 代表了数组元素的索引。原始数组不会被改变。

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];console.log(animals.slice(2));
// ["camel", "duck", "elephant"]console.log(animals.slice(2, 4));
// ["camel", "duck"]console.log(animals.slice(1, 5));
// ["bison", "camel", "duck", "elephant"]console.log(animals.slice(-2));
// ["duck", "elephant"]console.log(animals.slice(2, -1));
// ["camel", "duck"]console.log(animals.slice());
// ["ant", "bison", "camel", "duck", "elephant"]

31、splice() 方法

就地移除或者替换已存在的元素和/或添加新的元素。

const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// Inserts at index 1
console.log(months);
// ["Jan", "Feb", "March", "April", "June"]months.splice(4, 1, 'May');
// Replaces 1 element at index 4
console.log(months);
// ["Jan", "Feb", "March", "April", "May"]

32、 with() 方法

是使用方括号表示法修改指定索引值的复制方法版本。它会返回一个新数组，其指定索引处的值会被新值替换。

const arr = [1, 2, 3, 4, 5];
console.log(arr.with(2, 6)); // [1, 2, 6, 4, 5]
console.log(arr); // [1, 2, 3, 4, 5]