JavaScript 数组操作:slice vs splice
在 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的更多相关文章
- javascript数组操作(创建、元素删除、数组的拷贝)
这篇文章主要介绍了javascript数组操作,包括创建.元素的访问.元素删除.数组的拷贝等操作,还有其它示例,需要的朋友可以参考下 1.数组的创建 复制代码 代码如下: var arrayObj = ...
- JavaScript 数组操作函数--转载+格式整理
JavaScript 数组操作函数(部分)--转载+格式整理 今天看了一篇文章,主要讲的对常用的Js操作函数:push,pop,join,shift,unshift,slice,splice,conc ...
- RX学习笔记:JavaScript数组操作
RX学习笔记:JavaScript数组操作 2016-07-03 增删元素 unshift() 在数组开关添加元素 array.unshift("value"); array.un ...
- Javascript数组操作
使用JS也算有段时日,然对于数组的使用,总局限于很初级水平,且每每使用总要查下API,或者写个小Demo测试下才算放心,一来二去,浪费不少时间:思虑下,堪能如此继续之?当狠心深学下方是正道. 原文链接 ...
- Javascript数组操作(转)
1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一个数组并指定长度,注意不是上限, ...
- 吃透Javascript数组操作的正确姿势—再读《Js高程》
Javascript中关于数组对象的操作方法比较多也比较杂,正好再次捡起<Javascript高级程序设计>来读,把它们一一总结梳理了一下: 方法类别 方法名称 方法描述 参数 返回值 备 ...
- JavaScript 数组操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【原】javascript数组操作
继续我的第二遍<javascript高级程序设计第三版>,今天要做的笔记是array 一.数组的操作 1.数组的创建: var colors= new Array(); //创建一个数组 ...
- javascript 数组操作 转
javascript之数组操作 1.数组的创建 var arrayObj = new Array(); //创建一个数组 var arrayObj = new Array([size]); //创建一 ...
随机推荐
- 关于mysql无法添加中文数据的问题以及解决方案
今天弄了一天的mysql数据库,就是被一个mysql数据库乱码的问题给缠住了.现在记录一下这个问题,虽然这个问题不是什么太大的事情,但还是记录一下. 问题是这样的: 1.先在mysql的安装文件当中, ...
- lintcode-383-装最多水的容器
383-装最多水的容器 给定 n 个非负整数 a1, a2, ..., an, 每个数代表了坐标中的一个点 (i, ai).画 n 条垂直线,使得 i 垂直线的两个端点分别为(i, ai)和(i, 0 ...
- 主从复制redis
编辑主服务器的配置文件 注释下面一项 # slaveof 192.168.10.1 6379 主从复制 一主可以有多从,支持链式连级 一主多从 1:修改从服务器的配置文件/etc/redis.co ...
- PHP中与类和对象有关的几个系统函数
与类有关的系统函数: class_exists(“类名”), 判断一个类是否存在(是否定义过) interface_exists(“接口名”), 判断一个接口是否存在(是否定义过) get_class ...
- 【数据库_Mysql】查询当前年份的sql
1.本年份 SELECT DATE_FORMAT(NOW(), '%Y'); 2.本月份(显示数字) SELECT DATE_FORMAT(NOW(), '%m'); 3.本月份(显示英文) SELE ...
- C++ Win系统下的调试
有的时候我们找不出错误在哪里,这时候我们需要调试一遍看看到底是哪里出了问题:我们需要分布查看程序运行情况. 这时候我们用到了调试这样一个神奇的东西. 一.基于Dev cpp环境下的调试 Dev cpp ...
- C++解析(17):操作符重载
0.目录 1.操作符重载 2.完善的复数类 3.小结 1.操作符重载 下面的复数解决方案是否可行? 示例1--原有的解决方案: #include <stdio.h> class Compl ...
- 转:解决Python中文编码问题
Python 文本挖掘:解决Python中文编码问题 转于:http://rzcoding.blog.163.com/blog/static/2222810172013101785738166/ ...
- [HNOI/AHOI2018]排列 贪心
题面 题解: 把题面的限制换成中文: 如果排在第k位的下标 = 排在第j位的值 ,那么k < j 换一个描述方式: 一个值为x的数要排在第x个数后面. 再换一个描述方式: \(fa[i] = a ...
- OI队测题解:
Test 17 T1: 题目大意: 喵星系有n个星球,标号为1到n,星球以及星球间的航线形成一棵树. 所有星球间的双向航线的长度都为1.小昕要在若干个星球建矿石仓库,设立每个仓库的费用为K.对于未 ...