一文了解JavaScript中操作数组的10个函数

掘金归海一刀
196 阅读3分钟

一. 说明

一篇文章让你加深对JavaScript中数组函数的了解，让你在工作中如鱼得水，节省大量查询函数使用方法的时间，用剩余的时间来掘金摸鱼不好吗？

二.详解JavaScript数组函数

1.push

  • 说明：往数组最后添加元素，但会改变原数组。同时可以一次添加多个元素
  • 示例代码
let a_array = [1,2,3,4]
let a_length = a.push(5);
console.log("a:",a)
console.log("a_length:",a_length)
  • 运行结果

image.png

2.unshift

  • 说明：往数组最前添加元素，也会改变原数组，同样可以一次插入多个元素，它的返回结果为变更后的数组长度。
  • 示例代码
let a = [1,2,3,4]
let a_length = a.unshift(4,5,6);
console.log("a:",a)
console.log("a_length:",a_length)
  • 运行结果

image.png

3.pop

  • 说明：移除数组最后一个元素，会改变原数组，返回结果为被移除的元素。
  • 示例代码
let a = [1,2,3,4]
let a_changed = a.pop();
console.log("a:",a)
console.log("a_changed:",a_changed)
  • 运行结果

image.png

4.shift

  • 说明：移除数组第一个元素，会改变原数组，返回结果为变被移除的元素。
  • 示例代码
let a_array = [1,2,3,4]
let a_length = a.shift();
console.log("a:",a)
console.log("a_length:",a_length)
  • 运行结果

image.png

5.splice

  • 说明：向数组添加新项，改变原数组,返回结果为被移除的元素数组
  • 参数说明
参数1：操作的下标，如果下标超过数组最大下标则从数组末尾开始操作
参数2：需要删除的元素长度，可无，默认从操作下标到数组最末尾；如果为0则返回一个空数组;如果第二参数为非数字类型，则该参数会被当做0看待。
参数3：需要重新嵌入的元素，可无
  • 示例代码
let a = [1,2,3,4]
let a_changed = a.splice(2,1,...[5,6,7]);
console.log("a:",a)
console.log("a_changed:",a_changed)
  • 运行结果

image.png

6.slice

  • 说明
从数组中提取出一个新的数组
不改变原数组
返回结果为变被移除的元素（数组类型）
参数分别为：数组提取起始下标和截止下标([startindex,endindex) ,左开右闭；没有截止下标默认到数组最末未;如果起止下标相同则不截取
  • 示例代码
let a = [1,2,3,4]
let a_changed = a.slice(1,2);
console.log("a:",a)
console.log("a_changed:",a_changed)
  • 运行结果

image.png

7.concat

  • 说明
组合连接两个及以上数组
不改变原数组
返回结果为链接后的数组
  • 示例代码
let a = [1,2,3,4]
let a_changed = a.concat([5,6]);
console.log("a:",a)
console.log("a_changed:",a_changed)
  • 运行结果

image.png

8.join

  • 说明
将数组各项以某个符号串联
不改变原数组
返回串联后的字符串
入参为串联符号，默认为英文逗号串联
  • 示例代码
let a = [1,2,3,4]
let a_changed = a.join();
console.log("a:",a)
console.log("a_changed:",a_changed)
  • 运行结果

image.png

9.filter

  • 说明：过滤出满足特定条件的新数组
  • 示例代码
let a = [1,2,3,4,5,6,7,8,9]
let a_changed = a.filter((a,b,c)=>{
    return a > 5;
});
console.log("a:",a)
console.log("a_changed:",a_changed)
  • 运行结果

image.png

10.map

  • 说明
遍历数组后返回一个新的数组
不改变原数组，但是复杂类型会被callback改变
新建的数组显式为map中return的内容，如果不写return,则该项为undefined
  • 示例代码
let a = [1,2,3,4]
let a_changed = a.map((a,b,c)=>{
    a = a +3;
    return a;
});
console.log("a:",a)
console.log("a_changed:",a_changed)
  • 运行结果

image.png

三.总结

JavaScript中的数组函数有很多，但工作中常用的也就这几个（其他的我可能不知道，毕竟我是主做后端的，前端也做，毕竟公司小，没前端），技术都是积累的，把常用的记住，写起来也就没那么费事了。今天晚上加班没啥事，就整理了下，继续加油！

avatar
文章
阅读
粉丝