배열
쇼핑 카트, 점수 목록, 단체 채팅의 모든 사람의 이름을 저장해야 한다면 어떻게 할까요? 하나의 변수는 하나의 값을 보유하므로 이런 식으로 목록을 저장하면 price1, price2, price3 같은 별도의 변수들이 쌓이게 되고, 이들을 반복 처리하거나 개수를 세는 깔끔한 방법이 없습니다. 배열이 그 해결책입니다. 배열은 하나의 이름 아래에 순서대로 정렬된 값의 목록을 보유하며, 자신의 길이를 알고 있으므로 항목을 추가하고, 모든 항목을 읽으며, 몇 줄의 코드로 전체 목록을 순회할 수 있습니다.
배열 만들고 읽기
**배열**은 순서대로 정렬된 값의 목록입니다. 대괄호로 쓰며, 값들을 쉼표로 구분합니다:
const prices = [4, 9, 2, 7];이것은 하나의 변수 prices가 네 개의 숫자를 담고 있습니다. 하나의 값을 읽으려면 인덱스라고 부르는 위치를 대괄호로 사용합니다. 처음 배울 때 대부분의 사람들을 헷갈리게 하는 점: 세기는 1이 아닌 0부터 시작합니다.
const names = ["서울", "부산", "대구"];
console.log(names[0]); // 서울
console.log(names[1]); // 부산배열에 몇 개의 항목이 있는지 알아보려면 .length를 사용하세요:
console.log(names.length); // 3세기가 0부터 시작하므로, 마지막 항목은 length - 1이 아닌 length에 있습니다. 따라서 여기서 마지막 이름은 names[2]이고, names[3]은 범위를 벗어납니다.
names[0]으로 위치로 항목을 읽고, 0부터 세기 시작하므로 첫 번째 항목은 [1]이 아닌 [0]입니다. 그 0 때문에 일주일 동안 헷갈렸으므로 목록이 하나 밀려 있을 때마다 확인하세요. .length로 항목을 세고, 마지막 항목은 length - 1에 있습니다. 배열 변경하기
배열은 변경되도록 만들어졌습니다. 가장 자주 사용하는 두 개는 끝에서 추가하거나 제거합니다: push는 항목을 추가하고, pop은 마지막 항목을 제거합니다.
const cart = ["apples", "bread"];
cart.push("milk");
console.log(cart); // ["apples", "bread", "milk"]
cart.pop();
console.log(cart); // ["apples", "bread"]일치하는 쌍은 시작에서 작동합니다: unshift는 맨 앞에 추가하고, shift는 첫 번째 항목을 제거합니다.
cart.unshift("eggs");
console.log(cart); // ["eggs", "apples", "bread"]인덱스에 할당하여 항목을 직접 바꿀 수도 있습니다:
cart[0] = "bananas";
console.log(cart); // ["bananas", "apples", "bread"]무언가를 찾으려면, includes는 예 또는 아니오를 알려주고, indexOf는 그것이 어디에 있는지(또는 없으면 -1) 알려줍니다:
console.log(cart.includes("apples")); // true
console.log(cart.indexOf("bread")); // 2초기에 알 가치가 있는 한 가지: const 배열은 여전히 변경될 수 있습니다. const는 전체 새로운 배열로 이름 cart를 재할당하는 것을 막지만, 그것이 가리키는 목록은 여전히 push, pop, 그리고 인덱스 할당을 위해 열려 있습니다.
push와 pop은 끝에서 추가하고 제거합니다. unshift와 shift는 시작에서 동일하게 합니다. cart[0] = "bananas"처럼 인덱스에 할당하여 항목을 교체하고, includes 또는 indexOf를 사용하여 하나를 찾으세요. 나를 놀라게 한 부분: const 배열은 여전히 변경될 수 있습니다. const는 전체 배열을 새것으로 바꾸는 것만 막기 때문입니다. 배열을 반복하기
일단 목록이 있으면, 보통 모든 항목으로 무언가를 하고 싶습니다. 배열을 읽는 가장 깔끔한 방법은 for...of입니다. 이는 한 번에 하나의 항목을 제공합니다:
const prices = [4, 9, 2, 7];
for (const price of prices) {
console.log(price);
}
// 4
// 9
// 2
// 7인덱스나 카운터를 관리하지 않습니다. for...of는 각 값을 순서대로 제공하고, 당신이 원하는 대로 이름을 짓습니다 (price). 이미 루프를 만났다면, 이것이 배열에 가장 친화적인 것입니다.
또한 forEach가 있으므로, 각 항목마다 한 번 작은 함수를 실행합니다:
const names = ["서울", "부산", "대구"];
names.forEach(function (name) {
console.log("안녕하세요 " + name);
});둘 다 전체 배열을 순회합니다. 깔끔하게 읽으려면 for...of를 선택하세요. 배열을 변환할 때 배우게 될 forEach와 그 친척들을 다시 만날 것입니다.
for...of는 배열을 깔끔하게 순회하는 방법입니다: 각 항목을 순서대로 제공하고 인덱스에는 절대 닿지 않습니다. forEach는 항목마다 작은 함수를 한 번 실행하는데, 이것도 편합니다. 둘 다 전체 목록을 거치므로, 직진하며 읽으려면 for...of를 선택하세요. 배열을 변환할 때 더 많은 배열 도구를 보게 될 것입니다. 배열은 참조로 보유됩니다
여기 사람들을 놀라게 하는 행동이 있으므로, 초기에 볼 가치가 있습니다. 배열 변수를 다른 이름에 복사하면, 두 번째 배열을 얻지 못합니다. 두 이름이 같은 것을 가리킵니다.
const original = [1, 2, 3];
const copy = original;
copy.push(4);
console.log(original); // [1, 2, 3, 4]copy로 push하면 original이 변경되었습니다. 왜냐하면 거기에는 항상 하나의 배열만 있었기 때문입니다. =는 두 번째 이름에 같은 목록을 주었지, 그것의 신선한 사본이 아닙니다. 이것이 사람들이 배열이 참조로 보유된다고 말하는 의미입니다: 변수는 목록의 포인터를 보유하지, 목록 자체를 보유하지 않습니다.
실제의 별도 사본을 얻으려면, ...를 사용하여 배열을 새로운 배열로 펼쳐 놓으세요:
const original = [1, 2, 3];
const copy = [...original];
copy.push(4);
console.log(original); // [1, 2, 3], 건드리지 않음=로 배열 변수를 복사하면 두 번째 배열을 만들지 못합니다. 두 이름이 같은 것을 가리키므로, 어느 쪽을 통한 변경이든 둘 다에 나타납니다. 이것이 나를 한 번 이상 물렸습니다. 실제 별도 사본을 원할 때, [...original]로 펼쳐 놓으세요. 당신이 자신의 것을 변경할 수 있는 신선한 배열을 만듭니다. 배열이 여기서 어디로 가는가
배열은 하나의 이름 아래의 순서대로 정렬된 목록을 제공합니다: []로 만들고, 0부터 인덱스로 읽고, push와 pop으로 변경하고, for...of로 순회합니다. 이 장을 넘어 전달할 하나의 아이디어는 배열이 참조로 보유되므로, 변수를 복사하면 목록을 중복하는 대신 공유한다는 것입니다.
자연스러운 다음 단계는 하나의 배열을 다른 것으로 변환하는 것입니다. 목록을 필터링하고, 모든 항목을 변환하고, 수동으로 루프를 작성하지 않고 모두 더합니다. 그것이 배열 메서드입니다. 위치 대신 이름으로 값을 찾아야 할 때, 객체가 그 구조입니다.