Home Web Front-end JS Tutorial Delete specified elements from JS array

Delete specified elements from JS array

Apr 18, 2018 pm 01:39 PM
javascript element designation

This time I will bring you JSarrayDeleteSpecify the element, JS array delete the specified elementWhat are the precautions, the following is a practical case, one Get up and take a look.

In everyone's use of JavaScript, deleting specific elements from arrays has always been a problem for many people. How to delete specific elements from JavaScript arrays? The following article will give you a detailed introduction.

Source array

var arr = ["George", "John", "Thomas", "James", "Adrew", "Martin"];
Copy after login

Pseudo delete>

What is pseudo-deletion? That is to say, setting the array element value to null;

arr[ arr.indexOf( 'Thomas' ) ] = null;
Copy after login

The deleted array looks like this:

["George", "John", null, "James", "Adrew", "Martin"]
Copy after login

However, please note that this means that the length of the array Array, that is, the variable arr, remains unchanged

Completely delete

What is complete deletion? You may also think of this question literally, which is to actually delete the element values ​​​​of the array Array, and will change the length of the array. You can use the splice method of the built-in array

object Array. Fulfill this need! When it comes to the splice method, let’s talk about its specific parameters:

Array.prototype.splice = function(start,deleteCount,items) {};
Copy after login
The above is the prototype definition of the splice method of the built-in object Array. The Chinese meaning is: splicing, and the meaning of its parameters is:

  • start: starting point

    index value

  • deleteCount: number of elements to be deleted
  • items: elements replaced/appended after deletion When the parameter is not added, it means deleting the element, and it must be combined with the parameter value of deleteCount. If deleteCount is 1, and a parameter value is given in the items parameter position, it means replacement If deleteCount is 1 and more than one parameter value is given in the items parameter position, it means replacing and appending elements
Use the splice method to delete the element value left by the above pseudo-deletion null

arr.splice( arr.indexOf( null ), 1 );
Copy after login
The deleted array looks like this:

["George", "John", "James", "Adrew", "Martin"]
Copy after login
Copy after login
Now that we have mentioned the splice method, let’s talk about its other functions, such as replacing elements, appending elements, etc.!

splice function - replace element

Now the array structure is like this:

["George", "John", "James", "Adrew", "Martin"]
Copy after login
Copy after login
Want to replace array element James with Tom

arr.splice( arr.indexOf( 'James' ), 1, 'Tom' );
Copy after login
The replaced array structure looks like this:

["George", "John", "Tom", "Adrew", "Martin"]
Copy after login
Copy after login
splice function - replaces and appends elements

Now the current array structure is like this:

["George", "John", "Tom", "Adrew", "Martin"]
Copy after login
Copy after login
Want to replace array element Tom with Judy and append Linda and Alisa

arr.splice( arr.indexOf( 'Tom' ), 1, 'Judy', 'Linda', 'Alisa' );
Copy after login
The array structure after replacement and appending looks like this:

["George", "John", "Judy", "Linda", "Alisa", "Adrew", "Martin"]
Copy after login
Copy after login
splice function - append element

You can choose any position to append elements, depending on your specific needs. The key lies in the value index position of start! The current array structure is as follows:

["George", "John", "Judy", "Linda", "Alisa", "Adrew", "Martin"]
Copy after login
Copy after login
For example, add Bill and Blake

arr.splice( arr.indexOf( 'Linda' ) + 1, 0, 'Bill', 'Blake' );
Copy after login
between Linda and Alisa The appended array structure looks like this:

["George", "John", "Judy", "Linda", "Bill", "Blake", "Alisa", "Adrew", "Martin"]
Copy after login
  • The starting position

    arr.indexOf( 'Linda' ) 1 is after the array element Linda

  • The number of deleted elements parameter is set here to 0. This is the key to appending elements. That is to say, the elements are not deleted.
  • 'Bill', 'Blake' This is the last parameter items of the splice method of the built-in object Array. It means 0 and more, according to deleteCount Different parameter values ​​have different meanings. Here the deleteCount parameter is 0 and items has two values ​​to represent this parameter. In this case, the element values ​​'Bill', 'Blake'
  • are appended.
The above is about deleting specific elements in the array. It is too simple to delete the first element and the last element. I will briefly mention it here

Delete the first element in the array

arr.shift();
Copy after login
The deleted array looks like this:

["John", "Judy", "Linda", "Bill", "Blake", "Alisa", "Adrew", "Martin"]
Copy after login
Delete the last element in the array

arr.pop();
Copy after login
The deleted array looks like this:

["John", "Judy", "Linda", "Bill", "Blake", "Alisa", "Adrew"]
Copy after login
I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

Detailed steps for using Django multiple databases

node.js implements the encapsulation of WeChat interface

The above is the detailed content of Delete specified elements from JS array. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Chat Commands and How to Use Them
1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

How to implement an online speech recognition system using WebSocket and JavaScript How to implement an online speech recognition system using WebSocket and JavaScript Dec 17, 2023 pm 02:54 PM

How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.

WebSocket and JavaScript: key technologies for implementing real-time monitoring systems WebSocket and JavaScript: key technologies for implementing real-time monitoring systems Dec 17, 2023 pm 05:30 PM

WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology

JavaScript and WebSocket: Building an efficient real-time weather forecasting system JavaScript and WebSocket: Building an efficient real-time weather forecasting system Dec 17, 2023 pm 05:13 PM

JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We

Simple JavaScript Tutorial: How to Get HTTP Status Code Simple JavaScript Tutorial: How to Get HTTP Status Code Jan 05, 2024 pm 06:08 PM

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

How to fix missing MSVCP140D.dll issue on Windows How to fix missing MSVCP140D.dll issue on Windows Dec 22, 2023 am 10:51 AM

MSVCP140D.dll is a very important resource file. If an error occurs when running the program that MSVCP140D.dll is not specified to run on Windows, then you need to take it seriously, because if you do not handle it properly, the program will not be able to run. MSVCP140D.dll is not specified to run on Windows. Solution: Method 1: First download the msvcp140.dll file, decompress it and copy it to the corresponding system directory (the different directory addresses below correspond to different systems and cannot be mistaken) 1. For Windows95/98/Me system, copy it to the C:\Windows\System directory. 2.Window

How to get HTTP status code in JavaScript the easy way How to get HTTP status code in JavaScript the easy way Jan 05, 2024 pm 01:37 PM

Introduction to the method of obtaining HTTP status code in JavaScript: In front-end development, we often need to deal with the interaction with the back-end interface, and HTTP status code is a very important part of it. Understanding and obtaining HTTP status codes helps us better handle the data returned by the interface. This article will introduce how to use JavaScript to obtain HTTP status codes and provide specific code examples. 1. What is HTTP status code? HTTP status code means that when the browser initiates a request to the server, the service

How to implement an online collaborative editor using WebSocket and JavaScript How to implement an online collaborative editor using WebSocket and JavaScript Dec 17, 2023 pm 01:37 PM

Real-time collaborative editors have become a standard feature of modern web development, especially in various team collaboration, online document editing and task management scenarios. Real-time communication technology based on WebSocket can improve communication efficiency and collaboration effects among team members. This article will introduce how to use WebSocket and JavaScript to build a simple online collaborative editor to help readers better understand the principles and usage of WebSocket. Understand the basic principles of WebSocketWebSo

JavaScript and WebSocket: Building an efficient real-time search engine JavaScript and WebSocket: Building an efficient real-time search engine Dec 17, 2023 pm 10:13 PM

JavaScript and WebSocket: Building an efficient real-time search engine Introduction: With the development of the Internet, users have higher and higher requirements for real-time search engines. When searching with traditional search engines, users need to click the search button to get results. This method cannot meet users' needs for real-time search results. Therefore, using JavaScript and WebSocket technology to implement real-time search engines has become a hot topic. This article will introduce in detail the use of JavaScript

See all articles