数组方法
一、数组
-
JavaScript 数组的大小是可调整的,并且可以包含不同 数据类型。(当不需要这些特性时,请使用 类型数组。)
注:JavaScript 类型数组是类似数组的对象,它提供了一种在内存缓冲区中读取和写入原始二进制数据的机制。
-
JavaScript 数组不是关联数组,因此不能使用任意字符串作为索引来访问数组元素,但必须使用非负整数(或其各自的字符串形式)作为索引来访问。
二、数组属性
属性 | 描述 |
---|---|
constructor | 返回创建数组对象的原型函数。 |
length | 设置或返回数组元素的个数。 |
prototype | 允许你向数组对象添加属性或方法。 |
1.constructor属性
var arr = [1,2,3,4]
console.log(arr.constructor);//返回数组的原型函数
2.length属性
var arr = [1,2,3,4]
console.log(arr.length)//返回数组的长度
3.prototype属性
// 一个新的数组方法,将数组值转换为大写Array.prototype.myUcase = function(){for(i=0;i<arr.length;i++){this[i]=this[i].toUpperCase();}}//创建数组,调用myUcase方法var arr=["apple","mango"]arr.myUcase()console.log(arr)
三、数组方法
1.concat()方法
连接两个或更多的数组,并返回结果,该方法不会改变现有的数组,而是返回一个新的数组。
语法:
array1.concat(array2, array3,..., arrayX)
示例:
var a = [1,2,3]var b = [4,5,6]var c = a.concat(b)console.log(c) //[1,2,3,4,5,6]
2.copyWhithin()方法
copyWithin() 方法用于从数组的指定位置拷贝元素到数组的另一个指定位置中。
语法:
array.copyWithin(target, start, end)
参数:
trarget
:将序列复制到的从零开始的索引,转换为整数。这对应于 start
处的元素将被复制到的位置,并且 start
和 end
之间的所有元素都将复制到后续索引。
star
t:从零开始的索引,从该位置开始复制元素,转换为整数。
end
:结束从 转换为整数 复制元素的从零开始的索引。copyWithin()
复制直至但不包括 end
。
示例1(不写结束位置):
var fruits = ["Banana", "Orange", "Apple", "Mango","pink"];fruits.copyWithin(2, 0);console.log(fruits)
示例2(有结束位置):
var fruits = ["Banana", "Orange", "Apple", "Mango", "Kiwi", "Papaya"];fruits.copyWithin(2, 0, 2);console.log(fruits)
3.entries()方法
entries() 方法返回一个数组的迭代对象,该对象包含数组的键值对 (key/value)。
迭代对象中数组的索引值作为 key, 数组元素作为 value。
var fruits = ["Banana", "Orange", "Apple", "Mango"];var a=fruits.entries();console.log(a.next().value)console.log(a.next().value)console.log(a.next().value)console.log(a.next().value)
(1)使用索引和元素进行迭代
const a = ["a", "b", "c"];for (const [index, element] of a.entries()) {console.log(index, element);}
(2)使用for···of循环
const array = ["a", "b", "c"];const arrayEntries = array.entries();for (const element of arrayEntries) {console.log(element);}
(3)对非数组对象调用entries()
entries()
方法读取 this
的 length
属性,然后访问键为小于 length
的非负整数的每个属性。
const arrayLike = {length: 3,0: "a",1: "b",2: "c",3: "d", // ignored by entries() since length is 3};for (const entry of Array.prototype.entries.call(arrayLike)) {console.log(entry);}
4.every()方法
every() 方法用于检测数组所有元素是否都符合指定条件(通过函数提供)。
every() 方法使用指定函数检测数组中的所有元素:
- 如果数组中检测到有一个元素不满足,则整个表达式返回 false ,且剩余的元素不会再进行检测。
- 如果所有元素都满足条件,则返回 true。
语法:
array.every(function(currentValue,index,arr), thisValue)
参数:
参数 | 描述 |
---|---|
currentValue | 必须。当前元素的值 |
index | 可选。当前元素的索引值 |
arr | 可选。当前元素属于的数组对象 |
thisValue : 可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。
如果省略了 thisValue ,“this” 的值为 “undefined”
示例:
检测数组中的数值是否全部大于18,如果是则返回true,如果不是则返回false
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><p>点击按钮检测数组的所有元素是否大于18:</p><button onclick="myFunction()">点我</button><script>var ages = [32,33,16,20]function checkAdult(age){//console.log(age) //age是被检测的数组元素return age >=18;}function myFunction(){console.log(ages.every(checkAdult))}</script>
</body>
</html>
5.fill()方法
fill() 方法用于将一个固定值替换数组的元素。
语法:
array.fill(value, start, end)
参数:
参数 | 描述 |
---|---|
value | 必需。填充的值。 |
start | 可选。开始填充位置。 |
end | 可选。停止填充位置 (默认为 array.length) |
示例:
var fruits = ["Banana", "Orange", "Apple", "Mango","pink"];
fruits.fill("Runoob", 2, 4);
console.log(fruits);
6.filter()方法
filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素。
注意: filter() 不会对空数组进行检测,不会改变原始数组。
语法:
array.filter(function(currentValue,index,arr), thisValue)
参数:
参数 | 描述 |
---|---|
currentValue | 必须。当前元素的值 |
index | 可选。当前元素的索引值 |
arr | 可选。当前元素属于的数组对象 |
thisValue 可选 | 传递给函数的值一般用 “this” 值。 如果这个参数为空, “undefined” 会传递给 “this” 值 |
示例:
var arr = [100,100,120,300,230,150]var newArr = arr.filter(function newNum(num){return num<=200;})// var newArr = arr.filter(num=>num<=200) //使用箭头函数,可以省略returnconsole.log("newArr:"+newArr)console.log("arr"+arr)
输出结果:
7.find()方法
find() 方法返回符合条件的第一个数组元素。
find() 方法为数组中的每个元素都调用一次函数执行:
- 当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素,之后的值不会再调用执行函数。
- 如果没有符合条件的元素返回 undefined
注意: find() 对于空数组,函数是不会执行的,没有改变数组的原始值。
注意: IE 11 及更早版本不支持 find() 方法。
语法:
array.find(function(currentValue, index, arr),thisValue)
参数 | 描述 |
---|---|
currentValue | 必需。当前元素 |
index | 可选。当前元素的索引值 |
arr | 可选。当前元素所属的数组对象 |
More ActionsthisValue | 可选。 传递给函数的值一般用 “this” 值。 如果这个参数为空, “undefined” 会传递给 “this” 值 |
示例:
//检测数组当中符合函数小于等于200的元素
var arr = [250,300,100,150,200,150]var newArr = arr.find(function newNum(num){return num<=200;})// var newArr = arr.filter(num=>num<=200) //使用箭头函数,可以省略returnconsole.log("newArr:"+newArr)console.log("arr"+arr)
运行结果:
8.findIndex()方法
findIndex() 方法返回符合条件的数组第一个元素位置(下标)。
findIndex() 方法为数组中的每个元素都调用一次函数执行:
- 当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置,之后的值不会再调用执行函数。
- 如果没有符合条件的元素返回 -1
注意: findIndex() 对于空数组,函数是不会执行的,没有改变数组的原始值。
语法:
array.findIndex(function(currentValue, index, arr), thisValue)
参数:
参数 | 描述 |
---|---|
currentValue | 必需。当前元素 |
index | 可选。当前元素的索引 |
arr | 可选。当前元素所属的数组对象 |
thisValue | 可选。 传递给函数的值一般用 “this” 值。 如果这个参数为空, “undefined” 会传递给 “this” 值 |
示例:
var arr = [250,300,100,150,200,150]var newArr = arr.findIndex(function newNum(num){return num<=200;})// var newArr = arr.filter(num=>num<=200) //使用箭头函数,可以省略returnconsole.log("newArr:"+newArr)console.log("arr"+arr)
运行结果:
9.forEach()方法
forEach() 方法用于调用数组的每个元素,并将元素传递给回调函数。
注意: forEach() 对于空数组是不会执行回调函数的。
语法:
array.forEach(callbackFn(currentValue, index, arr), thisValue)
其他形式的语法格式:
// 箭头函数
forEach((element) => { /* … */ })
forEach((element, index) => { /* … */ })
forEach((element, index, array) => { /* … */ })// 回调函数
forEach(callbackFn)
forEach(callbackFn, thisArg)// 内联回调函数
forEach(function(element) { /* … */ })
forEach(function(element, index) { /* … */ })
forEach(function(element, index, array){ /* … */ })
forEach(function(element, index, array) { /* … */ }, thisArg)
参数:
参数 | 描述 |
---|---|
currentValue | 必需。当前元素 |
index | 可选。当前元素的索引值。 |
arr | 可选。当前元素所属的数组对象。 |
thisValue | 可选。传递给函数的值一般用 “this” 值。 如果这个参数为空, “undefined” 会传递给 “this” 值 |
示例:
var sum = 0;var arr = [65, 44, 12, 4];arr.forEach(function fn(item){console.log(`item:${item}`)sum+=item;return sum;})console.log(sum)console.log(arr)
运行结果:
10.from()方法
from() 方法用于通过拥有 length 属性的对象或可迭代的对象来返回一个数组。
如果对象是数组返回 true,否则返回 false。
语法:sss
Array.from(object, mapFunction, thisValue)
参数:
参数 | 描述 |
---|---|
object | 必需,要转换为数组的对象。 |
mapFunction | 可选,数组中每个元素要调用的函数。 |
thisValue | 可选,映射函数(mapFunction)中的 this 对象。 |
示例1:
var myArr = Array.from("RUNOOB");
console.log(myArr)
示例2:
返回集合中包含的数组对象
var setObj = new Set(["a", "b", "c"]);var objArr = Array.from(setObj);console.log(`objArr[1]:${objArr[1]}`)
示例3:
使用箭头语法和映射函数更改元素的值。
var arr = Array.from([1, 2, 3], x => x * 10);console.log(arr) //[10,20,30]
11.includes()方法
includes() 方法用来判断一个数组是否包含一个指定的值,如果是返回 true,否则false。
语法:
arr.includes(searchElement)
arr.includes(searchElement, fromIndex)
参数:
参数 | 描述 |
---|---|
searchElement | 必须。需要查找的元素值。 |
fromIndex | 可选。从该索引处开始查找 searchElement。如果为负值,则按升序从 array.length + fromIndex 的索引开始搜索。默认为 0。 |
示例:
var arr = ['a', 'b', 'c'];console.log(arr.includes('c', 3)); //false 判断arr数组当中,下标为3的元素是否为cconsole.log(arr.includes('c', 100)); //false 判断arr数组当中,下标为100的元素是否为cconsole.log(arr.includes('c')); //true 判断函数当中是否包含"c"
注意:如果 fromIndex 为负值,计算出的索引将作为开始搜索searchElement的位置。如果计算出的索引小于 0,则整个数组都会被搜索。
var arr = ['a', 'b', 'c'];
console.log(arr.includes('c', -100)); //true
12.indexOf()方法
indexOf() 方法可返回数组中某个指定的元素位置。
该方法将从头到尾地检索数组,看它是否含有对应的元素。开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时)。如果找到一个 item,则返回 item 的第一次出现的位置。开始位置的索引为 0。
如果在数组中没找到指定元素则返回 -1。
提示如果你想查找字符串最后出现的位置,请使用 lastIndexOf() 方法。
语法:
array.indexOf(item,start)
参数:
参数 | 描述 |
---|---|
item | 必须。查找的元素。 |
start | 可选的整数参数。规定在数组中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的首字符开始检索。 |
示例:
var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
var a = fruits.indexOf("Apple",4);
console.log(`从下标为4的开始检测,Apple的位置是${a}`) //6
13.isArray()方法
判断对象是否为数组
语法:
Array.isArray(obj)
参数:
参数 | 描述 |
---|---|
obj | 必需,要判断的对象。 |
示例:
var fruits=["Banana","Orange","Apple","Mango","Banana","Orange","Apple"];
console.log(Array.isArray(fruits)) // true
14.join()方法
join() 方法用于把数组中的所有元素转换一个字符串。
元素是通过指定的分隔符进行分隔的。
语法:
array.join(separator)
参数:
参数 | 描述 |
---|---|
separator | 可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。 |
示例:
var arr= [2000,2,13,]
var newArr = arr.join("-") //如果不写参数,那么默认以逗号分隔
console.log(newArr) //2000-2-13
15.keys()方法
keys() 方法用于从数组创建一个包含数组键的可迭代对象。
语法:
array.keys()
示例:
var arr= [2000,2,13,]
var newArr = arr.keys()
console.log(newArr) //返回一个数组可迭代对象
16.lastIndexOf()方法
lastIndexOf() 方法可返回一个指定的元素在数组中最后出现的位置,从该字符串的后面向前查找。
如果要检索的元素没有出现,则该方法返回 -1。
该方法将从尾到头地检索数组中指定元素 item。开始检索的位置在数组的 start 处或数组的结尾(没有指定 start 参数时)。如果找到一个 item,则返回 item 从尾向前检索第一个次出现在数组的位置。数组的索引开始位置是从 0 开始的。
如果在数组中没找到指定元素则返回 -1。
提示: 如果你想查找数组首次出现的位置,请使用 indexOf() 方法。
语法:
array.lastIndexOf(item,start)
参数:
参数 | 描述 |
---|---|
item | 必需。规定需检索的字符串值。 |
start | 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的最后一个字符处开始检索。 |
示例:
var arr= [1,2,3,4,5,6,6,5,4,3,2,1]var a = arr.lastIndexOf(2)console.log(a)//10
//从数组中的第四个位置查找字符串2出现的位置:
var arr= [1,2,3,4,5,6,6,5,4,3,2,1]var a = arr.lastIndexOf(2,4)console.log(a)//1
17.map()方法
map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。
map() 方法按照原始数组元素顺序依次处理元素。
注意: map() 不会对空数组进行检测。
注意: map() 不会改变原始数组。
语法:
array.map(function(currentValue,index,arr), thisValue)
参数:
参数 | 描述 |
---|---|
thisValue | 可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。 如果省略了 thisValue,或者传入 null、undefined,那么回调函数的 this 为全局对象。 |
currentValue | 必须。当前元素的值 |
index | 可选。当前元素的索引值 |
arr | 可选。当前元素属于的数组对象 |
示例:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style></style>
</head>
<body>输入框:<input type="text" id="ipt" value="10"><script>//将数组中的每个元素乘输入框指定的值,并且返回var arr = [1,2,3,4]var newArr=arr.map(item=>item*document.getElementById("ipt").value)console.log(newArr)</script>
</body>
</html>
18.pop()方法
pop() 方法用于删除数组的最后一个元素并返回删除的元素。
**注意:**此方法改变数组的长度!
提示: 移除数组第一个元素,请使用 shift() 方法。
语法:
array.pop()
示例:
var arr = [1,2,3,4]var a=arr.pop()console.log(a) //返回被删除的数组元素console.log(arr) //改变数组长度
19.push()方法
push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度。
注意: 新元素将添加在数组的末尾。
注意: 此方法改变数组的长度。
提示: 在数组起始位置添加元素请使用 unshift() 方法。
语法:
array.push(item1, item2, ..., itemX)
参数:
参数 | 描述 |
---|---|
item1, item2, …, itemX | 必需。要添加到数组的元素。 |
示例:
var arr = [1,2,3,4]var a=arr.push(5,5)console.log(a) //返回数组长度 6console.log(arr) //在尾部添加 [1,2,3,4,5,5]
20.unshift()方法
unshift() 方法可向数组的开头添加一个或更多元素,并返回新的长度。
注意: 该方法将改变数组的数目。
提示: 将新项添加到数组末尾,请使用 push() 方法。
语法:
array.unshift(item1,item2, ..., itemX)
参数:
参数 | 描述 |
---|---|
item1,item2, …, itemX | 可选。向数组起始位置添加一个或者多个元素。 |
示例:
var arr = [1,2,3,4]var a=arr.unshift(5,5)console.log(a) //返回数组长度 6console.log(arr) //在头部添加 [5,5,1,2,3,4]
21.shift()方法
shift() 方法用于把数组的第一个元素从其中删除,并返回第一个元素的值。
注意: 此方法改变数组的长度!
提示: 移除数组末尾的元素可以使用 pop() 方法。
语法:
array.shift()
示例:
var arr = [1,2,3,4]var newArr = arr.shift()console.log(newArr) // 被删除的第一个元素 1console.log(arr) // 删除第一个元素以后,返回的新的数组 [2,3,4]
22.reduce()方法
reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值。
reduce() 可以作为一个高阶函数,用于函数的 compose。
注意: reduce() 对于空数组是不会执行回调函数的。
语法:
array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
参数:
参数 | 描述 |
---|---|
total | 必需。初始值, 或者计算结束后的返回值。 |
currentValue | 必需。当前元素 |
currentIndex | 可选。当前元素的索引 |
arr | 可选。当前元素所属的数组对象。 |
initialValue | 可选。传递给函数的初始值 |
示例:
var arr = [1,2,3,4,5]var num = arr.reduce(function getArr(total,item){return total+item;})console.log(num) //15
23.reduceRight()方法
reduceRight() 方法的功能和 reduce() 功能是一样的,不同的是 reduceRight() 从数组的末尾向前将数组中的数组项做累加。
注意: reduce() 对于空数组是不会执行回调函数的。
语法:
array.reduceRight(function(total, currentValue, currentIndex, arr), initialValue)
参数:
参数 | 描述 |
---|---|
total | 必需。初始值, 或者计算结束后的返回值。 |
currentValue | 必需。当前元素 |
currentIndex | 可选。当前元素的索引 |
arr | 可选。当前元素所属的数组对象。 |
initialValue | 可选。传递给函数的初始值 |
示例:
var arr = [1,2,3,4,100]var num = arr.reduceRight(function getArr(total,item){console.log(`total:${total}`)console.log(`item:${item}`)return total-item;})console.log(num)
运行结果:
24.reverse()方法
反转数组的顺序
语法:
array.reverse()
示例:
let arr = [1,2,3,4,100]let newArr = arr.reverse() console.log(`newArr:${newArr}`)console.log(`arr:${arr}`)
运行结果:
25.slice()方法
slice() 方法可从已有的数组中返回选定的元素。
slice() 方法可提取字符串的某个部分,并以新的字符串返回被提取的部分。
注意: slice() 方法不会改变原始数组。
语法:
array.slice(start, end)
参数:
参数 | 描述 |
---|---|
start | 可选。规定从何处开始选取。如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取,slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素(包含最后一个元素)。 |
end | 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果该参数为负数, 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素(不包含最后一个元素,也就是只有倒数第二个元素)。 |
示例:
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];// var myBest = fruits.slice(-3,-1); // 截取从倒数第三个 到 倒数第一个(不包含)的两个元素 "Lemon", "Apple"var myBest = fruits.slice(-3); // 截取最后三个元素console.log(`myBest:${myBest}`) //"Lemon", "Apple", "Mango"console.log(`fruits:${fruits}`)
26.some()方法
some() 方法用于检测数组中的元素是否满足指定条件(函数提供)。
some() 方法会依次执行数组的每个元素:
- 如果有一个元素满足条件,则表达式返回true , 剩余的元素不会再执行检测。
- 如果没有满足条件的元素,则返回false。
注意: some() 不会对空数组进行检测。
some() 不会改变原始数组。
语法:
array.some(function(currentValue,index,arr),thisValue)
参数:
参数 | 描述 |
---|---|
currentValue | 必须。当前元素的值 |
index | 可选。当前元素的索引值 |
arr | 可选。当前元素属于的数组对象 |
thisValue | 可选。对象作为该执行回调时使用,传递给函数,用作 “this” 的值。 如果省略了 thisValue ,“this” 的值为 “undefined” |
示例:
let ages = [4, 12, 16, 20]; //声明一个数组let a= ages.some(function checkAdult(item) {console.log(item)return item >= 18;})console.log(`a:${a}`)
运行结果:
27.sort()方法
sort() 方法用于对数组的元素进行排序。
排序顺序可以是字母或数字,并按升序或降序。
默认排序顺序为按字母升序。
**注意:**当数字是按字母顺序排列时"40"将排在"5"前面,是按数字第一位进行排序,而无关数字的大小。
使用数字排序,必须通过一个函数作为参数来调用。
函数指定数字是按照升序还是降序排列。
注意: 这种方法会改变原始数组!。
语法:
array.sort(sortfunction)
参数:
参数 | 描述 |
---|---|
sortfunction | 可选。规定排序顺序。必须是函数。 |
示例1:
//字母排序var arr = ['a','b','c','an','b'];arr.sort(); //升序排列console.log(arr)arr.reverse(); //降序排列就是在升序的基础上使用反转数组的方式,来实现降序排列console.log(arr)
示例2:
//数字排序
var arr = [1,2,3,12,1,3,1,12,56,32];arr.sort(); //升序排列console.log(arr)/*arr.reverse(); //降序排列就是在升序的基础上使用反转数组的方式,来实现降序排列console.log(arr)*/
思考:那么如何让数字进行排序呢?
示例3:
//数字排序和降序const arr = [40,100,1,5,25,10];console.log(`arr:${arr}`)let newNum=arr.sort(function(a,b){//console.log(`a:${a} b:${b}`)return b-a //如果是a-b那么就是升序排列});console.log(`newNum:${newNum}`)
28.splice()方法
splice() 方法用于添加或删除数组中的元素。
**注意:**这种方法会改变原始数组。
语法:
array.splice(index,howmany,item1,.....,itemX)
参数:
参数 | 描述 |
---|---|
index | 必需。规定从何处添加/删除元素。 该参数是开始插入和(或)删除的数组元素的下标,必须是数字。 |
howmany | 可选。规定应该删除多少元素。必须是数字,但可以是 “0”。 如果未规定此参数,则删除从 index 开始到原数组结尾的所有元素。 |
item1, …, itemX | 可选。要添加到数组的新元素 |
示例:
var arr = [1,2,3,4,5];arr.splice(2,1,100,200); //移除数组的第三个元素,并在数组第三个位置添加新元素100和200,相当于替换。console.log(arr) //[1,2,100,200,4,5]
var arr = [1,2,3,4,5];arr.splice(2,2); //从第三个位置开始删除数组后的两个元素3和4console.log(arr) //[1,2,5]
29.toString()方法
将数组转换为字符串,并返回结果
注意: 数组中的元素之间用逗号分隔。
语法:
array.toString()
示例:
const arr = [1,2,3,4,5];let str=arr.toString(); console.log( str, typeof str) //1,2,3,4,5 string
30.valueOf()方法
valueOf() 方法返回 Array 对象的原始值。
该原始值由 Array 对象派生的所有对象继承。
valueOf() 方法通常由 JavaScript 在后台自动调用,并不显式地出现在代码中。
注意: valueOf() 方法不会改变原数组。
语法:
array.valueOf()
示例:
const arr = [1,2,3,4,5];let a=arr.valueOf(); console.log( a) //[1,2,3,4,5]
31.of()方法
of() 方法用于将一组值转换为数组,不考虑参数的数量或类型。
Array.of() 和 Array() 构造函数之间的区别在于对单个参数的处理:Array.of(5) 创建一个具有单个元素 7 的数组,而 Array(5) 创建一个 length 为 5 的空数组。
如果对象是数组返回 true,否则返回 false。
语法:
Array.of(element0)
Array.of(element0, element1)
Array.of(element0, element1, /* … ,*/ elementN)
参数:
参数 | 描述 |
---|---|
element0 | 必需,要转换为数组的元素。 |
element1, /* … ,*/ elementN | 可选,要转换为数组的元素。 |
示例:
let a=Array.of(1); // [1]
let b=Array.of(1, 2, 3); // [1, 2, 3]
let c=Array.of(undefined); // [undefined]
console.log(a)
console.log(b)
console.log(c)
Array.of()与Array()的区别:
let a1=Array.of(7); // [7] 7个undefined组成的数组let a2=Array(7); // array of 7 empty slots 7个空槽let b1=Array.of(1, 2, 3); // [1, 2, 3]let b2=Array(1, 2, 3); // [1, 2, 3]console.log(`a1使用Array.of()创建的:`,a1)console.log(`a2b1使用Array()创建的:`,a2)console.log(`b1使用Array.of()创建的:`,b1)console.log(`b2使用Array()创建的:`,b2)
运行结果:
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 属性和以整数为键的属性。
语法:
at(index)
参数:
参数 | 描述 |
---|---|
index | 要返回的数组元素的索引(位置)。当传递负数时,支持从数组末端开始的相对索引;也就是说,如果使用负数,返回的元素将从数组的末端开始倒数。 |
示例:
const array1 = [5, 12, 8, 130, 44];let index1 = 2;str1 = `索引号为 ${index1} 的值为 ${array1.at(index1)}`;console.log(str1);let index2 = -2;str2 = `索引号为 ${index2} 的值为 ${array1.at(index2)}`;console.log(str2)
运行结果:
33.flat()方法
flat() 方法方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回,可以实现数组扁平化(数组降维)。
flat() 方法返回一个包含将数组与子数组中所有元素的新数组。
flat() 方法会递归地遍历数组,将所有嵌套的数组元素提取出来,生成一个新的一维数组。
语法:
flat()
flat(depth)
参数:
参数 | 描述 |
---|---|
depth | 指定要提取嵌套数组的结构深度,默认值为 1。 |
示例:
let arr1 = [1, 2, [3, 4, [5, 6]]];let newArr = arr1.flat();console.log(newArr);// 输出: [1, 2, 3, 4, [5, 6]]// 指定深度为2let arr2 = [1, 2, [3, 4, [5, 6]]];let arr3 = arr2.flat(2);console.log(arr3);// 输出: [1, 2, 3, 4, 5, 6]//使用 Infinity,可展开任意深度的嵌套数组let arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];let arr5=arr4.flat(Infinity);// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]console.log(arr5)
运行结果:
34.flatMap()方法
首先将数组中的每一个元素都执行方法的回调函数,然后将结果返回到 flatMap 这个方法中然后将其展平,最终输出
flatMap() 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与 map 连着深度值为 1 的 flat 几乎相同,但 flatMap 通常在合并成一种方法的效率稍微高一些。
flatMap() 方法一个新的数组,其中每个元素都是回调函数的结果,并且结构深度 depth 值为 1。
语法:
// 箭头函数
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 值。 |
示例:
const arr1 = [1, 2, 1];const result = arr1.flatMap((num) => (num === 2 ? [2, 2] : 1));
//注意只能展开一层
console.log(result);// Array [1, 2, 2, 1]
35.with()方法
with() 方法用于更新指定的数组元素。
with() 方法会返回一个新数组。
with() 方法不会改变原始数组。
语法:
array.with(index, value)
参数:
参数 | 描述 |
---|---|
index | 必需。要更改的元素的索引(位置)。负索引从数组末尾开始计数。 |
value | 必需。新的值。 |
示例:
const arr = [1,2,3,4];const arr1 = arr.with(1, 100);console.log(arr1) //[1,100,3,4]
36.findLastIndex()方法
findLastIndex() 方法会对数组中的每个元素执行一个函数。
findLastIndex() 方法返回通过测试的最后一个元素的索引(位置)。
如果没有找到匹配项,则返回 -1。
对于空数组元素,findLastIndex() 方法不会执行函数。
findLastIndex() 方法不会改变原始数组。
语法:
array.findLastIndex(function(currentValue, index, arr), thisValue)
参数:
参数 | 描述 |
---|---|
function | 必需。为每个数组元素运行的函数。 |
currentValue | 必需。当前元素的值。 |
index | 可选。当前元素的索引。 |
arr | 可选。当前元素所在的数组。 |
thisValue | 可选,默认为 undefined。作为函数的 this 值传递。 |
示例:
const ages = [3, 30, 18, 20];let a = ages.findLastIndex(age => age>18);console.log(`最后一个大于18的元素的下标为:${a}`) //3
37.lastIndexOf()方法
检查数组当中符合条件的元素最后一次出现的下标,从该字符串的后面向前查找,如果要检索的元素没有出现,则该方法返回 -1。
语法:
array.lastIndexOf(item,start)
参数:
参数 | 描述 |
---|---|
item | 必需。规定需检索的字符串值。 |
start | 可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数,则将从字符串的最后一个字符处开始检索。 |
示例:
const arr = [3, 30, 18, 20];let a = arr.lastIndexOf(20);console.log(`元素20最后一次出现的的下标为:${a}`) //3
const arr = [3, 30, 18, 20];let a = arr.lastIndexOf(40);console.log(`元素40最后一次出现的的下标为:${a}`) //-1
const arr = [3, 20, 18, 20];let a = arr.lastIndexOf(20,2);console.log(`元素20从下标2开始向后,最后一次出现的的下标为:${a}`) //1
38.findLast()方法
findLast() 方法返回通过条件判断的最后一个元素的值。
findLast() 方法会对数组中的每个元素执行一个函数。
如果未找到符合条件的元素,则 findLast() 方法返回 undefined。
对于空数组元素,findLast() 方法不会执行函数。
findLast() 方法不会改变原始数组。
语法:
array.findLast(function(currentValue, index, arr), thisValue)
参数:
方法 | 描述 |
---|---|
indexOf() | 找到具有指定值的第一个元素的索引 |
lastIndexOf() | 找到具有指定值的最后一个元素的索引 |
find() | 找到通过测试的第一个元素的值 |
findIndex() | 找到通过测试的第一个元素的索引 |
findLast() | 找到通过测试的最后一个元素的值 |
findLastIndex() | 找到通过测试的最后一个元素的索引 |
示例:
const ages = [3, 10, 18, 20,30,40];let a = ages.findLast(age => age>18) console.log(`最后一次符合大于18的条件的元素是${a}`) //40
39.toReversed()方法
反转数组顺序,与reverse()方法实现的效果相同,是reverse()方法的复制版本。
语法:
array.toReversed()
示例:
// 创建数组const arr = [1,2,3,4];// 反转数组const arr1 = arr.toReversed();console.log(arr1)//[4,3,2,1]
与reverse 的区别
toReversed()
的返回值永远不是稀疏的。空槽在返回的数组中变为 undefined
。
// 创建数组const arr = [1,,2,3,4];// 反转数组const arr1 = arr.toReversed();console.log(arr1)
// 创建数组const arr = [1,,2,3,4];// 反转数组const arr1 = arr.reverse();console.log(arr1)
40.toSorted() 方法
toSorted() 方法用于对数组中的元素按字母顺序进行排序,排序的方法与sort()方法一致,同样的toSorted()的返回值永远不是稀疏的。空槽在返回的数组中变为 undefined
。
toSorted() 方法返回一个新的数组。
toSorted() 方法不会修改原始数组。
toSorted() 是 sort() 方法的复制版本。
语法:
array.toSorted(compareFunction)
参数:
参数 | 描述 |
---|---|
compareFunction(可选) | 定义排序顺序的函数。该函数应根据参数返回负值、零或正值,例如:function(a, b) { return a - b; } 当 sort() 比较两个值时,它会将值传递给比较函数,并根据返回值(负值、零、正值)对值进行排序。 |
示例:
//降序排序
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const fruits2 = fruits.toSorted();
fruits2.reverse();
这里数字的排序与sort()方法一致
//查找最小值
const points = [40, 100, 1, 5, 25, 10];let points2 = points.toSorted(function(a, b) { return a - b; });let lowest = points2[0];console.log(lowest) //1
//查找最大值
const points = [40, 100, 1, 5, 25, 10];let points2 = points.toSorted(function(a, b) { return b - a; });let highest = points2[0];console.log(highest)
41.toSpliced() 方法
toSpliced() 方法用于向数组中添加和/或移除元素,toSpliced()的返回值永远不是稀疏的。空槽在返回的数组中变为 undefined
。
toSpliced() 方法返回一个新的数组。
toSpliced() 方法不会修改原始数组。
toSpliced() 是 splice() 方法的复制版本。
语法:
array.toSpliced(index, count, item1, ..., itemX)
参数:
参数 | 描述 |
---|---|
index(必需) | 要添加或移除元素的索引(位置)。负值从数组末尾开始计数。 |
count(可选) | 要移除的元素数量。 |
item1, …(可选) | 要添加的新元素。 |
示例:
const fruits = ["Banana", "Orange", "Apple", "Mango"];
const fruits2 = fruits.toSpliced(2, 2);
console.log(fruits2 )// ["Banana", "Orange"]