在 JavaScript 中,对于数组的操作有两个很容易混淆的方法 splice, slice ,这里给大家推荐一篇介绍 splice, slice 二者区别的文章。

  In JavaScript, mistaking slice for splice (or vice versa) is a common mistake among rookies and even experts. These two functions, although they have similar names, are doing two completely different things. In practice, such a confusion can be avoided by choosing an API that telegraphs the const-correctness of the function.

  Array’s slice (ECMAScript 5.1 Specification Section 15.4.4.10) is quite similar to String’s slice. According to the specification, slice needs to accept two arguments, start and end. It will return a new array containing the elements from the given start index up the one right before the specified end index. It’s not very difficult to understand what slice does:

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

  An important aspect of slice is that it does not change the array which invokes it. The following code fragment illustrates the behavior. As you can see, x keeps its elements and y gets the sliced version thereof.

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

  Although splice (Section 15.4.4.12) also takes two arguments (at minimum), the meaning is very different:

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

  On top of that, splice also mutates the array that calls it. This is not supposed to be a surprise, after all the name splice implies it.

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

  When you build your own module, it is important to choose an API which minimizes this slice vs spliceconfusion. Ideally, the user of your module should not always read the documentation to figure out which one they really want. What kind of naming convention shall we follow?

  A convention I’m familiar with (from my past time involvement with Qt) is by choosing the right form of the verb: present to indicate a possibly modifying action and past participle to return a new version without mutating the object. If possible, provide a pair of those methods. The following example illustrates the concept.

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 }

  Note the difference between translate() that moves the point (in 2-D Cartesian coordinate system) and translated() which only creates a translated version. The point object p changed because it calls translate. Meanwhile, the object q stays the same since translated() does not modify it and it only returns a fresh copy as the new object s.

  If this convention is used consistently throughout your application, that kind of confusion will be massively reduced. And one day, you can let your users sing I Can See Clearly Now happily!

  link: http://www.cnblogs.com/oooweb/p/javascript-array-slice-vs-splice.html

  via ofilabs

JavaScript 数组操作:slice vs splice的更多相关文章

  1. javascript数组操作(创建、元素删除、数组的拷贝)

    这篇文章主要介绍了javascript数组操作,包括创建.元素的访问.元素删除.数组的拷贝等操作,还有其它示例,需要的朋友可以参考下 1.数组的创建 复制代码 代码如下: var arrayObj = ...

  2. JavaScript 数组操作函数--转载+格式整理

    JavaScript 数组操作函数(部分)--转载+格式整理 今天看了一篇文章,主要讲的对常用的Js操作函数:push,pop,join,shift,unshift,slice,splice,conc ...

  3. RX学习笔记:JavaScript数组操作

    RX学习笔记:JavaScript数组操作 2016-07-03 增删元素 unshift() 在数组开关添加元素 array.unshift("value"); array.un ...

  4. Javascript数组操作

    使用JS也算有段时日,然对于数组的使用,总局限于很初级水平,且每每使用总要查下API,或者写个小Demo测试下才算放心,一来二去,浪费不少时间:思虑下,堪能如此继续之?当狠心深学下方是正道. 原文链接 ...

  5. Javascript数组操作(转)

    1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限, ...

  6. 吃透Javascript数组操作的正确姿势—再读《Js高程》

    Javascript中关于数组对象的操作方法比较多也比较杂,正好再次捡起<Javascript高级程序设计>来读,把它们一一总结梳理了一下: 方法类别 方法名称 方法描述 参数 返回值 备 ...

  7. JavaScript 数组操作

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 【原】javascript数组操作

    继续我的第二遍<javascript高级程序设计第三版>,今天要做的笔记是array 一.数组的操作 1.数组的创建: var colors= new Array(); //创建一个数组 ...

  9. javascript 数组操作 转

    javascript之数组操作 1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一 ...

随机推荐

  1. lintcode-491-回文数

    491-回文数 判断一个正整数是不是回文数. 回文数的定义是,将这个数反转之后,得到的数仍然是同一个数. 注意事项 给的数一定保证是32位正整数,但是反转之后的数就未必了. 样例 11, 121, 1 ...

  2. 使用coding.net上传项目

    鉴于上一次上传托管代码的惨烈教训,痛定思痛,决定把这次使用cooding.net上传的过程记录下来.也算是一篇简单的cooding初级使用教程了. 1.首先在cooding上新建项目 (1)填写项目名 ...

  3. [2017BUAA软工]第三次博客作业:案例分析

    第三次博客作业:案例分析 1. 调研和评测 1.1 BUG及设计缺陷描述 主要测试博客园在手机端上的使用情况. [BUG 01] 不能后退到上一界面(IOS) 重现步骤:打开博客首页中任意博文,点击博 ...

  4. php中扩展pecl与pear

    要为大家分享的内容是PECL 和 PEAR 他们之间的不同和相同之处. PEAR 是“PHP Extension and Application Repository”的缩写,即PHP扩展和应用仓库. ...

  5. C语言添加宏开关

    原文地址:http://blog.csdn.net/cp1300/article/details/7773239 我们在写程序的时候,总是或多或少会加入一些printf之类的语句用于输出调试信息,但是 ...

  6. jquery实现可编辑的下拉框( input + select )

    HTML: <input id="inputModel" /> <select name="EngineModel" size="1 ...

  7. list+map

    通常读取数据库表中的一条记录后,可以存储于Hashmap变量中:若要读取多条记录,则依次读取每个记录时,先用Hashmap变量存取,然后将Hashmap加到ArrayList变量中. 注意: 每次读取 ...

  8. 【明哥报错簿】之json转换报错---net.sf.ezmorph.bean.MorphDynaBean cannot be cast to XXXDO

    简单的json和bean转换直接用: public static void main(String[] args) { String s = "{'request': [{'orderCod ...

  9. P3629 [APIO2010]巡逻

    题目描述 在一个地区中有 n 个村庄,编号为 1, 2, ..., n.有 n – 1 条道路连接着这些村 庄,每条道路刚好连接两个村庄,从任何一个村庄,都可以通过这些道路到达其 他任一个村庄.每条道 ...

  10. The Necklace UVA - 10054(欧拉回路)

    题目分析:1.无向图欧拉回路是否连通2.所有点的度为偶数.并查集+degree 这题题目保证了是联通的  所以就不用判断是否联通了 #include <iostream> #include ...