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 相关文章推荐
date.parse在IE和FF中的区别
Jul 29 Javascript
jquery 操作日期、星期、元素的追加的实现代码
Feb 07 Javascript
jquery 插件学习(三)
Aug 06 Javascript
jQuery实现冻结表头的方法
Mar 09 Javascript
JavaScript鼠标特效大全
Sep 13 Javascript
javascript实现鼠标点击页面 移动DIV
Dec 02 Javascript
angularjs实现猜数字大小功能
May 20 Javascript
对layui中table组件工具栏的使用详解
Sep 19 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
Vue实现图片轮播组件思路及实例解析
May 11 Javascript
vue 项目@change多个参数传值多个事件的操作
Jan 29 Vue.js
详解Vue3使用axios的配置教程
Apr 29 Vue.js
深入理解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封装分页函数实现文本分页和数字分页
2014/10/23 PHP
php读取和保存base64编码的图片内容
2017/04/22 PHP
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
2013/08/14 Javascript
javascript不可用的问题探究
2013/10/01 Javascript
window.returnValue使用方法示例介绍
2014/07/03 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
利用JS实现简单的瀑布流加载图片效果
2017/04/22 Javascript
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
axios+Vue实现上传文件显示进度功能
2019/04/14 Javascript
ES6模板字符串和标签模板的应用实例分析
2019/06/25 Javascript
layui自定义工具栏的方法
2019/09/19 Javascript
VUE实时监听元素距离顶部高度的操作
2020/07/29 Javascript
vue created钩子函数与mounted钩子函数的用法区别
2020/11/05 Javascript
[01:30]2016国际邀请赛中国区预选赛神秘商店火爆开启
2016/06/26 DOTA
python中文乱码的解决方法
2013/11/04 Python
Python编写生成验证码的脚本的教程
2015/05/04 Python
Python调用命令行进度条的方法
2015/05/05 Python
Python实现给qq邮箱发送邮件的方法
2015/05/28 Python
20招让你的Python飞起来!
2016/09/27 Python
django将图片上传数据库后在前端显式的方法
2018/05/25 Python
Python实现的个人所得税计算器示例
2018/06/01 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
前端面试必备之html5的新特性
2017/09/05 HTML / CSS
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
介绍一下write命令
2012/09/24 面试题
Java程序员综合测试题
2014/04/25 面试题
个人简历自我评价八例
2013/10/31 职场文书
小学教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
行政司机岗位职责
2015/04/10 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
竞聘开场白方式有哪些?
2019/08/28 职场文书
win11自动弹出虚拟键盘怎么关闭? Win11关闭虚拟键盘的技巧
2023/01/09 数码科技