IT技术分享网 > 经验分享 > js中操作数组的方法 js中操作数组的方法

2022/10/1 14:18:19

本文主要是介绍IT技术分享网 > 经验分享 > js中操作数组的方法 js中操作数组的方法，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

一、对数组元素增加的方法

push/unshift/splice（这三个会改变原来的数组），concat不会改变原来的数组。

push方法接收一个参数，并把这个元素放在数组的末尾。返回数组的最新长度。会改变原来的数组。

let a = [15,20,25,8,9]
 let a1 = a.push(66)
 console.log(a);  //[ 15, 20, 25, 8, 9, 66 ]
 console.log(a1);  //6

unshift方法接收一个参数，并把这个参数放在数组的最前面，返回数组的最新长度。会改变原来的数组。

let b = ["小红","小李","小明"]
let b1 = b.unshift("小王")
console.log(b); //[ 小王, 小红, 小李, 小明 ]
console.log(b1);  //4

splice方法接收三个参数，第一个为要删除开始的位置，第二个为要删除的元素个数，第三个为要插入的元素（可以为多个，用逗号分开）。返回的是一个被删除元素的数组。当前删除0个，所以为空数组。会改变原来的数组。

let c = ["m","n","l","b","t"]
 let c1 = c.splice(1,0,"q","r")
  console.log(c);    //[m, q, r,n, l, b,t]
  console.log(c1);    //[]

concat方法可以接收一个参数，这个参数可以是一个数组，其返回值为原数组和新数组一起组成的新数组，这个方法不会改变原来的数组。

let d = [10,20,20,30,70]
 let d1 = d.concat([5,15])
  console.log(d); //[ 10, 20, 20, 30, 70 ]
  console.log(d1);  //[10, 20, 20, 30,70,  5, 15]

二、对数组的删除方法

pop shift splice（前三种会改变原来的数组）， slice不会改变原来的数组。

pop方法会删除数组的最后一个元素，其返回值为被删除的那个元素。会改变原来的数组。

let a = [喂,你,好,啊]
let a1= a.pop()
console.log(a); //[ 喂, 你, 好 ]
console.log(a1);  //啊

shift方法会删除数组的第一个元素，其返回值为被删除的那个元素，该方法会改变原来的数组。

let b = [10,20,50,80,30]
let b1 = b.shift()
console.log(b); //[ 20, 50, 80, 30 ]
console.log(b1);  //10

splice方法接收三个参数，第一个参数为开始位置，第二个参数为要删除的元素个数，第三个元素为在删除的位置新加的元素，可以为多个。该方法会改变原来的数组。

let c = [a,b,c,d,e]
let c1 = c.splice(0,2,f)
console.log(c); //[ f, c, d, e ]
console.log(c1);  //[ a, b ]

slice方法接收两个参数，第一个为元素开始的位置，第二个为要删除元素的个数。该方法不会改变原来的数组。

let d = [H,e,e,l,o]
let d1 = d.slice(0,2)
console.log(d)  //[ H, e, e, l, o ]
console.log(d1);  //[ H, e ]

三、查找数组的方法

indexOf、find、findIndex、includes

indexOf方法接收一个参数，其值为要查找的元素的值，如果找到返回元素的索引，找不到返回-1。

let a = [10,20,50,70,60]
let a1 = a.indexOf(20)
console.log(a); //[ 10, 20, 50, 70, 60 ]
console.log(a1);  //1

indexOf方法第一个参数为要查找元素的值，也可以接收另外一个参数，该参数为元素的索引，也就是要从第几个索引开始查找，如果第二个参数不写，就默认从索引0开始。

let b = [10,20,50,70,60]
let b1 = a.indexOf(20,2)
console.log(b); //[ 10, 20, 50, 70, 60 ]
console.log(b1);  //-1

find方法中接收一个函数，函数的第一个参数为必选，也就是当前取出在函数执行的元素，第二个参数可选，为当前元素的索引值，第三个参数也是可选，为当前执行的数组。其返回值为查到的第一个符合的元素。

let c = [10,20,30,40]
 let c1 = c.find((item,index,arr)=>item>=20)
 console.log(c)  //[ 10, 20, 30, 40 ]
 console.log(c1) //20

findIndex方法中接收一个函数，函数的第一个参数为必选，也就是当前取出在函数执行的元素，第二个参数可选，为当前元素的索引值，第三个参数也是可选，为当前执行的数组。其返回值为查到的第一个元素的索引。

let d = [10,50,80,70,60]
let d1 = d.findIndex((item,index,arr)=>item>=60)
console.log(d)  //[ 10, 50, 80, 70, 60 ]
console.log(d1) //2

includes方法中可接受两个参数，第一个为必选的，传一个要查找的元素，第二个为可选的，也就是从哪个索引位置开始，2就是从第三个元素开始查找。找到就返回true，找不到就返回false。

let e = [5,10,8,9,20]
let e1 = e.includes(10,2)
let e2 = e.includes(10)   
console.log(e1) //false
console.log(e2);  //true

lastIndexOf方法和indexOf方法的用法相同，只不过lastIndexOf是返回查找到的最后一个元素的索引。

let a = [10,20,50,70,20,60]
  let a1 = a.indexOf(20)
  console.log(a); //[ 10, 20, 50, 70, 20, 60 ]
  console.log(a1);  //4

四.数组的修改方法

splice方法前面有讲

var arr = [1,2,3,4,5];
arr.splice(2, 1, 10);
console.log(arr); //[1, 2, 10, 4, 5]

五.对数组操作的其他方法

join方法传入一个参数，可以是字符串，其返回值为用这个字符串把整个数组连接起来的一个字符串。其不会改变原来的数组。

let a = [h,e,l,l,o]
let a1 = a.join(,)
console.log(a)  //[ h, e, l, l, o ]
console.log(a1) //h,e,l,l,o

filter方法中的函数传入的参数item为当前操作的元素，其函数中的判断如果为true，就把这个元素加入到一个新的数组中，false则不加入，最后该方法返回的为所有返回true的元素组成的数组。

let b = [{
          
   age:20},{
          
   age:50},{
          
   age:30}]
let b1 = b.filter(item=>item.age>30)
console.log(b)  //[ { age: 20 }, { age: 50 }, { age: 30 } ]
console.log(b1) //[ { age: 50 } ]

reverse方法可以把数组中的元素倒序排列，其会改变原来的数组。

let c = [10,15,20,25,30]
let d = [a,b,c,d]
let c1 = c.reverse()
let d1 = d.reverse()
console.log(c)  //[ 30, 25, 20, 15, 10 ]
console.log(c1) //[ 30, 25, 20, 15, 10 ]
console.log(d)  //[ d, c, b, a ]
console.log(d1) //[ d, c, b, a ]

some方法对每一项运行传入的函数，如果有一项符合就返回true，全部都不符合就返回false。

let e = [10,15,20,30,50]
let e1 = e.some(item=>item>20)
let e2 = e.some(item=>item>50)
console.log(e)  //[ 10, 15, 20, 30, 50 ]
console.log(e1) //true
console.log(e2) //false

forEach方法对每一项运行传入的函数，要运行的操作是自己在函数中定义的，比如此例中把每一项都push到f1中，该方法没有返回值。

let f = [10,20,50,80,56]
let f1 = []
f.forEach(function(item){
          
   
	f1.push(item)
})
console.log(f); //[ 10, 20, 50, 80, 56 ]
console.log(f1) //[ 10, 20, 50, 80, 56 ]

map方法对于每一项运行传入的函数，该方法的返回值为一个新的数组，该数组由每一项运行的返回值组成。

let g = [10,15,20,25,35]
let g1 = g.map(item=>item*2) 
console.log(g)  //[ 10, 15, 20, 25, 35 ]
console.log(g1) //[ 20, 30, 40, 50, 70 ]

every方法对每一项都运行传入的函数，每一项返回的结果都为true时该方法的返回值才为true，只要有一项为false，则该方法返回false。

let h = [10,15,30,50,80]
let h1 = h.every(item =>item>30)
let h2 = h.every(item =>item>5)
console.log(h)  //[ 10, 15, 30, 50, 80 ]
console.log(h1) //false
console.log(h2) //true

reduce方法中的函数可以传递四个参数，第一项是必须的，为累加器，第二项也是必须的，为当前的元素，第三项为可选的是当前元素的索引，第四项也是可选的，代表当前操作的数组。另外还可以传入一个初始的initVlaue，为累加器开始的值，如果不加，就默认为0。

let i = [10,15,20,30,50]
let i1 = i.reduce(function(accumulator,item,currentIndex,arr){
          
   
	return accumulator+= item
},0)
console.log(i)  //[ 10, 15, 20, 30, 50 ]
console.log(i1)  //125

这篇关于IT技术分享网 > 经验分享 > js中操作数组的方法 js中操作数组的方法的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！