Comparison of array slice and splice in JavaScript

I believe that many people who learn the JavaScript language will often be confused about the slice and splice methods. Although they have similar names, they have completely different functions. So this article will give you a detailed review of the comparison between the array slice and splice in JavaScript. If you need it, you can refer to it. Preface

Today, I reviewed Javascript and saw the array method. Two of them are similar: splice and splice. They look very similar, but they have a p, but their usage is quite different.

In use, you can select an API with strong semantic expression to reduce obfuscation.

1. slice

Slice is used to create a new array by specifying the elements in an array, that is, the original array will not change

The array slice (ECMAScript 5.1 Standard Section 15.4.4.10) is very similar to the string slice. According to the specifications, slice requires two parameters: start and end. It returns a new array containing all elements from the start point to the end point.

It is not difficult to understand the functions of slice:

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

Note that it does not modify the original array.

The following code segment describes this behavior. The value of x is not changed, and y is the part to be truncated.

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 method of array functions in JS. It can delete, insert, and replace array elements. The returned value is the operated value.

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

Splice insert: color. splice (, 'Brown ', 'pink') (insert two values before the element whose color key value is 1 );

Splice replacement: color. splice (1, 2, 'Brown ', 'pink') (replace 1 and 2 in color );

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 also changes the original array.

Don't be surprised. This Is What splice meant.

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

When writing your own modules, it is very important to select an API that is least prone to confusion. In theory, your users should not always judge which one they need by reading the document. What naming conventions should we follow?

The most familiar criterion (related to my previous experience in QT) is to correctly select a verb: it indicates the possible modification behavior, and the original object will not be modified in the past, returns a new version. If possible, both versions are available.

See 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 the translate () of a moving position (in a two-dimensional Cartesian coordinate system) and the translated () of a moving coordinate. Call translate to modify the value of point p. However, because translated () does not modify the original object, the object q is not modified, but only returns a new copy s.

Summary

If this specification can be deployed to your application in a very consistent manner, the obfuscation mentioned above will be minimized. The above is all the content of this article, hoping to help you in your study or work.

For more articles on comparison between arrays of slice and splice in JavaScript, please pay attention to PHP!