js中数组常用的方法总结汇总

Posted Fanyee

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js中数组常用的方法总结汇总相关的知识,希望对你有一定的参考价值。

常规的方法

1.push() 后增

push()方法可以向数组后添加一个新的元素,并返回新数组的长度。

末尾添加,返回长度,改变原数组

var a = [1,2,3]
var b = a.push(4)
console.log(a) // [1,2,3,4]
console.log(b) // 4

2.unshift() 前增

unshift()可以向数组前添加一个或多个元素,并返回新的长度

首部添加,返回长度,改变原数组

var a = [2,3,4]
var b = a.unshift(0,1)
console.log(a) // [0,1,2,3,4]
console.log(b)  // 5

3.pop() 后删

pop() 用于删除并返回最后一个元素。

尾部删除,返回被删除的元素,改变原数组

var a = [1,2,3]
var b = a.pop()
console.log(a) // [1,2]
console.log(b) // 3

4.shift() 前删

shift() 用于删除并返回首个元素

删除首部元素,返回被删元素,改变原数组

var a = [1,2,3]
var b = a.shift()
console.log(a) // [2,3]
console.log(b) // 1

5.splice() 修该删除

splice(index,length,增加的元素1,增加的元素2....,增加的元素N) 表示从index开始删除length个元素,并从index开始新增元素1~N,放回被删除的元素组成的数组

对数组进行删除修改,返回被删除的元素组成的数组,改变原数组

var a = [1,2,3]
var b = a.splice(1,1,3,[2,3,4],5)
console.log(a) // [1,3,[2,3,4],5,3]
console.log(b) // [2]

6.concat() 拼接

concat() 方法用来合并两个或多个数组
使用场景:使用于移动端下拉分页的情况

合并两个或多个数组,返回新数组,不会改变原数组

var a = [1,2,3]
var b = [4,5]
console.log(a) // [1,2,3]
console.log(b) // [4,5]
 console.log(c) // [1,2,3,4,5]

7.filter() 过滤

filter() 方法返回数组中满足条件的元素组成的新数组,原数组不变

filter()的参数是一个方法

            var a = [1, 2, 3, 4, 11]
            // 第一个参数为一个方法,有三个参数,current:当前值 index:当前值下标 array:这个数组对象
            var b = a.filter(function (current, index, array) {
                return current < 10
            })

            console.log(b) // [1,2,3,4]
            console.log(a) // [1,2,3,4,11]

8.map() 格式化数组

map() 方法来根据需求格式化原数组,返回格式化后的数组。原数组不变

var a = [1,2,3,4,5]
// 参数同filter方法
var b = a.map(function(current,index,array){
    return current + 1
})
 
console.log(b) // [2,3,4,5,6]
console.log(a) // [1,2,3,4,5]

ES6新增的方法

1.find()

找到数组中第一次满足条件的元素,并返回,若找不到则返回undefined。不改变原数组。

和filter()方法的区别在于:filter返回值是所有满足条件的元素组成的数组,

一般在需要使用找到的元素时,用find()方法

var a = [1,2,3,4]
// b在下面需要使用,则一般用find
var b = a.find(function(ele,index,array){
    return ele == 1
})
 
var c = 3
var d = b + c
console.log(a) // [1,2,3,4]
console.log(b) // 1
console.log(d) // 4
 
// 若只需判断元素是否存在
// 若果是简单数组(非对象数组),则一般使用Array.includes(value)方法
// 如果为对象数组,则可以使用Array.some()方法
 
var a = [1,2,3]
console.log(a.includes(1))  // true
 
var a = [{"name": "xiaoming" },{"name": "xiaohong"}]
 
console.log(a.some(function(ele){
    return ele.name == \'xiaoming\'
}))                            // true

2.findIndex()方法

findIndex()的作用同indexOf(),返回第一个满足条件的下标,并停止寻找。

区别是findIndex() 的参数为一个回调函数,且一般用于对象数组

var a = [1,2,3,4]
 
var b = a.findIndex(function(ele,index,array){
    return ele === 2
})
 
var c = a.indexOf(2)  
 
console.log(a)  // [1,2,3,4]
console.log(b)  // 1
console.log(c)  // 1

以上是关于js中数组常用的方法总结汇总的主要内容,如果未能解决你的问题,请参考以下文章

js数组遍历方法总结

几个关于js数组方法reduce的经典片段

js数组去重的三种常用方法总结

js数组去重的三种常用方法总结

js中数组Array的一些常用方法总结

原生JS常用代码汇总