How to add an element to an array in JavaScript?
Jul 12, 2025 am 02:51 AM
In JavaScript, there are several common ways to add elements to an array: 1. Use the push() method to add one or more elements to the end of the array, such as arr.push(4) or arr.push(4, 5, 6), which will modify the original array; 2. Use the unshift() method to add elements to the beginning of the array, such as arr.unshift(1) or arr.unshift(-1, 0), which will also change the original array; 3. Use the Spread Operator to combine array literals to generate a new array, such as let newArr = [...original, 4] or let newArr = [0, ...original], which will not affect the original array; 4. Use splice() Method inserts elements at the specified position, such as arr.splice(1, 0, 2); 5. Add elements directly through index assignment, such as arr[3] = 4, but may cause empty spaces in the array. Different methods are suitable for different scenarios and can be selected and used according to your needs.
In JavaScript, adding elements to an array is a very common operation. You can choose different methods according to your specific needs.
Use push() method to add elements to the end of the array
This is one of the most commonly used methods. push() method adds one or more elements at the end of the array and returns the new length.
let arr = [1, 2, 3]; arr.push(4); console.log(arr); // [1, 2, 3, 4]
If you want to add multiple elements at once:
arr.push(4, 5, 6); console.log(arr); // [1, 2, 3, 4, 5, 6]
This method is simple and direct, and is suitable for scenarios where content is added to the tail of the array in most cases.
Use unshift() method to add elements to the beginning of the array
If you want to add elements to the beginning of an array, you can use unshift() method:
let arr = [2, 3, 4]; arr.unshift(1); console.log(arr); // [1, 2, 3, 4]
Likewise, it also supports adding multiple elements at once:
arr.unshift(-1, 0); console.log(arr); // [-1, 0, 1, 2, 3, 4]
Note: Both methods modify the original array instead of returning a new array.
Create a new array using the Spread Operator
If you don't want to change the original array, but want to generate a new array, you can use the expansion operator to match the literal method:
let original = [1, 2, 3]; let newArr = [...original, 4]; console.log(newArr); // [1, 2, 3, 4]
It can also be placed in front:
let newArr = [0, ...original]; console.log(newArr); // [0, 1, 2, 3]
This method will not affect the original array and is suitable for scenarios where state updates are performed in frameworks such as functional programming style or React.
Tips: You can also use splice() or index assignment
If you want to insert elements at a specific location, you can use
splice():let arr = [1, 3, 4]; arr.splice(1, 0, 2); // Insert 2 at index 1, and do not delete any element console.log(arr); // [1, 2, 3, 4]
Although it is not common to set directly through indexes, it can also achieve the effect of adding (especially when sparse arrays):
let arr = [1, 2]; arr[3] = 4; console.log(arr); // [1, 2, undefined, 4]
However, this may cause empty spaces in the array, so you need to pay attention.
Basically that's it. Different methods are suitable for different scenarios, just choose as needed.
The above is the detailed content of How to add an element to an array in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undress AI Tool
Undress images for free
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
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
Best Practices for Array Operations with PHP
Jun 06, 2023 am 10:30 AM
PHP is a widely used server-side scripting language that can perform array operations in many different ways. This article will introduce our best practices when writing PHP code to help you create more efficient, beautiful, and readable code. 1. Use array functions instead of manual loops It is better to use PHP array functions instead of manually looping arrays to move, manipulate or modify data. PHP array functions execute faster and have better readability and maintainability. The following are some commonly used PHP array functions: array_push(
How to put string into array in PHP and split by newline
Aug 28, 2023 pm 10:57 PM
What is PHP? PHP stands for Hypertext Preprocessor and is a popular server-side scripting language used for web development. It is designed to create dynamic and interactive web pages. PHP is embedded in HTML code and executed on the server, producing HTML output that is sent to the client browser. With its easy-to-learn syntax, PHP allows developers to build dynamic websites, process form data, interact with databases, and perform a variety of server-side tasks. It has a vast ecosystem of libraries and frameworks that enhance its functionality and enable developers to create powerful and scalable web applications. PHP is widely supported by hosting providers, making it a top choice for web development projects. How to put string into array and split by newline in PHP
Merge operation of arrays in PHP8.0: array_merge
May 14, 2023 am 08:52 AM
In PHP8.0 version, the array merging operation has been improved. This improvement mainly targets the merging operation of array data types. In previous versions, the array merging operations provided by PHP were implemented using the "+" symbol. However, there are some problems with this approach. If two arrays contain the same keys, the key values ??in the second array will overwrite the key values ??in the first array. If you need to merge the two arrays together, you need to use the array_merge() function skillfully. . Now, in PHP
Dangerous operations on arrays in PHP8.0: array_splice()
May 14, 2023 am 08:24 AM
Dangerous operations in arrays in PHP8.0: array_splice() In PHP programming, array is a very commonly used data structure that allows us to store multiple values ??in one variable. The array_splice() function is a method for processing arrays, which can delete or replace elements in the array. However, in PHP8.0, the array_splice() function has some dangerous operations, which if used improperly will cause some serious problems. This article will introduce you in detail
Complete list of PHP array operations: array_diff()
Jun 20, 2023 pm 03:57 PM
In PHP, array is a very common and useful data structure. PHP provides many different functions and methods to manipulate and process these arrays. One very useful function is array_diff(). This article discusses this function in detail. The basic usage of the array_diff() function is very simple. This function accepts two or more arrays as arguments and returns a new array containing elements that are present in the first array but not in the other arrays. Here is an example: $array1=
Use PHP custom functions to extend the functionality of array intersection and union
May 01, 2024 am 10:45 AM
Array intersection and union functionality can be extended using PHP custom functions, custom intersection functions allow finding intersections by key or value, and custom union functions find unions by key or value. This gives you the flexibility to manipulate arrays based on your specific needs.
PHP array key-value exchange: performance comparison and detailed explanation of the optimal solution
May 04, 2024 pm 01:51 PM
The best solution for PHP array key-value exchange: use the built-in array_flip() function, the time complexity is O(n). For larger arrays, the performance advantages of array_flip() are more obvious. Practical case: You can use array_flip() to convert the array of product names in the shopping cart into an array of product quantities.
How to add and remove elements from PHP array
Sep 05, 2023 pm 02:12 PM
How to add and remove elements from PHP arrays In PHP, arrays are a very common and important data structure. Arrays can hold multiple values ??and can dynamically add or subtract elements as needed. This article will explain how to add and remove array elements in PHP and provide corresponding code examples. 1. Add elements using square brackets [] syntax. The easiest way to add elements is to use square brackets [] syntax. An example is as follows: $arr=["apple",&quo
