JavaScript 배열
JavaScript 배열은 단일 변수에 여러 가지 값을 저장하기 위해 사용됩니다。
배열이란 무엇인가요?
배열은 특별한 변수로, 한 번에 여러 가지 값을 저장할 수 있습니다。
프로젝트 목록(예, 차량 브랜드 목록)이 있으면, 차량 브랜드를 단일 변수에 저장하는 방법은 이렇습니다：
var car1 = "Saab"; var car2 = "Volvo"; var car3 = "BMW";
하지만, 모든 차량을 순회하면서 특정 값을 찾고 싶다면? 세 가지 차량 브랜드가 아니라 300개의 차량 브랜드라면?
해결책은 배열입니다!
배열은 하나의 이름으로 많은 값을 저장할 수 있으며, 또한 인덱스 번호를 참조하여 이 값을 접근할 수 있습니다。
배열 생성
배열 텍스트를 사용하는 것은 JavaScript 배열을 생성하는 가장 간단한 방법입니다。
문법：
var array-name = [item1, item2, ...];
예제
var cars = ["Saab", "Volvo", "BMW"];
공백과 줄 바꿈은 중요하지 않습니다. 선언은 다중 행을 지원합니다：
예제
var cars = [
"Saab",
"Volvo",
"BMW"
];
마지막 요소 뒤에 쉼표를 작성하지 마세요(예 "BMW",).
브라우저 간의 호환성 문제가 있을 수 있습니다。
JavaScript 키워드 new를 사용하여
다음 예제는 배열을 생성하고 값을 할당합니다：
예제
var cars = new Array("Saab", "Volvo", "BMW");
위 두 예제는 완전히 같은 효과를 가집니다. 사용하지 않아도 됩니다 new Array()。
간결성, 읽기 쉽기, 실행 속도를 고려하여 첫 번째 방법(배열 텍스트 메서드)을 사용하세요。
배열 요소에 접근합니다
우리는 참조를 통해인덱스 번호(인덱스)어떤 배열 요소를 참조할 때 사용됩니다。
이 문장은 cars 배열의 첫 번째 요소의 값을 참조합니다：
var name = cars[0];
이 문장은 cars 배열의 첫 번째 요소를 변경합니다：
cars[0] = \
예제
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars[0];
[0]은 배열의 첫 번째 요소입니다。[1]은 두 번째입니다. 배열 인덱스는 0부터 시작합니다。
배열 요소 변경
이 문장은 cars 배열의 첫 번째 요소의 값을 변경합니다：
cars[0] = \
예제
var cars = ["Saab", "Volvo", "BMW"];
cars[0] = \
document.getElementById("demo").innerHTML = cars[0];
전체 배열에 접근
JavaScript를 통해 배열 이름을 통해 전체 배열에 접근할 수 있습니다:
예제
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
배열은 객체입니다
배열은 특수한 유형의 객체입니다. JavaScript에서 배열에 사용 typeof 연산자는 "object"를 반환합니다.
그러나, JavaScript 배열은 가장 좋게 배열로 설명됩니다.
배열은 사용합니다숫자를 통해 "요소"에 접근합니다. 이 예제에서는,person[0] Bill을 반환:
배열:
var person = ["Bill", "Gates", 62];
객체는 사용합니다이름를 통해 "멤버"에 접근합니다. 이 예제에서는,person.firstName Bill을 반환:
객체:
var person = {firstName:"Bill", lastName:"Gates", age:19};
배열 요소는 객체일 수 있습니다
JavaScript 변수는 객체일 수 있습니다. 배열은 특수한 유형의 객체입니다.
따라서, 동일한 배열에 다른 유형의 변수를 저장할 수 있습니다.
객체를 배열에 저장할 수 있습니다. 함수도 배열에 저장할 수 있습니다. 심지어 배열도 배열에 저장할 수 있습니다:
myArray[0] = Date.now; myArray[1] = myFunction; myArray[2] = myCars;
배열 속성과 메서드
JavaScript 배열의 진정한 힘은 배열 속성과 메서드에 숨겨져 있습니다:
예제
var x = cars.length; // length 속성은 요소의 수를 반환합니다 var y = cars.sort(); // sort() 메서드는 배열을 정렬합니다
다음 장에서는 배열 메서드를 배울 것입니다.
length 속성
length 속성은 배열의 길이(요소의 수)를 반환합니다.
예제
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.length; // fruits의 길이는 4
length 속성은 항상 가장 높은 배열 인덱스(지수)보다 큽니다.
첫 번째 배열 요소에 접근
예제
fruits = ["Banana", "Orange", "Apple", "Mango"]; var first = fruits[0];
마지막 배열 요소에 접근
예제
fruits = ["Banana", "Orange", "Apple", "Mango"]; var last = fruits[fruits.length - 1];
배열 요소를 순회하다
배열을 순회하는 가장 안전한 방법은 "for"루프：
예제
var fruits, text, fLen, i;
fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
text += "<li>" + fruits[i] + "</li>";
}
또한 사용할 수 있습니다 Array.foreach() 함수：
예제
var fruits, text;
fruits = ["Banana", "Orange", "Apple", "Mango"];
text = "<ul>";
fruits.forEach(myFunction);
text += "</ul>";
function myFunction(value) {
text += "<li>" + value + "</li>";
}
배열 요소 추가
배열에 새로운 요소 추가하는 데 가장 좋은 방법은 push() 메서드：
예제
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon"); // fruits에 새로운 요소 (Lemon) 추가
또한 사용할 수 있습니다 length 속성을 사용하여 배열에 새로운 요소 추가：
예제
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits[fruits.length] = "Lemon"; // fruits에 새로운 요소 (Lemon) 추가
경고!
가장 높은 인덱스의 요소를 추가하면 배열에서 "홀"을 생성할 수 있습니다：
예제
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits[6] = "Lemon"; // fruits에 새로운 요소 (Lemon) 추가
연관 배열
많은 프로그래밍 요소가 이름 지정된 인덱스 배열을 지원합니다.
이름 지정된 인덱스를 가진 배열은 연관 배열(또는 해시)라고 합니다.
JavaScript 지원하지 않습니다이름 지정된 인덱스 배열을 사용할 수 있습니다.
JavaScript에서 배열은숫자 인덱스。
예제
var person = []; person[0] = "Bill"; person[1] = "Gates"; person[2] = 62; var x = person.length; // person.length는 3을 반환합니다 var y = person[0]; // person[0]는 "Bill"를 반환합니다
경고!
이름 지정된 인덱스를 사용하면, JavaScript는 배열을 표준 객체로 재정의합니다.
그 후, 모든 배열의 메서드와 속성은 잘못된 결과를 생성합니다.
예제：
var person = []; person["firstName"] = "Bill"; person["lastName"] = "Gates"; person["age"] = 62; var x = person.length; // person.length은 0을 반환합니다 var y = person[0]; // person[0]은 undefined을 반환합니다
배열과 객체의 차이
JavaScript에서배열사용하세요숫자 인덱스。
JavaScript에서객체사용하세요이름 인덱스。
배열은 숫자 인덱스를 가진 특수한 객체입니다.
어떤 경우에는 배열을 사용하고, 어떤 경우에는 객체를 사용할까요?
- JavaScript는 연결 배열을 지원하지 않습니다
- 요소 이름이문자(텍스트)그렇다면객체。
- 요소 이름이숫자그렇다면배열。
new Array()를 피하세요
JavaScript의 내장 배열 생성자를 사용할 필요가 없습니다 new Array()。
이를 사용하세요 [] 대신!
아래 두 가지 다른 문장은 이름이 points인 새로운 빈 배열을 생성합니다:
var points = new Array(); // 나쁨 var points = []; // 좋음
아래 두 가지 다른 문장은 여섯 개의 숫자를 포함하는 새로운 배열을 생성합니다:
var points = new Array(40, 100, 1, 5, 25, 10); // 나쁨 var points = [40, 100, 1, 5, 25, 10]; // 좋음
new 키워드는 코드를 복잡하게 만들 수 있습니다. 또한, 예상치 못한 결과를 일으킬 수 있습니다:
var points = new Array(40, 100); // 40과 100을 포함하는 두 개의 요소를 포함하는 배열을 생성합니다
그렇다면, 하나의 요소를 제거한 경우 어떻게 될까요?
var points = new Array(40); // 40개의 미정의 요소를 포함하는 배열을 생성합니다！！！
어떻게 배열을 인식할 수 있을까요
일반적인 문제는: 어떻게 특정 변수가 배열인지 알 수 있을까요?
문제는 JavaScript 연산자 typeof 반환 "object":
var fruits = ["Banana", "Orange", "Apple", "Mango"]; typeof fruits; // object를 반환합니다
typeof 연산자는 "object"을 반환합니다. 이유는 JavaScript 배열이 객체에 속합니다.
해결책 1:
이 문제를 해결하기 위해 ECMAScript 5는 새로운 메서드를 정의했습니다 Array.isArray():
Array.isArray(fruits); // true를 반환
이 방법의 문제는 ECMAScript 5에 있습니다 오래된 브라우저는 지원하지 않습니다。
해결책 2:
당신의 자신의 isArray() 이 함수는 문제를 해결합니다:
function isArray(x) {
return x.constructor.toString().indexOf("Array") > -1;
}
파라미터가 배열이면, 위의 함수는 항상 true를 반환합니다.
또는 더 정확한 설명은: 객체 프로토타입이 "Array" 단어를 포함하면 true를 반환합니다.
해결책 3:
의 경우 객체가 주어진 구조체로 생성되면 instanceof 연산자가 true를 반환합니다:
var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits instanceof Array // true를 반환
