집 > 기사 > 웹 프론트엔드 > JS 배열에 요소를 추가하는 방법 요약

JS 배열에 요소를 추가하는 방법 요약

韦小宝원래의: 2018-01-26 11:05:224047검색

이 글에서는 JS 배열에 요소를 추가하는 다양한 방법을 사용하여 JS배열에 새 요소를 추가하는 방법을 소개합니다. 배열은 JS에서 가장 일반적으로 사용되는 데이터 유형 중 하나이며, 이는 우리가 제공하는 기본 사항 중 하나입니다. 알아야 작동할 수 있습니다.

JS 배열에 요소를 추가하는 방법을 살펴보겠습니다!

배열의 시작 부분에 새 요소 추가 - unshift()
테스트 코드:

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to add elements to the array.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.unshift("Lemon","Pineapple");
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script> 
<p><b>Note:</b> The unshift() method does not work properly in Internet Explorer 8 and earlier, the values will be inserted, but the return value will be <em>undefined</em>.</p>
</body>
</html>

테스트 결과:

Lemon,Pineapple,Banana,Orange,Apple,Mango

배열의 두 번째 위치에 요소 추가 - splice()
테스트 코드:

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to add elements to the array.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction()
{
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2,0,"Lemon","Kiwi");
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
</body>
</html>

테스트 결과:

Banana,Orange,Lemon,Kiwi,Apple,Mango

배열 끝에 새 요소 추가 - push()
테스트 코드:

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to add a new element to the array.</p>
<button onclick="myFunction()">Try it</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction()
{
fruits.push("Kiwi")
var x=document.getElementById("demo");
x.innerHTML=fruits;
}
</script>
</body>
</html>

테스트 결과:

Banana,Orange,Apple,Mango,Kiwi

각 JS의 배열 작업에 익숙하지 않은 학생들도 주의 깊게 연습해야 한다는 장점이 있습니다!

JS 배열에 요소를 추가하는 방법 요약

관련 기사