Comparison of array slice and splice in JavaScript _javascript tips

Objective

Today I revisit the JavaScript, see the array method, there are two of the more similar methods--splice and splice, look like, is more than one P, but the usage is quite different.

In use, you can reduce confusion by selecting an API with strong semantic expressions.

1, Slice

Slice is a specified element in an array to create a new array, that is, the original array does not change

The slice of the array (ECMAScript 5.1 standard 15.4.4.10) is very similar to the slice of the string. According to the specification, slice requires two parameters, starting point and endpoint. It returns a new array that contains all the elements from the beginning of the start to the end point.

It is not too difficult to understand the slice function:

' abc '. Slice (1,2)   //"B"
[3, 77].slice (1, 2)//[3]

The special note is that it does not modify the original array.

The following code snippet describes the behavior, the value of x is not changed, and Y is the part that is intercepted.

var x = [3, +];
var y = x.slice (1, 2);
Console.log (x);   [3,
Console.log] (y);   [3]

2, Splice

Splice is the most powerful method of array in JS, it can implement the delete, insert, replace operation of the elements, and return the value to be manipulated.

Splice Delete: color.splice(1,2) (delete 1, 22 items in color);

Splice Insert: color.splice(1,0,'brown','pink') (insert two values before the element with a color key value of 1);

Splice Replacement: color.splice(1,2,'brown','pink')  (replaces 1, 2 elements in color);

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

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

In addition, splice will also change the original array.

Don't be surprised, that's what splice meant.

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

When you write your own module, it is important to choose an API that is least likely to be confusing. In theory, your users should not always read the document to determine which one they need. So what kind of naming convention should we follow?

My most familiar specification (related to my previous experience with QT) is the correct choice of verbs: The present tense represents the possible modification behavior, which in the past does not modify the original object, but instead returns a new version. Both versions are available, if you can.

Refer to the following example:

var p = new Point (m);
P.translate (a);
Console.log (p);  {x:125, y:100}
var q = new Point (MB);
var s = q.translated (m);
Console.log (q);  {x:200, y:100}
Console.log (s);  {x:210, y:150}

Note The difference between moving a position in a two-dimensional Cartesian coordinate system translate() and creating only one moving coordinate translated() . Calling translate modifies the value of point P. However, since the translated() original object was not modified, the object Q was not modified and only a new copy of S was returned.

Summarize

If the specification can be deployed very consistently into your application, the confusion mentioned above will be minimized. The above is the entire content of this article, I hope to be able to study or work to bring certain help.