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 相关文章推荐
讲两件事:1.this指针的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件处理上的区别
Apr 12 Javascript
那些年,我还在学习jquery 学习笔记
Mar 05 Javascript
jquery图片延迟加载 前端开发技能必备系列
Jun 18 Javascript
easyui datagrid 键盘上下控制选中行示例
Mar 31 Javascript
javascript记录文本框内文字个数检测文字个数变化
Oct 14 Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 Javascript
在IE8上JS实现combobox支持拼音检索功能
May 23 Javascript
Js利用Canvas实现图片压缩功能
Sep 13 Javascript
React 组件中的 bind(this)示例代码
Sep 16 Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
vue 导航菜单刷新状态不消失,显示对应的路由界面操作
Aug 06 Javascript
vue实现图书管理系统
Dec 29 Vue.js
详解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
PHP基于数组实现的分页函数实例
2014/08/20 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
PHP回调函数与匿名函数实例详解
2017/08/16 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
jQuery 源码分析笔记(6) jQuery.data
2011/06/08 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
javascript中scrollTop详解
2015/04/13 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
jquery在ie7下选择器的问题导致append失效的解决方法
2016/01/10 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
浅谈JavaScript中的this指针和引用知识
2016/08/05 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
JSON与js对象序列化实例详解
2017/03/16 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
使用jQuery.Pin垂直滚动时固定导航
2017/05/24 jQuery
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
2017/09/18 Javascript
node.js基于fs模块对系统文件及目录进行读写操作的方法详解
2017/11/10 Javascript
webpack项目轻松混用css module的方法
2018/06/12 Javascript
[51:29]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第一场 11.05
2020/11/05 DOTA
Python中变量交换的例子
2014/08/25 Python
web.py 十分钟创建简易博客实现代码
2016/04/22 Python
Python做简单的字符串匹配详解
2017/03/21 Python
基于Django的python验证码(实例讲解)
2017/10/23 Python
使用matplotlib中scatter方法画散点图
2019/03/19 Python
Django配置文件代码说明
2019/12/04 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
Python类super()及私有属性原理解析
2020/06/15 Python
高中生期中考试失利检讨书
2014/10/23 职场文书
2015年体检中心工作总结
2015/05/27 职场文书
出生证明范本
2015/06/15 职场文书
教育读书笔记
2015/07/02 职场文书
《秋天的雨》教学反思
2016/02/19 职场文书