大厂技术 高级前端 Node进阶
点击上方 程序员成长指北,关注公众号
回复1,加入高级Node交流群
数组(Array)作为 JavaScript 位列第一的对象, 其重要性可见一般,在这里就让我们来详细的扒一扒数组对象都有哪些方法,它们分别能对数组做什么。
一、数组是什么
官方对于 Array(数组)对象的解释是这样的:使用单独的变量名来存储一系列的值。简而言之就是把你要储存的值都放在一个房间里,然后给他们每人一个固定的座位号,你在找这些值的时候可以通过座位号 1、2、3...... 快速的找到你需要的数值。
在 JavaScript 中,数组是一种特殊的对象,用于表示和操作有序的数据集。数组是一种数据结构,可以存储多个值在一个变量中,并通过数字索引来访问这些值。
JavaScript 中的数组与其他编程语言中的数组有所不同,因为它具有动态大小,这意味着可以在运行时添加或删除元素。以下是一些关于 JavaScript 数组的基本特点:
索引访问:可以通过索引访问数组中的元素,索引从0开始。例如,arr[0]将访问数组的第一个元素。
动态大小:可以随时向数组添加或删除元素,而不需要预先指定其大小。
异质性:数组可以包含不同类型的元素。
方法:JavaScript数组有大量内置方法,如push(), pop(), shift(), unshift(), splice(), slice(), map(), filter(), reduce()等,这些方法可用于操作数组。
多维数组:JavaScript中的数组也可以是二维或多维的。
关联数组:除了数字索引外,还可以使用字符串或其他对象作为键来存储和访问值。
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;这个方法主要用在以下几个方面:
从类似数组对象创建数组:当你有一个类似数组的对象(例如一个NodeList或HTMLCollection),你可以使用 Array.from() 来将它转换为真正的数组。
从非可迭代对象创建数组:任何可迭代对象都可以使用 Array.from() 转换为数组。例如,一个字符串、一个Map、一个Set等。
使用映射函数: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 对象的方法进行分类,例如:
静态方法与实例方法:根据是否需要创建Array实例来调用,可以将Array对象的方法分为静态方法和实例方法。静态方法可以直接通过Array对象来调用,而实例方法则需要在创建Array实例后才能调用。例如,Array.isArray() 是静态方法,而 push()、pop()、slice() 等是实例方法。
修改数组的方法与非修改数组的方法:根据是否会改变原始数组,可以将Array对象的方法分为修改数组的方法和非修改数组的方法。修改数组的方法会直接改变原始数组,例如 push()、pop()、splice() 、shift()、unshift()、sort()、reverse()、fill()等;而非修改数组的方法则不会改变原始数组,例如 map()、filter()、reduce()、contact() 等。
根据作用范围分类:根据方法的作用范围,可以将Array对象的方法分为全局方法和实例方法。全局方法可以直接通过Array对象调用,而实例方法只能在Array实例上调用。例如,Array.isArray() 是全局方法,而 push()、pop()、slice() 等是实例方法。
Array 作为 JS 中我们最常用的对象,以上就是 Array 常用的 34 种方法,将这些方法吃透用熟,能使得我们在平常的开发工作中事半功倍,提高开发效率。同时,关于数组有什么好的妙用,欢迎各位大佬评论区留言交流,如果有写的不对得地方欢迎纠正。
关于本文
作者:克里斯叮
https://juejin.cn/post/7324531750622036003
Node 社群
我组建了一个氛围特别好的 Node.js 社群,里面有很多 Node.js小伙伴,如果你对Node.js学习感兴趣的话(后续有计划也可以),我们可以一起进行Node.js相关的交流、学习、共建。下方加 考拉 好友回复「Node」即可。
“分享、点赞、在看” 支持一下