


Adding, deleting, modifying, and checking arrays of JavaScript study notes_javascript skills
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 = [];
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
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]
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()
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"]
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]
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]
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]
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]
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"]
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]
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]
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]
總結
這裡簡單的整理了一個陣列的增、刪、改、查的相關方法。簡單的總結:
增加數組項方法:除了直接改變數組項的值和修改數組的length 給數組添加數組項方法之外,還可以使用push() 、 unshift() 、 concat() 和splice() 添加數組項
刪除陣列項目方法:刪除陣列項目方法有 pop() 、 shift() 、 slice() 和 splice() 方法
改變數組項方法:在數組中主要透過 splice() 方法來改變數組項
查詢陣列項目方法: 查詢陣列項目方法其實就是對陣列做查詢擷取功能,主要使用的方法是 slice() 方法
有關於 pop() 、 push() 、 shift() 和 unshift() 操作方法可以點擊這裡;關於 concat() 、 slice() 和 splice() 方法的相關介紹可以點擊這裡。
有關JavaScript學習筆記之數組的增、刪、改、查小編就給大家介紹到這裡,希望對大家有所幫助!更多有關javascript知識請登陸腳本之家網站官網了解詳情!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

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

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics





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...

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.

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 in JavaScript? When processing data, we often encounter the need to have the same ID...

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/)...

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.

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...

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. �...
