배열이란 무엇입니까?

배열은 순서가 지정된 요소 컬렉션을 저장하는 데이터 구조입니다. JavaScript에서 배열은 특수한 유형의 객체로 분류되며 숫자, 문자열, 객체 또는 기타 배열을 저장할 수 있습니다. 배열의 요소는 대괄호 [ ]로 묶여 있으며 0부터 시작하는 인덱스를 사용합니다. 0부터 시작하는 인덱스는 배열의 첫 번째 요소의 인덱스가 0이고, 두 번째 요소의 인덱스가 1이라는 것을 의미합니다.

const names = ["David", "Hannah", "William"];
console.log(names[0]); // returns the first element
// returns "David"
console.log(names[1]); // returns the second element
// returns "Hannah"
console.log(names[2]); // returns the third element
// returns "William"

배열을 어떻게 수정하거나 조작할 수 있나요?

배열의 요소 인덱스

빈 인덱스에 값을 할당하여 새 요소를 배열에 추가할 수 있습니다.

names[3] = "Eric";
console.log(names);
// returns ["David", "Hannah", "William", "Eric"]

배열의 요소는 기존 인덱스에 새 값을 다시 할당하여 수정할 수 있습니다.

names[1] = "Juniper";
console.log(names);
// returns ["David", "Juniper", "William", "Eric"]

배열 방법

'push', 'pop', 'unshift', 'shift', 'slice', 'splice'와 같은 배열 방법을 사용하여 배열을 수정하거나 조작할 수도 있습니다.

'푸시()'

'push' 메소드는 하나 이상의 요소를 인수로 사용하고 해당 요소를 배열 끝에 추가한 다음 수정된 배열의 길이를 반환합니다.

names.push("Bob");
// returns 5 
console.log(names);
// returns ["David", "Juniper", "William", "Eric", "Bob"]

'팝()'

'pop' 메서드는 인수를 사용하지 않고 배열의 마지막 요소를 제거한 후 제거된 요소를 반환합니다.

names.pop();
// returns "Bob"
console.log(names);
// returns ["David", "Juniper", "William", "Eric"]

'변환 해제()'

'unshift' 메소드는 하나 이상의 요소를 인수로 사용하고 해당 요소를 배열의 시작 부분에 추가한 다음 수정된 배열의 길이를 반환합니다.

names.unshift("Jack", "Jane");
// returns 6
console.log(names);
// returns ["Jack", "Jane", "David", "Juniper", "William", "Eric"]

'옮기다()'

'shift' 메소드는 인수를 사용하지 않고 배열의 첫 번째 요소를 제거한 후 제거된 요소를 반환합니다.

names.shift();
// returns "Jack"
console.log(names);
// returns ["Jane", "David", "Juniper", "William", "Eric"]

'일부분()'

'slice' 메소드는 두 개의 선택적 인수(startIndex, endIndex)를 사용하고 startIndex부터 원래 배열의 endIndex까지의 요소가 포함된 새 배열을 반환합니다(포함하지 않음).
startIndex를 생략하면 0이 사용됩니다.
endIndex를 생략하면 배열 길이가 사용됩니다. 음수 인덱스 번호를 사용하여 배열 끝부터 다시 계산할 수 있습니다.

names.slice(1, 3);
// returns ["David", "Juniper"]
names.slice(3);
// returns ["Juniper", "William", "Eric"]
names.slice(-2, 1);
// returns ["William", "Eric", "Jane"]
names.slice();
// returns ["Jane", "David", "Juniper", "William", "Eric"]

'접착()'

'splice' 메소드는 하나 이상의 인수(startIndex, deleteCount, element1, element2, ...)를 사용하고 제거된 모든 요소가 포함된 새 배열을 반환합니다. startIndex에서 deleteCount만큼 요소가 삭제되고 startIndex부터 시작하는 배열에 다음 요소 인수가 추가됩니다. deleteCount를 생략하면 startIndex부터 배열 끝까지의 모든 요소가 삭제됩니다. 요소 인수를 생략하면 요소가 추가되지 않습니다.

names.splice(0, 1, "Joe", "Alex"); 
// returns ["Jane"]
console.log(names);
// returns ["Joe", "Alex", "David", "Juniper", "William", "Eric"]
names.splice(1, 4);
// returns ["Alex", "David", "Juniper", "William"]
console.log(names);
// returns ["Joe", "Eric"]
names.splice(0, 0, "Bob", "Frank", "Maria")
// returns []
console.log(names);
// returns ["Joe", "Bob", "Frank", "Maria", "Eric"]

'push', 'pop', 'unshift', 'shift 및 'splice'는 원래 배열을 수정하므로 파괴적인 방법으로 분류됩니다. '슬라이스' 방식은 원본 배열을 그대로 유지하므로 비파괴적 방식으로 분류됩니다.

스프레드 연산자 '...'

배열에 요소를 추가하거나 비파괴적으로 복사하려면 스프레드 연산자를 사용할 수 있습니다. 확산 연산자는 배열을 해당 요소로 확산시킵니다.

const array = [1, 2, 3];
const newArray = [0, ...array, 4, 5];
// ...array spreads [1, 2, 3] into 1, 2, 3
console.log(newArray);
// returns [1, 2, 3, 4, 5]

확산 연산자가 없으면 원래 배열이 새 배열 내에 중첩됩니다.

const array = [1, 2, 3];
const newArray = [0, array, 4, 5];
console.log(newArray);
// returns [0, [1, 2, 3], 4, 5];

반복 배열 방법

반복 배열 메서드는 배열의 각 요소에 대해 제공된 함수를 호출하고 값 또는 새 배열을 반환합니다. 제공된 함수는 현재 요소, 현재 요소의 인덱스, 메서드가 호출된 원래 배열의 세 가지 인수로 호출됩니다.

function callbackFunction (currentElement, currentIndex, originalArray) {
// function body
}

반복 배열 방법의 몇 가지 예로는 'find', 'filter', 'map' 및 'reduce'가 있습니다.

'찾다()'

'find' 메소드는 함수를 인수로 사용하고 함수 조건을 만족하는 배열의 첫 번째 요소를 반환합니다.

const numbers = [5, 10, 15, 20, 25];
numbers.find(number => number > 15);
// returns 20;

'필터()'

'filter' 메소드는 'find' 메소드와 유사하지만 대신 주어진 함수의 조건을 만족하는 모든 요소의 배열을 반환합니다.

const numbers = [5, 10, 15, 20, 25];
numbers.filter(number => number > 15);
// returns [20, 25];

'지도()'

'map' 메소드는 원래 배열의 각 요소에 대해 함수를 호출한 결과로 새 배열을 반환합니다.

const numbers = [1, 2, 3, 4, 5];
numbers.map(number => number * number);
// returns [1, 4, 9, 16, 25]

'줄이다()'

'reduce' 메소드는 함수와 초기값을 인수로 사용합니다. 제공된 함수는 누산기, 현재 값, 현재 인덱스 및 원본 배열의 네 가지 인수를 받습니다. 제공된 초기 값은 배열의 첫 번째 요소에 대한 누산기 값입니다. 각 요소에 대한 함수의 결과는 배열의 다음 요소에 대한 누산기 값으로 사용됩니다. 초기값이 제공되지 않으면 누산기는 배열의 첫 번째 요소로 설정되고 두 번째 요소부터 콜백 함수가 호출됩니다.

const numbers = [1, 2, 3, 4, 5]
numbers.reduce(((acc, number) => acc   number), 0);
// returns 15