자바스크립트 배열


배열 객체의 역할은 별도의 변수 이름을 사용하여 일련의 값을 저장하는 것입니다.

온라인 인스턴스

배열을 만들고 값을 할당합니다.

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<script>
var i;
var mycars = new Array();
mycars[0] = "Saab";
mycars[1] = "Volvo";
mycars[2] = "BMW";
for (i=0;i<mycars.length;i++){
	document.write(mycars[i] + "<br>");
}
</script>

</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

페이지 하단에서 더 많은 인스턴스를 확인할 수 있습니다.

배열이란 무엇인가요?

배열 개체는 일련의 값을 저장하기 위해 별도의 변수 이름을 사용합니다.

일련의 데이터(예: 자동차 이름)가 있는 경우 다음과 같은 별도의 변수가 있습니다.

var car1="사브";
var car2="볼보";
var car3="BMW";

그런데 특정 자동차를 찾고 싶다면 어떻게 해야 할까요? 그리고 3대가 아니라 300대? 이것은 쉬운 일이 아닐 것입니다!

가장 좋은 방법은 배열을 사용하는 것입니다.

배열은 하나의 변수 이름을 사용하여 모든 값을 저장할 수 있으며, 변수 이름을 사용하여 모든 값에 액세스할 수 있습니다.

배열의 각 요소에는 고유한 ID가 있으므로 쉽게 액세스할 수 있습니다.

배열 만들기

배열을 만드는 방법에는 세 가지가 있습니다.

다음 코드는 myCars라는 배열 객체를 정의합니다.

1: 일반적인 방법:

var myCars=new Array()
myCars[0 ]="사브"; 
myCars[1]="볼보";
myCars[2]="BMW";

2: 간단한 방법:

var myCars=new Array("Saab","Volvo","BMW") ;

3: 리터럴:

var myCars=["Saab","Volvo","BMW"];

배열 액세스

배열 이름과 인덱스 번호를 지정하여 특정 요소에 액세스할 수 있습니다.

다음 인스턴스는 myCars 배열의 첫 번째 값에 액세스할 수 있습니다.

var name=myCars[0];

다음 예에서는 myCars 배열의 첫 번째 요소를 수정합니다.

myCars[0]="Opel";

lamp[0] 是数组的第一个元素。[1] 是数组的第二个元素。

배열에서는 다양한 개체를 가질 수 있습니다.

모든 JavaScript 변수는 개체입니다. 배열 요소는 객체입니다. 함수는 객체입니다.

따라서 배열에는 다양한 변수 유형이 있을 수 있습니다.

배열에 개체 요소, 함수 및 배열을 포함할 수 있습니다.

myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myCars;

배열 메서드 및 속성

배열 객체를 사용하는 사전 정의된 속성 및 메서드:

var x=myCars.length // myCars의 요소 수
var y=myCars.indexOf("Volvo") // "Volvo" 값의 인덱스 값

완전한 배열 객체 참조 매뉴얼

배열의 모든 속성과 메소드에 대한 전체 참조 매뉴얼을 보려면 이 사이트를 참조하세요.

참조 매뉴얼에는 모든 속성과 메서드에 대한 설명(및 추가 예)이 포함되어 있습니다.

배열 객체 참조 매뉴얼 전체

새 메서드 만들기

프로토타입은 JavaScript 전역 생성자입니다. 새로운 Javascript 개체의 속성과 메서드를 구성할 수 있습니다.

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮创建一个数组,调用ucase（）方法, 并显示结果。</p>
<button onclick="myFunction()">点我</button>
<script>
Array.prototype.myUcase=function(){
	for (i=0;i<this.length;i++){
		this[i]=this[i].toUpperCase();
	}
}
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.myUcase();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

위의 예에서는 배열의 소문자를 대문자로 변환하는 새로운 배열 메서드를 만듭니다.

Examples

추가 예시

두 배열 병합 - concat()

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>
	
<script>
var hege = ["Cecilie", "Lone"];
var stale = ["Emil", "Tobias", "Linus"];
var kai = ["Robin"];
var children = hege.concat(stale,kai);
document.write(children);
</script>
	
</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

3개의 어레이 병합 - concat()

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<script>
var parents = ["Jani", "Tove"];
var brothers = ["Stale", "Kai Jim", "Borge"];
var children = ["Cecilie", "Lone"];
var family = parents.concat(brothers, children);
document.write(family);
</script>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

배열의 요소를 문자열로 사용 - Join()

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">点击按钮将数组作为字符串输出。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	var x=document.getElementById("demo");
	x.innerHTML=fruits.join();
}
</script>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

배열의 마지막 요소 삭제 - pop()

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮删除数组的最后一个元素。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.pop();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

배열 끝에 새 요소 추가 - push( )

인스턴스

아아아아

예제 실행»

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요.

배열의 요소 순서를 반대로 바꿉니다 - reverse()

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮给数组添加新的元素。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.push("Kiwi")
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

배열의 첫 번째 요소 제거 - Shift()

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮将数组反转排序。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.reverse();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

인스턴스 실행 »

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요.

배열에서 요소 선택 - Slice()

예제

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮删除数组的第一个元素。</p>
<button onclick="myFunction()">点我</button>
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.shift();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요.

배열 정렬(알파벳 오름차순) - sort()

인스턴스 

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">点击按钮截取数组下标 1 到 2 的元素。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
	var citrus = fruits.slice(1,3);
	var x=document.getElementById("demo");
	x.innerHTML=citrus;
}
</script>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

숫자순으로 정렬(오름차순) - sort()

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮升序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.sort();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

</body>
</html>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

숫자 정렬(내림차순) - sort()

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮升序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var points = [40,100,1,5,25,10];
	points.sort(function(a,b){return a-b});
	var x=document.getElementById("demo");
	x.innerHTML=points;
}
</script>

</body>
</html>

인스턴스 실행 »

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

배열의 두 번째 위치에 요소 추가 - 스플라이스 ()

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">单击按钮降序排列数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var points = [40,100,1,5,25,10];
	points.sort(function(a,b){return b-a});
	var x=document.getElementById("demo");
	x.innerHTML=points;
}
</script>

</body>
</html>

인스턴스 실행»

"인스턴스 실행" 버튼을 클릭하면 온라인 인스턴스를 볼 수 있습니다

배열을 string-toString()으로 변환

Instance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">点击按钮向数组添加元素。</p>
<button onclick="myFunction()">点我</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>

인스턴스 실행»

온라인 인스턴스를 보려면 "인스턴스 실행" 버튼을 클릭하세요

배열 시작 부분에 새 요소 추가 - unshift()

인스턴스

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(php.cn)</title>
</head>
<body>

<p id="demo">点击按钮将数组转为字符串并返回。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	var str = fruits.toString();
	var x=document.getElementById("demo");
	x.innerHTML= str;
}
</script>

</body>
</html>

인스턴스 실행 »

온라인 예제를 보려면 "예제 실행" 버튼을 클릭하세요