JavaScript 数组操作:slice vs splice
2014-03-04 12:59
756 查看
在 JavaScript 中,对于数组的操作有两个很容易混淆的方法 splice, slice ,这里给大家推荐一篇介绍 splice, slice 二者区别的文章。
In JavaScript, mistaking
Array’s
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.
Although
On top of that,
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.
Note the difference between
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: /article/6368930.html
via ofilabs
In JavaScript, mistaking
slicefor
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,
sliceneeds 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,
splicealso 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: /article/6368930.html
via ofilabs
相关文章推荐
- JavaScript 数组操作函数总结(push,pop,join,shift,unshift,slice,splice,concat)
- javascript 常见数组操作( 1、数组整体元素修改 2、 数组筛选 3、jquery 元素转数组 4、获取两个数组中相同部分或者不同部分 5、数组去重并倒序排序 6、数组排序 7、数组截取slice 8、数组插入、删除splice(需明确位置) 9、数组遍历 10、jQuery根据元素值删除数组元素的方)
- JavaScript 数组操作函数总结(push,pop,join,shift,unshift,slice,splice,concat)
- JavaScript 数组操作函数总结(push,pop,join,shift,unshift,slice,splice,concat)
- 小tips:JS操作数组的slice()与splice()方法
- js数组操作(push,pop,shift,unshift,slice,splice,concat,sort)
- 谈Javascript的数组操作方法(concat(),slice(),splice())
- javascript splice数组简单操作
- JavaScript中数组slice和splice的对比小结
- JavaScript的slice()和splice()数组方法
- js 数组操作函数有:push,pop,join,shift,unshift,slice,splice,concat
- Javascript数组---slice(),splice()方法的区别
- JavaScript中数组slice和splice的对比小结
- 对数组的操作splice() 和slice() 用法和区别
- javascript数组(array)的常用方法(shift/unshift/pop/push/concat/splice/reverse/sort/slice/join)
- JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
- Javascript splice() 对数组的操作(插入、删除、替换元素)
- JavaScript中数组slice和splice的对比小结
- JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
- javascript splice数组简单操作