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 相关文章推荐
js jquery验证银行卡号信息正则学习
Jan 21 Javascript
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
Jquery实现搜索框提示功能示例代码
Aug 13 Javascript
jQuery实现鼠标滚轮动态改变样式或效果
Jan 05 Javascript
以Python代码实例展示kNN算法的实际运用
Oct 26 Javascript
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
Nov 06 Javascript
window.onload绑定多个事件的两种解决方案
May 15 Javascript
JS使用Date对象实时显示当前系统时间简单示例
Aug 23 Javascript
深入理解JavaScript 中的执行上下文和执行栈
Oct 23 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
Aug 09 Javascript
聊聊JS ES6中的解构
Apr 29 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
用php的ob_start来生成静态页面的方法分析
2011/03/09 PHP
php生成短网址示例
2014/05/05 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
JavaScript获取当前页面上的指定对象示例代码
2014/02/28 Javascript
JavaScript实现的一个日期格式化函数分享
2014/12/06 Javascript
js如何实现点击标签文字,文字在文本框出现
2015/08/05 Javascript
理解javascript中的MVC模式
2016/01/28 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
js+css3实现旋转效果
2017/01/20 Javascript
Angularjs处理页面闪烁的解决方法
2017/03/09 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
JS闭包原理与应用经典示例
2018/12/20 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
vant IndexBar实现的城市列表的示例代码
2019/11/20 Javascript
Element Card 卡片的具体使用
2020/07/26 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
Python使用sklearn实现的各种回归算法示例
2019/07/04 Python
python将字符串转换成json的方法小结
2019/07/09 Python
线程安全及Python中的GIL原理分析
2019/10/29 Python
学python需要去培训机构吗
2020/07/01 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
如何用 Python 制作 GitHub 消息助手
2021/02/20 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
JD Sports德国官网:英国领先的运动鞋和运动服饰零售商
2018/02/26 全球购物
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
美国肌肉和力量商店:Muscle & Strength
2019/06/22 全球购物
空指针到底是什么
2012/08/07 面试题
音乐器材管理制度
2014/01/31 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
2014世界杯球队球队口号
2014/06/05 职场文书
政风行风自查自纠报告
2014/10/21 职场文书
简单的个人租房协议书范本
2014/11/26 职场文书
爱国主题班会教案
2015/08/14 职场文书
一年之计:2019年下半年的计划
2019/05/07 职场文书
2019中小学生安全过暑期倡议书
2019/06/24 职场文书
python人工智能human learn绘图可创建机器学习模型
2021/11/23 Python