JavaScript의 배열에 요소 추가

1. 배열의.length속성을 사용하여 JavaScript에서 배열의 요소 추가
2. push()메서드를 사용하여 JavaScript에서 배열의 요소 추가
3. unshift()메서드를 사용하여 배열의 요소 추가
4. splice()메서드를 사용하여 배열의 요소 추가
5. concat()메서드를 사용하여 배열의 요소 추가
6. spread구문을 사용하여 배열의 요소 추가

이 기사에서는 JavaScript의 배열에 요소를 추가하는 방법을 배웁니다.

JavaScript에서 배열에 요소를 추가하는 방법에는 여러 가지가 있습니다. 단일 요소, ​​여러 요소를 추가 할 수 있으며 주어진 배열에 전체 배열을 추가 할 수도 있습니다. 변경 여부, 속도 및 효율성 요구 사항, 코드의 가독성에 따라 방법을 사용할 수 있습니다.

배열의.length속성을 사용하여 JavaScript에서 배열의 요소 추가

배열의 전체 길이를 사용하여 배열의 마지막 빈 인덱스를 얻고 해당 인덱스에 요소를 삽입하는 고전적인 접근 방식입니다. 이 방법은 사용하기 가장 쉽고 뛰어난 효율성을 제공합니다. 한 번에 하나의 요소 만 추가 할 수 있습니다. 원래 배열을 변경하기 때문에 돌연변이 방법입니다.

let arr = [0, 1, 2];
arr[arr.length] = 3;
console.log(arr);

출력:

[0, 1, 2, 3]

위 코드에서arr.length를3으로 사용하여 배열의 마지막 인덱스를 가져온 다음 해당 인덱스에 요소를 추가합니다.

push()메서드를 사용하여 JavaScript에서 배열의 요소 추가

push()메소드는 배열 끝에 요소를 추가하는 데 사용됩니다. 단일 요소, ​​여러 요소 또는 배열을 추가 할 수 있습니다. 가장 간단하고 가장 빠른 옵션 중 하나이며, 경우에 따라 대형 배열에서Array.length를 사용하는 위의 방법을 능가합니다. push()에 의해 수행되는 작업은.pop()메서드로 되돌릴 수 있습니다. 여러 요소가 함께 전달되면push()연산자에 의해 순서가 유지됩니다. 이 방법은 또한 배열을 변경하므로 변경됩니다.

const arr = [1, 2, 3];
const arr2 = [8, 9, 10];
arr.push(4);        // single item
arr.push(5, 6, 7);  // multiple items
arr.push(...arr2);  // spread operator
console.log(arr);

출력:

[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

위의 코드에서 우리는 모든3경우를 보여주었습니다 : 단일 요소, ​​다중 요소, 심지어는 스프레드 구문을 사용하여 전체 배열을 추가합니다. 모든 요소는 배열 끝에 추가됩니다.

unshift()메서드를 사용하여 배열의 요소 추가

unshift()메소드는 배열의 시작 부분에 요소를 추가하는 데 도움이됩니다. 배열의 새 길이를 반환합니다. 속성에서 배열과 유사한 객체에 호출하거나 적용 할 수 있습니다. 여러 요소가 함께 전달되면unshift()연산자에 의해 순서가 유지됩니다. 이 방법은 또한 배열을 변경하므로 변경됩니다.

const arr = [1, 2, 3];
const arr2 = [8, 9, 10];
arr.unshift(4);        // single item
arr.unshift(5, 6, 7);  // multiple items
arr.unshift(...arr2)   // spread operator
console.log(arr);

출력:

[8, 9, 10, 5, 6, 7, 4, 1, 2, 3]

위의 코드에서 우리는 단일 요소, ​​다중 요소, 심지어는 스프레드 구문을 사용하여 전체 배열을 추가하는 세 가지 경우를 모두 보여주었습니다. 이 작업이push()와 어떻게 다른지 확인하십시오. 모든 요소가 배열의 시작 부분에 추가됩니다.

splice()메서드를 사용하여 배열의 요소 추가

splice()메소드는 요소를 추가 / 제거하여 배열의 내용을 수정할 수 있습니다. 다음3인수를 사용합니다.

1. index: 요소를 추가 / 제거 할 위치를 지정하는 정수 값. 음수 인덱스를 사용하여 배열 뒤에서 인덱스를 지정할 수도 있습니다.
2. howmany: 선택적 매개 변수입니다. 배열에서 제거 할 항목 수를 지정합니다. 0으로 설정되면 항목이 제거되지 않습니다.
3. item1, item2, ... ,itemx: 배열에 추가 할 항목.

이 방법은 또한 배열을 변경하므로 변경됩니다.

const arr = [1, 2, 3, 4, 5];
arr.splice(4, 3, 7, 8, 9);
console.log(arr);

출력:

[1, 2, 3, 4, 7, 8, 9]

위 코드에서 인덱스4를 선택하고 해당 인덱스에3요소7,8,9를 추가했습니다.

concat()메서드를 사용하여 배열의 요소 추가

concat()메소드는 배열을 입력으로 취하고 함께 연결합니다. 즉, 하나의 배열을 취하고 나머지를 끝에 추가합니다. 그러나이 연산자는 원래 배열을 수정하지 않고 결합 된 결과를 포함하는 완전히 새로운 배열을 반환합니다. 두 개 이상의 배열을 가져 와서 함께 연결할 수 있습니다. 이 메서드는 주어진 배열을 수정하지 않기 때문에 변경되지 않습니다.

const arr = [1, 2, 3];
const arr2 = [8, 9, 10];
const arr3 = arr.concat(arr2);
console.log(arr3);

출력:

[1, 2, 3, 8, 9, 10]

위의 코드에서arr및arr2라는 두 개의 배열을 가져 와서concat()함수를 호출하여 새 배열 인arr3을 형성합니다.

spread구문을 사용하여 배열의 요소 추가

spread 구문을 사용하여 주어진 배열에 완전한 배열을 추가 할 수 있습니다. 배열 요소를 새 배열로 확산하기 때문에 변경되지 않는 방법입니다. concat()연산과 매우 유사합니다. 복사본을 만들거나 두 개의 분리 된 배열을 병합하는 데 도움이됩니다. 확산 구문을 신중하게 사용하는 것이 중요합니다. 구문const arr = [arr1, arr2];를 사용하는 경우 두 개의 하위 배열을 포함하는 중첩 배열을 얻는 반면const arr = [arr1, arr2];를 사용하면 두 배열의 요소를 함께 연결합니다.

const arr = [1, 2, 3];
const arr2 = [8, 9, 10];
const arr3 = [...arr, ...arr2];

출력:

[1, 2, 3, 8, 9, 10]

위의 코드에서 우리는 확산 연산자를 사용하여arr및arr2두 개의 배열을 새 배열arr3에 추가했습니다.

위의 모든 방법은 스프레드 구문을 제외한 모든 주요 브라우저에서 지원됩니다. Internet Explorer는 스프레드 구문을 지원하지 않습니다.