JavaScript 스프레드 연산자

JavaScript 스프레드 연산자(…)

• JavaScript의 스프레드 연산자는 배열을 개별 요소로 확장(압축해제)합니다.

*배열과 객체 모두에 사용되며, 배열에서는 다음과 같은 경우에 사용됩니다.

1. 어레이 구축
2. 함수에 인수 전달

1- 어레이 구축:

• 여기에서는 이를 사용하여 배열 요소를 확장하고 다른 요소(예: 배열)에서 사용할 수 있습니다.

const arr = [5, 6, 7];

// without the spread operator ?

const badArr = [1, 2, 3, 4, arr[0], arr[1], arr[2]];
console.log(badArr); // [1, 2, 3, 4, 5, 6, 7]

// with the spread operator ?

const goodArr = [1, 2, 3, 4, ...arr];
console.log(goodArr); // [1, 2, 3, 4, 5, 6, 7]

• 보시다시피 스프레드 연산자를 사용하면 작업이 훨씬 쉬워집니다.

• 확장된 배열의 개별 요소를 다시 원할 경우 스프레드 연산자를 사용하세요.
  

console.log(...goodArr); // 1 2 3 4 5 6 7

//the line above is just like writing this code:

console.log(1, 2, 3, 4, 5, 6, 7); // 1 2 3 4 5 6 7

• 더 자세히 이해하기 위한 또 다른 예:

const foods = ['chicken', 'meat', 'rice'];

const Newfoods = [...foods, 'pizza '];
console.log(Newfoods); // ['chicken', 'meat', 'rice', 'pizza ']

• 여기서 우리는 완전히 새로운 배열을 만들고 있으며, 음식 배열을 변경(변형)하는 것이 아니라는 점을 명심하세요.

console.log(foods); // ['chicken', 'meat', 'rice']

• 확산 연산자는 Destructuring과 유사하지만 차이점은 스프레드 연산자는 새로운 변수를 생성하지 않기 때문에 쉼표로 구분하여 값을 쓰는 곳에서만 사용할 수 있다는 점입니다.

배열을 사용한 스프레드 연산자의 두 가지 유용한 사용 사례:

1.배열 복사본 만들기:

const arrOriginal = [1, 2, 3, 4, 5];

const arrCopy = [...arrOriginal];
console.log(arrCopy); // [1, 2, 3, 4, 5]

2. 둘 이상의 배열 병합:

const arr1 = ['A', 'B', 'C'];
const arr2 = ['D', 'E', 'F'];

const mergedArr = [...arr1, ...arr2];
console.log(mergedArr); // ['A', 'B', 'C', 'D', 'E', 'F']

• 스프레드 연산자는 배열에서만 작동하는 것이 아니라 배열, 문자열, 맵, 세트(대부분의 내장 데이터 구조)와 같은 모든 반복 가능 항목에서도 작동하지만 (객체)에는 작동하지 않습니다.
• 문자열: 원래 문자열의 각 문자 = 개별 요소, 예:

const str = 'spongeBob';

const letters = [...str, 'squarePants'];
console.log(letters); // ['s', 'p', 'o', 'n', 'g', 'e', 'B', 'o', 'b', 'squarePants']

• 그러나 우리는 위에서 지정한 두 가지 상황, 즉 "배열 만들기" 및 "인수 전달" 외에는 여전히 스프레드 연산자를 사용하고 싶지 않다는 점을 기억하세요. 템플릿 리터럴로 문자열을 생성하기 위해 쉼표로 구분된 일부 값을 사용하면 작동하지 않고 오류가 발생합니다. 왜냐하면 쉼표로 구분된 여러 값을 기대하는 곳이 아니기 때문입니다.

console.log(`spelling sponge bob's name: ${...str}`);  // Expression expected

2- 함수에 인수 전달

const arr = [5, 6, 7];

// without the spread operator ?

const badArr = [1, 2, 3, 4, arr[0], arr[1], arr[2]];
console.log(badArr); // [1, 2, 3, 4, 5, 6, 7]

// with the spread operator ?

const goodArr = [1, 2, 3, 4, ...arr];
console.log(goodArr); // [1, 2, 3, 4, 5, 6, 7]

• 확산 연산자 사용:
• ES2018부터 Spread Operator는 객체가 반복 가능하지 않더라도 실제로 객체에 대해서도 작동합니다. 예:

console.log(...goodArr); // 1 2 3 4 5 6 7

//the line above is just like writing this code:

console.log(1, 2, 3, 4, 5, 6, 7); // 1 2 3 4 5 6 7

• 첫 번째 항목에서는 레스토랑 개체와 동일한 속성을 가진 새 개체를 만들었지만 netWorth 속성인 또 다른 속성을 추가했습니다.
• 두 번째에서는 레스토랑 개체의 복사본을 만들었습니다. 복사된 개체를 변경해도 원본 개체에는 영향을 주지 않으며 그 반대의 경우도 마찬가지입니다.

여기서 모든 내용을 이해하셨기를 바랍니다. 궁금한 점이 있으면 언제든지 댓글 섹션에 문의하세요. 읽어주셔서 감사합니다.

위 내용은 JavaScript 스프레드 연산자의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!