资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/Javascript数组系列五之增删改和强大的 splice()

Javascript数组系列五之增删改和强大的 splice()

chavesgu / 1495人阅读

摘要：删除数组元素的开始索引需要删除元素的个数，插入数组的元素语法因为参数变化多样，我们主要从三个方面来展示的用法。

今天是我们介绍数组系列文章的第五篇，也是我们数组系列的最后一篇文章，只是数据系列的结束，所以大家不用担心，我们会持续的更新干货文章。

生命不息，更新不止！

今天我们就不那么多废话了，直接干货开始。

我们在《Javascript数组系列一之栈与队列》中描述我们是如何利用 push、pop、shift、unshift方法进行数组单个元素的添加与删除。

但是光有单个元素的删除恐怕难以满足我们的应用场景，那么那么如何进行数组元素的批量操作？let"s go！

数组的增删改 slice

该方法会复制数组的一部分从我们选择到开始到结束位置，返回一个新数组。

slice 方法接受两个可选到参数：一个复制数组到开始索引，一个是复制数组到结束索引。

//语法
array.slice(begin, end);
//案例
const friends = ["大B哥", "二B哥", "三B哥", "我"];
const friends1 = friends.slice();
const friends2 = friends.slice(1);
const friends3 = friends.slice(1, 3);
const friends4 = friends.slice(-1);
const friends5 = friends.slice(-3, -1);
console.log(friends1); //["大B哥", "二B哥", "三B哥", "我"]
console.log(friends2); //["二B哥", "三B哥", "我"]
console.log(friends3); //["二B哥", "三B哥"]
console.log(friends4); //["我"]
console.log(friends5); //["二B哥", "三B哥"]

slice 方法主要就是复制数组到一部分，然后返回新的数组，所以用法也相对简单一些。但是还是有一些我们值得注意到地方。

数组始终都是从左到右到复制顺序，即使参数是负数也是如此

没有接受任何参数的时候，会复制整个数组

一个参数的时候，是从当前参数的索引位置到数组到结束

两个参与时，采用左闭右开到原则，即包含开始，但不包含结束

当参数为负数时，会从数组的末尾开始计算

以上就是 slice 方法值得我们注意的地方，如果大家掌握了这些知识，那么将会很好的使用它。

最后，我们来看一看它的兼容问题

splice

splice 方法一个数组中最强大的方法，不仅可以对数组进行元素对添加，对数组元素对删除，对数组元素的替换，可以说它集百家与一身，它会直接修改原数组，返回删除的元素。

那么我们就来好好的看看它是如何进行数组的添加、删除与替换工作。

splice 方法的参数传入数量不的不同形成的效果也会不同。

首先它接受三个参数或甚至更多，除了开始位置索引 start 参数以外，其余全是可选参数。

start：删除数组元素的开始索引

count：需要删除元素的个数

item1，item2...：插入数组的元素

//语法
array.splice(start, count, item1, item2, ...)

因为 splice 参数变化多样，我们主要从三个方面来展示 splice 的用法。

1. 如何删除数组元素

传递一个参数的时候，数组会删除从给定的索引到数组结束的所有元素，原数组会被修改，返回删除的数组

//删除元素
const numbers = [1, 2, 3, 4, 5];
const removes = numbers.splice(2);
console.log(numbers); //[1, 2]
console.log(removes); //[3, 4, 5]

如何删除指定个数的数组？如我们只想删除第6个元素等等...
我们添加第二个参数 count 即可，元素的索引是从0开始，也就是说 start 参数是从 0 开始的。

//删除第6个元素
const numbers = [1, 2, 3, 4, 5, 6, 7, 8];
const removes = numbers.splice(5, 1);
console.log(numbers); //[1, 2, 3, 4, 5, 7, 8]
console.log(removes); //[6]

//删除第6，7位两个元素
const numbers = [1, 2, 3, 4, 5, 6, 7, 8];
const removes = numbers.splice(5, 2);
console.log(numbers); //[1, 2, 3, 4, 5, 8]
console.log(removes); //[6, 7]

已然明白，splice 方法是从 start 索引位置开始，删除 count 个元素。如何不删除元素呢？有些聪明的同学肯定已经知道那就是我们的 count 为 0 时，它就不会删除任何元素，这个也为我们后面如何添加与替换元素提供了前提条件。

2. 如何添加数组元素

如何添加一个元素，这会就要用到我们的第三个参数或者第四个，第五个等等，依次添加即可。

//指定在某个位置添加一个元素
const numbers = [1, 2, 3, 4, 5];
const removes = numbers.splice(2, 0, "F");
console.log(numbers); //[1, 2, "F", 3, 4, 5]
console.log(removes); //[]

//指定在某个位置添加多个元素
const numbers = [1, 2, 3, 4, 5];
const removes = numbers.splice(2, 0, "A", "B", "C");
console.log(numbers); //[1, 2, "A", "B", "C", 3, 4, 5]
console.log(removes); //[]

因为不对数组进行任何的删除项，然后又在数组中插入一些元素，实现的数组的添加

3. 如何替换数组元素

替换的思路与删除仅仅多了一步把要插入掉位置元素给删除掉。

//替换第2，3位的元素
const numbers = [1, 2, 3, 4, 5];
const removes = numbers.splice(2, 2, "A", "B");
console.log(numbers); //[1, 2, "A", "B", 5]

console.log(removes); //[3, 4]

来看看 splice 方法的兼容性如何

到目前位置连续五篇文章，我们已经介绍了很多数组的一些方法，你会发现这些方法都是基于单个数组的增删改甚至是合并，没有数组与数组之间的一些方法，不过 Javascript 还是为我们提供了一个方法就是可以实现数组与数组之间的合并操作。

concat

用法非常简单，就是用于两个数组的合并，原有数组不发生改变，返回一个新的数组。

它接受的参数为数组或者是值类型，参数的个数为一个或者多个。

//语法
var newArray = array.concat(array1, array2...)
//连接两个数组
const numbers1 = ["1", "2", "3"];
const numbers2 = ["4", "5", "6"];
const newNumbers = numbers1.concat(numbers2);
console.log(numbers1); //["1", "2", "3"]
console.log(numbers2); //["4", "5", "6"]
console.log(newNumbers);//["1", "2", "3", "4", "5", "6"]

//连接值类型
const numbers1 = ["1", "2", "3"];
const newNumbers = numbers1.concat("4");
console.log(newNumbers); //["1", "2", "3", "4"]

//连接多个数组
const numbers1 = ["1", "2", "3"];
const numbers2 = ["4", "5", "6"];
const number3 ＝ ["7"];
const newNumbers = numbers1.concat(numbers2, number3);
console.log(newNumbers);//["1", "2", "3", "4", "5", "6", "7"]

那么 concat 方法的兼容性如何呢？

总结

到目前位置数组的系列文章以及介绍完毕，我们系统以及完整的介绍了数组的一系列方法，通过一些例子介绍了每个用法，甚至我们把每个方法的很多用法都有提到，不说能够应对所有应用场景把，至少在日常的开发过程中足够使用了。

数组虽然说完了，但是我们的故事还没有说玩，欢迎持续关注。

关注微信公众号：六小登登。领取全套学习资源

系列文章列表：

《Javascript数组系列一之栈与队列》

《Javascript数组系列二之迭代方法1》

《Javascript数组系列三之迭代方法2》

《Javascript数组系列四之数组的转换与排序sort》

《Javascript数组系列五之增删改和强大的 splice()》

idc机房托管 超融合服务器 slice和splice的区别 js数组splice用法 数组增删改查c语言 javascript专题系列

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/97862.html

相关文章

  • node express mongoose简单实现全栈之增删改查

    摘要：作为一个有志向的前端，怎么能不搞搞全栈呢。。。地址欢迎大家多多交流前端技术啊，如果大家喜欢的话，请给我一个小小的哦 作为一个有志向的前端，怎么能不搞搞全(zhuang)栈(bi)呢。。。说搞咱就搞啊，后端就用node，数据库就用mongodb，前端呢，呃，再搞个node的web框架express，思路搞定，开始搭建我们的环境，搭建之前还是先看看我们的目标和成果 项目的目标和成果 sh...

    AndroidTraveler 评论0 收藏0

  • 吐槽Javascript系列二：数组中的splice和slice方法

    摘要：原来，它的替换功能实际上是通过删除和添加来完成的。在只有一个参数的情况下，方法返回从该参数指定位置开始到当前数组末尾的所有项。它并不改变原数组。吐槽我曾经一直困惑数组中的删除方法，当知道删除这项伟大的任务竟然交给了，我心里是失望的。 战斗英雄你当，漂亮媳妇儿你娶，怎么啥好事都被你给占了——《激情燃烧的岁月》 谈起这两个方法，新手不蒙，我是不信！正如吐槽Javascript系列一：sli...

    lookSomeone 评论0 收藏0

  • 手摸手，带你用vue撸后台 系列三(实战篇)

    摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。 完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台 系列一(基础篇)系类文章二：手摸手，带你用vue撸后台 系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台 系列三(实战篇）系类文章四：手摸手，带你用vue撸后台 系列...

    Channe 评论0 收藏0

  • 手摸手，带你用vue撸后台 系列三(实战篇)

    摘要：社区的认可目前已经是相关最多的开源项目了，体现出了社区对其的认可。监听事件手动维护列表这样我们就简单的完成了拖拽排序。 完整项目地址：vue-element-admin 系类文章一：手摸手，带你用vue撸后台 系列一(基础篇)系类文章二：手摸手，带你用vue撸后台 系列二(登录权限篇)系类文章三：手摸手，带你用vue撸后台 系列三(实战篇）系类文章四：手摸手，带你用vue撸后台 系列...

    zgbgx 评论0 收藏0

  • 吐槽Javascript系列三：数组的陷阱

    摘要：虽然本系列是吐槽，但并不是为了黑，而是揭露它的一些特性怪癖，只有更好的了解它，才能更好的使用它。本篇主要介绍数组中常见的隐患点。 虽然本系列是吐槽，但并不是为了黑Javascript，而是揭露它的一些特性（怪癖），只有更好的了解它，才能更好的使用它。本篇主要介绍数组中常见的隐患点。 龟速的map 在数组中，map是一个功能很强大的方法，先来见识一下： let arr = [5, 2, ...

    U2FsdGVkX1x 评论0 收藏0

发表评论

登陆后可评论

0条评论

chavesgu

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<