1. 배열 요소 추가와 삭제
- 배열 요소 추가
1) 새 인덱스에 값을 할당
2) push 메서드: 마지막에 값을 추가
3) unshift 메서드 : 맨 앞에 값을 삽입하고 기존 요소를 뒤로 shift한다.
- 배열 요소 삭제
1) pop 메서드 : 마지막 값을 배열에서 삭제
2) shift 메서드 : 맨 앞에 값을 삭제하고 배열에 남아있는 요소를 한 칸씩 앞으로 당긴다.
3) delete 메서드 : 인덱스가 위치한 값을 삭제되고 undefined값이 채워진다.(배열의 길이는 변하지 않는다)
// 인덱스를 통해 값을 할당
let a = []; // 빈 배열로 시작
a[0] = "Zero"; // 요소를 추가
a[1] = "one"; // 요소를 추가
// push 메서드
let a = []; // 빈 배열로 시작
a.push("zero"); // 마지막에 값을 추가 a = ["zero"]
a.push("one","two") // 값을 두개 추가 a= ["zero", "one", "two"]
// delete 연산자
delete a[2] // a 인덱스 2에 요소가 없다.
2 in a // --> false: 배열 인덱스 2는 정의되지 않는다.
a.length // --> 3: delete는 배열 길이에 영향을 주지 않는다.
2. 배열 순회
- for/of 루프
1) 오름차순으로 요소를 반환, 존재하지 않는 배열은 undefined로 반환
2) 각 요소의 인덱스가 필요하면 entries() 사용
- forEach 루프
1) delete로 삭제된 배열 요소는 값을 반환하지 않지만
undefined를 새 배열에 할당할 경우는 반환한다.
2) 배열을 순서대로 순회하며 배열 인덱스를 함수의 두 번째 인자로 전달
- for 루프
1) 배열의 length 함수를 통해 for 루프 사용
2) 성긴배열(중간 요소가 비어있는 배열이)이 존재하는 경우 별도 undefined를
필터링하는 코딩 필요
// for/of 루프
let letters = [..."Hello world"];
let string = "";
for(let letter of letters) {
string += letter;
}
string // --> "Hello world"
// entries() 이용
let everyother = "";
for(let [index, letter] of letters.entries()){
if(index % 2 === 0) everyother += letter; // 짝수 번째 인덱스의 글자
}
everyother // => "Hlowrd"
// forEach 루프
let uppercase = "";
letters.forEach(letter => {
uppercase += letter.toUpperCase();
})
uppercase // --> "HELLO WORLD"
// for 루프
let vowels = "";
for(let i=0; i<letters.length; i++) {
let letter = letters[i];
if(/[aeiou]/.test(letter)) {
vowels += letter;
}
}
vowels // --> "eoo"
3. 다차원 배열
- 자바스크립트는 다차원 배열을 지원하지 않지만 배열의 배열을 만들어 구현 가능
// 다차원 배열 생성
let table = new Array(10);
for(let i=0; i<table.length; i++) {
table[i] = new Array(10);
}
// 배열의 초기화
for(let row=0; row<table.length; row++){
for(let col=0; col<table[row].length; col++) {
table[row][col] = row*col;
}
}
4. 배열 비슷한 객체
- 배열의 특징
1) 배열에 새 요소를 추가할 때마다 length 프로퍼티가 자동으로 업데이트
2) length를 더 작은 값으로 변경하려면 배열 요소를 그에 맞게 버린다.
3) 배열에 Array.prototype에서 유용한 메서드를 상속한다.
4) Array.isArray()를 배열에 받으면 true 반환
- 객체를 통해서 배열 비슷하게 구현 가능
1) 숫자인 lenght 프로퍼티 입력하고, 음이 아닌 정수 프로퍼티를 추가
2) Array.from()을 사용하면 배열 비슷한 객체를 배열로 만들수 있다.
let a = {} //일반적인 빈 객체를 생성
// 배열 비슷해지도록 프로퍼티 추가
let i = 0;
while(i < 10){
a[i] = i * i;
i++;
}
a.length = i;
// 실제 배열인것 처럼 순회
let total = 0;
for(let j=0; j < a.length; j++){
total += a[j];
}
// Array.from을 통해 배열과 비슷한객체를 배열로 만들수 있다.
// 중요한건 객체에 length 프로퍼티를 꼭 추가해야한다.
a["length"] = 10
let array = Array.from(a) // 객체를 배열로 변환
// 배열처럼 쓸수 있는지 테스트하는 함수
// obj가 배열 비슷한 객체인지 판단, 문자열과 함수에도 숫자인
// length 프로퍼티가 있지만 typeof 테스트에서 걸러진다.
// 클라이언트 사이드 자바스크립 DOM Text 노드에도
// length 프로퍼티가 있으므로 obj.nodeType !== 3 테스트를 통해 거른다.
function isArrayLike(obj) {
if (obj && //obj가 null, undefined 등이 아니고
typeof obj == "object" && // 객체이며
Number.isFinite(obj.length) && // obj.length가 유한한 숫자이고
obj.length >= 0 && // 음수가 아니며
Number.isInteger(obj.length) && // 정수이고
obj.length < 4294967295) { // 2^32 - 1 미만이면
return true // obj는 배열 비슷한 객체
} else {
return false;
}
}