在 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. LAMP 系统服务搭建过程详解

    LAMP 架构在企业里用得非常广泛,目前很多电商公司.游戏公司.移动互联网公司大多都采用这种架构.LAMP指的是Linux.Apache.MySQL.PHP.下面记录了 LAMP 架构系统服务的搭建过 ...

  2. ADO之command

    connection      command对象使用的数据库连接 commandText     执行的SQL语句 ExecuteNonQuery  执行不返回行的语句,如UPDATE等 Execu ...

  3. saltstack基础篇

    使用saltstack的前提是PPT      服务.流程.工具和技术 安装 rpm -Uvh http://mirrors.yun-idc.com/epel/6Server/x86_64/epel- ...

  4. eclipse错误:Access restriction: The type 'BASE64Decoder' is not API

    Access restriction: The type ‘BASE64Decoder’ is not API (restriction on required library ‘D:\java\jd ...

  5. 平衡树以及AVL树

    平衡树是计算机科学中的一类数据结构. 平衡树是计算机科学中的一类改进的二叉查找树.一般的二叉查找树的查询复杂度是跟目标结点到树根的距离(即深度)有关,因此当结点的深度普遍较大时,查询的均摊复杂度会上升 ...

  6. luogu 1437 敲砖块(DP)

    这道题的DP的状态设计的很有想法啊. 假如我们一行一行来选择的话,状态将会极其复杂. 如果一列一列来看的话,比如你想选aij,那么第i列的前j个都要选,并且第i+1列的前j-1个都要选. 于是状态就很 ...

  7. 题解 P1469 【找筷子】

    这题真是水 咳咳.. 基本思路:桶排 但是可以剪枝. 剪枝方法: 好几种,可以用set(集合),可以用stack(栈), 也可以像我一样的蒟蒻最大最小值...... 但是作者的毒瘤数据应该不会放过我们 ...

  8. C++解析(15):二阶构造模式

    0.目录 1.构造函数与半成品对象 2.二阶构造 3.小结 1.构造函数与半成品对象 关于构造函数: 类的构造函数用于对象的初始化 构造函数与类同名并且没有返回值 构造函数在对象定义时自动被调用 问题 ...

  9. C++解析(10):struct和class的区别

    0.目录 1.默认访问级别 2.默认继承方式 2.1 分别独立继承 2.2 struct继承class 2.3 class继承struct 3.小结 1.默认访问级别 在用struct定义类时,所有成 ...

  10. Golden Tiger Claw UVA - 11383(km原理)

    这题使我对km多了一些看法 写给自己看.. km结束后bx[i] + by[j] == w[i][j], 所以所有bx与by的和即为w的和 而且记住bx[i] + by[j] >= w[i][j ...