7장 배열
배열에 for/of 루프를 적용할 때,
각 요소의 인덱스가 필요하다면 다음과 같이 entries() 메서드와 분해 할당을 이용하면 된다.
let letters = [..."Hello World"];
let everyother = "";
for(let [index, letter] of letters.entries()) {
if (index % 2 === 0) everyother += letter; // 짝수 번째 인덱스의 글자
}
everyother //=> "HloWrd"
forEach() 활용
let letters = [..."Hello World"];
let uppercase = "";
letters.forEach(letter=>{
uppercase += letter.toUpperCase();
});
uppercase // => "HELLO WORLD"
// map 메서드와의 비교
let letters = [..."Hello World"];
let uppercase = letters.map((el) => el.toUpperCase()).join('');
uppercase // => "HELLO WORLD"
배열 메서드
1. 이터레이터 메서드: 배열의 요소 순회. 배열의 각 요소에 대해 함수를 호출
다음 하위 절에서 설명하는 이터레이터 메서드 대부분은 선택 사항으로 두 번째 인자를 받습니다.
두 번째 인자를 지정했다면 첫 번째 인자인 함수는 자신이 그 두 번째 인자의 메서드인 것처럼 호출됩니다.
즉, 두 번째 인자가 함수의 this가 됩니다.
첫 번째 인자는 함수. 두 번째 인자는 인덱스.
인덱스를 지정했다면 함수는 자신이 인덱스의 메서드인 것처럼 호출된다.
즉, 인덱스가 함수의 this가 된다.
2. 스택, 큐 메서드(push, pop, unshift, shift): 배열의 앞이나 뒤에 요소 추가
3. 하위 배열 메서드(slice, splice): 큰 배열을 추출, 삭제, 삽입, 충당, 복사
4. 검색, 정렬 메서드
forEach()
let data = [1,2,3,4,5], sum = 0;
data.forEach(value => sum += value); // sum === 15
data.forEach(function(v, i, a) { a[i] = v + 1 }); // data === [2,3,4,5,6]
map()
map과 forEach는 비슷해보이지만, map은 새 배열을 반환하며 기존 배열은 수정하지 않는다.
reduceRight()
reduce랑 같은데 배열의 맨 오른쪽부터 왼쪽 방향으로 동작
flat()
[1, [2, 3]].flat() // => [1, 2, 3]
[1, [2, [3]]].flat() // => [1, 2, [3]]
let a = [1, [2, [3, [4]]]];
a.flat(1) // => [1, 2, [3, [4]]]
a.flat(2) // => [1, 2, 3, [4]]
a.flat(3) // => [1, 2, 3, 4]
a.flat(4) // => [1, 2, 3, 4]
splice()
slice()는 원래 배열을 수정하지 않음. 지정된 배열의 하위 배열을 반환
splice()는 원래 배열을 수정
let a = [1,2,3,4,5,6,7,8];
a.splice(4) // => [5,6,7,8]; a는 [1,2,3,4]
a.splice(1,2) // => [2,3]; a는 [1,4]
a.splice(1,1) // => [4]; a는 [1]
let b = [1,2,3,4,5];
b.splice(2,0,"l","m") // => []; a는 [1,2,"l","m",3,4,5]
b.splice(2,2,[1,2],3) // => ["l","m"]; a는 [1,2,[1,2],3,3,4,5]
indexOf(): 괄호 안에 든 요소가 있다면 첫 번째로 발견된 인덱스를 반환
lastIndexOf(): 괄호 안에 든 요소가 여러 개일 때 마지막 요소의 인덱스를 반환
includes(): 있으면 true, 없으면 false
위 두개와 includes의 차이는 NaN을 배열의 요소로 생각할 수 있느냐 없느냐의 차이다.
let a = [1, true, 3, NaN];
a.includes(true) // => true
a.includes(2) // => true
a.includes(NaN) // => true
a.indexOf(NaN) // => -1; indexOf는 NaN을 찾지 못한다.
sort()
let a = ["ant", "Bug", "cat", "Dog"];
a.sort(); // a == ["Bug", "Dog", "ant", "cat"]; 대소문자를 구별한 정렬
a.sort(function(s,t) {
let a = s.toLowerCase();
let b = t.toLowerCase();
if (a < b) return -1;
if (a > b) return 1;
return 0;
}); // a == ["ant", "Bug", "cat", "Dog"]; 대소문자를 구분하지 않고 정렬
join()
let a= [1, 2, 3];
a.join() // => "1,2,3"
a.join(" ") // => "1 2 3"
a.join("") // => "123"
let b = new Array(10); // 길이가 10이지만 요소는 없는 배열
b.join("-") // => "---------- ": 하이픈 9개
배열과 비슷한 객체
객체에는 없는 배열의 특징
- 배열에 새 요소를 추가할 때마다 length 프로퍼티가 자동으로 업데이트된다.
- length를 더 작은 값으로 변경하면 배열 요소를 그에 맞게 버린다.
- 배열은 Array.prototype에서 유용한 메서드를 상속한다.
- Array.isArray()는 배열을 받으면 true를 반환한다.
배열과 비슷한 객체를 검증하는 함수
// o가 배열 비슷한 객체인지 판단합니다.
// 문자열과 함수에도 숫자인 length 프로퍼티가 있지만
// typeof 테스트에서 걸러집니다. 클라이언트 사이드 자바스크립트의 DOM Text 노드에도
// length 프로퍼티가 있으므로 o.nodeType !== 3 테스트를 통해 거릅니다.
function isArrayLike(o) {
if (o && // o가 null, undefined 등이 아니다.
typeof o === "object" && // type이 object다
Number.isFinite(o.length) && // o.length가 유한한 숫자다.
o.length >= 0 && // 음이 아니다.
Number.islnteger(o.length) && // 정수다.
o.length < 4294967295) { // 2^32 - 1 미만이다.
return true; // 다 true면 o는 배열 비슷한 객체다.
} else {
return false;
}
}자바스크립트의 배열
희소 배열(= 성긴 배열)
문자 배열
다차원 배열
유사 배열 객체(= 배열 비슷한 객체)
이터러블, 이터레이터
배열 생성하기
배열 조작하기