Home Web Front-end JS Tutorial How to add elements to an array in javascript

How to add elements to an array in javascript

Nov 04, 2021 pm 12:07 PM
javascript array Add elements

Methods to add elements: 1. Use the unshift() function to insert elements at the beginning of the array; 2. Use the push() function to insert elements at the end of the array; 3. Use the concat() function to insert elements at the end of the array; 4. Use the splice() function to add elements at any position based on the array subscript.

How to add elements to an array in javascript

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

javascript adds elements to the array

Method 1: Use the unshift() function

Use the unshift() function to insert elements at the beginning of the array. This function can append one or more parameter values ​​to the head of the array:

array.unshift(元素1, 元素2, ..., 元素X)
Copy after login

1st parameter Element 1 is the new element 0 of the array, the second parameter element 2 is the new element 1, and so on, and finally returns the length of the array after adding the element.

Let’s take a closer look at the following example:

var a = [0];  //定义数组
console.log(a);  //返回[0]

a.unshift(1,2);  //一次性增加两个元素
console.log(a);  //返回[1,2,0]

var a = [0];
a.unshift(1);  //增加元素1
a.unshift(2);  //增加元素2
console.log(a);  //返回[2,1,0]
Copy after login

It can be seen that we use a.unshift(1,2) to press at the beginning of the a array Insert two values ​​​​1 and 2 sequentially; use a.unshift(1) to insert the value 1 at the beginning of the a array, and then use a.unshift(2) at the beginning (that is, before the value 1 ) insert the value 2. Therefore, the output result is:

How to add elements to an array in javascript

Method 2: Use the push() function

The push() method can push one or more The parameter value is appended to the end of the array and the length of the array after adding elements is returned.

array.push(元素1, 元素2, ..., 元素X)
Copy after login

Let’s take a closer look at the following example:

var a = [0];  //定义数组
console.log(a);  //返回[0]

a.push(1,2);  //一次性增加两个元素
console.log(a);  //返回[0,1,2]

var a = [0];
a.push(1);  //增加元素1
a.push(2);  //增加元素2
console.log(a);  //返回0,1,2]
Copy after login

It can be seen that we use a.push(1,2) to press at the end of the a array Insert two values ​​​​1 and 2 sequentially; use a.push(1) to insert the value 1 at the end of the a array, and then use a.push(2) on this basis. Insert a value 2 at the end (that is, after the value 1). Therefore, the output result is:

How to add elements to an array in javascript

Method 3. Use the concat() function

In addition to inserting elements at the end of the array, you can use push( ) function, you can also use the concat() function.

The concat() method can also insert a given element or elements, and can add all parameters passed to the end of the array in order.

var a = [1,2,3,4,5];  //定义数组
var b = a.concat(6,7,8);  //为数组a连接3个元素
console.log(b);  //返回[1,2,3,4,5,6,7,8]
Copy after login

The output result is:

How to add elements to an array in javascript

Explanation: The concat() method will create and return a new array instead of based on the original one Add new elements.

Method 4: Use the splice() function

How to insert one or more elements at a specified subscript position?

The answer is: You can use the splice() method.

array.splice(index,howmany,item1,...,itemX)The first parameter index is the specified starting point mark position; the second parameter howmany specifies the number of elements that should be deleted. When the value is set to 0, the deletion operation will not be performed; in this way, the third and following parameters item1, .....,itemX to insert one or more elements.

Let’s take a closer look at the following example:

var a = [1,2,3,4,5];
a.splice(1,0,"hello");
console.log(a);
Copy after login

It can be seen that: use a.splice(1,0,"hello") in the subscript 1 Insert an element "hello" at the position (that is, after the first element position of the array), so the output result is:

How to add elements to an array in javascript

var a = [1,2,3,4,5];
a.splice(2,0,"hello","hi",8);
console.log(a);
Copy after login

You can see Exit: Use a.splice(2,0,"hello","hi",8)Insert multiple elements at the position of subscript 2 (that is, after the second element position of the array)" hello", "hi", 8, so the output result is:

How to add elements to an array in javascript

Using the splice() method also You can add elements at the beginning or end of the array:

var a = [1,2,3,4,5];
a.splice(0,0,"hello");
a.splice(a.length,0,"hi");
console.log(a);
Copy after login

If you want to add an element at the beginning of the array, just set the value of the first parameter index of this method to 0; if you want to add an element at the end of the array , just set the value of the first parameter index of the method to array length. The array length can be obtained using a.length.

Let’s take a look at the output:

How to add elements to an array in javascript

[Recommended learning: javascript advanced tutorial]

The above is the detailed content of How to add elements to an array in javascript. 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

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)

How to remove duplicate elements from PHP array using foreach loop? How to remove duplicate elements from PHP array using foreach loop? Apr 27, 2024 am 11:33 AM

The method of using a foreach loop to remove duplicate elements from a PHP array is as follows: traverse the array, and if the element already exists and the current position is not the first occurrence, delete it. For example, if there are duplicate records in the database query results, you can use this method to remove them and obtain results without duplicate records.

The Art of PHP Array Deep Copy: Using Different Methods to Achieve a Perfect Copy The Art of PHP Array Deep Copy: Using Different Methods to Achieve a Perfect Copy May 01, 2024 pm 12:30 PM

Methods for deep copying arrays in PHP include: JSON encoding and decoding using json_decode and json_encode. Use array_map and clone to make deep copies of keys and values. Use serialize and unserialize for serialization and deserialization.

PHP array key value flipping: Comparative performance analysis of different methods PHP array key value flipping: Comparative performance analysis of different methods May 03, 2024 pm 09:03 PM

The performance comparison of PHP array key value flipping methods shows that the array_flip() function performs better than the for loop in large arrays (more than 1 million elements) and takes less time. The for loop method of manually flipping key values ​​takes a relatively long time.

Application of PHP array grouping function in data sorting Application of PHP array grouping function in data sorting May 04, 2024 pm 01:03 PM

PHP's array_group_by function can group elements in an array based on keys or closure functions, returning an associative array where the key is the group name and the value is an array of elements belonging to the group.

Best Practices for Deep Copying PHP Arrays: Discover Efficient Methods Best Practices for Deep Copying PHP Arrays: Discover Efficient Methods Apr 30, 2024 pm 03:42 PM

The best practice for performing an array deep copy in PHP is to use json_decode(json_encode($arr)) to convert the array to a JSON string and then convert it back to an array. Use unserialize(serialize($arr)) to serialize the array to a string and then deserialize it to a new array. Use the RecursiveIteratorIterator to recursively traverse multidimensional arrays.

PHP array multi-dimensional sorting practice: from simple to complex scenarios PHP array multi-dimensional sorting practice: from simple to complex scenarios Apr 29, 2024 pm 09:12 PM

Multidimensional array sorting can be divided into single column sorting and nested sorting. Single column sorting can use the array_multisort() function to sort by columns; nested sorting requires a recursive function to traverse the array and sort it. Practical cases include sorting by product name and compound sorting by sales volume and price.

The role of PHP array grouping function in finding duplicate elements The role of PHP array grouping function in finding duplicate elements May 05, 2024 am 09:21 AM

PHP's array_group() function can be used to group an array by a specified key to find duplicate elements. This function works through the following steps: Use key_callback to specify the grouping key. Optionally use value_callback to determine grouping values. Count grouped elements and identify duplicates. Therefore, the array_group() function is very useful for finding and processing duplicate elements.

PHP array merging and deduplication algorithm: parallel solution PHP array merging and deduplication algorithm: parallel solution Apr 18, 2024 pm 02:30 PM

The PHP array merging and deduplication algorithm provides a parallel solution, dividing the original array into small blocks for parallel processing, and the main process merges the results of the blocks to deduplicate. Algorithmic steps: Split the original array into equally allocated small blocks. Process each block for deduplication in parallel. Merge block results and deduplicate again.

See all articles