JavaScript中splice与slice的区别


Posted in Javascript onMay 09, 2017

splice与slice是数组中的两个常用方法,但是很多初学者很容易将二者混淆。

slice的操作不影响原数组。会返回所选择的元素。

splice往数组中指定位置添加或删除元素,会影响原数组。返回被删除的元素。

slice()

可从已有的数组中返回选定的元素。

语法

arrayObject.slice(start,end)

start 必需。规定从何处开始选取。如果是负数,那么它规定从数组尾部开始算起的位置。也就是说,-1 指最后一个元素,-2 指倒数第二个元素,以此类推。

end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数,那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数,那么它规定的是从数组尾部开始算起的元素。

var arr = [1,2,3,4,5,6]
arr.slice(2, 3) //返回[3]

splice()

splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目。

注释:该方法会改变原始数组。
arrayObject.splice(index,howmany,item1,.....,itemX)

index 必需。整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置。

howmany 必需。要删除的项目数量。如果设置为 0,则不会删除项目。

item1, ..., itemX 可选。向数组添加的新项目。

如,向数组的起始位置插入一个新的元素  -1

var arr = [1,2,3,4,5,6]
arr.splice(0,0, -1) //返回[],第二个参数为0,即不删除任何元素
console.log(arr)

> [-1, 1, 2, 3, 4, 5, 6]

用slice复制数组

使用 slice(0) 可以快速复制并生成 一个新的数组,不过数组是新的,里面的元素还是原来的引用,比如:

var o = [1, 2]
var arr = [ 3, 4, o ]
var clone = arr.slice(0)
console.log(clone)
> [3, 4, Array[2]]

用concat复制数组

Array.concat 数组拼接函数也可以用来复制数组,比如:

var o = [1, 2]
var arr = [ 3, 4, o ]
var clone = arr.concat()
console.log(clone)
> [3, 4, Array[2]]

不过 slice和concat 生成的数组是新的,但里面的元素还是原来的引用,比如:

clone[2].push(3)
console.log(o)
> [1, 2, 3]

用JSON parse/ strinigfy 进行深度复制

可以使用 JSON.parse(JSON.stringify(arr)) 对对象或数组进行快速深度复制,此种方法无法复制 function 等无法序列化的对象,比如:

var o = [1, 2]
var arr = [ 3, 4, o ]
var clone = JSON.parse(JSON.stringify(arr))
console.log(clone)

> [3, 4, Array[2]]


clone[2].push(3)
console.log(o)
> [1, 2] //o元素没有变化

参考:

https://3water.com/w3school/jsref/jsref_splice.htm

Javascript 相关文章推荐
jquery插件珍藏(图片局部放大/信息提示框)
Jan 08 Javascript
javaScript arguments 对象使用介绍
Oct 18 Javascript
web css实现整站样式互相切换
Oct 29 Javascript
理解javascript中DOM事件
Dec 25 Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
JavaScript使用键盘输入控制实现数字验证功能
Aug 19 Javascript
jquery根据一个值来选中select下的option实例代码
Aug 29 Javascript
Angular在一个页面中使用两个ng-app的方法
Feb 20 Javascript
jQuery插件FusionCharts实现的MSBar2D图效果示例【附demo源码】
Mar 24 jQuery
利用Vue实现移动端图片轮播组件的方法实例
Aug 23 Javascript
一些你可能不熟悉的JS知识点总结
Mar 15 Javascript
详解node中创建服务进程
May 09 #Javascript
微信小程序 自动登陆PHP源码实例(源码下载)
May 08 #Javascript
jquery.uploadifive插件怎么解决上传限制图片或文件大小问题
May 08 #jQuery
微信小程序 标签传入数据
May 08 #Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 #Javascript
JS正则表达式验证中文字符
May 08 #Javascript
bootstrap table表格插件使用详解
May 08 #Javascript
You might like
全国FM电台频率大全 - 19 广东省
2020/03/11 无线电
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
Laravel框架控制器,视图及模型操作图文详解
2019/12/04 PHP
JS 表单验证大全
2011/11/23 Javascript
javascript学习笔记(一)基础知识
2014/09/30 Javascript
使用原生JS实现弹出层特效
2014/12/22 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
JS组件Bootstrap实现弹出框效果代码
2016/04/26 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
原生JS实现导航下拉菜单效果
2020/11/25 Javascript
以v-model与promise两种方式实现vue弹窗组件
2018/05/21 Javascript
JS实现点击拉拽轮播图pc端移动端适配
2018/09/05 Javascript
如何根据业务封装自己的功能组件
2019/04/19 Javascript
[01:06:25]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
python实现用户登陆邮件通知的方法
2015/07/09 Python
python安装mysql-python简明笔记(ubuntu环境)
2016/06/25 Python
Zabbix实现微信报警功能
2016/10/09 Python
Python类属性的延迟计算
2016/10/22 Python
PyQt5每天必学之事件与信号
2018/04/20 Python
python中dict字典的查询键值对 遍历 排序 创建 访问 更新 删除基础操作方法
2018/09/13 Python
Python Opencv 通过轨迹(跟踪)栏实现更改整张图像的背景颜色
2020/03/09 Python
Python爬虫之Selenium中frame/iframe表单嵌套页面
2020/12/04 Python
CSS3教程(10):CSS3 HSL声明设置颜色
2009/04/02 HTML / CSS
加拿大折扣、优惠券和交易网站:WagJag
2018/02/07 全球购物
德国自然时尚和有机产品购物网站:Waschbär
2019/05/29 全球购物
美赞臣营养马来西亚旗舰店:Enfagrow马来西亚
2019/07/26 全球购物
如何利用cmp命令比较文件
2016/04/11 面试题
新闻学专业个人求职信写作
2014/02/04 职场文书
学生个人自我鉴定
2014/03/26 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
宣传部部长竞选稿
2015/11/21 职场文书
2016年小学生教师节广播稿
2015/12/18 职场文书
Python通过m3u8文件下载合并ts视频的操作
2021/04/16 Python
Python使用openpyxl模块处理Excel文件
2022/06/05 Python
MySQL索引失效十种场景与优化方案
2023/05/08 MySQL