JavaScript中数组slice和splice的对比小结


Posted in Javascript onSeptember 22, 2016

前言

今天重温了一下Javascript,看到了数组的方法,其中有两个比较相似的方法——splice和splice,看着很像,就是多了一个p,但是用法却相当不一样。

在使用中,可以通过选择一个具有强语义表达性的 API 来减少混淆的发生。

1、slice

slice是指定在一个数组中的元素创建一个新的数组,即原数组不会变

数组的 slice (ECMAScript 5.1 标准 15.4.4.10 节)非常类似于字符串的 slice。根据规范,slice 需要两个参数,起点和终点。它会返回一个包含了从起点开始,到终点之前之间所有元素的新数组。

理解 slice 的功能并不是太难:

'abc'.slice(1,2)   // "b"
[14, 3, 77].slice(1, 2) // [3]

需要特别注意的是它并不会修改原数组。

下面的代码段描述了这个行为,x 的值没有变,y 则是被截取的部分。

var x = [14, 3, 77];
var y = x.slice(1, 2);
console.log(x);   // [14, 3, 77]
console.log(y);   // [3]

2、splice

splice是JS中数组功能最强大的方法,它能够实现对数组元素的删除、插入、替换操作,返回值为被操作的值。

     splice删除:color.splice(1,2) (删除color中的1、2两项);

     splice插入:color.splice(1,0,'brown','pink') (在color键值为1的元素前插入两个值);

     splice替换:color.splice(1,2,'brown','pink')  (在color中替换1、2元素);

虽然 splice(15.4.4.12 节)也需要(至少)两个参数,但它的意义则完全不同。

[14, 3, 77].slice(1, 2)  // [3]
[14, 3, 77].splice(1, 2) // [3, 77]

除此之外,splice 还会改变原数组。

不要太惊讶,这正是 splice 的本意。

var x = [14, 3, 77]
var y = x.splice(1, 2)
console.log(x)   // [14]
console.log(y)   // [3, 77]

当你编写自己的模块时,选择一个最不容易发生混淆的 API 非常重要。理论上,你的用户不应该总是通过阅读文档来判断他们需要哪一个。那么我们应该遵循哪种命名规范呢?

我最熟悉的规范(与我之前在 QT 上的经验有关)是正确地选择动词:现在时表示可能的修改行为,过去时则不会修改原对象,而是返回一个新的版本。如果可以的话,这两种版本都要提供。

参考下面的例子:

var p = new Point(100, 75);
p.translate(25, 25);
console.log(p);  // { x: 125, y: 100 }
var q = new Point(200, 100);
var s = q.translated(10, 50);
console.log(q);  // { x: 200, y: 100 }
console.log(s);  // { x: 210, y: 150 }

注意(在二维笛卡尔坐标系中)移动位置的 translate() 和仅创建一个移动过的坐标的 translated() 之间的区别。调用 translate 会修改点 p 的值。然而,因为 translated() 不修改原对象,对象 q 没有被修改,而只返回了一个新的拷贝 s。

总结

如果这个规范能够非常一致地部署到你的应用中,那么上面提到的那种混淆则会被最大化地减低。以上就是这篇文章的全部内容了,希望能对大家的学习或者工作带来一定的帮助。

Javascript 相关文章推荐
jquery radio 操作代码
Mar 16 Javascript
一个可拖拽列宽表格实例演示
Nov 26 Javascript
zTree插件之单选下拉菜单实例代码
Nov 07 Javascript
使用js画图之饼图
Jan 12 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
Apr 29 Javascript
JQuery自动触发事件的方法
Jun 13 Javascript
JavaScript中匿名函数的递归调用
Jan 22 Javascript
在Vue.js中使用Mixins的方法
Sep 12 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
Dec 18 jQuery
ES6 Set结构的应用实例分析
Jun 26 Javascript
原生js+canvas实现验证码
Nov 29 Javascript
js实现复制粘贴的两种方法
Dec 04 Javascript
深入理解JavaScript中的并行处理
Sep 22 #Javascript
Actionscript与javascript交互实例程序(修改)
Sep 22 #Javascript
Javascript 调用 ActionScript 的简单方法
Sep 22 #Javascript
JavaScript与ActionScript3两者的同性与差异性
Sep 22 #Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
Sep 22 #Javascript
自制微信公众号一键排版工具
Sep 22 #Javascript
IONIC自定义subheader的最佳解决方案
Sep 22 #Javascript
You might like
Zerg基本策略
2020/03/14 星际争霸
php中使用cookie来保存用户登录信息的实现代码
2012/03/08 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
Yii 框架使用Forms操作详解
2020/05/18 PHP
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
2011/12/20 Javascript
15条JavaScript最佳实践小结
2013/08/09 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
JavaScript无阻塞加载和defer、async详解
2017/02/26 Javascript
nodejs搭建本地服务器并访问文件的方法
2017/03/03 NodeJs
JavaScript创建对象的七种方式全面总结
2017/08/21 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
JavaScript事件发布/订阅模式原理与用法分析
2018/08/21 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
利用Python的Django框架中的ORM建立查询API
2015/04/20 Python
Python常见内置高效率函数用法示例
2018/07/31 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
python把一个字符串切开的实例方法
2020/09/27 Python
HTML5 device access 设备访问详解
2018/05/24 HTML / CSS
html5 迷宫游戏(碰撞检测)实例一
2013/07/25 HTML / CSS
手工制作的意大利太阳镜和光学元件:Illesteva
2019/01/19 全球购物
药品质量检测应届生求职信
2013/11/14 职场文书
会计助理的岗位职责
2013/11/29 职场文书
创业计划书的内容步骤和要领
2014/01/04 职场文书
公司端午节活动方案
2014/02/04 职场文书
超市促销活动总结
2014/07/01 职场文书
2014年销售助理工作总结
2014/12/01 职场文书
火烧圆明园的观后感
2015/06/03 职场文书
新员工入职感言范文!
2019/07/04 职场文书
JavaScript小技巧带你提升你的代码技能
2021/09/15 Javascript
用Python仅20行代码编写一个简单的端口扫描器
2022/04/08 Python
MyBatis XPathParser解析器使用范例详解
2022/07/15 Java/Android