JavaScript의 스프레드 및 나머지 연산자 익히기

JavaScript의 스프레드 및 나머지 연산자

세 개의 점(...)으로 표시되는 spread 및 rest 연산자는 ES6에 도입된 JavaScript의 다양한 기능입니다. 동일한 구문을 공유하지만 서로 다른 용도로 사용됩니다. 확산 연산자는 요소를 확장하는 데 사용되고 나머지 연산자는 요소를 수집하는 데 사용됩니다.

---

1. 스프레드 연산자

확산 연산자는 배열, 객체 또는 반복 가능 항목의 요소를 개별 요소로 확장하는 데 사용됩니다.

아. 배열로 확산

확산 연산자는 배열 요소를 복사, 연결 또는 전달하는 데 사용할 수 있습니다.

예: 배열 복사

const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // Creates a copy of arr1
console.log(arr2); // Output: [1, 2, 3]

예: 배열 연결

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // Output: [1, 2, 3, 4, 5, 6]

예: 요소를 함수에 전달

const numbers = [10, 20, 30];
console.log(Math.max(...numbers)); // Output: 30

베. 객체로 확산

확산 연산자를 사용하여 개체를 복사하거나 병합할 수 있습니다.

예: 개체 복사

const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1 };
console.log(obj2); // Output: { a: 1, b: 2 }

예: 개체 병합

const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const merged = { ...obj1, ...obj2 };
console.log(merged); // Output: { a: 1, b: 3, c: 4 }

---

2. 휴식 연산자

나머지 연산자는 여러 요소를 단일 배열이나 객체로 수집합니다. 함수 매개변수나 구조 분해 할당에 일반적으로 사용됩니다.

아. 함수 매개변수에서 Rest 사용하기

나머지 연산자는 무한한 개수의 인수를 배열로 수집할 수 있습니다.

예: 인수 수집

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4)); // Output: 10

베. 구조 분해 배열에서 나머지 사용

나머지 연산자는 배열 구조 분해 작업에서 나머지 요소를 수집합니다.

예: 배열 구조 분해

const [first, second, ...rest] = [1, 2, 3, 4, 5];
console.log(first); // Output: 1
console.log(second); // Output: 2
console.log(rest); // Output: [3, 4, 5]

ㄷ. 객체 파괴에 나머지 사용하기

나머지 연산자는 객체 구조 분해 작업에서 나머지 속성을 수집합니다.

예: 객체 구조 분해

const arr1 = [1, 2, 3];
const arr2 = [...arr1]; // Creates a copy of arr1
console.log(arr2); // Output: [1, 2, 3]

---

3. 스프레드 연산자와 나머지 연산자의 주요 차이점

Aspect	Spread Operator	Rest Operator
Purpose	Expands elements into individual items	Collects items into a single entity
Use Cases	Copying, merging, passing elements	Collecting function arguments, destructuring
Data Types	Arrays, Objects, Iterables	Arrays, Objects

측면

---

확산 연산자

휴식 연산자 목적

요소를 개별 항목으로 확장 항목을 단일 항목으로 수집 사용 사례 요소 복사, 병합, 전달 함수 인수 수집, 구조 분해 데이터 유형

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // Output: [1, 2, 3, 4, 5, 6]

배열, 객체, Iterable 배열, 객체

4. 실제 사례

const numbers = [10, 20, 30];
console.log(Math.max(...numbers)); // Output: 30

---

아. 배열 요소 교체

• 베. 휴식과 스프레드의 결합
5. 요약

확산 연산자(...): 배열, 객체 또는 반복 가능 항목을 개별 요소로 확장합니다.

나머지 연산자(...)

: 여러 요소를 배열이나 객체로 수집합니다. 두 연산자 모두 특히 배열, 개체 및 함수 매개변수를 사용할 때 JavaScript 코드를 더욱 간결하고 유연하게 만듭니다. 안녕하세요. 저는 Abhay Singh Kathayat입니다! 저는 프론트엔드와 백엔드 기술 모두에 대한 전문 지식을 갖춘 풀스택 개발자입니다. 저는 효율적이고 확장 가능하며 사용자 친화적인 애플리케이션을 구축하기 위해 다양한 프로그래밍 언어와 프레임워크를 사용하여 작업합니다. 제 비즈니스 이메일(kaashshorts28@gmail.com)로 언제든지 연락주세요.

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