搜索

【基础复盘】JS 数组对象的 34 种官方用法

前端大学

共 22354字，需浏览 45分钟

 · 2024-04-11

作者：克里斯叮

https://juejin.cn/post/7324531750622036003

数组（Array）作为 JavaScript 位列第一的对象， 其重要性可见一般，在这里就让我们来详细的扒一扒数 组对象都 有哪些方法，它们分别能对数组做什么。

一、数组是什么

官方对于 Array（数组）对象的解释是这样的：使用单独的变量名来存储一系列的值。简而言之就是把你要储存的值都放在一个房间里，然后给他们每人一个固定的座位号，你在找这些值的时候可以通过座位号 1、2、3...... 快速的找到你需要的数值。

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

JavaScript 中的数组与其他编程语言中的数组有所不同，因为它具有动态大小，这意味着可以在运行时添加或删除元素。以下是一些关于 JavaScript 数组的基本特点：

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

Array对象的方法可以根据其用途和功能来进行分类，本文将按照不同的分类来分别对这些方法做解释。

二、转换方法

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

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

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

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

★

注：如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。

      
      const array1 = ['a', 'b', 'c'];
const array2 = ['d', 'e', 'f'];
const array3 = ['g', 'h', 'i'];
const array4 = array1.concat(array2, array3);
console.log(array4); // 输出： ['a', 'b', 'c','d', 'e', 'f', 'g', 'h', 'i'] 

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

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

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

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

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

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

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

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

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

      
      var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
console.log(fruits.slice(-3,-1))
console.log(fruits.slice(-3))
// 输出: ['Lemon', 'Apple']
// ['Lemon', 'Apple', 'Mango'] 

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

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

★

注：数组中的元素之间用逗号分隔。 

      
      var fruits = ["Banana", "Orange", "Apple", "Mango"];
var str = fruits.toString();
console.log(str)
// 输出：Banana,Orange,Apple,Mango
三、位置方法

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

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

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

★

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

语法 ：array.indexOf(item,start)

参数说明：

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

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

      
      var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple","Mango"];
console.log(fruits.indexOf("Apple",4))
// 输出：6
console.log(fruits.indexOf("Apple",0))
// 输出：2

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

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

★

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

语法：array.lastIndexOf(item,start)

参数说明：

  • item必需，规定需检索的字符串值；
  • start可选，整数参数，规定在字符串中开始检索的位置，它的合法取值是 0 到stringObject.length - 1，如省略该参数，则将从字符串的最后一个字符处开始检索。
      
      var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple","Mango"];
console.log(fruits.lastIndexOf("Apple"))
// 输出：6

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

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

★

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

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

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

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

★

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

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

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 值。
      
      var numbers = [65, 44, 12, 4];
var temp=0;
numbers.forEach((item)=>{return temp=temp+item})
console.log(temp)
// 输出：125

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] 

这里详细解释一下 thisArg 参数的具体作用，后边再出现就不做解释了！thisArg 参数是 Array.prototype.filter() 方法的一个可选参数。它是一个值，用于指定在回调函数中作为 this 上下文执行时的上下文对象。如果没有提供 thisArg 参数，回调函数将在全局对象上作为 this 上下文执行。当你在回调函数中使用 thisArg 参数时，你实际上是在告诉 JavaScript 在执行回调函数时应该使用哪个对象作为 this 的上下文。这对于那些依赖于特定上下文的对象（如对象方法）尤其有用。

下面是一个简单的例子来帮助理解：

      
      const numbers = [1, 2, 3, 4, 5, 6];  
  
const evenNumbers = numbers.filter(function(num) {  
  return this.isEven(num); // 这里假设有一个名为 isEven 的方法在 this 上 
}, { isEven: function(num) { return num % 2 === 0; } });  
  
console.log(evenNumbers); // 输出: [2, 4, 6] 

在这个例子中，我们假设存在一个名为 isEven 的方法，该方法用于检查一个数字是否为偶数。我们使用 thisArg 参数来指定一个对象，该对象具有一个名为 isEven 的方法。在 filter() 方法中，回调函数将在这个对象上作为 this 上下文执行，因此this.isEven(num) 将调用该对象上的 isEven 方法。

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 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) 

参数说明：

  • callback可以生成一个新数组中的元素的函数，可以传入三个参数：
    • currentValue 必需，当前正在数组中处理的元素；
    • index 可选的，数组中正在处理的当前元素的索引；
    • array 可选的，被调用的 map 数组；
  • thisArg 可选，执行 callback 函数时 使用的this 值。
      
      let arr1 = ["it's Sunny in", "", "California"];
arr1.map(x => x.split(" "));
// [["it's","Sunny","in"],[""],["California"]]
arr1.flatMap(x => x.split(" "));
// ["it's","Sunny","in", "", "California"] 

flatMap 能用于在 map 期间增删项目（也就是修改 items 的数量），换句话说，它允许你遍历很多项使之成为另一些项（靠分别把它们放进去来处理），而不是总是一对一，从这个意义上讲，它的作用类似于 filter的对立面，只需返回一个 1 项元素数组以保留该项，返回一个多元素数组以添加项，或返回一个 0 项元素数组以删除该项。

总结

以上分类并不是绝对的，有些方法可能具有多种功能，可以同时归入多个分类中，除了上述分类方法，还可以根据其他标准对 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() 等是实例方法。

Array 作为 JS 中我们最常用的对象，以上就是 Array 常用的 34 种方法，将这些方法吃透用熟，能使得我们在平常的开发工作中事半功倍，提高开发效率。同时，关于数组有什么好的妙用，欢迎各位大佬评论区留言交流。

浏览 5
点赞
评论
收藏
分享

手机扫一扫分享

举报
评论
图片
表情
推荐
真高！比亚迪员工爆料比亚迪在越南的薪资水平：基本工资480万，全勤奖35万，交通补助20万，餐补110万，每周6天，每天10小时
上一篇：某大公司为逼迫员工离职，竟然把他的工位安排到厕所旁，没想到他直接开始记录领导的如厕时间，还发到公司大群...对此，你怎么看？--完--PS：欢迎在留言区留下你的观点，一起讨论提高。如果今天的文章让你有新的启发，欢迎转发分享给更多人。全文完，感谢你的耐心阅读。如果你还想看到我的文章，请一定给本
开发者全社区
0
太敢穿了！透视纱裙！性感火辣的身材
绝了呀今天的厂花：吴宣仪1995年1月26日，吴宣仪出生于海南省海口市，中国内地流行乐女歌手、影视演员。2016年2月，吴宣仪随宇宙少女发行首张迷你专辑正式出道。2018年4月，她参加《创造101》综艺选秀，获得第二名，成功加入火箭少女101组合。吴宣仪的颜值一直备受称赞，她的五官立体精致，皮肤白皙
逆锋起笔
0
​某大公司为逼迫员工离职，竟然把他的工位安排到厕所旁，没想到他直接开始记录领导的如厕时间，还发到公司大群...
上一篇：字节的跳动职级与薪资（2024年）我们与公司间的合作，宛如两艘船只在茫茫大海上相互依靠，共同抵御风浪，携手驶向成功的彼岸。然而，当航向开始产生分歧，或是波涛汹涌的风浪改变了我们的初衷，我们或许应当冷静地选择和平分手，而非在风雨中硬撑。最近，一位网友的遭遇引起了广大职场人的关注和热议。这位网友
开发者全社区
0
金融研究 | 使用Python测量关键审计事项的「信息含量」
Tips: 公众号推送后内容只能更改一次，且只能改20字符。如果内容出问题，或者想更新内容， 只能重复推送。为了更好的阅读体验，建议阅读本文博客版， 链接地址https://textdata.cn/blog/2023-01-13-information-content-of-critical-aud
大邓和他的Python
0
我看阿里的年终奖总算发了！
到4月底了，这两天看朋友圈，发现阿里的年终奖终于发了，问了问老同学，也从网上检索了不少信息，基本搞清楚了阿里今年的年终奖情况。近来来阿里一些集团对绩效等级做了较大的调整，以前的旧绩效系统中，绩效分为3.25、3.5、3.75、4和5五个等级，其中4和5是较高绩效等级，较少见。而且之前3.5绩效内部划
公子龙
0
CVPR 2024｜大视觉模型的开山之作！无需任何语言数据即可打造大视觉模型
↑ 点击蓝字 关注极市平台作者丨科技猛兽编辑丨极市平台极市导读 本文提出一种序列建模 (sequential modeling) 的方法，不使用任何语言数据，训练大视觉模型。>>加入极市CV技术交流群，走在计算机视觉的最前沿本文目录1 序列建模打造大视觉模型(来自 U
极市平台
1
金融研究(更新) | 使用Python构建关键审计事项的「信息含量」
Tips: 公众号推送后内容只能更改一次，且只能改20字符。如果内容出问题，或者想更新内容， 只能重复推送。为了更好的阅读体验，建议阅读本文博客版， 链接地址https://textdata.cn/blog/2023-01-13-information-content-of-critical-aud
大邓和他的Python
0
字节的跳动职级与薪资（2024年）
上一篇：阿里公布年终奖，P7, 3.5+，22W年终奖，还有35W长期现金激励，真香字节跳动自2012年3月成立以来，已经迅速成长为一个全球性的科技公司。其产品和服务已经遍布全球150多个国家与地区，并且支持超过75种不同的语言。在字节跳动的官方网站上，列出了一系列引人注目的产品和服务，包括但不限于
开发者全社区
0
国宝级神颜！来自新疆的美人
安排今天的厂花：佟丽娅1983年8月8日，佟丽娅出生于新疆伊犁察布查尔，中国内地影视女演员，舞蹈员。2000年，佟丽娅成为了新疆歌舞团的舞蹈演员，2004年，进入中国歌舞团担任舞蹈演员。丫丫的颜值，相信绝对是收割了一大波粉丝新疆的美女绝对称得上惊艳，迪丽热巴、古力娜扎，而佟丽娅却是美得像另一个境界。
逆锋起笔
0
盘点Lombok的几个骚操作，你绝对没用过！
👉 欢迎加入小哈的星球 ，你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 /  赠书福利全栈前后端分离博客项目 2.0 版本完结啦， 演示链接：http://116.62.199.48/ ，新项目正在酝酿中
小哈学Java
0
点赞
评论
收藏
分享

手机扫一扫分享

举报