How to add elements to an array in JavaScript? 3 ways to add elements to js arrays (code examples)-JS Tutorial-php.cn

How to add elements to an array in JavaScript? 3 ways to add elements to js arrays (code examples)

青灯夜游

Release： 2018-10-22 14:23:26

Original

52576 people have browsed it

Arrays are an important part of JavaScript. When learning js arrays, the operation of array elements is an indispensable part. So do you know how to add array elements? This article will introduce to you how to add elements to a js array (one-dimensional), so that everyone can understand the method of adding elements to a js array. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

First of all, let’s briefly introduceWhat are the three methods of adding elements to js arrays? They are:

1, js push() method to add array elements

2, js unshift() method to add array elements

3, js splice( ) method to add array elements

Let’s introduce the above method in detail How to add elements to js array, through a simple code example.

js push() method adds array elements

push() method can add one or more new elements to the end of the array, The length of the new array is then returned, and the push() method is supported by all major browsers.

Syntax:

数组.push(元素1,元素2,元素3.....元素n);/*push()方法里必须有一个参数*/

Copy after login

Code example: Add the two elements dog1 and dog2 to the end of the animal array

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<div class="demo">
			<p>数组：cat，elephant，tiger，rabbit；<br>数组长度为：4</p>
		    <button onclick="myFunction()">点我--push()添加元素</button>
		</div>
	</body>
	<script type="text/javascript">
		function myFunction(){
		   var animal = ["cat", "elephant", "tiger","rabbit"];
		   document.write("<p>数组："+animal+"；<br>数组长度："+ animal.length+"</p>");
		   var animal1= animal.push("dog1","dog2");
		   document.write("<p>新数组："+animal+"；<br>数组长度："+ animal1+"</p>");
		}
    </script>
</html>

Copy after login

Effect picture:

How to add elements to an array in JavaScript? 3 ways to add elements to js arrays (code examples)

Description:

Array.length can return the length of the array

js unshift() method adds array elements

The unshift() method can add one or more new elements to the beginning of the array and then return the length of the new array, and all major browsers support the unshift method.

Grammar:

数组.unshift(元素1,元素2,元素3.....元素n);/* unshift()方法里必须有一个参数*/

Copy after login

Code example: Add the two elements dog1 and dog2 to the beginning of the animal array

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<div class="demo">
			<p>数组：cat，elephant，tiger，rabbit；<br>数组长度为：4</p>
		    <button onclick="myFunction()">点我--unshift()添加元素</button>
		</div>
	</body>
	<script type="text/javascript">
		function myFunction(){
		   var animal = ["cat", "elephant", "tiger","rabbit"];
		   document.write("<p>数组："+animal+"；<br>数组长度："+ animal.length+"</p>");
		   var animal1= animal.unshift("dog1","dog2");
		   document.write("<p>新数组："+animal+"；<br>数组长度："+ animal1+"</p>");
		}
    </script>
</html>

Copy after login

Effect picture:

How to add elements to an array in JavaScript? 3 ways to add elements to js arrays (code examples)

js splice() method adds array elements

The splice() method can add one or more new elements to the array At the specified position, the element at the inserted position is automatically moved back, and all major browsers support the splice method.

Grammar:

数组.splice(index,howmany,item1,.....,itemN);

Copy after login

index: Indicates where to add or delete elements;

howmany: Indicates how many elements should be deleted. A value of 0 means no elements will be deleted;

item: Represents a new element to be added to the array.

Code example: Add the two elements dog1 and dog2 to the second position of the animal array (after the first element)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<div class="demo">
			<p>数组：cat，elephant，tiger，rabbit；<br>数组长度为：4</p>
		    <button onclick="myFunction()">点我--splice()添加元素</button>
		</div>
	</body>
	<script type="text/javascript">
		function myFunction(){
		   var animal = ["cat", "elephant", "tiger","rabbit"];
		   document.write("<p>数组："+animal+"；<br>数组长度："+ animal.length+"</p>");
		   var animal1= animal.splice(1,0,"dog1","dog2");
		   document.write("<p>新数组："+animal+"；<br>数组长度："+ animal1.length+"</p>");
		}
    </script>
</html>

Copy after login

Rendering:

How to add elements to an array in JavaScript? 3 ways to add elements to js arrays (code examples)

The above are the three methods of adding elements to js arrays introduced in this article, namely push() method, unshift() method and splice() method. Which method to choose at work depends on work needs and personal habits. Newbies can try it themselves to deepen their understanding. I hope this article can help you! For more related tutorials, please visit: JavaScript Video Tutorial, jQuery Video Tutorial, bootstrap Video Tutorial!

The above is the detailed content of How to add elements to an array in JavaScript? 3 ways to add elements to js arrays (code examples). For more information, please follow other related articles on the PHP Chinese website!