Home Web Front-end JS Tutorial Adding, deleting, modifying, and checking arrays of JavaScript study notes_javascript skills

Adding, deleting, modifying, and checking arrays of JavaScript study notes_javascript skills

May 16, 2016 pm 03:09 PM

The importance of arrays in programming languages ​​is self-evident. Arrays in JavaScript are also one of the most commonly used objects. Arrays are ordered collections of values. Due to weak types, arrays in JavaScript are very flexible and powerful. Unlike arrays in strongly typed high-level languages ​​such as Java, which can only store elements of the same type or its subtypes, JavaScript can store multiple types of elements in the same array, and the length can also be dynamically adjusted, as the data increases or Reduce automatic changes to array length.

Array is a common object in JavaScript. It has some classic operations, such as adding, deleting, modifying and checking arrays. This article mainly summarizes the relevant operation methods in this regard.

Add array item

First let’s look at how to add array items to an array. Suppose there is an array:

var arr = [];
Copy after login

The above declares an array, but this array is an empty array [] and its length value is 0. Next we look at how to add array items to the array arr. The simplest way is to add array items to the array through index values:

var arr = [];
arr[0] = 'a';
arr[1] = 'b';
arr[2] = 1;
arr[3] = 2;
console.log(arr); // ["a", "b", 1, 2]
console.log(arr.length); // 4
Copy after login

In addition, you can also add array items to the array by changing the length value of the array, but the array items added to the array in this way are all undefined :

var arr = [];
arr[0] = 'a'; // 给数组arr添加一个`a`数组项
arr.length = 5; // 改变数组的`length`值为`5`
console.log(arr); // ["a", undefined × 4]
Copy after login

Although this method also adds array items to the array, it is relatively troublesome. In fact, adding array items to an array is not so troublesome. You can add array items to an array through the native methods provided by the array.

push()

Use the push() method to add one or more array items to the end of the array.

var arr = [];
arr.push('a','b');
console.log(arr); // ['a','b']
unshift()
Copy after login

Use the push() method to add one or more array items to the end of the array, then use the unshift() method to add one or more array items to the front of the array:

var arr = ['a','b'];
arr.unshift(1,2);
console.log(arr); // [1, 2, "a", "b"]
Copy after login

In addition to these two methods, you can also use the splice() method to add array items to the array:

var arr = ['a','b','c',1,2];
arr.splice(2,0,'d','c','e');
console.log(arr); // ["a", "b", "d", "c", "e", "c", 1, 2]
Copy after login

In addition to the splice() method, you can also use the concat() method to add array items to the array. However, using this method will not change the original array, but will create a new array in the original array:

var arr = ['a','b','c'];
var arr2 = arr.concat('d',1,2,['e',3]);
console.log(arr); // ["a", "b", "c"]
console.log(arr2); // ["a", "b", "c", "d", 1, 2, "e", 3]
Copy after login

Delete array item

For array operations, in addition to adding array items, it is often necessary to delete the array. Commonly used methods to delete array items are pop() and shift().

pop()

The pop() method can remove an array item from the end of the array:

var arr = ['a','b','c','d',1,2];
arr.pop();
console.log(arr); // ["a", "b", "c", "d", 1]
Copy after login

shift()

The shift() method is just the opposite of the pop() method. It can delete the first item of the array:

var arr = ['a','b','c','d',1,2];
arr.shift();
console.log(arr); // ["b", "c", "d", 1, 2]
Copy after login

Whether it is pop() or shift() method, you can only delete one array item from the array at a time, but in many cases, deleting array items in this way is relatively troublesome. In array operations, in addition to these two methods, array items can also be deleted through the slice() and splice() methods.

slice()

The slice() method can delete multiple array items from an array, but the difference is that slice() will not affect the original array, but will only create a copy of the array based on the original array:

var arr = [1,2,3,4,'a','b'];
var arr2 = arr.slice(2);
console.log(arr); // [1, 2, 3, 4, "a", "b"]
console.log(arr2); // [3, 4, "a", "b"]
console.log(arr3); // ["a", "b"]
Copy after login

splice()

In addition to adding array items to an array, the splice() method can also delete array items from an array:

var arr = [1,2,3,4,'a','b','c'];
var arr2 = arr.splice(2,2);
console.log(arr); // [1, 2, "a", "b", "c"]
console.log(arr2); // [3, 4]
Copy after login

Change array

The splice() method in an array is a powerful method in an array. In addition to adding and deleting array items to an array, it can also change an array:

var arr = [1,2,3,4,5,6];
var arr2 = arr.splice(2,3,'a','b','c');
console.log(arr); // [1, 2, "a", "b", "c", 6]
console.log(arr2); // [3, 4, 5]
Copy after login

Array query

The array query mentioned here actually refers to the query extraction of the array. The method used is the slice() method:

var arr = [1,2,3,4,5,6];
var arr2 = arr.slice(-3);
console.log(arr); // [1, 2, 3, 4, 5, 6]
console.log(arr2); // [4, 5, 6]
Copy after login

總結

這裡簡單的整理了一個陣列的增、刪、改、查的相關方法。簡單的總結:

增加數組項方法:除了直接改變數組項的值和修改數組的length 給數組添加數組項方法之外,還可以使用push() 、 unshift() 、 concat() 和splice() 添加數組項

刪除陣列項目方法:刪除陣列項目方法有 pop() 、 shift() 、 slice() 和 splice() 方法

改變數組項方法:在數組中主要透過 splice() 方法來改變數組項

查詢陣列項目方法: 查詢陣列項目方法其實就是對陣列做查詢擷取功能,主要使用的方法是 slice() 方法

有關於 pop() 、 push() 、 shift() 和 unshift() 操作方法可以點擊這裡;關於 concat() 、 slice() 和 splice() 方法的相關介紹可以點擊這裡。

有關JavaScript學習筆記之數組的增、刪、改、查小編就給大家介紹到這裡,希望對大家有所幫助!更多有關javascript知識請登陸腳本之家網站官網了解詳情!

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

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

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)

What should I do if I encounter garbled code printing for front-end thermal paper receipts? What should I do if I encounter garbled code printing for front-end thermal paper receipts? Apr 04, 2025 pm 02:42 PM

Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

Who gets paid more Python or JavaScript? Who gets paid more Python or JavaScript? Apr 04, 2025 am 12:09 AM

There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.

Demystifying JavaScript: What It Does and Why It Matters Demystifying JavaScript: What It Does and Why It Matters Apr 09, 2025 am 12:07 AM

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

How to merge array elements with the same ID into one object using JavaScript? How to merge array elements with the same ID into one object using JavaScript? Apr 04, 2025 pm 05:09 PM

How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...

How to achieve parallax scrolling and element animation effects, like Shiseido's official website?
or:
How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website? How to achieve parallax scrolling and element animation effects, like Shiseido's official website? or: How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website? Apr 04, 2025 pm 05:36 PM

Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...

Is JavaScript hard to learn? Is JavaScript hard to learn? Apr 03, 2025 am 12:20 AM

Learning JavaScript is not difficult, but it is challenging. 1) Understand basic concepts such as variables, data types, functions, etc. 2) Master asynchronous programming and implement it through event loops. 3) Use DOM operations and Promise to handle asynchronous requests. 4) Avoid common mistakes and use debugging techniques. 5) Optimize performance and follow best practices.

How to implement panel drag and drop adjustment function similar to VSCode in front-end development? How to implement panel drag and drop adjustment function similar to VSCode in front-end development? Apr 04, 2025 pm 02:06 PM

Explore the implementation of panel drag and drop adjustment function similar to VSCode in the front-end. In front-end development, how to implement VSCode similar to VSCode...

The difference in console.log output result: Why are the two calls different? The difference in console.log output result: Why are the two calls different? Apr 04, 2025 pm 05:12 PM

In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...

See all articles