JS 数组对象的 34 种官方用法

更新日期: 2024-02-18阅读: 455标签: 数组

数组(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 种方法,将这些方法吃透用熟,能使得我们在平常的开发工作中事半功倍,提高开发效率。

作者:克里斯叮,https://juejin.cn/post/7324531750622036003

链接: https://fly63.com/article/detial/12648

探索JavaScript数组奥秘

avaScript数组同后端语言一样,具有它自己的数据结构,归根结底,这种数据结构,本质就是一种集合。在后端语言中(如java,.net等),数组是这样定义的:数组是用来存储相同数据类型的集合

js使用数组+循环+条件实现数字转换为汉字的简单方法。

单个数字转汉字的解决方法:利用数组存储0-9的汉字、 ary.length和str.length不用多说,这是指ary数组和str字符串的长度。这里我们需要注意的是str.charAt(j)和ary[i],分别指在str这个字符串中索引为j的元素,在ary中索引为i的元素。

[译]async-await 数组循环的几个坑

在 Javascript 循环中使用 async/ await 循环遍历数组似乎很简单,但是在将两者结合使用时需要注意一些非直观的行为。让我们看看三个不同的例子,看看你应该注意什么,以及哪个循环最适合特定用例。

数组、字符串去重

今天说的数组和字符串去重呢,主要用到es6新的数据结构 Set,它类似于数组,但是成员的值都是唯一的,没有重复的值,所以活用Set来进行数组和字符串的去重。

JavaScript 数组方法

数组方法:1、Array.join([param]) 方法:将数组中所有的元素都转换为字符串并连接起来,通过字符 param 连接,默认使用逗号,返回最后生成的字符串2、Array.reverse() 方法:将数组中的元素颠倒顺序(在原数组中重新排列它们),返回逆序数组

如何删除JavaScript 数组中的虚值

falsy(虚值)是在 Boolean 上下文中已认定可转换为‘假‘的值.JavaScript 在需要用到布尔类型值的上下文中使用强制类型转换(Type Conversion )将值转换为布尔值,比如:在条件语句或者循环语句中。

JavaScript中十种一步拷贝数组的方法

JavaScript中我们经常会遇到拷贝数组的场景,但是都有哪些方式能够来实现呢,我们不妨来梳理一下。扩展运算符(浅拷贝)自从ES6出现以来,这已经成为最流行的方法。

JS数组的几个经典api

本文主要来讲数组api的一些操作,如简单实现扁平化n维数组、数组去重、求数组最大值、数组求和、排序、对象和数组的转化等。扁平化嵌套数组/展平和阵列孔——flat()

关于Vue不能监听(watch)数组变化

vue无法监听数组变化的情况,但是数组在下面两种情况下无法监听:利用索引直接设置数组项时,例如arr[indexofitem]=newValue;修改数组的长度时,例如arr.length=newLength

JS计算两个数组的交集、差集、并集、补集(多种实现方式)

使用 ES5 语法来实现虽然会麻烦些,但兼容性最好,不用考虑浏览器 JavaScript 版本,使用 ES5 语法来实现虽然会麻烦些,但兼容性最好,不用考虑浏览器 JavaScript 版本。也不用引入其他第三方库。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!