Javascript详细讲解及使用splice()方法删除添加替换数组元素
今天是我们介绍数组系列文章的第五篇,也是我们数组系列的最后一篇文章,只是数据系列的结束,所以大家不用担心,我们会持续的更新干货文章。
生命不息,更新不止!
今天我们就不那么多废话了,直接干货开始。
我们在《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 方法的兼容性如何呢?
总结
到目前位置数组的系列文章以及介绍完毕,我们系统以及完整的介绍了数组的一系列方法,通过一些例子介绍了每个用法,甚至我们把每个方法的很多用法都有提到,不说能够应对所有应用场景把,至少在日常的开发过程中足够使用了。
数组虽然说完了,但是我们的故事还没有说玩,欢迎持续关注。
本文原创文章发布于微信公众号:Modeng。关注并回复 「前端书籍」百本经典技术书籍免费领取,你懂的!
系列文章列表:
- 《Javascript数组系列一之栈与队列》
- 《Javascript数组系列二之迭代方法1》
- 《Javascript数组系列三之迭代方法2》
- 《Javascript数组系列四之数组的转换与排序sort》
- 《Javascript数组系列五之增删改和强大的 splice()》
今天是我们介绍数组系列文章的第五篇,也是我们数组系列的最后一篇文章,只是数据系列的结束,所以大家不用担心,我们会持续的更新干货文章。
生命不息,更新不止!
今天我们就不那么多废话了,直接干货开始。
我们在《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 方法值得我们注意的地方,如果大家掌握了这些知识,那么将会很好的使用它。
最后,我们来看一看它的兼容问题
![](/images/cnblogs/1537240048R15Dt37240f048.png)
#### 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 方法的兼容性如何
![](/images/cnblogs/1537240048R15Dt37240f048.png)
到目前位置连续五篇文章,我们已经介绍了很多数组的一些方法,你会发现这些方法都是基于单个数组的增删改甚至是合并,没有数组与数组之间的一些方法,不过 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 方法的兼容性如何呢?
![](/images/cnblogs/1537240048R15Dt37240f048.png)
### 总结
到目前位置数组的系列文章以及介绍完毕,我们系统以及完整的介绍了数组的一系列方法,通过一些例子介绍了每个用法,甚至我们把每个方法的很多用法都有提到,不说能够应对所有应用场景把,至少在日常的开发过程中足够使用了。
数组虽然说完了,但是我们的故事还没有说玩,欢迎持续关注。
**本文原创文章发布于微信公众号: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/)
- [快学Python3]JSON解析
- Codeforces 754A Lesha and array splitting(简单贪心)
- [快学Python3]日期和时间处理
- Codeforces Round #412 (rated, Div. 2, base on VK Cup 2017 Round 3)(A.B.C,3道暴力题,C可二分求解)
- [快学Python3]目录与文件操作
- Codeforces Round #411 (Div. 2)(A,B,C,D 四水题)
- [快学Python3]INI文件读写
- [快学Python3]迭代器和生成器
- [快学Python3]模块和包
- 除法取模与逆元/费马小定理
- [快学Python3]类基础
- 邻接矩阵存储有向图(详解)
- [快学Python3]二分查找[策略优化版本]
- 使用 zipfile 解压含有中文文件名的 zip 文件
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 如何绕过堡垒机远程登录
- Android | okhttp细枝篇
- valgrind测试报告分析
- 深度学习Pytorch检测实战 - Notes - 第5章 单阶多层检测器:SSD
- Java+selnium 智能等待,try catch方法智能定位需添加等待的元素
- Python中的命名空间和作用域(2)
- C/C++可以用正则表达式吗?
- typescript实战总结之实现一个互联网黑白墙
- 文件上传漏洞演示(一句话木马文件 + 蚁剑)
- [Bazel]构建Golang项目
- 2020--IDEA破解失败后无法打开(mac/win)【已解决】
- CPU:别再拿我当搬砖工!
- 7类 登录/注册 安全漏洞
- 安全弹出你的移动设备,保护数据安全!
- burpsuite系列