세 개의 유용한 점 - 나머지 점과 JavaScript의 스프레드

나머지 매개 변수

나머지 구문을 사용하면 무한한 수의 인수를 배열로 표현할 수 있습니다. 전달된 모든 인수를 합산하는 함수를 살펴보겠습니다.

const sum = (...args) => args.reduce((prev, current) => prev + current);

console.log(sum(1, 2)); // 3
console.log(sum(1, 2, 3)); // 6

스프레드 구문

스프레드 연산자를 사용하면 이터러블 객체를 개별 요소로 확장할 수 있습니다. 이 기능은 나머지 매개변수로 달성한 것과는 반대입니다. 배열, 객체, 세트, 맵 등과 같은 모든 이터러블에 적용할 수 있습니다.

const sum = (x, y, z) => x + y + z;
const numbers = [1, 2, 3];

console.log(sum(...numbers)); // 6

실제 사용 사례의 세 가지 점

배열 복사하기

스프레드 구문은 배열을 복사하는 동안 효과적으로 한 단계 더 깊숙이 이동합니다. 한 수준은 첫 번째 수준의 참조가 복사된다는 의미입니다.

const array0 = [1, [2, 3]];
const array1 = [...array0];

console.log(array1); // [1, [2, 3]]

고유한 요소 배열 만들기

고유한 요소만 저장하는 집합을 생성하고 이를 다시 배열로 변환합니다.

const array = [1, 1, 2, 3];
const uniqueElements = [...new Set(array)];

console.log(uniqueElements); // [1, 2, 3]

배열 연결

const array0 = [1, 2];
const array1 = [3, 4];
const concated = [...array0, ...array1];

console.log(concated); // [1, 2, 3, 4]

배열 조각화

const [firstElement, ...newArray] = [1, 2, 3, 4];

console.log(firstElement); // 1
console.log(newArray); // [2, 3, 4]

또한 다음을 제거할 수도 있습니다. n 쉼표가 있는 첫 번째 요소.

const [, , , ...newArray] = [1, 2, 3, 4];

console.log(newArray); // [4]

다른 배열의 시작 부분에 배열 삽입하기

const array0 = [4, 5, 6];
const array1 = [1, 2, 3];
const newArray = [...array1, ...array0];

console.log(newArray); // [ 1, 2, 3, 4, 5, 6 ]입니다.

0에서 다음과 같은 숫자 배열 생성 n

const array = [...Array(10)].map((_, i) => i);

console.log(array); // [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 ]입니다.

객체 파괴하기

const { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };

console.log(x); // 1
console.log(y); // 2
console.log(z); // { a: 3, b: 4 }

객체의 복사본 만들기

let person = {
  이름: 'John',
  age: 25,
  wallet: {
    sum: 500,
    통화: 'USD'
  }
};
let personCopy = { ...person };

console.log(personCopy);
// {
// name: 'John',
// age: 25,
// wallet: {
// 합계: 500,
// 통화: 'USD'
// }
// }

생성되는 객체의 복사본은 원본 객체의 모든 속성을 포함하지만 프로토타입 정보는 포함하지 않는 새 객체라는 점에 유의하세요.

person.age = 20;

console.log(person.age); // 20
console.log(personCopy.age); // 25

스프레드 구문은 객체의 '얕은' 복사본을 생성하므로 '지갑' 속성은 원본 하위 객체에 대한 참조로만 복사된다는 점에 유의하세요. 딥 복제의 경우 객체의 복잡성에 따라 JSON 문자열화/파싱 접근 방식 또는 Lodash에서 제공하는 'cloneDeep' 메서드를 사용할 수 있습니다. 경우에 따라서는 이 메서드도 유용할 수 있습니다:

let personCopy = { ...person, wallet = {...person.wallet}}; 

개체에 조건부로 속성 추가

단락 평가와 함께 스프레드 연산자를 사용하여 생성하는 새 객체에 조건부로 속성을 추가할 수 있습니다.

const colors = {
  red: '#ff0000',
  녹색: '#00ff00',
  blue: '#0000ff'
};
const black = {
  검정: '#000000'
};

let extraBlack = false;
let conditionalMerge = {
  ...colors,
  ...(extraBlack ? black : {})
};

console.log(conditionalMerge);
// {
// red: '#ff0000',
// 녹색: '#00ff00',
// blue: '#0000ff'
// }

extraBlack = true;
conditionalMerge = {
  ...colors,
  ...(extraBlack ? black : {})
};

console.log(conditionalMerge);
// {
// red: '#ff0000',
// 녹색: '#00ff00',
// blue: '#0000ff'
// 검정: '#000000'
// }

문자열을 문자로 분할하기

이는 빈 문자열을 매개변수로 사용하여 분할 메서드를 호출하는 것과 유사합니다.

const split = [...'쿼티'];
console.log(split); // [ 'q', 'w', 'e', 'r', 't', 'y' ]입니다.

자세히 읽어보세요:

스타트업을 위한 소프트웨어 제품 개발의 3가지 공통 과제

Java를 위한 최고의 프로젝트 유형

잘못된 코딩 관행으로 프로젝트를 죽이지 않는 방법은 무엇인가요?