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

程序员文章站 2023-11-25 15:30:16

今天是我们介绍数组系列文章的第五篇，也是我们数组系列的最后一篇文章，只是数据系列的结束，所以大家不用担心，我们会持续的更新干货文章。生命不息，更新不止！今天我们就不那么多废话了，直接干货开始。我们在《Javascript数组系列一之栈与队列》中描述我们是如何利用 push、pop、shift、 ......

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

生命不息，更新不止！

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

我们在《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 方法值得我们注意的地方，如果大家掌握了这些知识，那么将会很好的使用它。

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

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

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数组系列五之增删改和强大的 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数组系列五之增删改和强大的 splice()

总结

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

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

本文原创文章发布于微信公众号：modeng。关注并回复「前端书籍」百本经典技术书籍免费领取，你懂的！

系列文章列表：

今天是我们介绍数组系列文章的第五篇，也是我们数组系列的最后一篇文章，只是数据系列的结束，所以大家不用担心，我们会持续的更新干货文章。
生命不息，更新不止！
今天我们就不那么多废话了，直接干货开始。
我们在《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 方法值得我们注意的地方，如果大家掌握了这些知识，那么将会很好的使用它。
最后，我们来看一看它的兼容问题
![](http://images3.10qianwan.com/10qianwan/20180916/b_0_201809160009268294.jpg)
#### 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 方法的兼容性如何
![](http://images3.10qianwan.com/10qianwan/20180916/b_0_201809160009268294.jpg)

到目前位置连续五篇文章，我们已经介绍了很多数组的一些方法，你会发现这些方法都是基于单个数组的增删改甚至是合并，没有数组与数组之间的一些方法，不过 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 方法的兼容性如何呢？
![](http://images3.10qianwan.com/10qianwan/20180916/b_0_201809160009268294.jpg)

### 总结
到目前位置数组的系列文章以及介绍完毕，我们系统以及完整的介绍了数组的一系列方法，通过一些例子介绍了每个用法，甚至我们把每个方法的很多用法都有提到，不说能够应对所有应用场景把，至少在日常的开发过程中足够使用了。
数组虽然说完了，但是我们的故事还没有说玩，欢迎持续关注。
**本文原创文章发布于微信公众号：modeng。关注并回复「前端书籍」百本经典技术书籍免费领取，你懂的！**
系列文章列表：
1. [《javascript数组系列一之栈与队列》](https://www.modenng.com/2018/09/06/array-push-pop-tutorial/)2. [《javascript数组系列二之迭代方法1》](https://www.modenng.com/2018/09/10/array-foreach-map-filter-tutorial/)3. [《javascript数组系列三之迭代方法2》](https://www.modenng.com/2018/09/12/array-reduce-find-indexof-tutorial/)4. [《javascript数组系列四之数组的转换与排序sort》](https://www.modenng.com/2018/09/15/array-sort-join-tostring-tutorial/)5. [《javascript数组系列五之增删改和强大的 splice()》](https://www.modenng.com/2018/09/17/array-slice-splice-concat-tutorial/)

上一篇： JavaScript中Array的正确使用方式

下一篇：重温JavaScript获取CSS样式的方法（兼容各浏览器）