Javascript

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

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

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

push/unshift/splice(这三个会改变原来的数组),concat不会改变原来的数组。
  1. 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
  1. unshift方法接收一个参数,并把这个参数放在数组的最前面,返回数组的最新长度。会改变原来的数组。
let b = ["小红","小李","小明"]
let b1 = b.unshift("小王")
console.log(b); //[ 小王, 小红, 小李, 小明 ]
console.log(b1);  //4
  1. 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);    //[]
  1. 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不会改变原来的数组。
  1. pop方法会删除数组的最后一个元素,其返回值为被删除的那个元素。会改变原来的数组。
let a = [喂,你,好,啊]
let a1= a.pop()
console.log(a); //[ 喂, 你, 好 ]
console.log(a1);  //啊
  1. shift方法会删除数组的第一个元素,其返回值为被删除的那个元素,该方法会改变原来的数组。
let b = [10,20,50,80,30]
let b1 = b.shift()
console.log(b); //[ 20, 50, 80, 30 ]
console.log(b1);  //10
  1. 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 ]
  1. 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
  1. 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
  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
  1. 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
  1. 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
  1. 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]

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

  1. 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
  1. 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 } ]
  1. 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 ]
  1. 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
  1. 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 ]
  1. 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 ]
  1. 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
  1. 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中操作数组的方法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!