...(자바 스크립트에서 3 개의 점)를 스프레드 구문 또는 스프레드 연산자라고합니다. 이를 통해 배열 표현식 또는 문자열 과 같은 반복 가능 항목을 확장하거나 오브젝트 표현식을 배치 할 때마다 확장 할 수 있습니다. 이것은 React에만 국한되지 않습니다. 자바 스크립트 연산자입니다.
여기에있는 모든 대답이 도움이되지만 가장 널리 사용되는 Spread Syntax (Spread Operator) 사용 사례를 나열하고 싶습니다 .
1. 배열 결합 (배열 연결)
배열을 결합 하는 다양한 방법이 있지만 스프레드 연산자를 사용하면 배열의 어느 위치 에나 배치 할 수 있습니다. 두 배열을 결합하고 배열 내 임의의 지점에 요소를 배치하려면 다음과 같이하십시오.
var arr1 = ['two', 'three'];
var arr2 = ['one', ...arr1, 'four', 'five'];
// arr2 = ["one", "two", "three", "four", "five"]
2. 배열 복사
배열의 복사본을 원할 때 Array.prototypr.slice () 메서드를 사용했습니다. 그러나 스프레드 연산자를 사용하여 동일한 작업을 수행 할 수 있습니다.
var arr = [1,2,3];
var arr2 = [...arr];
// arr2 = [1,2,3]
3. Apply없이 함수 호출
ES5에서 두 개의 숫자 배열을 doStuff()함수에 전달하려면 종종 다음과 같이 Function.prototype.apply () 메서드를 사용합니다.
function doStuff (x, y, z) { }
var args = [0, 1, 2];
// Call the function, passing args
doStuff.apply(null, args);
그러나 스프레드 연산자를 사용하면 배열을 함수에 전달할 수 있습니다.
doStuff(...args);
4. 배열 정리
파괴와 나머지 연산자를 함께 사용하여 원하는대로 정보를 변수로 추출 할 수 있습니다.
let { 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 }
5. 나머지 매개 변수로서의 함수 인수
ES6에는 함수의 나머지 모든 인수를 배열로 수집하는 나머지 매개 변수 인 3 개의 점 (...)이 있습니다.
function f(a, b, ...args) {
console.log(args);
}
f(1,2,3,4,5);
// [ 3, 4, 5 ]
6. 수학 함수 사용
스프레드가 인수로 사용되는 모든 함수는 여러 개의 인수를 허용 할 수있는 함수에서 사용할 수 있습니다.
let numbers = [9, 4, 7, 1];
Math.min(...numbers); // 1
7. 두 객체의 결합
스프레드 연산자를 사용하여 두 객체를 결합 할 수 있습니다. 이것은 쉽고 깔끔한 방법입니다.
var carType = {
model: 'Toyota',
yom: '1995'
};
var carFuel = 'Petrol';
var carData = {
...carType,
carFuel
}
console.log(carData);
// {
// model: 'Toyota',
// yom: '1995',
// carFuel = 'Petrol'
// }
8. 문자열을 별도의 문자로 분리
spread 연산자를 사용하여 문자열을 별도의 문자로 펼칠 수 있습니다.
let chars = ['A', ...'BC', 'D'];
console.log(chars); // ["A", "B", "C", "D"]
스프레드 연산자를 사용하는 더 많은 방법을 생각할 수 있습니다. 내가 여기에 나열한 것은 널리 사용되는 사례입니다.