Appearance
JS Array
1. Immutable 实例方法
1.1. keys()
keys() 方法返回一个新的数组迭代器对象,其中包含数组中每个索引的键。
返回值
一个新的可迭代迭代器对象。
示例
JavaScript
const array1 = ['a', 'b', 'c'];
const iterator = array1.keys();
for (const key of iterator) {
console.log(key);
}
// Expected output: 0
// Expected output: 1
// Expected output: 21
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
1.2. values()
values() 方法返回一个新的数组迭代器对象,该对象迭代数组中每个元素的值。
返回值
一个新的可迭代迭代器对象。
示例
JavaScript
const array1 = ['a', 'b', 'c'];
const iterator = array1.values();
for (const value of iterator) {
console.log(value);
}
// Expected output: "a"
// Expected output: "b"
// Expected output: "c"1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
1.3. entries()
entries() 方法返回一个新的数组迭代器对象,该对象包含数组中每个索引的键/值对。
返回值
一个新的可迭代迭代器对象。
示例
JavaScript
const array1 = ['a', 'b', 'c'];
const iterator1 = array1.entries();
console.log(iterator1.next().value);
// Expected output: Array [0, "a"]
console.log(iterator1.next().value);
// Expected output: Array [1, "b"]1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
1.4. [Symbol.iterator]()
Array 实例的 [Symbol.iterator]() 方法实现了可迭代协议,允许数组被大多数期望可迭代对象的语法所使用,例如展开语法和 for...of 循环。它返回一个数组迭代器对象,该对象会产生数组中每个索引的值。
该属性的初始值与 values 属性的初始值是相同的函数对象。
返回值
与 values() 相同的返回值:一个新的可迭代迭代器对象,它会生成数组中每个索引的值。
示例
JavaScript
const array1 = ['a', 'b', 'c'];
const iterator1 = array1[Symbol.iterator]();
for (const value of iterator1) {
console.log(value);
}
// Expected output: "a"
// Expected output: "b"
// Expected output: "c"1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
1.5. forEach(callbackFn[, thisArg])
forEach() 方法对数组的每个元素执行一次给定的函数。
参数
callbackFn:为数组中每个元素执行的函数。并会丢弃它的返回值。该函数被调用时将传入以下参数:element:数组中正在处理的当前元素;index:数组中正在处理的当前元素的索引;array:调用了forEach()的数组本身;
thisArg:执行callbackFn时用作this的值。
返回值
undefined。
示例
JavaScript
const array1 = ['a', 'b', 'c'];
array1.forEach((element) => console.log(element));
// Expected output: "a"
// Expected output: "b"
// Expected output: "c"1
2
3
4
5
6
7
2
3
4
5
6
7
1.6. at(index)
at() 方法接收一个整数值并返回该索引对应的元素,允许正数和负数。负整数从数组中的最后一个元素开始倒数。
参数
index:要返回的数组元素的索引(从零开始),会被转换为整数。负数索引从数组末尾开始计数 —— 如果 index < 0,则会访问 index + array.length 位置的元素。
返回值
返回数组中与给定索引匹配的元素。如果 index < -array.length 或 index >= array.length,则总是返回 undefined,而不会尝试访问相应的属性。
示例
JavaScript
const array1 = [5, 12, 8, 130, 44];
let index = 2;
console.log(`An index of ${index} returns ${array1.at(index)}`);
// Expected output: "An index of 2 returns 8"
index = -2;
console.log(`An index of ${index} returns ${array1.at(index)}`);
// Expected output: "An index of -2 returns 130"1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
1.7. includes(searchElement[, fromIndex])
includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 false。
参数
searchElement:需要查找的值。fromIndex:开始搜索的索引(从零开始),会转换为整数。- 负索引从数组末尾开始计数 —— 如果
fromIndex < 0,那么实际使用的是fromIndex + array.length。然而在这种情况下,数组仍然从前往后进行搜索; - 如果
fromIndex < -array.length或者省略fromIndex,则使用0,这将导致整个数组被搜索; - 如果
fromIndex >= array.length,则不会搜索数组并返回false;
- 负索引从数组末尾开始计数 —— 如果
返回值
一个布尔值,如果在数组中(或者在 fromIndex 所指示的数组部分中,如果指定 fromIndex 的话)找到 searchElement 值,则该值为 true。
示例
JavaScript
const array1 = [1, 2, 3];
console.log(array1.includes(2));
// Expected output: true
const pets = ['cat', 'dog', 'bat'];
console.log(pets.includes('cat'));
// Expected output: true
console.log(pets.includes('at'));
// Expected output: false1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
1.8. indexOf(searchElement[, fromIndex])
indexOf() 方法返回数组中第一次出现给定元素的下标,如果不存在则返回 -1。
参数
searchElement:数组中要查找的元素。fromIndex:开始搜索的索引(从零开始),会转换为整数。- 负索引从数组末尾开始计数 —— 如果
frommindex < 0,使用frommindex + array.length。注意,在这种情况下,仍然从前到后搜索数组; - 如果
fromIndex < -array.length或者省略了fromIndex,将使用0,而导致整个数组被搜索; - 如果
fromIndex >= array.length,数组不会继续搜索并返回-1;
- 负索引从数组末尾开始计数 —— 如果
返回值
首个被找到的元素在数组中的索引位置; 若没有找到则返回 -1。
示例
JavaScript
const beasts = ['ant', 'bison', 'camel', 'duck', 'bison'];
console.log(beasts.indexOf('bison'));
// Expected output: 1
// Start from index 2
console.log(beasts.indexOf('bison', 2));
// Expected output: 4
console.log(beasts.indexOf('giraffe'));
// Expected output: -11
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
1.9. lastIndexOf(searchElement[, fromIndex])
lastIndexOf() 方法返回数组中给定元素最后一次出现的索引,如果不存在则返回 -1。该方法从 fromIndex 开始向前搜索数组。
参数
searchElement:被查找的元素。fromIndex:以0起始的索引,表明反向搜索的起始位置,会被转换为整数。- 如果
fromIndex < 0,则从数组末尾开始倒数计数 —— 即使用fromIndex + array.length的值; - 如果
fromIndex < -array.length,则不搜索数组并返回-1。从概念上讲,你可以把它想象成从数组开始之前不存在的位置开始反向搜索,这条路径上没有任何数组元素,因此searchElement永远不会被找到; - 如果
fromIndex >= array.length或者省略了fromIndex,则使用array.length - 1,这会导致搜索整个数组。可以将其理解为从数组尾部之后不存在的位置开始向前搜索。最终会访问到数组最后一个元素,并继续向前开始实际搜索数组元素;
- 如果
返回值
数组中该元素最后一次出现的索引,如未找到返回 -1。
示例
JavaScript
const animals = ['Dodo', 'Tiger', 'Penguin', 'Dodo'];
console.log(animals.lastIndexOf('Dodo'));
// Expected output: 3
console.log(animals.lastIndexOf('Tiger'));
// Expected output: 11
2
3
4
5
6
7
2
3
4
5
6
7
1.10. findIndex(callbackFn[, thisArg])
findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。若没有找到对应元素则返回 -1。
另请参阅 find() 方法,它返回满足测试函数的第一个元素(而不是它的索引)。
参数
callbackFn:为数组中的每个元素执行的函数。它应该返回一个真值以指示已找到匹配元素,否则返回一个假值。该函数被调用时将传入以下参数:element:数组中当前正在处理的元素;index:正在处理的元素在数组中的索引;array:调用了findIndex()的数组本身;
thisArg:执行callbackFn时用作this的值。
返回值
数组中第一个满足测试条件的元素的索引。否则返回 -1。
示例
JavaScript
const array1 = [5, 12, 8, 130, 44];
const isLargeNumber = (element) => element > 13;
console.log(array1.findIndex(isLargeNumber));
// Expected output: 31
2
3
4
5
6
2
3
4
5
6
1.11. findLastIndex(callbackFn[, thisArg])
findLastIndex() 方法反向迭代数组,并返回满足所提供的测试函数的第一个元素的索引。若没有找到对应元素,则返回 -1。
另请参见 findLast() 方法,该方法返回最后一个满足测试函数的元素的值(而不是它的索引)。
参数
callbackFn:对数组中的每个元素执行的函数。回调必须返回一个真值,表示已找到匹配的元素,否则返回一个假值。函数在被调用时会传递以下参数:element:当前遍历到的元素;index:当前正在处理的元素的索引;array:调用findLastIndex()的数组本身;
thisArg:执行callbackFn时,用作this的值。
返回值
数组中通过测试的最后一个(索引最大)元素的索引。如果没有找到任何匹配的元素,则返回 -1。
示例
JavaScript
const array1 = [5, 12, 50, 130, 44];
const isLargeNumber = (element) => element > 45;
console.log(array1.findLastIndex(isLargeNumber));
// Expected output: 3
// Index of element with value: 1301
2
3
4
5
6
7
2
3
4
5
6
7
1.12. find(callbackFn[, thisArg])
find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。
参数
callbackFn:为数组中的每个元素执行的函数。它应该返回一个真值来表示已经找到了匹配的元素。该函数被调用时将传入以下参数:element:数组中当前正在处理的元素;index:正在处理的元素在数组中的索引;array:调用了find()的数组本身;
thisArg可选:执行callbackFn时用作this的值。
返回值
数组中第一个满足所提供测试函数的元素的值,否则返回 undefined。
示例
JavaScript
const array1 = [5, 12, 8, 130, 44];
const found = array1.find((element) => element > 10);
console.log(found);
// Expected output: 121
2
3
4
5
6
2
3
4
5
6
1.13. findLast(callbackFn[, thisArg])
findLast() 方法反向迭代数组,并返回满足提供的测试函数的第一个元素的值。如果没有找到对应元素,则返回 undefined。
参数
callbackFn:数组中测试元素的函数。回调应该返回一个真值,表示已找到匹配的元素,否则返回一个假值。函数在被调用时会传递以下参数:element:当前遍历到的元素;index:当前遍历到的元素的索引(位置);array:调用findLast()的数组本身;
thisArg:执行callbackFn时,用作this的值。
返回值
数组中满足提供的测试函数索引最高的元素;如果没有元素匹配,返回 undefined。
示例
JavaScript
const array1 = [5, 12, 50, 130, 44];
const found = array1.findLast((element) => element > 45);
console.log(found);
// Expected output: 1301
2
3
4
5
6
2
3
4
5
6
1.14. filter(callbackFn[, thisArg])
filter() 方法创建给定数组一部分的浅拷贝,其包含通过所提供函数实现的测试的所有元素。
参数
callbackFn(element, index, array):为数组中的每个元素执行的函数。它应该返回一个真值以将元素保留在结果数组中,否则返回一个假值。该函数被调用时将传入以下参数:element:数组中当前正在处理的元素;index:正在处理的元素在数组中的索引;array:调用了filter()的数组本身;
thisArg:执行callbackFn时用作this的值。
返回值
返回给定数组的一部分的浅拷贝,其中只包括通过提供的函数实现的测试的元素。如果没有元素通过测试,则返回一个空数组。
示例
JavaScript
const words = ['spray', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter((word) => word.length > 6);
console.log(result);
// Expected output: Array ["exuberant", "destruction", "present"]1
2
3
4
5
6
2
3
4
5
6
1.15. every(callbackFn[, thisArg])
every() 方法测试一个数组内的所有元素是否都能通过指定函数的测试。它返回一个布尔值。
参数
callbackFn(element, index, array):为数组中的每个元素执行的函数。它应该返回一个真值以指示元素通过测试,否则返回一个假值。该函数被调用时将传入以下参数:element:数组中当前正在处理的元素;index:正在处理的元素在数组中的索引;array:调用了every()的数组本身;
thisArg:执行callbackFn时用作this的值。
返回值
如果 callbackFn 为每个数组元素返回真值,则为 true。否则为 false。
示例
JavaScript
const isBelowThreshold = (currentValue) => currentValue < 40;
const array1 = [1, 30, 39, 29, 10, 13];
console.log(array1.every(isBelowThreshold));
// Expected output: true1
2
3
4
5
6
2
3
4
5
6
1.16. some(callbackFn[, thisArg])
some() 方法测试数组中是否至少有一个元素通过了由提供的函数实现的测试。如果在数组中找到一个元素使得提供的函数返回 true,则返回 true;否则返回 false。它不会修改数组。
参数
callbackFn:为数组中的每个元素执行的函数。它应该返回一个真值以指示元素通过测试,否则返回一个假值。该函数被调用时将传入以下参数:element:数组中当前正在处理的元素;index:正在处理的元素在数组中的索引;array:调用了some()的数组本身;
thisArg:执行callbackFn时用作this的值。
返回值
如果回调函数对数组中至少一个元素返回一个真值,则返回 true。否则返回 false。
示例
JavaScript
const array = [1, 2, 3, 4, 5];
// Checks whether an element is even
const even = (element) => element % 2 === 0;
console.log(array.some(even));
// Expected output: true1
2
3
4
5
6
7
2
3
4
5
6
7
1.17. slice([start[, end]])
slice() 方法返回一个新的数组对象,这一对象是一个由 start 和 end 决定的原数组的浅拷贝(包括 start,不包括 end),其中 start 和 end 代表了数组元素的索引。原始数组不会被改变。
参数
start:提取起始处的索引(从0开始),会转换为整数。- 如果索引是负数,则从数组末尾开始计算 —— 如果
start < 0,则使用start + array.length; - 如果
start < -array.length或者省略了start,则使用0; - 如果
start >= array.length,则不提取任何元素;
- 如果索引是负数,则从数组末尾开始计算 —— 如果
end:提取终止处的索引(从0开始),会转换为整数。slice()会提取到但不包括end的位置。- 如果索引是负数,则从数组末尾开始计算 —— 如果
end < 0,则使用end + array.length; - 如果
end < -array.length,则使用0; - 如果
end >= array.length或者省略了end,则使用array.length,提取所有元素直到末尾; - 如果
end在规范化后小于或等于start,则不提取任何元素;
- 如果索引是负数,则从数组末尾开始计算 —— 如果
返回值
一个含有被提取元素的新数组。
示例
JavaScript
const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
console.log(animals.slice(2));
// Expected output: Array ["camel", "duck", "elephant"]
console.log(animals.slice(2, 4));
// Expected output: Array ["camel", "duck"]
console.log(animals.slice(1, 5));
// Expected output: Array ["bison", "camel", "duck", "elephant"]
console.log(animals.slice(-2));
// Expected output: Array ["duck", "elephant"]
console.log(animals.slice(2, -1));
// Expected output: Array ["camel", "duck"]
console.log(animals.slice());
// Expected output: Array ["ant", "bison", "camel", "duck", "elephant"]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
1.18. flat([depth])
flat() 方法创建一个新的数组,并根据指定深度递归地将所有子数组元素拼接到新的数组中。
参数
depth:指定要提取嵌套数组的结构深度,默认值为 1。
返回值
一个新的数组,其中包含拼接后的子数组元素。
示例
JavaScript
const arr1 = [0, 1, 2, [3, 4]];
console.log(arr1.flat());
// expected output: Array [0, 1, 2, 3, 4]
const arr2 = [0, 1, [2, [3, [4, 5]]]];
console.log(arr2.flat());
// expected output: Array [0, 1, 2, Array [3, Array [4, 5]]]
console.log(arr2.flat(2));
// expected output: Array [0, 1, 2, 3, Array [4, 5]]
console.log(arr2.flat(Infinity));
// expected output: Array [0, 1, 2, 3, 4, 5]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1.19. map(callbackFn[, thisArg])
map() 方法创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。
参数
callbackFn:为数组中的每个元素执行的函数。它的返回值作为一个元素被添加为新数组中。该函数被调用时将传入以下参数:element:数组中当前正在处理的元素;index:正在处理的元素在数组中的索引;array:调用了map()的数组本身;
thisArg:执行callbackFn时用作this的值。
返回值
一个新数组,每个元素都是回调函数的返回值。
示例
JavaScript
const array1 = [1, 4, 9, 16];
// Pass a function to map
const map1 = array1.map((x) => x * 2);
console.log(map1);
// Expected output: Array [2, 8, 18, 32]1
2
3
4
5
6
7
2
3
4
5
6
7
1.20. flatMap(callbackFn[, thisArg])
flatMap() 方法对数组中的每个元素应用给定的回调函数,然后将结果展开一级,返回一个新数组。它等价于在调用 map() 方法后再调用深度为 1 的 flat() 方法(arr.map(...args).flat()),但比分别调用这两个方法稍微更高效一些。
参数
callbackFn:一个在数组的每个元素上执行的函数。它应该返回一个包含新数组元素的数组,或是要添加到新数组中的单个非数组值。该函数将被传入以下参数:element:数组中正在处理的当前元素;index:数组中正在处理的当前元素的索引;array:调用flatMap()的当前数组;
thisArg:在执行callbackFn时用作this的值。
返回值
一个新的数组,其中每个元素都是回调函数的结果,并且被展开一级。
示例
JavaScript
const arr1 = [1, 2, 1];
const result = arr1.flatMap((num) => (num === 2 ? [2, 2] : 1));
console.log(result);
// Expected output: Array [1, 2, 2, 1]1
2
3
4
5
6
2
3
4
5
6
1.21. join([separator])
join() 方法将一个数组(或一个类数组对象)的所有元素连接成一个字符串并返回这个字符串,用逗号或指定的分隔符字符串分隔。如果数组只有一个元素,那么将返回该元素而不使用分隔符。
参数
separator:指定一个字符串来分隔数组的每个元素。如果需要,将分隔符转换为字符串。如果省略,数组元素用逗号(,)分隔。如果 separator 是空字符串(""),则所有元素之间都没有任何字符。
返回值
一个所有数组元素连接的字符串。如果 arr.length 为 0,则返回空字符串。
示例
JavaScript
const elements = ['Fire', 'Air', 'Water'];
console.log(elements.join());
// Expected output: "Fire,Air,Water"
console.log(elements.join(''));
// Expected output: "FireAirWater"
console.log(elements.join('-'));
// Expected output: "Fire-Air-Water"1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
1.22. reduce(callbackFn[, initialValue])
reduce() 方法对数组中的每个元素按序执行一个提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。
第一次执行回调函数时,不存在 “上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行,则需要传递初始值。否则,数组索引为 0 的元素将被用作初始值,迭代器将从第二个元素开始执行(即从索引为 1 而不是 0 的位置开始)。
参数
callbackFn:为数组中每个元素执行的函数。其返回值将作为下一次调用callbackFn时的accumulator参数。对于最后一次调用,返回值将作为reduce()的返回值。该函数被调用时将传入以下参数:accumulator:上一次调用callbackFn的结果。在第一次调用时,如果指定了initialValue则为指定的值,否则为array[0]的值;currentValue:当前元素的值。在第一次调用时,如果指定了initialValue,则为array[0]的值,否则为array[1];currentIndex:currentValue在数组中的索引位置。在第一次调用时,如果指定了initialValue则为0,否则为1;array:调用了reduce()的数组本身;
initialValue:第一次调用回调时初始化accumulator的值。如果指定了initialValue,则callbackFn从数组中的第一个值作为currentValue开始执行。如果没有指定initialValue,则accumulator初始化为数组中的第一个值,并且callbackFn从数组中的第二个值作为currentValue开始执行。在这种情况下,如果数组为空(没有第一个值可以作为accumulator返回),则会抛出错误。
返回值
使用 reducer 回调函数遍历整个数组后的结果。
示例
JavaScript
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: 101
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
1.23. reduceRight(callbackFn[, initialValue])
reduceRight() 方法对累加器(accumulator)和数组的每个值(按从右到左的顺序)应用一个函数,并使其成为单个值。
对于从左至右遍历的相似方法,请参阅 reduce()。
参数
callbackFn:为数组中的每个元素执行的函数。其返回值将作为下一次调用callbackFn时的accumulator参数。对于最后一次调用,返回值将成为reduceRight()的返回值。该函数被调用时将传入以下参数:accumulator:上一次调用callbackFn的结果。在第一次调用时,如果指定了initialValue则为指定的值,否则为数组最后一个元素的值;currentValue:数组中当前正在处理的元素;index:正在处理的元素在数组中的索引;array:调用了reduceRight()的数组本身;
initialValue:首次调用callbackFn时累加器的值。如果不提供初始值,则将使用数组中的最后一个元素,并在迭代时跳过它。没有初始值的情况下,在空数组上调用reduceRight()会产生TypeError。
返回值
聚合后的结果值。
示例
JavaScript
const array1 = [
[0, 1],
[2, 3],
[4, 5],
];
const result = array1.reduceRight((accumulator, currentValue) =>
accumulator.concat(currentValue),
);
console.log(result);
// Expected output: Array [4, 5, 2, 3, 0, 1]1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
1.24. concat(*value)
concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组。
参数
value:数组和/或值,将被合并到一个新的数组中。如果省略了所有 value 参数,则 concat 会返回调用此方法的现存数组的一个浅拷贝。
返回值
新的 Array 实例。
示例
JavaScript
const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = array1.concat(array2);
console.log(array3);
// Expected output: Array ["a", "b", "c", "d", "e", "f"]1
2
3
4
5
6
2
3
4
5
6
1.25. with(index, value)
Array 实例的 with() 方法是使用方括号表示法修改指定索引值的复制方法版本。它会返回一个新数组,其指定索引处的值会被新值替换。
参数
index:要修改的数组索引(从0开始),将会转换为整数。- 负数索引会从数组末尾开始计数 —— 即当
index < 0时,会使用index + array.length; - 如果规范化后的索引超出数组边界,会抛出
RangeError;
- 负数索引会从数组末尾开始计数 —— 即当
value:要分配给指定索引的任何值。
返回值
一个全新的数组,其中 index 索引处的元素被替换为 value。
示例
JavaScript
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]1
2
3
2
3
1.26. toSpliced(start[, deleteCount*(, item)])
Array 实例的 toSpliced() 方法是 splice() 方法的复制版本。它返回一个新数组,并在给定的索引处删除和/或替换了一些元素。
参数
start:从0开始计算的索引,表示要开始改变数组的位置,它会被转换为整数。- 如果
start < 0,则从数组末尾开始计数,使用start + array.length; - 如果
start < -array.length或者省略了start,则使用0; - 如果
start >= array.length,不会删除任何元素,但该方法将表现为添加元素的函数,添加提供的所有元素;
- 如果
deleteCount:一个整数,指示数组中要从
start删除的元素数量。如果
deleteCount被省略了,或者如果它的值大于或等于由start指定的位置到数组末尾的元素数量,将会删除从start到数组末尾的所有元素。但是,如果你想要传递任何item参数,则应向deleteCount传递Infinity值,以删除start之后的所有元素,因为显式的undefined会转换为0。如果
deleteCount是0或者负数,则不会删除元素。在这种情况下,你应该指定至少一个新元素。item:元素将从
start开始添加到数组当中。如果你没有指定任何元素,
toSpliced()只会从数组中删除元素。
返回值
一个新数组,由 start 之前的所有元素、item1、item2、...、itemN,以及 start + deleteCount 之后的所有元素组成。
示例
JavaScript
const months = ["Jan", "Mar", "Apr", "May"];
// 在索引 1 处添加一个元素
const months2 = months.toSpliced(1, 0, "Feb");
console.log(months2); // ["Jan", "Feb", "Mar", "Apr", "May"]
// 从第 2 个索引开始删除两个元素
const months3 = months2.toSpliced(2, 2);
console.log(months3); // ["Jan", "Feb", "May"]
// 在索引 1 处用两个新元素替换一个元素
const months4 = months3.toSpliced(1, 1, "Feb", "Mar");
console.log(months4); // ["Jan", "Feb", "Mar", "May"]
// 原数组不会被修改
console.log(months); // ["Jan", "Mar", "Apr", "May"]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1.27. toSorted([compareFn])
Array 实例的 toSorted() 方法是 sort() 方法的复制方法版本。它返回一个新数组,其元素按升序排列。
参数
compareFn:指定一个定义排序顺序的函数。如果省略,则将数组元素转换为字符串,然后根据每个字符的 Unicode 码位值进行排序。
a:用于比较的第一个元素;b:用于比较的第二个元素;
返回值
一个新数组,其元素按升序排序。
示例
JavaScript
// 1. 对数组进行排序
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]
// 2. 在稀疏数组上使用 toSorted()
console.log(["a", "c", , "b"].toSorted()); // ['a', 'b', 'c', undefined]
console.log([, undefined, "a", "b"].toSorted()); // ["a", "b", undefined, undefined]
// 3. 在非数组对象上调用 toSorted()
const arrayLike = {
length: 3,
unrelated: "foo",
0: 5,
2: 4,
};
console.log(Array.prototype.toSorted.call(arrayLike));
// [4, 5, undefined]1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
1.28. toReversed()
Array 实例的 toReversed() 方法是 reverse() 方法对应的复制版本。它返回一个元素顺序相反的新数组。
返回值
一个包含以相反顺序排列元素的新数组。
示例
JavaScript
// 1. 反转数组中的元素
const items = [1, 2, 3];
const reversedItems = items.toReversed();
console.log(reversedItems); // [3, 2, 1]
console.log(items); // [1, 2, 3]
// 2. 在稀疏数组上使用 toReversed()
console.log([1, , 3].toReversed()); // [3, undefined, 1]
console.log([1, , 3, 4].toReversed()); // [4, 3, undefined, 1]
// 3. 在非数组对象上调用 toReversed()
const arrayLike = {
length: 3,
unrelated: "foo",
2: 4,
};
console.log(Array.prototype.toReversed.call(arrayLike));
// [4, undefined, undefined]
// '0' 和 '1' 两个索引不存在,所以它们会变成 undefined1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
1.29. toString()
toString() 方法返回一个字符串,表示指定的数组及其元素。
返回值
一个表示数组元素的字符串。
示例
JavaScript
const array1 = [1, 2, 'a', '1a'];
console.log(array1.toString());
// Expected output: "1,2,a,1a"1
2
3
4
2
3
4
1.30. toLocaleString([locales[, options]])
toLocaleString() 方法返回一个字符串,表示数组中的所有元素。每个元素通过调用它们自己的 toLocaleString 方法转换为字符串,并且使用特定于语言环境的字符串(例如逗号 ,)分隔开。
参数
locales:带有 BCP 47 语言标签的字符串,或者此类字符串的数组。对于locales参数的一般形式和说明,可以参见Intl主页面的参数说明。options:一个具有配置属性的对象。对于数字,请参见Number.prototype.toLocaleString();对于日期,请参见Date.prototype.toLocaleString()。
返回值
一个字符串,表示数组中的所有元素。
示例
JavaScript
const array1 = [1, 'a', new Date('21 Dec 1997 14:12:00 UTC')];
const localeString = array1.toLocaleString('en', { timeZone: 'UTC' });
console.log(localeString);
// Expected output: "1,a,12/21/1997, 2:12:00 PM",
// This assumes "en" locale and UTC timezone - your results may vary1
2
3
4
5
6
2
3
4
5
6
2. Mutable 实例方法
2.1. fill(value[, start[, end]])
fill() 方法用一个固定值填充一个数组中从起始索引(默认为 0)到终止索引(默认为 array.length)内的全部元素。它返回修改后的数组。
参数
value:用来填充数组元素的值。注意所有数组中的元素都将是这个确定的值:如果value是个对象,那么数组的每一项都会引用这个元素。start:基于零的索引,从此开始填充,转换为整数。- 负数索引从数组的末端开始计算,如果
start < 0,则使用start + array.length; - 如果
start < -array.length或start被省略,则使用0; - 如果
start >= array.length,没有索引被填充;
- 负数索引从数组的末端开始计算,如果
end:基于零的索引,在此结束填充,转换为整数。fill()填充到但不包含end索引。- 负数索引从数组的末端开始计算,如果
end < 0,则使用end + array.length; - 如果
end < -array.length,则使用0; - 如果
end >= array.length或end被省略,则使用array.length,导致所有索引都被填充; - 如果经标准化后,
end的位置在start之前或之上,没有索引被填充;
- 负数索引从数组的末端开始计算,如果
返回值
经 value 填充修改后的数组。
示例
JavaScript
const array1 = [1, 2, 3, 4];
// Fill with 0 from position 2 until position 4
console.log(array1.fill(0, 2, 4));
// Expected output: Array [1, 2, 0, 0]
// Fill with 5 from position 1
console.log(array1.fill(5, 1));
// Expected output: Array [1, 5, 5, 5]
console.log(array1.fill(6));
// Expected output: Array [6, 6, 6, 6]1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
2.2. copyWithin(target[, start[, end]])
copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置,并返回它,不会改变原数组的长度。
参数
target:序列开始替换的目标位置,以0为起始的下标表示,且将被转换为整数。- 负索引将从数组末尾开始计数 —— 如果
target < 0,则实际是target + array.length; - 如果
target < -array.length,则使用0; - 如果
target >= array.length,则不会拷贝任何内容; - 如果
target位于start之后,则复制只会持续到array.length结束(换句话说,copyWithin()永远不会扩展数组);
- 负索引将从数组末尾开始计数 —— 如果
start:要复制的元素序列的起始位置,以0为起始的下标表示,且将被转换为整数。- 负索引将从数组末尾开始计数 —— 如果
start < 0,则实际是start + array.length; - 如果省略
start或start < -array.length,则默认为0; - 如果
start >= array.length,则不会拷贝任何内容;
- 负索引将从数组末尾开始计数 —— 如果
end:要复制的元素序列的结束位置,以0为起始的下标表示,且将被转换为整数。copyWithin将会拷贝到该位置,但不包括end这个位置的元素。- 负索引将从数组末尾开始计数 —— 如果
end < 0,则实际是end + array.length; - 如果
end < -array.length,则使用0; - 如果省略
end或end >= array.length,则默认为array.length,这将导致直到数组末尾的所有元素都被复制; - 如果
end位于start之前,则不会拷贝任何内容;
- 负索引将从数组末尾开始计数 —— 如果
返回值
改变后的数组。
示例
JavaScript
const array1 = ['a', 'b', 'c', 'd', 'e'];
// Copy to index 0 the element at index 3
console.log(array1.copyWithin(0, 3, 4));
// Expected output: Array ["d", "b", "c", "d", "e"]
// Copy to index 1 all elements from index 3 to the end
console.log(array1.copyWithin(1, 3));
// Expected output: Array ["d", "d", "e", "d", "e"]1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
2.3. push(*element)
push() 方法将指定的元素添加到数组的末尾,并返回新的数组长度。
参数
element:添加到数组末尾的元素。
返回值
调用方法的对象的新 length 属性。
示例
JavaScript
const animals = ['pigs', 'goats', 'sheep'];
const count = animals.push('cows');
console.log(count);
// Expected output: 4
console.log(animals);
// Expected output: Array ["pigs", "goats", "sheep", "cows"]
animals.push('chickens', 'cats', 'dogs');
console.log(animals);
// Expected output: Array ["pigs", "goats", "sheep", "cows", "chickens", "cats", "dogs"]1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
2.4. pop()
pop() 方法从数组中删除最后一个元素,并返回该元素的值。此方法会更改数组的长度。
参数
返回值
从数组中删除的元素(当数组为空时返回 undefined)。
示例
JavaScript
const plants = ['broccoli', 'cauliflower', 'cabbage', 'kale', 'tomato'];
console.log(plants.pop());
// Expected output: "tomato"
console.log(plants);
// Expected output: Array ["broccoli", "cauliflower", "cabbage", "kale"]
plants.pop();
console.log(plants);
// Expected output: Array ["broccoli", "cauliflower", "cabbage"]1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
2.5. shift()
shift() 方法从数组中删除第一个元素,并返回该元素的值。此方法更改数组的长度。
返回值
从数组中删除的元素;如果数组为空则返回 undefined。
示例
JavaScript
const array1 = [1, 2, 3];
const firstElement = array1.shift();
console.log(array1);
// Expected output: Array [2, 3]
console.log(firstElement);
// Expected output: 11
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
2.6. unshift(*element)
unshift() 方法将指定元素添加到数组的开头,并返回数组的新长度。
参数
element:添加到 arr 开头的元素。
返回值
返回调用方法对象的新 length 属性。
示例
JavaScript
const array1 = [1, 2, 3];
console.log(array1.unshift(4, 5));
// Expected output: 5
console.log(array1);
// Expected output: Array [4, 5, 1, 2, 3]1
2
3
4
5
6
7
2
3
4
5
6
7
2.7. splice(start[, deleteCount*(, item)])
splice() 方法就地移除或者替换已存在的元素和/或添加新的元素。
要创建一个删除和/或替换部分内容而不改变原数组的新数组,请使用 toSpliced()。要访问数组的一部分而不修改它,参见 slice()。
参数
start:从0开始计算的索引,表示要开始改变数组的位置,它会被转换成整数。- 负索引从数组末尾开始计算 —— 如果
-buffer.length <= start < 0,使用start + array.length; - 如果
start < -array.length,使用0; - 如果
start >= array.length,则不会删除任何元素,但是该方法会表现为添加元素的函数,添加所提供的那些元素; - 如果
start被省略了(即调用splice()时不传递参数),则不会删除任何元素。这与传递undefined不同,后者会被转换为0;
- 负索引从数组末尾开始计算 —— 如果
deleteCount:一个整数,表示数组中要从
start开始删除的元素数量。如果省略了
deleteCount,或者其值大于或等于由start指定的位置到数组末尾的元素数量,那么从start到数组末尾的所有元素将被删除。但是,如果你想要传递任何item参数,则应向deleteCount传递Infinity值,以删除start之后的所有元素,因为显式的undefined会转换为0。如果
deleteCount是0或者负数,则不会移除任何元素。在这种情况下,你应该至少指定一个新元素。item:从
start开始要加入到数组中的元素。如果不指定任何元素,
splice()将只从数组中删除元素。
返回值
一个包含了删除的元素的数组。
如果只移除一个元素,则返回一个元素的数组。
如果没有删除任何元素,则返回一个空数组。
示例
JavaScript
const months = ['Jan', 'March', 'April', 'June'];
months.splice(1, 0, 'Feb');
// Inserts at index 1
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "June"]
months.splice(4, 1, 'May');
// Replaces 1 element at index 4
console.log(months);
// Expected output: Array ["Jan", "Feb", "March", "April", "May"]1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
2.8. sort([compareFn])
sort() 方法就地对数组的元素进行排序,并返回对相同数组的引用。默认排序是将元素转换为字符串,然后按照它们的 UTF-16 码元值升序排序。
由于它取决于具体实现,因此无法保证排序的时间和空间复杂度。
如果想要不改变原数组的排序方法,可以使用 toSorted()。
参数
compareFn:定义排序顺序的函数。返回值应该是一个数字,其符号表示两个元素的相对顺序:如果 a 小于 b,返回值为负数,如果 a 大于 b,返回值为正数,如果两个元素相等,返回值为 0。NaN 被视为 0。该函数使用以下参数调用:
a:第一个用于比较的元素。不会是undefined;b:第二个用于比较的元素。不会是undefined;
如果省略该函数,数组元素会被转换为字符串,然后根据每个字符的 Unicode 码位值进行排序。
返回值
经过排序的原始数组的引用。注意数组是就地排序的,不会进行复制。
示例
JavaScript
const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// Expected output: Array ["Dec", "Feb", "Jan", "March"]
const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// Expected output: Array [1, 100000, 21, 30, 4]1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
2.9. reverse()
reverse() 方法就地反转数组中的元素,并返回同一数组的引用。数组的第一个元素会变成最后一个,数组的最后一个元素变成第一个。换句话说,数组中的元素顺序将被翻转,变为与之前相反的方向。
要在不改变原始数组的情况下反转数组中的元素,使用 toReversed()。
返回值
原始数组反转后的引用。注意,数组是就地反转的,并且没有复制。
示例
JavaScript
const array1 = ['one', 'two', 'three'];
console.log('array1:', array1);
// Expected output: "array1:" Array ["one", "two", "three"]
const reversed = array1.reverse();
console.log('reversed:', reversed);
// Expected output: "reversed:" Array ["three", "two", "one"]
// Careful: reverse is destructive -- it changes the original array.
console.log('array1:', array1);
// Expected output: "array1:" Array ["three", "two", "one"]1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11