Array常用方法的整理

298 阅读3分钟

前言

在日常的代码逻辑中,我们少不了对数组进行一些操作,但是,你真的清楚地了解数组的每个方法嘛?

举个栗子

有一个小小的需求,写一个方法,有两个参数,一个是数组,另一个是需要添加到数组里面的元素。

function arrPush(arr, target) {
    return arr.push(target);
}

var arr_1 = [1, 2, 3];

console.log(arrPush(arr_1, 4));

我们的需求就是把[1, 2, 3]变成[1, 2, 3, 4],看起来好像没有错诶~那最后的console.log()结果是什么呢?

最后的结果是4,如果你还没有看出来,那可能是没有真正地了解push()这个数组方法

引玉

那我们就来整理一些常用的数组方法api吧,方便日常的简单查阅

array.push()

作用:在调用数组中尾部添加一个或多个元素,并且返回数组的新长度 这也就能解释,为什么上面的栗子最后的结果是4,而不是我们想要的[1, 2, 3, 4]了。那么改写一下上面的栗子,如下:

function arrPush(arr, target) {
    arr.push(target)
    return arr;
}

var arr_1 = [1, 2, 3];

console.log(arrPush(arr_1, 4));

这个时候结果才是我们最后想要的[1, 2, 3, 4],顺便就说说push方法可以同时接收多个参数,像这样arr.push(1, 2, 3, 4),返回结果当然还是数组的新长度啦。

array.pop()

作用:与array.push()相反,它是删除调用数组的最后一个元素,减小数组的长度并返回它删除的值

let a = [1,2,3,4,5,6]
a.pop()                 //a = [1,2,3,4,5] 返回 6
let b = [1,2,3,4,[5,6]]
b.pop()                 //b = [1,2,3,4]   返回 [5,6]

array.unshift()

作用:在调用数组中头部添加一个或多个元素,并且返回数组的新长度

let a = [1,2,3]
a.unshift(5)           //a = [5,1,2,3]         返回 4
let b = [1,2,3,4]
b.unshift([5,6])       //b = [[5,6],1,2,3,4]   返回 5

array.shift()

作用:与array.unshift()相反,删除调用数组的第一个元素,并且返回它删除的值

let a = [1,2,3]
a.shift()             //a = [2,3]       返回 1
let b = [[5,6],1,2,3,4]
b.shift()             //b = [1,2,3,4]   返回 [5,6]

array.join()

作用:将数组中所有的元素都转化为字符串并连接在一起,返回最后生成的字符串

let a = [1,2,3]
a.join()              //返回 1,2,3
a.join("")            //返回 123
a.join(" ")           //返回 1 2 3
a.join(",")           //返回 1,2,3

array.reverse()

作用:将数组中的元素颠倒顺序,返回逆向数组

let a = [1,2,3]
a.reverse()            //返回 [3,2,1]

array.concat()

作用:创建并返回一个新数组,它的元素包含调用concat()的原始数组的元素和concat()的每个参数。如果这些参数中任何一个自身是数组,则连接的是数组的元素,而非数组本身。

let a = [1,2,3]
a.concat(4,5)             //返回 [1,2,3,4,5]
a.concat([4,5])           //返回 [1,2,3,4,5]
a.concat([4,5],[6,7])     //返回 [1,2,3,4,5,6,7]
a.concat(4,[5,[6,7]])     //返回 [1,2,3,4,5,[6,7]]

array.map()

作用:将调用数组中每一项进行操作后返回新的数组,且不修改调用的数组

let a = [1,2,3]
let b = a.map(function(x){return x*x})
console.log(b) //b=[1,4,9]

array.filter()

作用:返回调用数组中满足条件的元素组成的新数组

let a = [1,2,3,4,5,6]
let b = a.filter(function(x){return x < 3})
console.log(b) //b=[1,2]

总结

以上是我在工作中有用到的数组方法,我对他们集中罗列了一下,也算是自我复习一下,以防自己在日后的工作中使用不当,数组方法还有很多,希望小伙伴们在使用前认真查阅文档,正确使用方法。最后贴图一张,日后继续整理归纳。

数组方法归纳图

arrary.png