Comparison of array slice and splice in JavaScript _javascript tips

Source: Internet
Author: User
Tags naming convention


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 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 ( 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.


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.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.