- Today
- Total
빵 입니다.
[Array 1/3] Array 본문
W3Schools 번역 및 검색을 통해 알게 된 점 위주의 정리
https://www.w3schools.com/js/js_arrays.asp
1. 하나의 이름으로 여러 값을 가질 수 있다.
1) var array_name = [item1, item2, ...]; → Literal 방식 (권장)
var
fruit1 = "apple";
var fruit2 = "banana";
var fruit3 = "orange";
→ var fruit = ["apple", "banana",
"orange"];
→ var fruit = [
"apple",
"banana",
"orange"
];
마지막 요소 뒤에 콤마(,)를 넣으면 IE8 이하
버전에서 오류 발생
2) new 생성자를 이용해 배열을 만들
수 있다.
var cars = new Array("Saab", "Volvo", "BMW");
var cars = new Array();
arr[0] = " Saab";
arr[1] = " Volvo";
arr[2] = " BMW";
가독성 및 실행 속도를 위해 1번 방법을 권장한다.
2. 인덱스를 참조하여 값에 액세스 할 수 있다. 인덱스는 0부터 시작한다.
var name = cars[0]; //cars 배열의 첫 번째 요소에 접근
cars[0] = "Opel"; //cars 배열의 첫 번째 요소를 수정
3. 배열은 특별한 유형의 객체다.
typeof 연산자는 배열의 "object"를 반환한다.
그러나 자바스크립트 배열은 배열로 가장 잘 묘사된다.
배열은 숫자를 사용하여 "요소"에
접근한다.
var person = ["John", "Doe", 46]; //여기서 person[0]은 John을 반환한다.
객체는 이름을 사용하여 "멤버"에 접근한다.
var person = {firstName:"John",
lastName:"Doe", age:46}; //여기서
person.firstName은 John을 반환한다.
4. 자바스크립트 변수는 객체가 될 수 있다. 배열은 특별한 종류의 객체이다.
그런 이유로, 같은 배열에서 서로 다른 타입의 변수를 가질 수 있다.
배열 안에서 객체, 함수, 배열 들을 가질 수 있다.
5. 배열의 속성과 메서드
배열의 진짜 강력한 점은 내장 속성과 내장 함수이다.
var x = cars.length; //length 속성은 요소의 갯수를 반환한다.
var y = cars.sort(); //sort() 메서드는 배열을 구분한다.
6. 배열을 반복하는 가장 좋은 방법은 "for문"이다.
|
<!DOCTYPE html> |
var fruits = ["apple", "banana", "melon"];
var list = "<ul>"; for(var i=0; i<fruits.length; i++){ list += "<li>" + fruits[i] + "</li>" } list += "</ul>";
document.getElementById('fruits').innerHTML = list; |
결과값
Array looping
- apple
- banana
- melon
7. 배열에 요소 추가하기 (push method / length 속성)
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");
→ var fruits = ["Banana", "Orange", "Apple", "Mango",
"Lemon"];
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";
→ var fruits = ["Banana", "Orange", "Apple", "Mango",
"Lemon"];
높은 인덱스를 가진 요소를 추가하면 정의되지 않은 hole을 생성할 수 있다.
8. 결합된 배열
자바스크립트는 명명된 인덱스를 지원하지 않는다.
자바스크립트에서 배열은 항상 숫자 인덱스를 지원한다.
명명된 인덱스를 사용하면 자바스크립트가 배열을 표준 객체도 재정의한다.
그런 다음 일부 배열 메서드와 속성은 잘못된 결과를 제공한다.
9. 배열과 객체의 다른점
배열은 숫자 인덱스를 사용한다.
객체는 명명된 인덱스를 사용한다.
배열은 숫자 인덱스를 사용하는 특별한 종류의 객체이다.
10. 자바스크립트는 복합적인 배열을
제공하지 않는다.
문자열(텍스트)로 이름지어진 요소를 사용하려면
객체를 사용한다.
숫자로 이름지어진 요소를 사용하려면 배열을 사용한다.
11. new Array()는 피해라.
내장 배열 생성자인 new Array()를 사용할 필요가 없다.
var points = new Array(40, 100); //40과 100 두 개의 배열 요소를 생성
100을 삭제한다면?
var points = new Array(40); //40과 undefined
두 개의 배열 요소를 생성
12. 배열을 인식하는 방법
배열이 변수인지 어떻게 알 수 있을까?
자바스크립트 typeof 연산자가
"object"를 반환하는 것이 문제다. (배열은 객체이기 때문에)
var fruits = ["Banana", "Orange", "Apple", "Mango"];
typeof fruits; //return object
방법 1. 이 문제를 해결하기 위해
ECMAScript5는 새로운 메소드인
Array.isArray()를 정의했다.
à Array.isArray(fruits);
방법2. 이문제를 해결하기 위해 자신만의 isArray()함수를 새로 창조할 수 있다. (사용자 함수 느낌)
function isArray(x) {
return x.constructor.toString().indexOf("Array") > -1;
}
방법3. instanceof
연산자는 생성자의 prototype
속성과 묶인 프로토타입을 가진 오브젝트인지 테스트 한다.
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits instanceof Array
//return true
= object(테스트 대상 객체)
instanceof constructor(테스트할 함수)
Array.isArray는 ifarmes을 통해 작동하기 때문에 instanceof 보다 우선순위 높게 실행된다.
'프론트엔드 > javascript' 카테고리의 다른 글
| 자바스크립트 옵셔널 체이닝 (Optional chanining) (0) | 2022.07.22 |
|---|---|
| 자바스크립트 런타임과 엔진 그리고 동작 원리 (0) | 2022.07.18 |
| AJAX (0) | 2017.11.28 |
| [Array 3/3] Array Methods (0) | 2017.11.06 |
| [Array 2/3] Array Properties (0) | 2017.10.31 |
