Home Web Front-end JS Tutorial Introduction to methods of deleting specific elements from JavaScript arrays

Introduction to methods of deleting specific elements from JavaScript arrays

Sep 07, 2017 am 10:23 AM
javascript js element

Deleting specified elements from js arrays is a problem that each of us encounters. There is a lot of information on this aspect on the Internet, but some of it is too old and some of the content is not comprehensive enough, so I will sort it out myself. This article This article mainly summarizes and introduces various methods for deleting specific elements in JavaScript arrays. Friends in need can refer to it.

Preface

Maybe when it comes to deleting specific elements of an array, you estimate that there is more than one way to achieve it, so let’s take a look. Check out these methods I’ve summarized, they may be helpful to you! Not much to say, let’s take a look at the 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

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


Complete deletion

What is complete deletion? You may also think of this question literally, it is really deleting the array. The element value of Array will change the length of the array. This requirement can be achieved through the splice method of the built-in array object Array! Speaking of the splice method, we need to 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, the meaning of its parameters is:


  • start: starting point index value

  • deleteCount: the 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 replacing
    If deleteCount is 1 and the items parameter position is given to more than one parameter value, it means replacing and appending elements

The element value left by the above pseudo-deletion is deleted through the splice method. 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 it’s said By the way, the splice method will talk about its other functions, such as replacing elements, appending elements, etc.!


splice function - replace elements

Now the array structure is like this:



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

I want to replace the 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 - replace and append elements


Now the current array structure is like this:


["George", "John", "Tom", "Adrew", "Martin"]
Copy after login
Copy after login

Want to replace the array element Tom with Judy and append Linda and Alisa


arr.splice( arr.indexOf( 'Tom' ), 1, 'Judy', 'Linda', 'Alisa' );
Copy after login

The array after replacement and appending The structure looks like this:


["George", "John", "Judy", "Linda", "Alisa", "Adrew", "Martin"]
Copy after login
Copy after login

splice function - append elements


You can choose to append elements Any position depends 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, if you want to add Bill and Blake between Linda and Alisa


arr.splice( arr.indexOf( 'Linda' ) + 1, 0, 'Bill', 'Blake' );
Copy after login

The appended array structure looks like this:


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

    Starting position
  • arr .indexOf( 'Linda' ) + 1

    is after the array element Linda

  • The number parameter of deleted elements is set here to 0. This is the key to appending elements, that is Say not to delete elements
  • 'Bill', 'Blake' This is the last parameter items of the splice method of the built-in object Array. It means 0 or more, according to the deleteCount parameter value Different representations have different meanings. The deleteCount parameter here is 0 and items has two values ​​​​to represent this parameter. The example is to append the element values ​​'Bill', 'Blake'

  • 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

The above is the detailed content of Introduction to methods of deleting specific elements from JavaScript arrays. 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)
4 weeks 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
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: How To Unlock Everything In MyRise
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)

Recommended: Excellent JS open source face detection and recognition project Recommended: Excellent JS open source face detection and recognition project Apr 03, 2024 am 11:55 AM

Face detection and recognition technology is already a relatively mature and widely used technology. Currently, the most widely used Internet application language is JS. Implementing face detection and recognition on the Web front-end has advantages and disadvantages compared to back-end face recognition. Advantages include reducing network interaction and real-time recognition, which greatly shortens user waiting time and improves user experience; disadvantages include: being limited by model size, the accuracy is also limited. How to use js to implement face detection on the web? In order to implement face recognition on the Web, you need to be familiar with related programming languages ​​and technologies, such as JavaScript, HTML, CSS, WebRTC, etc. At the same time, you also need to master relevant computer vision and artificial intelligence technologies. It is worth noting that due to the design of the Web side

PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts PHP and JS Development Tips: Master the Method of Drawing Stock Candle Charts Dec 18, 2023 pm 03:39 PM

With the rapid development of Internet finance, stock investment has become the choice of more and more people. In stock trading, candle charts are a commonly used technical analysis method. It can show the changing trend of stock prices and help investors make more accurate decisions. This article will introduce the development skills of PHP and JS, lead readers to understand how to draw stock candle charts, and provide specific code examples. 1. Understanding Stock Candle Charts Before introducing how to draw stock candle charts, we first need to understand what a candle chart is. Candlestick charts were developed by the Japanese

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

The relationship between js and vue The relationship between js and vue Mar 11, 2024 pm 05:21 PM

The relationship between js and vue: 1. JS as the cornerstone of Web development; 2. The rise of Vue.js as a front-end framework; 3. The complementary relationship between JS and Vue; 4. The practical application of JS and Vue.

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

The AI ​​era of JS is here! The AI ​​era of JS is here! Apr 08, 2024 am 09:10 AM

Introduction to JS-Torch JS-Torch is a deep learning JavaScript library whose syntax is very similar to PyTorch. It contains a fully functional tensor object (can be used with tracked gradients), deep learning layers and functions, and an automatic differentiation engine. JS-Torch is suitable for deep learning research in JavaScript and provides many convenient tools and functions to accelerate deep learning development. Image PyTorch is an open source deep learning framework developed and maintained by Meta's research team. It provides a rich set of tools and libraries for building and training neural network models. PyTorch is designed to be simple, flexible and easy to use, and its dynamic computation graph features make

js method to refresh current page js method to refresh current page Jan 24, 2024 pm 03:58 PM

js methods to refresh the current page: 1. location.reload(); 2. location.href; 3. location.assign(); 4. window.location. Detailed introduction: 1. location.reload(), use the location.reload() method to reload the current page; 2. location.href, you can refresh the current page by setting the location.href attribute, etc.

The difference between __proto__ and prototype in JS The difference between __proto__ and prototype in JS Feb 19, 2024 pm 01:38 PM

__proto__ and prototype are two attributes related to prototypes in JS. They have slightly different functions. This article will introduce and compare the differences between the two in detail, and provide corresponding code examples. First, let’s understand what they mean and what they are used for. proto__proto__ is a built-in property of an object that points to the prototype of the object. Every object has a __proto__ attribute, including custom objects, built-in objects, and function objects. By __proto__ genus

See all articles