In-depth understanding of JS array operation methods concat(), slice(), splice()

I have been quite free recently, and I have summarized the knowledge I have learned. This article summarizes the different operation methods of arrays, concat(), slice() and splice(). Friends in need can Please refer to it, I hope it will be useful to you.

concat() method

concat() method: Create a new array based on all items in the current array.
The specific process is: first create a copy of the array, if there are parameters for concat(), add the received parameters to the end of the copy, and then return the newly constructed array; if no parameters are passed, just copy the current array and return copy array.
The parameter in concat() can be a new array or a string.

var colors = ["red","green","blue"];
var colors2 = colors.concat("yellow",["black","brown"]);
alert(colors);
alert(colors2);

The result is that colors is an array ["red", "green", "blue"];
colors2 is an array ["red", "green", "blue", "yellow"," black”,”brown”];
The concat() method just recreates a new array with the current array, so the current array remains unchanged (the colors array remains unchanged).

slice() method

slice() method: Creates a new array based on one or more items in the current array.
The slice() method can have one or two parameters (representing the index value of the array, 0, 1, 2...). When receiving a parameter: Returns all items in the current array starting from the parameter position to the end of the current array. When receiving two parameters: Returns all items in the current array between the two parameter positions, but does not return the item at the second parameter position.
The parameter can also be a negative number, which means counting from the end, -1 means the last one, and the usage method is the same as the positive number.

var colors = ["red","green","blue","yellow","black","brown"];
var colors2 = colors.slice(2);
var colors3 = colors.slice(1,4);
var colors4 = colors.slice(2,-2);
var colors5 = colors.slice(-3,-1);
console.log(colors2);
console.log(colors3);
console.log(colors4);
console.log(colors5);

The result is: ["blue", "yellow", "black", "brown"]
["green", "blue", "yellow"]
["blue" , "yellow"]
["yellow", "black"]
In addition, the slice() method can also be used to remove arrays

Array.prototype.remove = function(from, to) {
    var rest = this.slice((to || from) + 1 || this.length);
    this.length = from <0 ? this.length + from : from;
    return this.push.apply(this, rest);
};

For

rest = this.slice((to || from) + 1 || this.length);

if to is not equal to 0, (to||from) is equal to to, and to 1 is not equal to 0, then ((to || from) 1 || this.length) is to 1), if to 1=0, ((to || from) 1 || this.length) is this.length;
If to=0, (to||from) takes from, if from 1 is not equal to 0, ((to || from) 1 || this.length) is from 1. If from 1=0, ((to || from) 1 || this.length) is this.length.

splice() method

The main purpose of splice() is to insert items into the middle of the current array, and can perform deletion, insertion, and replacement operations. Will return an array containing the items deleted from the original items (if not deleted, an empty array is returned)
Delete: two parameters, the position of the starting item to be deleted and the number of deleted items.

var colors = ["red","green","blue"];
var removed = colors.splice(1,2);
alert(colors);      //red
alert(removed);     //green,blue

Insert: Insert any number of items at the specified position, including two basic parameters (that is, the two parameter types in the deletion operation) and the parameters of the item to be inserted. The two basic parameters are the starting position and 0 (The number of items to be deleted should be 0 items), and the item parameters to be inserted can be any number ("red", "green", "blue").

var colors = ["red","green","blue"];
var removed = colors.splice(1,0,"yellow","orange");
alert(colors);      //"red","yellow","orange","green","blue"
alert(removed);     //空数组

Replacement: Insert any number of items into the specified position and delete any number of items. The number of inserted items and the number of deleted items can be different. The parameters include two basic parameters (that is, the two parameter types in the delete operation) and the parameter of the item to be inserted.

var colors = ["red","green","blue"];
var removed = colors.splice(1,1,"purple","black");
alert(colors);    //"red","purple","black","blue"
alert(removed);   //"green"

In fact, the general understanding is that the splice() method contains two basic parameters for deletion items and any number of insertion parameters. The first of the two basic parameters for deletion items specifies the deletion position, and the second specifies the deletion item. number. If the number is 0, it will not be deleted. It will only have the function of specifying the position. Any number of insertion item parameters represents the item value to be inserted. The number is not limited and can be omitted. When omitted, the splice() method only performs the deletion operation.

The above is the detailed content of In-depth understanding of JS array operation methods concat(), slice(), splice(). For more information, please follow other related articles on the PHP Chinese website!