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的实现简单的分页控件
Oct 10 Javascript
event.X和event.clientX的区别分析
Oct 06 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 Javascript
jQuery中:file选择器用法实例
Jan 04 Javascript
jQuery中attr()方法用法实例
Jan 05 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
javascript中new关键字详解
Dec 14 Javascript
RequireJS使用注意细节
May 15 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
Jan 03 Javascript
Angular浏览器插件Batarang介绍及使用
Feb 07 Javascript
webpack+vue.js构建前端工程化的详细教程
May 10 Javascript
7个你应该知道的JS原生错误类型
Apr 29 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电台频率大全 - 2 天津市
2020/03/11 无线电
php 生成静态页面的办法与实现代码详细版
2010/02/15 PHP
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
php格式输出文件var_export函数实例
2014/11/15 PHP
Laravel中的Auth模块详解
2017/08/17 PHP
二级域名或跨域共享Cookies的实现方法
2008/08/07 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
javascript绘制漂亮的心型线效果完整实例
2016/02/02 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
浅谈在js传递参数中含加号(+)的处理方式
2016/10/11 Javascript
使用JS正则表达式 替换括号,尖括号等
2016/11/29 Javascript
Vue computed计算属性的使用方法
2017/07/14 Javascript
angularjs实现的购物金额计算工具示例
2018/05/08 Javascript
npm 更改默认全局路径以及国内镜像的方法
2018/05/16 Javascript
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
用Electron写个带界面的nodejs爬虫的实现方法
2019/01/29 NodeJs
详解小程序input框失焦事件在提交事件前的处理
2019/05/05 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
2019/12/30 Javascript
Django框架中render_to_response()函数的使用方法
2015/07/16 Python
Python黑魔法@property装饰器的使用技巧解析
2016/06/16 Python
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
高效使用Python字典的清单
2018/04/04 Python
Python 加密与解密小结
2018/12/06 Python
python中partial()基础用法说明
2018/12/30 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
美国领先的在线旅游网站:Orbitz
2018/11/05 全球购物
集体备课反思
2014/02/12 职场文书
调解协议书
2014/04/16 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
给上级领导的感谢信
2015/01/22 职场文书
交通安全月活动总结
2015/05/08 职场文书
2015年基建工作总结范文
2015/05/23 职场文书