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 相关文章推荐
newxtree.js代码
Mar 13 Javascript
jQuery 类twitter的文本字数限制带提示效果插件
Apr 16 Javascript
javascript中将Object转换为String函数代码 (json str)
Apr 29 Javascript
javascript 用函数语句和表达式定义函数的区别详解
Jan 06 Javascript
微信小程序 for 循环详解
Oct 09 Javascript
Vue的MVVM实现方法
Aug 16 Javascript
基于Vue的ajax公共方法(详解)
Jan 20 Javascript
JS使用Date对象实时显示当前系统时间简单示例
Aug 23 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
Jan 21 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
Mar 19 Javascript
js实现带搜索功能的下拉框
Jan 11 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
ThinkPHP标签制作教程
2014/07/10 PHP
PHP中echo,print_r与var_dump区别分析
2014/09/29 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
浅谈php的优缺点
2015/07/14 PHP
使用xampp搭建运行php虚拟主机的详细步骤
2015/10/21 PHP
基于jQueryUI和Corethink实现百度的搜索提示功能
2016/11/09 PHP
JS 判断undefined的实现代码
2009/11/26 Javascript
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
js中this用法实例详解
2015/05/05 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
JavaScript中setTimeout和setInterval函数的传参及调用
2016/03/11 Javascript
Vue2 使用 Echarts 创建图表实例代码
2017/05/18 Javascript
基于axios 解决跨域cookie丢失的问题
2018/09/26 Javascript
jQuery实现点击图标div循环放大缩小功能
2018/09/30 jQuery
Vuex的基本概念、项目搭建以及入坑点
2018/11/04 Javascript
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
Python常用的日期时间处理方法示例
2015/02/08 Python
Python multiprocessing模块中的Pipe管道使用实例
2015/04/11 Python
python文件操作相关知识点总结整理
2016/02/22 Python
Python wxPython库Core组件BoxSizer用法示例
2018/09/03 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
Python高并发和多线程有什么关系
2020/11/14 Python
Hotels.com加拿大:领先的在线住宿网站
2018/10/05 全球购物
COS美国官网:知名服装品牌
2019/04/08 全球购物
大学军训通讯稿
2014/01/13 职场文书
材料会计岗位职责
2014/03/06 职场文书
测绘工程专业求职信
2014/07/15 职场文书
公司合作意向书范文
2014/07/30 职场文书
幼师求职自荐信
2015/03/26 职场文书
趣味运动会简讯
2015/07/20 职场文书
如何解决.cuda()加载用时很长的问题
2021/05/24 Python
解决Oracle数据库用户密码过期
2022/05/11 Oracle
win10如何更改appdata文件夹的默认位置?
2022/07/15 数码科技