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

所属分类: 网络编程 / JavaScript 阅读数: 1171
收藏 0 赞 0 分享

前言

今天重温了一下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。

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

更多精彩内容其他人还在看

Angular使用Md5加密的解决方法

这篇文章主要介绍了Angular使用Md5加密的解决方法,需要的朋友可以参考下
收藏 0 赞 0 分享

详解JS构造函数中this和return

本文通过实例代码给大家介绍了JS构造函数中this和return,需要的朋友参考下吧
收藏 0 赞 0 分享

ES6中Array.find()和findIndex()函数的用法详解

ES6为Array增加了find(),findIndex函数。find()函数用来查找目标元素,找到就返回该元素,找不到返回undefined,而findIndex()函数也是查找目标元素,找到就返回元素的位置,找不到就返回-1。下面通过实例详解,需要的朋友参考下吧
收藏 0 赞 0 分享

JS闭包的几种常见形式实例详解

本文通过实例代码给大家详细介绍了js闭包的几种常见形式,代码简单易懂,非常不错,具有参考借鉴价值,需要的朋友参考下
收藏 0 赞 0 分享

ES6中Array.copyWithin()函数的用法实例详解

ES6为Array增加了copyWithin函数,用于操作当前数组自身,用来把某些个位置的元素复制并覆盖到其他位置上去。下面重点给大家介绍ES6中Array.copyWithin()函数的用法,需要的朋友参考下
收藏 0 赞 0 分享

Javascript 严格模式use strict详解

严格模式:由ECMA-262规范定义的JavaScript标准,对javascrip的限制更强。这篇文章主要介绍了Javascript 严格模式use strict详解 ,需要的朋友可以参考下
收藏 0 赞 0 分享

引入JavaScript时alert弹出框显示中文乱码问题

今天在HTML中引入JavaScript文件运行时,alert弹出的提示框中文显示为乱码,怎么解决此问题呢?下面小编给大家带来了引入JavaScript时alert弹出框显示中文乱码问题的解决方法,一起看看吧
收藏 0 赞 0 分享

AngularJs 延时器、计时器实例代码

这篇文章主要介绍了AngularJs 延时器、计时器实例代码,需要的朋友可以参考下
收藏 0 赞 0 分享

JS分页的实现(同步与异步)

这篇文章主要介绍了JS分页的实现(同步与异步),需要的朋友可以参考下
收藏 0 赞 0 分享

Angularjs自定义指令实现分页插件(DEMO)

由于最近的一个项目使用的是angularjs1.0的版本,涉及到分页查询数据的功能,后来自己就用自定义指令实现了该功能,下面小编把实例demo分享到脚本之家平台,需要的朋友参考下
收藏 0 赞 0 分享
查看更多