Comparison summary of array slice and splice in JavaScript

Preface

I reviewed Javascript today and saw the array methods. There are two similar methods - splice and splice. They look very similar, but there is an extra p, but the usage But quite different.

In use, you can reduce the occurrence of confusion by choosing an API with strong semantic expression.

1. slice

slice specifies the elements in an array to create a new array, that is, the original array will not change the slice of the

array (ECMAScript 5.1 Standard 15.4 .4.10) is very similar to a slice of strings. According to the specification, slice requires two parameters, the start point and the end point. It returns a new array containing all elements from the start point to the end point.

It is not too difficult to understand the function of slice:

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

It is important to note that it does not modify the original array.

The following code snippet describes this behavior. The value of x has not changed, and y is the intercepted part.

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

2, splice

splice is the most powerful array method in JS. It can implement deletion, insertion, and replacement operations on array elements, and the return value is the operated value.

splice deletion: color.splice(1,2) (delete 1 and 2 in color);

splice insertion: color.splice(1,0,'brown', 'pink') (insert two values ​​before the element with color key value 1);

splice replacement: color.splice(1,2,'brown','pink') (replace in color 1, 2 elements);

Although splice (section 15.4.4.12) also requires (at least) two parameters, its meaning is completely different.

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

In addition, splice will also change the original array.

Don’t be too surprised, this is exactly what splice is intended to do.

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

When you write your own module, it is important to choose an API that is least likely to be confused. In theory, your users shouldn't always be able to figure out which one they need by reading the documentation. So which naming convention should we follow?

The convention I'm most familiar with (related to my previous experience with QT) is to choose the verb correctly: present tense indicates possible modification behavior, past tense does not modify the original object, but returns a new one version of. If possible, provide both versions.

Refer to the following example:

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 position (in the two-dimensional Cartesian coordinate system) and translated() that only creates a moved coordinate the difference. Calling translate modifies the value of point p. However, because translated() does not modify the original object, object q is not modified, but only a new copy s is returned.

Summary

If this specification can be deployed very consistently across your applications, the confusion mentioned above will be minimized. The above is the entire content of this article. I hope it can bring some help to everyone's study or work.

For more articles related to the comparison of array slice and splice in JavaScript, please pay attention to the PHP Chinese website!