How to delete array elements in javascript

Javascript method to delete array elements: 1. Use the length attribute; 2. Use the delete keyword; 3. Use the [pop()] stack method; 4. Use the [shift()] queue method; 5. Use the [splice()] operation method.

The operating environment of this tutorial: Windows 7 system, JavaScript version 1.8.5, DELL G3 computer.

How to delete array elements in JavaScript:

1. Length attribute

The length attribute of Array in JavaScript is very unique - It is not read-only. Therefore, you can set this property to remove an item from the end of an array or to add a new item.

var colors = ["red", "blue", "grey"]; // 创建一个包含3个字符串的数组
colors.length = 2;
console.log(colors[2]); // undefined

2. delete keyword

JavaScript provides a delete keyword to delete (clear) array elements.

var colors = ["red", "blue", "grey", "green"];
delete colors[0];
console.log(colors); // [undefined, "blue", "grey", "green"]

It should be noted that after using delete to delete an element, the length of the array does not change, but the deleted element is set to undefined.

3. pop() stack method

The Array object in JavaScript provides a pop() stack method for popping and returning the last item in the array. It can be used as a deletion to some extent.

The access rule of the stack data structure is FILO (First In Last Out). The stack operation adds items to the top of the stack and removes items from the top of the stack. Use the pop() method, which can remove The last item in the array and returns that item, decrementing the length of the array by one.

var colors = ["red", "blue", "grey"];
var color = colors.pop();
console.log(color); // "grey"
console.log(colors.length); // 2

It can be seen that when the pop() method is called, the array returns the last item, which is "grey", and there are only two elements left in the array.

4. shift() queue method

The Array object in JavaScript provides a shift() queue method for popping and returning the first item in the array. It can also be used as a deletion to some extent.

The access rule of the queue data structure is FIFO (First In First Out). The queue adds items at the end of the list and removes items from the front of the list. Using the shift() method, it can move Divide the first item in the array and return that item, and reduce the length of the array by one.

var colors = ["red", "blue", "grey"];
var color = colors.shift();
console.log(color); // "red"
console.log(colors.length); // 2

It can be seen that when the shift() method is called, the array returns the first item, which is "red", and there are only two elements left in the array.

5. splice() operation method

The JavaScript Array object provides a splice() method for performing specific operations on the array. splice() is probably the most powerful array method. It can be used in many ways. Here we only introduce the method of deleting array elements. When deleting array elements, it can delete any number of items by specifying only 2 parameters: the position of the first item to be deleted and the number of items to be deleted.

var colors = ["red", "blue", "grey"];
var color = colors.splice(0, 1);
console.log(color); // "red"
console.log(colors); // ["blue", "grey"]

It can be seen that when the splice(0, 1) method is called, one item is deleted from the array starting from the first item.

6. Iteration method

The so-called iteration method is to use a loop to iterate the array elements, and delete the items that match the items to be deleted. The most commonly used place may be when the elements in the array are objects, and the array elements can be deleted based on a certain attribute of the object (such as ID).

The first method uses the most common ForEach loop to compare the elements and delete them after finding them.

var colors = ["red", "blue", "grey"];
colors.forEach(function(item, index, arr) {
    if(item === "red") {
        arr.splice(index, 1);
    }
});

You can see that the splice() method is also needed to achieve deletion. The loop is just to find specific elements. Another idea is to push elements that do not need to be deleted into a new array in a loop, which can also achieve the purpose of falsely deleting specific elements.

The second way we use the filter method in the loop.

var colors = ["red", "blue", "grey"];
colors = colors.filter(function(item) {
    return item != "red"
});
 
console.log(colors); // ["blue", "grey"]

The code is very simple. Find out the number of items whose elements are not red and return it to colors (in fact, you get a new array, not delete the original array), which can be regarded as deletion to a certain extent. The purpose of a specific element.

7. Prototype prototype method

You can achieve the purpose of deletion by adding a method to the prototype of Array.

Array.prototype.remove = function(dx) {
　　if(isNaN(dx) || dx > this.length){
　　　　return false;
　　}
　　for(var i = 0, n = 0; i < this.length; i++) {
　　　　if(this[i] != this[dx]) {
　　　　　　this[n++] = this[i];
　　　　}
　　}
　　this.length -= 1;
};
var colors = ["red", "blue", "grey"];
colors.remove(1);
console.log(colors); // ["red", "grey"]

This method is actually to implement a deletion logic by yourself, and then add the deletion method to the Array prototype object. Then all Array objects in this environment can use this method. Although it is possible to do so, it is not recommended to modify the prototype of a native object in a production application. The reason is simple. If a method is missing in a certain implementation, then adding this method to the prototype of the native object may lead to naming conflicts when the code is run in another implementation that supports this method. And doing so may accidentally cause native methods to be overridden.

Related free learning recommendations: javascript(Video)

The above is the detailed content of How to delete array elements in javascript. For more information, please follow other related articles on the PHP Chinese website!