JS数组对象的34种方法

用户33270108008
70 阅读23分钟

一、数组是什么

在 JavaScript 中，数组是一种特殊的对象，用于表示和操作有序的数据集。数组是一种数据结构，可以存储多个值在一个变量中，并通过数字索引来访问这些值。以下是一些关于 JavaScript 数组的基本特点：

  1. 索引访问：可以通过索引访问数组中的元素，索引从0开始。例如，arr[0]将访问数组的第一个元素。
  2. 动态大小：可以随时向数组添加或删除元素，而不需要预先指定其大小。
  3. 异质性：数组可以包含不同类型的元素。
  4. 方法：JavaScript数组有大量内置方法，如push(), pop(), shift(), unshift(), splice(), slice(), map(), filter(), reduce()等，这些方法可用于操作数组。
  5. 多维数组：JavaScript中的数组也可以是二维或多维的。
  6. 关联数组：除了数字索引外，还可以使用字符串或其他对象作为键来存储和访问值。

二、转换方法

以下这些方法用于将数组转换为其他数据类型，或者将其他数据类型转换为数组。

1.concat() 连接两个或更多的数组

concat() 方法用于连接两个或多个数组。该方法不会改变现有的数组，而是返回一个新数组。

[ ]

语法：array1.concat(array2, array3,..., arrayN)

const arr = ['a', 'b', 'c']
const arr2 = ['d', 'e', 'f']
const arr3 = ['g', 'h', 'i']
const arr4 = arr.concat(arr2, arr3)
console.log(arr4) // 输出：['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i']

2.join() 把数组的所有元素放入一个字符串

join() 方法用于把数组中的所有元素转换一个字符串，元素是通过指定的分隔符进行分隔的。语法：array.join(separator) 参数说明：

  • separator 可选，指定要使用的分隔符，如果省略该参数，则使用逗号作为分隔符。

返回值： 返回一个字符串，该字符串是通过把 arrayObject 的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入 separator 字符串而生成的。

const arr = ['唱', '跳', 'rap']
console.log(arr.join())
// 输出：唱,跳,rap

3.slice() 选取数组的一部分

slice() 方法可从已有的数组中返回选定的元素，slice() 方法可提取字符串的某个部分，并以新的字符串返回被提取的部分，slice() 方法不会改变原始数组。 语法：array.slice(start, end) 参数说明：

  • start 可选，规定从何处开始选取，如果该参数为负数，则表示从原数组中的倒数第几个元素开始提取，slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素（包含最后一个元素）；
  • end 可选，规定从何处结束选取，该参数是数组片断结束处的数组下标，如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素，如果该参数为负数， 则它表示在原数组中的倒数第几个元素结束抽取，slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素（不包含最后一个元素，也就是只有倒数第二个元素）。

返回值： Array 返回一个新的数组，包含从 start（包括该元素） 到 end （不包括该元素）的 arrayObject 中的元素。

const arr = ['red', 'blue', 'green', 'yellow', 'purple']
console.log(arr.slice(-3, -1))
// 输出：['green', 'yellow']

4.toString() 把数组转换为字符串

toString() 方法可把数组转换为字符串，并返回结果

const arr = ['red', 'blue', 'green', 'yellow', 'purple']
console.log(arr.toString())
// 输出：red,blue,green,yellow,purple

三、位置方法

以下这些方法用于获取或设置数组中特定元素的位置或值。

5.indexOf() 返回数组中某个指定的元素位置

该方法将从头到尾地检索数组，看它是否含有对应的元素，开始检索的位置在数组 start 处或数组的开头（没有指定 start 参数时），如果找到一个 item，则返回 item 的第一次出现的位置，开始位置的索引为 0，如果在数组中没找到指定元素则返回 -1。

★

注：提示如果你想查找字符串最后出现的位置，请使用 lastIndexOf() 方法。

语法 ：array.indexOf(item,start)

参数说明：

  • item 必须，查找的元素；
  • start 可选，规定在数组中开始检索的位置，它的合法取值是 0 到 stringObject.length - 1，如省略该参数，则将从字符串的首字符开始检索。

返回值：Number 元素在数组中的位置，如果没有搜索到则返回 -1。

const arr = ['red', 'blue', 'green', 'yellow', 'purple', 'orange', 'pink', 'green']
console.log(arr.indexOf('green', 3))
// 输出：7
console.log(arr.indexOf('green', 0))
// 输出：2

6.lastIndexOf() 搜索数组中的元素，并返回它最后出现的位置

lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置，从该字符串的后面向前查找，如果要检索的元素没有出现，则该方法返回 -1，该方法将从尾到头地检索数组中指定元素 item，开始检索的位置在数组的 start 处或数组的结尾（没有指定 start 参数时），如果找到一个 item，则返回 item 从尾向前检索第一个次出现在数组的位置，数组的索引开始位置是从 0 开始的，如果在数组中没找到指定元素则返回 -1。

★

注：如果你想查找数组首次出现的位置，请使用 indexOf() 方法。

语法：array.lastIndexOf(item,start)

参数说明：

  • item必需，规定需检索的字符串值；
  • start可选，整数参数，规定在字符串中开始检索的位置，它的合法取值是 0 到stringObject.length - 1，如省略该参数，则将从字符串的最后一个字符处开始检索。
const arr = ['red', 'blue', 'green', 'yellow', 'purple', 'orange', 'pink', 'green']
console.log(arr.lastIndexOfindexOf('green'))
// 输出：7

7.shift() 删除并返回数组的第一个元素

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值，此方法改变数组的长度。

★

提示：移除数组末尾的元素可以使用 pop() 方法。

const arr = ['red', 'blue', 'green', 'yellow', 'purple', 'orange', 'pink', 'green']
console.log(arr.shift())
// 输出：red
console.log(arr)
// 输出：['blue', 'green', 'yellow', 'purple', 'orange', 'pink', 'green']

8.unshift() 向数组的开头添加一个或更多元素

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度，该方法将改变原数组。

★

提示: 将新项添加到数组末尾，请使用 push() 方法。

const arr = ['red', 'blue', 'green', 'yellow', 'purple', 'orange', 'pink', 'green']
console.log(arr)
// 输出：['pink', 'red', 'blue', 'green', 'yellow', 'purple', 'orange', 'pink', 'green']

9.splice() 从数组中添加或删除元素

splice() 方法用于添加或删除数组中的元素，这种方法会改变原始数组，

语法：array.splice(index,howmany,item1,.....,itemX)

参数说明：

  • index 必需，规定从何处添加/删除元素，该参数是开始插入和（或）删除的数组元素的下标，必须是数字；
  • howmany 可选，规定应该删除多少元素，必须是数字，但可以是 "0"。如果未规定此参数，则删除从 index 开始到原数组结尾的所有元素；
  • item1, ..., itemX 可选，要添加到数组的新元素。

返回值：如果删除一个元素，则返回一个元素的数组，如果未删除任何元素，则返回空数组。

var fruits = ["Banana", "Orange", "Apple", "Mango"];  
console.log(fruits.splice(2,1,"Lemon","Kiwi"))  
// 移除数组的第三个元素，并在数组第三个位置添加新元素:  
// 输出：[Banana,Orange,Lemon,Kiwi,Mango]

10.pop() 删除数组的最后一个元素并返回删除的元素

pop() 方法用于删除数组的最后一个元素并返回删除的元素，此方法会改变数组的长度。

★

提示：移除数组第一个元素，请使用 shift() 方法。

var fruits = ["Banana", "Orange", "Apple", "Mango"];  
console.log(fruits.pop())  
// 输出：Mango  
console.log(fruits)  
// 输出：["Banana", "Orange", "Apple"]

11.push() 向数组的末尾添加一个或更多元素

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度，新元素将添加在数组的末尾，此方法会改变数组的长度。

★

提示：在数组起始位置添加元素请使用 unshift() 方法。

var fruits = ["Banana", "Orange", "Apple", "Mango"];  
console.log(fruits.push('Cherry'))  
// 输出：5  
console.log(fruits)  
// 输出：['Banana', 'Orange', 'Apple', 'Mango', 'Cherry']

四、排序方法

这些方法用于对数组进行排序。

12.sort() 对数组的元素进行排序

sort() 方法用于对数组的元素进行排序，排序顺序可以是字母或数字，并按升序或降序，默认排序顺序为按字母升序（当数字是按字母顺序排列时"40"将排在"5"前面），使用数字排序，你必须通过一个函数作为参数来调用，函数指定数字是按照升序还是降序排列，这种方法会改变原始数组。

var fruits = ["Banana", "Orange", "Apple", "Mango"]; 
console.log(fruits.sort())  
//输出：['Apple', 'Banana', 'Mango', 'Orange']

13.reverse() 反转数组的元素顺序

reverse() 方法用于反转数组中元素的顺序。

var fruits = ["Banana", "Orange", "Apple", "Mango"];  
console.log(fruits.reverse())  
// 输出： ['Mango', 'Apple', 'Orange', 'Banana']

五、迭代方法

这些方法允许你遍历数组的每个元素。

14.forEach() 对数组每个元素都执行一次回调函数

forEach() 用于对数组中的每个元素执行一次提供的函数；这个方法不会改变数组的长度。（注: forEach() 对于空数组是不会执行回调函数的）

语法：array.forEach(callback(currentValue, index, arr), thisArg)

参数说明：

  • callback(currentValue, index, arr) 必需，数组中每个元素需要调用的函数；
    • currentValue 必需，当前元素；
    • index 可选，当前元素的索引值；
    • arr 可选，当前元素所属的数组对象；
  • thisArg 可选，执行 callback 函数时使用的 this 值。
const numbers = [10, 20, 30]
let sum = 0
numbers.forEach((a) => {
  sum += a
})
console.log(sum) //输出：60

15.map() 通过指定函数处理数组的每个元素，并返回处理后的数组

map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值，该方法按照原始数组元素顺序依次处理元素。

★

注：map() 不会对空数组进行检测；map() 不会改变原始数组。

语法：array.map(callback(currentValue,index,arr), thisArg)

参数说明：

  • callback(currentValue, index,arr)必须，函数，数组中的每个元素都会执行这个函数；
    • currentValue必须，当前元素的值；
    • index可选，当前元素的索引值；
    • arr可选，当前元素属于的数组对象；
  • thisArg（可选）：执行 callback 函数时使用的 this 值。
var numbers = [4, 9, 16, 25];  
console.log(numbers.map(Math.sqrt))//function函数使用Math函数，可选参数均省略  
// 输出：2,3,4,5

16.filter() 过滤符合条件的数值元素

filter() 方法创建一个新的数组，过滤出旧数组中符合条件的元素，存储到新数组中，筛选条件由调用方提供。（注：filter() 不会对空数组进行检测；filter() 不会改变原始数组）

语法：array.filter(callback(currentValue,index,arr), thisArg)

参数说明：

  • callback(currentValue, index,arr) 必需，过滤条件函数，数组中的每个元素都会执行这个函数，执行为 true 的符合筛选条件；
    • currentValue 必需，当前元素的值；
    • index 可选，当前元素的索引值；
    • arr 可选，当前元素属于的数组对象；
  • thisArg 可选，执行 callback 函数时使用的 this 值。
const ages = [32, 33, 16, 40];  
function checkAdult(age) {  
  return age >= 18;  
}  
const newArr = ages.filter(checkAdult);  
console.log(newArr) // 输出：[32,33,40]  
  
var newArr1 = ages.filter((item, index) => (item >= 18));  
console.log(newArr1); // 输出：[32,33,40]

17. find() 查找第一个符合条件的数组元素

find() 方法查找目标数组中第一个满足条件的数组元素；find() 方法会为数组中的每个元素依次调用一次传入的筛选条件，找到第一个满足条件的数组元素时，直接返回符合条件的元素，之后的元素不会再调用筛选函数，如果没有符合条件的元素返回 undefined。（注: find() 对于空数组，函数是不会执行的，find() 并没有改变数组的原始值） 语法：array.find(callback(currentValue, index, arr),thisArg)

参数说明：

  • callback(currentValue, index,arr) 必需，数组每个元素需要依次执行的函数；
    • currentValue 必需，当前元素；
    • index 可选，当前元素的索引值；
    • arr 可选，当前元素所属的数组对象；
  • thisArg 可选，执行 callback 函数时使用的 this 值。
var ages = [4, 12, 16, 20];  
function checkAdult(age) {  
  return age >= 18;  
}  
const temp= ages.find(checkAdult);  
console.log(temp) // 输出：20  
  
temp = ages.find((item, index) => { return item>= 10; });  
console.log(temp) // 输出：12

18.some() 检测数组元素中是否有元素符合指定条件

some() 方法用于检测数组中的元素是否满足指定条件（函数提供），some() 方法会为数组的每个元素依次执行 callback 函数，如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测。如果没有满足条件的元素，则返回false。

★

注：some() 不会对空数组进行检测；some() 不会改变原始数组。

语法：array.some(callback(currentValue,index,arr),thisArg) 参数说明：

  • callback(currentValue, index,arr) 必须，函数，数组中的每个元素都会执行这个函数；
    • currentValue 必须，当前元素的值；
    • index 可选，当前元素的索引值；
    • arr 可选，当前元素属于的数组对象；
  • thisArg 可选，对象作为该执行回调时使用，传递给函数，用作 "this" 的值，如果省略了 thisArg ，"this" 的值为 "undefined"。
`var ages = [3, 10, 18, 20];
function checkAdult(age) {
  return age >= 18;
}
console.log(ages.some(checkAdult))
// 输出：true 

19.every() 检测数值元素的每个元素是否都符合条件方法

every() 方法用于检测数组中所有元素是否都通过指定的测试函数；如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测；如果所有元素都满足条件，则返回 true。

语法：array.every(callback(currentValue,index,arr), thisArg)

参数说明：

  • callback（必需）：用于测试每个元素的函数。这个函数应返回一个布尔值来指示元素是否通过测试。
    • currentValue 必需，当前元素的值；
    • index 可选，当前元素的索引值；
    • arr 可选，当前元素属于的数组对象；
  • thisArg（可选）：执行 callback 函数时使用的 this 值。

返回值：返回一个布尔值，表示数组中的所有元素是否都通过了测试。

★

注：every() 不会对空数组进行检测，every() 不会改变原始数组。

const arr = [1, 2, 3, 4, 5];    
const isEven = function(num) { return num % 2 === 0; };    
const allEven = arr.every(isEven);    
console.log(allEven); // 输出: false  
  
var ages = [32, 33, 16, 40];  
console.log(ages.every((item)=>item>18)) // 输出：false  
console.log(ages.every((item)=>item>10)) // 输出：true

六、检测方法

这些方法用于检测数组的一些特性，例如是否存在某个元素或某个值是否存在于数组中。

20.includes() 判断一个数组是否包含一个指定的值

includes() 方法用来判断一个数组是否包含一个指定的值，如果是返回 true，否则false。

语法：arr.includes(searchElement,fromIndex) 参数说明：

  • searchElement 必须，需要查找的元素值；
  • fromIndex 可选，从该索引处开始查找 searchElement 如果为负值，则按升序从 array.length + fromIndex 的索引开始搜索，默认值为 0。

★

**注：**如果 fromIndex 大于等于数组长度 ，则返回 false，如果 fromIndex 为负值，计算出的索引将作为开始搜索 searchElement 的位置。如果计算出的索引小于 0，则整个数组都会被搜索。

var  site = ['runoob', 'google', 'taobao'];  
console.log(site.includes('runoob')  
// 输出：true

21. findIndex() 查找第一个符合条件的数组元素索引

findIndex() 方法查找数组中第一个符合条件的元素位置，findIndex() 方法为数组中的每个元素都调用一次函数执行，当数组中的元素在测试条件时返回 true 时，findIndex() 返回符合条件的元素的索引位置，之后的值不会再调用执行函数，如果没有符合条件的元素返回 -1。（注: findIndex() 对于空数组，函数是不会执行的; findIndex() 并没有改变数组的原始值）

语法：array.findIndex(callback(currentValue, index, arr), thisArg)

参数说明：

  • callback(currentValue, index,arr) 必须，数组每个元素需要执行的函数；
    • currentValue 必需，当前元素；
    • index 可选，当前元素的索引；
    • arr 可选，当前元素所属的数组对象；
  • thisArg 可选，执行 callback 函数时使用的 this 值。
var ages = [3, 10, 18, 20];  
function checkAdult(age) {  
  return age >= 18;  
}  
const temp = ages.findIndex(checkAdult);  
console.log(temp)  
// 输出：2  
const temp = ages.findIndex((item, index) =>( item >= 18))  
console.log(temp)  
// 输出：2

22.entries() 生成数组的可迭代对象

entries() 方法主要用于遍历数组或对象的键值对。在数组中，entries 方法返回一个新的数组迭代器对象，该对象包含数组中每个索引的键值对。例如，对于数组 arr = ["a", "b", "c"]，调用 arr.entries() 后，可以得到如下结果：

[    
  [0, "a"],    
  [1, "b"],    
  [2, "c"]    
]

具体使用方式：

var fruits = ["Banana", "Orange", "Apple", "Mango"];  
var arr = fruits.entries();  
console.log((arr.next()).value)   
console.log((arr.next()).value[1])   
// 输出：[0, 'Banana']  
// 输出：Banana

23.keys() 返回数组的可迭代对象

keys() 方法用于从数组创建一个包含数组键的可迭代对象。

`const arr = ["Banana", "Orange", "Apple", "Mango"]; 
const newArr = arr.keys();
for (const iterator of newArr) { 
  console.log(iterator);
} 
// 输出：0 1 2 3`

八、其他方法

24.copyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中

copyWithin() 方法用于将数组的内部元素复制到数组的其他位置，覆盖数组的原有元素，而不会改变数组的长度。

语法：array.copyWithin(target, start, end)

参数说明：

  • target 必需，复制到指定目标索引位置；
  • start 可选，元素复制的起始位置，默认为 0；
  • end 可选，停止复制的索引位置 (默认为 array.length)。如果为负值，表示倒数，从后往前数 (注：end 小于 start 时，该方法不生效)。
`var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"]; 
console.log(fruits.copyWithin(2, 0, 2));
// 输出： [Banana,Orange,Banana,Orange,Kiwi,Papaya]

console.log(fruits.copyWithin(2,0,-2));
// 输出：[Banana,Orange,Banana,Orange,Apple,Mango]

25.fill() 使用一个固定值来填充数组

fill() 方法用于将一个固定值替换数组的元素（注：该方法会改变原始数组）。

语法：array.fill(value, start, end)

参数说明：

  • value 必需，填充的值；
  • start 可选，开始填充位置；
  • end 可选，停止填充位置 (默认为 array.length)；
var fruits = ["Banana", "Orange", "Apple", "Mango"];  
console.log(fruits.fill("Runoob",2,4))  
// 输出：['Banana', 'Orange', 'Runoob', 'Runoob']

26.from() 通过给定的对象中创建一个数组

from() 方法是一个静态方法，用于从一个类似数组或可迭代对象中创建一个新的数组实例，如果对象是数组返回 true，否则返回 false；这个方法主要用在以下几个方面：

  1. 从类似数组对象创建数组：当你有一个类似数组的对象（例如一个NodeList或HTMLCollection），你可以使用 Array.from() 来将它转换为真正的数组。
  2. 从非可迭代对象创建数组：任何可迭代对象都可以使用 Array.from() 转换为数组。例如，一个字符串、一个Map、一个Set等。
  3. 使用映射函数：Array.from() 方法允许你提供一个映射函数，该函数会在每个元素上调用，然后将结果收集到一个新数组中。

语法：Array.from(object, mapFunction, thisArg)

参数说明：

  • object 必需，要转换为数组的对象；
  • mapFunction 可选，数组中每个元素要调用的函数；
  • thisArg 可选，映射函数 mapFunction 中的 this 对象。
var fruits = ["Banana", "Orange", "Apple", "Mango"];  
console.log(fruits.fill("Runoob",2,4))  
// 输出：['Banana', 'Orange', 'Runoob', 'Runoob']

26.from() 通过给定的对象中创建一个数组

from() 方法是一个静态方法，用于从一个类似数组或可迭代对象中创建一个新的数组实例，如果对象是数组返回 true，否则返回 false；这个方法主要用在以下几个方面：

  1. 从类似数组对象创建数组：当你有一个类似数组的对象（例如一个NodeList或HTMLCollection），你可以使用 Array.from() 来将它转换为真正的数组。
  2. 从非可迭代对象创建数组：任何可迭代对象都可以使用 Array.from() 转换为数组。例如，一个字符串、一个Map、一个Set等。
  3. 使用映射函数：Array.from() 方法允许你提供一个映射函数，该函数会在每个元素上调用，然后将结果收集到一个新数组中。

语法：Array.from(object, mapFunction, thisArg)

参数说明：

  • object 必需，要转换为数组的对象；
  • mapFunction 可选，数组中每个元素要调用的函数；
  • thisArg 可选，映射函数 mapFunction 中的 this 对象。
var arr = Array.from([1, 2, 3], x => x * 10);  
// 输出：//arr[0] == 10; arr[1] == 20; arr[2] == 30;

27.isArray() 判断一个对象是否为数组

isArray() 方法用于判断一个对象是否为数组，如果对象是数组返回 true，否则返回 false。

语法：Array.isArray(obj)

参数说明：obj 必需，要判断的对象。

var fruits = ["Banana", "Orange", "Apple", "Mango"];  
console.log(Array.isArray(fruits))  
// 输出：true

28.reduce() 将数组元素计算为一个值（从左到右）

reduce() 方法接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值，reduce() 可以作为一个高阶函数，用于函数的 compose。

注: reduce() 对于空数组是不会执行回调函数的。 语法：array.reduce(callback(total, currentValue, currentIndex, arr), initialValue) 参数说明：

  • callback(total,currentValue, index,arr ) 必需，用于执行每个数组元素的函数；
    • total 必需，初始值或计算结束后的返回值；
    • currentValue 必需，当前元素；
    • currentIndex 可选，当前元素的索引；
    • arr 可选，当前元素所属的数组对象；
  • initialValue 可选，传递给函数的初始值。
var numbers = [65, 44, 12, 4];  
function getSum(total, num) {  
  return total + num;  
}  
console.log(numbers.reduce(getSum))  
// 输出：125 //65+44+12+4

29.reduceRight() 将数组元素计算为一个值（从右到左）

reduceRight() 方法的功能和 reduce() 功能是一样的，不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。

★

注意: reduce() 对于空数组是不会执行回调函数的。

语法：array.reduceRight(callback(total, currentValue, currentIndex, arr), initialValue) 参数与reduce()一样。

var numbers = [65, 44, 12, 4];  
function getSum(total, num) {  
  return total + num;  
}  
console.log(numbers.reduce(getSum))  
// 输出：125//4+12+44+65

30.valueOf() 返回数组对象的原始值

valueOf() 方法返回 Array 对象的原始值，该原始值由 Array 对象派生的所有对象继承，valueOf() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中，**valueOf() 方法不会改变原数组，**valueOf() 是数组对象的默认方法，array.valueOf() 与 array的返回值一样。

31.of() 将一组值转换为数组

of() 方法用于将一组值转换为数组，不考虑参数的数量或类型，Array.of() 和 Array() 构造函数之间的区别在于对单个参数的处理：Array.of(7) 创建一个具有单个元素 7 的数组，而 Array(7) 创建一个 length 为 7 的空数组，如果对象是数组返回 true，否则返回 false。

Array.of(1);         // [1]  
Array.of(1, 2, 3);   // [1, 2, 3]  
Array.of(undefined); // [undefined]

32.at() 用于接收一个整数值并返回该索引对应的元素

at() 方法用于接收一个整数值并返回该索引对应的元素，允许正数和负数，负整数从数组中的最后一个元素开始倒数，匹配给定索引的数组中的元素，如果找不到指定的索引，则返回 undefined，在传递非负数时，at() 方法等价于括号表示法，例如，array[0] 和 array.at(0) 均返回第一个元素，但是，当你需要从数组的末端开始倒数时，则不能使用 Python 和 R 语言中支持的 array[-1]，因为方括号内的所有值都会被视为字符串属性，因此你最终读取的是 array["-1"]，这只是一个普通的字符串属性而不是数组索引，通常的做法是访问 length 并将其减去从末端开始的相对索引，例如：array[array.length - 1]，at() 方法允许使用相对索引，因此上面的示例可以简化为 array.at(-1)，更正式地，当 index < 0 时，该方法将访问索引 index + array.length，at() 方法是通用的，其仅期望 this 具有 length 属性和以整数为键的属性。

const array1 = [5, 12, 8, 130, 44];   
let index1 = 2;   
strt1 = `索引号为 ${index1} 的值为 ${array1.at(index1)}`;   
let index2 = -2;   
strt2 = `索引号为 ${index2} 的值为 ${array1.at(index2)}`;  
// 输出：  
// 索引号为 2 的值为 8  
// 索引号为 -2 的值为 130

33.flat() 创建一个新数组

flat() 方法方法会按照一个可指定的深度递归遍历数组，并将所有元素与遍历到的子数组中的元素合并为一个新数组返回，flat() 方法返回一个包含将数组与子数组中所有元素的新数组，该方法可用于：扁平化嵌套数组，扁平化与数组空项。

var arr3 = [1, 2, [3, 4, [5, 6]]];  
arr3.flat(2);// [1, 2, 3, 4, 5, 6]  
var arr4 = [1, 2, , 4, 5];  
arr4.flat();// [1, 2, 4, 5]

34.flatMap() 使用映射函数映射每个元素，然后将结果压缩成一个新数组

flatMap() 方法首先使用映射函数映射每个元素，然后将结果压缩成一个新数组，它与 map 连着深度值为 1 的 flat 几乎相同，但 flatMap 通常在合并成一种方法的效率稍微高一些，flatMap() 方法一个新的数组，其中每个元素都是回调函数的结果，并且结构深度 depth 值为 1。

语法：array.flatMap(callback(currentValue,index,arr), thisArg)

// 箭头函数  
flatMap((currentValue) => { /* … */ } )  
flatMap((currentValue, index) => { /* … */ } )  
flatMap((currentValue, index, array) => { /* … */ } )  
  
// 回调函数  
flatMap(callbackFn)  
flatMap(callbackFn, thisArg)  
  
// 行内回调函数  
flatMap(function(currentValue) { /* … */ })  
flatMap(function(currentValue, index) { /* … */ })  
flatMap(function(currentValue, index, array){ /* … */ })  
flatMap(function(currentValue, index, array) { /* … */ }, thisArg)

总结

以上分类并不是绝对的，有些方法可能具有多种功能，可以同时归入多个分类中，除了上述分类方法，还可以根据其他标准对 JavaScript 中的 Array 对象的方法进行分类，例如：

  1. 静态方法与实例方法：根据是否需要创建Array实例来调用，可以将Array对象的方法分为静态方法和实例方法。静态方法可以直接通过Array对象来调用，而实例方法则需要在创建Array实例后才能调用。例如，Array.isArray() 是静态方法，而 push()、pop()、slice() 等是实例方法。
  2. 修改数组的方法与非修改数组的方法：根据是否会改变原始数组，可以将Array对象的方法分为修改数组的方法和非修改数组的方法。修改数组的方法会直接改变原始数组，例如 push()、pop()、splice() 、shift()、unshift()、sort()、reverse()、fill()等；而非修改数组的方法则不会改变原始数组，例如 map()、filter()、reduce()、contact() 等。
  3. 根据作用范围分类：根据方法的作用范围，可以将Array对象的方法分为全局方法和实例方法。全局方法可以直接通过Array对象调用，而实例方法只能在Array实例上调用。例如，Array.isArray() 是全局方法，而 push()、pop()、slice() 等是实例方法。
avatar
文章
阅读
粉丝