js中操作数组的方法大全

用户1420182212332
86 阅读7分钟

js中操作数组的方法

1.对数组元素增加的方法

  • 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

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

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

  3. 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);    //[]

  4. 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]

2.对数组的删除方法

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

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

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

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

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

  3. 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' ]

  4. 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' ]

3.查找数组的方法

  • 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

  2. 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

  3. 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

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

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

  5. 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

4.数组的修改方法

splice方法前面有讲

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

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

  2. 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 } ]

  3. 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' ]

  4. 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

  5. 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 ]

  6. 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 ]

  7. 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

  8. 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
avatar
文章
阅读
粉丝