42 个通过示例解释所有 JavaScript 数组方法

1.at 获取特定索引处的元素(负索引表示从末尾开始计数,例如-1是最后一个元素)

const names=['Jhon','Bob','Alice','Joe'];

const nameAtIndex1=names.at(1)//Bob

const nameAtLastIndex1=names.at(-1)//Joe

const nameAtBeforeLastIndex1=names.at(-2)//Alice

const nameAtNonExistIndex1=names.at(10)//undefine

2.concat 将给定的数组元素添加到调用者数组的末尾

const manNames=['Jhon','Bob'];

const womanNames=['Alice'];

const nameConcatenation=manNames.concat(womanNames)//['Jhon','Bob','Alice']

3.arr.copyWithin(target[, start[, end]]) 将给定开始索引和结束索引之间的元素复制到目标索引 (负索引表示从最后一个开始计数,例如:-1是最后一个)

target:目标位置,开始-结束

let letters = [];

letters = ["a", "b", "c", "d", "e", "f", "g", "h"];

letters.copyWithin(1, 3, 5);//["a","d","e","d","e","f","g","h"]

letters = ["a", "b", "c", "d", "e", "f", "g", "h"];

letters.copyWithin(1, 3);//["a", "d", "e", "f", "g", "h", "g", "h"]

letters = ["a", "b", "c", "d", "e", "f", "g", "h"];

letters.copyWithin(-7,-6, 5);//["a", "c", "d", "e","e", "f", "g", "h"]

4. entries 返回一个迭代器,其中,包含每个数组元素的索引/值对的数组。//22keys,返回包含索引

const letters=['a','b']

const iterator1=letters.entries()

console.log(iterator1.next().value)//[0,'a']

console.log(iterator1.next().value)//[0,'b']

console.log(iterator1.next().value)//[0,'undefined']

5.every 检查所有元素是否验证给定 条件并返回true,否则,返回false。

const numbers=[10,20,25,30,21]

const isAllNumberBelow40=numbers.every((number)=>number<40)//true,全部小于40

const isAllNumberBelow20=numbers.every((n)=>n<20)//false,数组中有大于20的数

6. arr.fill(value,start,end)指给定值从开始索引到结束索引填充数组(负索引表示从最后一个开始技术,如-1是最后一个元素)

value:填充的值,开始-结束

let numbers=[]

numbers=[1,1,1,1,1]

numbers.fill(0,1,4)//1,0,0,0,0

numbers=[1,1,1,1,1,1]

numbers.fill(0,1)//1,0,0,0,0,0

numbers=[1,1,1,1,1,1]

numbers.fill(0)//000000

numbers=[1,1,1,1,1,1]

numbers.fill(0,-4,-1)//1000001

7.filter 返回仅包含验证条件的元素的新元素

const names=['Jhon','Bob','Alice','Joe'];

const namesWith4LetterOrLess=names.filter((name)=>name.length<=4)//['Jhon','Alice']

8.find 找到第一个验证条件的元素并返回它,否则返回未定义

const names=['Jhon','Bob','Alice','joe','Joe'];

const val=names.find((name)=>name.startsWith('j'))//joe,(n.startsWith()区分大小写)

const names=['Jhon','Bob','Alice','joe','Joe'];

const val=names.find((name)=>name.startsWith('K'))//undefined

9.findIndex 找到第一个验证条件的元素并返回其索引,否则返回-1

const names=['Jhon','Bob','Alice','joe','Joe'];

const val=names.findIndex((name)=>name.startsWith('j'))//joe

const val=names.findIndex((name)=>name.startsWith('K'))//-1

 10.findLast 找到验证条件的最后一个元素并将其返回,否则返回未定义

11.findLastIndex 找到最后一个验证条件的元素并返回其索引值,否则返回-1 

12.flat 在每个元素展开任何已建立的数组,并根据给定的深度级别继续展开嵌套的数组,返回的平面数组

const numbers=[1,2,[3,[4,[5,6]]]];

const flatLeval1=numbers.flst()//[1, 2, 3, [4, [5, 6]]]

const flatLeval2=numbers.flst(2)//[1, 2, 3, 4, [5, 6]]

const flatLevalAll=numbers.flst(Infinity)//[1, 2, 3, 4, 5, 6]

* 输出户主及子系姓名 */
const arr = [
  {
    id: 1,
    name: '张三',
    families: [
      { id: 101, name: '张四' },
      { id: 105, name: '张五' },
    ],
  },
  {
    id: 2,
    name: '李四',
    families: [
      { id: 101, name: '李五' },
      { id: 105, name: '李六' },
    ],
  },
];
 

const result = arr.map((o) => { return [o.name].concat(o.families.map((o) => o.name)); }); // 输出 ['张三', '张四', '张五', '李四', '李五', '李六']

13. flatMap 返回一个新数组,其中所有元素均由给定回调修改,并按1深度级别展平

const users=[{name:'Jhon',votes:[3,4]},{name:'Joe',votes:[4,5]}]

const allVotes=users.flatMap((user)=>user.votes)//[3,4,4,5]

14.forEach 迭代数组并对每个元素应用给定的回调 、、23map返回一个新数组

const names=['Joe','Jhon','Alice']

names.forEach((name,index,array)=>{

   console.log(`${name} at index ${index} in the array[${array.join(',')}`)

})

//Joe at index 0 in the array [Joe, Jhon, Alice]

//Jhon at index 1 in the array [Joe, Jhon, Alice]

//Alice at index 2 in the array [Joe, Jhon, Alice]

15.form 从可迭代或类似数组创建数组

console.log(Array.form('hello'));//[h,e,l,l,o]

console.log(Array.form([1,2,3],(x)=>x*2));[2,4,6]

 16.fromAsync 从异步可迭代、可迭代或类似数组创建数组

const asyncArray=[

  new Promise((resolve)=>resolve(0)),

  new Promise((resolve)=>resolve(1))

];

(async()=>{

  const array=await Array.fromAsync(asyncArray)});

  console.log(array)[0,1]

})()

17.includes 检查数组是否包含给定元素(searchElement, fromIndex)

const letters=['a','b','c','d']

letters.includes('b')//true

letters.includes('e')//false

18.indexOf 返回给定元素的第一个匹配项的索引。如果找到返回索引,否则返回-1

indexOf (searchElement, fromIndex)(要查找的元素,开始查找的元素【选填】)

const letters=['a','b','c','d'];

letters.indexOf('b')//1

letters.indexOf('b',2)//-1

letters.indexOf('b',-4)//1

letters.indexOf(e)//-1

19.lastIndexOf 返回给定元素的最后一个匹配项的索引, 如果找到返回索引,否则返回-1

 const letters=['a','b','b','d'];

letters.lastIndexOf('b')//2

letters.lastIndexOf('e')//-1

20. isArray检查变量是否是数组

const array=[]

Array.isArray(array)//true

const object={}

Array.isArray(object)//false

//typeof a=='undefined' //true,可以判断有没有被声明过

21. join 将所有数组元素连接到一个字符串,并用给定的分隔符将他们分开。

const  letters=["h", "e", "l", "l", "o"];

console.log(letters.join())//h,e,l,l,o

console.log(letters.join(''))//hello

console.log(letters.join('-'))//h-e-l-l-o

 22.keys 返回包含索引的迭代器  //entries数组元素的索引/值对的数组

const letters=['a','b']

const iterator1=letters.keys()

iterator1.next().value//0

iterator1.next().value//1

iterator1.next().value//undefined

23.map 返回一个新数组,其中所有元素均由给定回调修改//14.forEach迭代数组并对每个元素应用给定的回调

const numbers=[1,2,3]

const doubleNumbers=numbers.mar((number)=>number*2)//[2,4,6]

const numberArrayInfo=number.map((element,index,array)=>

`${elsemnt} at index ${index} in the array [${array.join(',')}]`);

//1 at index 0 in the array [1, 2, 3]"。。。

24.of 从给定的元素创建一个数组

const number=Array.of(1,2,3,4);

console.log(numbers)

25.pop 删除数组的最后一个元素并返回它

const number=[1,2,3,4]

console.log(number.pop())//4

console.log(numbers)//[1,2,3]

 26.push 降薪元素添加到数组中

const numbers=[1,2,3,4]

numbers.push(5)

numbers.push(6,7)

console.log(numbers);//[1, 2, 3, 4, 5, 6, 7]

27.reduce 通过引用给定的回调将数组减少到一个值,给定的回调应在每次迭代中返回更新的值

1、previousValue (上一次调用回调返回的值,或者是提供的初始值(initialValue))
2、currentValue (数组中当前被处理的元素)
3、index (当前元素在数组中的索引)
4、array (调用 reduce 的数组)

 语法:arr.reduce(callback,[initialValue])

var arr=[1,2,3,4]

var sun =arr.reduce(function(prev,cur,index,arr)){

 console.log(prev,cur,index)

return prev+cur

})

console.log(arr,sum)

121

332

643

[1,2,3,4]10

var arr=[1,2,3,4]

var sum=arr.reduce(function(prev,cur,index,arr){

 console.log(prev,cur,index);

return prev+cur

},0)//注意这里设置了初始值

console.log(arr,sum)

0 1 0
1 2 1
3 3 2
6 4 3
[1, 2, 3, 4] 10

const letters=["h", "e", "l", "l", "o"];

const word=letters.reduce(()=>`${accWord}${letter}`)

console.log(word)//hello

28.reduceRight 它类似于reduce方法,但从数组的最后一个元素开始迭代

const letters=['h','e','l','l','o']

const word=letters.reduceRight((accWord,letter)=>`${accWord}${letter}`);

console.log(word)//olleh

 29.reverse反转数组元素的顺序

const letters=["h", "e", "l", "l", "o"];

letters.reverse()//["o", "l", "l", "e", "h"]

30.shift 删除数组的第一个元素就返回它

const numbers=[1,2,3];

const firstElement=numbers.shift ()//1

numbers//[2,3]

31.slice 返回从给定开始到结束索引的子数组,负索引表示从最后一个开始计数(-1是最后一个元素)

const numbers=['a','b','c','d','e']

numbers.slice(1,4)//["b", "c", "d"]

numbers.silice(1)//['b','c','d','e']

numbers.slice(-4,-1)//['b','c','d']

32.splice  删除或替换从给定开始索引到给定结束索引的子数组,负索引表示从最后一个开始技术(如:-1是最后一个)[要创建一个删除或替换部分内容而不改变原数组的新数组,请使用toSpliced(),要访问数组的一部分而不修改它,参见slice]

splice(start)
splice(start,deleteCount)//(开始元素,从start开始删除的元素数量)
splice(start,deleteCount,item1)(item,要加入到数组中的元素,若不指定则表示删除给定位置的元素)
splice(start,deleteCount,item1,item2,itemN)

let numbers=[]

numbers=[1,0,0,0,1]

numbers.splipe(1,3)//[1,1]  *3是个数

numbers=[1,0,0,0,1]

numbers.splice(1)//[1]

numbers=[1,0,0,0,1]

numbers.splice(-4)//[1]

numbers=[1,0,0,0,1]

numbers.splice(1,3,2,2,2)//[1,2,2,2,1]

numbers = [1, 0, 0, 0, 1];

numbers.splice(-4,3,2,2,2)//[1,2,2,2,1]

numbers = [1, 0, 0, 0, 1];

numbers.splice(1,0,2,2,2)//[1,2,2,2,0,0,0,1]

33.some 检查是否至少有一个元素验证给定条件

const numbers=[10,15,20,25,30]

const isAtLeastOneBelow20=numbers.some((a)=>a<20)//true

const isAtLeastOneBelow5=numbers.some((a)=>a<5)//false


const even = (element) => element % 2 === 0;

numbers.some(even)//true

//此例为模仿 includes() 方法,判断数组元素中是否存在某个值

function checkAvailability(arr,val){

 return arr.some((arrVal)=>val===arrVal)

}

checkAvailability(numbers,20)//true

checkAvailability(numbers,122)//false

34.sort 通过给定的回调返回排序的数组,如果回调返回正数,则将a排序在b之后,否则,b-a

let numbers=[10, 100, 20, 25, 30];

numbers.sort((a,b)=>a-b)//[10, 20, 25, 30, 100]

numbers.sort((a,b)=>b - a)//[100, 30, 25, 20, 10]

35.toLocaleString() 方法返回一个字符串,表示数组中的所有元素,每个元素通过调用自己的toLocaleString方法转换为字符串,并且适应特定的语言环境里的字符串(例如逗号‘,’)分割开来。

const date=[]

date=[10.4, new Date("31 Aug 2022 22:00:00 UTC")];

date.toLocaleString()//'10.4,2022/9/1 06:00:00'

date.toLocaleString('en')//'10.4,9/1/2022, 6:00:00 AM'

date.toLocaleString('es')//'10,4,1/9/2022, 6:00:00'//10,4

date=[10.4, 1121,-4544,5656.152];//'10.4, 1121,-4544,5656.152'

36. toReversed 返回一个元素顺序相反的新数组,方法是reverse()方法类似

const items=[1,2,3]

const reversedItems=items.toReversed()

console.log(reversedItems)//[3,2,1]

console.log(items)//[1,2,3]

console.log([1,,3,4].toReversed())//[4,3,undefined,1]

37. toSorted 是sort()方法的复制版本,返回一个新数组,其元素安升序排列,原数组不变

toSorted()

toSorted((a,b)=>{/*...*/})//传入箭头函数

toSorted(compareFn)//传入比较函数

toSorted(function compareFn(a,b){/*...*/})//内敛比较函数

38.toSpliced() 类似于splice(),但它返回一个新数组而不修改调用者数组(-1是最后一个元素)

const months=[1,0,0,0,1]

const sorteMonths=months.toSpliced(1,3)

consle.log(sorteMonths)//[1,1]

consle.log(months)//[1,0,0,0,1]

const numbers=[1,0,0,0,' ',1]

const sorteNumbers=numbers.toSpliced(1,2)//在稀疏数组上使用 

consle.log(sorteNumbers)//[1,0,undefined,1]

 39.toString 返回一个字符串,表示指定的数组机器元素,同时用逗号分割每一个字符

const letters=['a','b','c','d'];

console.log(letters.toString())//a,b,c,d

40,unshift 将指定元素添加到数组的开头,并返回数组的新长度

const unmbers=[1,2,3]

console.log(unmbers.unshift(4,5))//[4,5,1,2,3]

41.values 返回一个新的数组迭代器,该对象迭代器数组中的每个元素的值

const arrsy1=['a','b','c']

const iterator=arrsy1.values();

for(const value of iterator){

  console.log(value)

}

//a

//b

//c

 42.

with() 通过返回一个指定索引处的值被新值替换的新数组,来改变数组中指定索引处的值。原数组不会被修改。这使得你可以以链式调用数组方法的方式来对数组进行操作。

with() 方法永远不会产生稀疏数组。如果原数组是稀疏的,新数组对应的空白索引位置会替换为 undefined

语法:arrsy.with(index,value)index,要修改数组的索引,value要分配给指定索引的任何值

const arr=[1,2,3,4,5]

console.log(arr.with(2,6))//[1,2,6,4,5]

console.log(arr)//[1,2,3,4,5]

const arr2=[1,2,3,4,5]

console.log(arr2.with(2,6).map((x)=>x**2))[1,4,36,16,25]

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值