빠른 팁 : JavaScript에서 스프레드 연산자 사용 방법

이 튜토리얼은 JavaScript의 확장 된 연산자의 다양한 사용과 확장 된 연산자와 잔류 운영자 간의 주요 차이점을 설명합니다.

JavaScript 확장 연산자는 3 개의 점 (...)으로 표시되며 ES6에 소개됩니다. 컬렉션과 배열의 요소를 단일 요소로 확장 할 수 있습니다.

확장 된 연산자는 배열 및 객체를 작성하고 복제하고 기능 매개 변수로 배열을 통과하고 배열의 복제를 삭제하는 데 사용될 수 있습니다.

키 포인트

JavaScript 연산자는 세트와 배열의 요소를 단일 요소로 확장하기 위해 ES6으로 도입되었습니다. 배열 및 객체를 작성하고 복제하는 데 사용될 수 있으며, 기능 매개 변수로 배열을 패스 배열, 배열의 복제 삭제 등을 삭제하는 데 사용할 수 있습니다.

확장 연산자는 배열 및 객체를 복제하고, 배열을 연결하고, 어레이를 배열로 변환하고, 배열의 복제를 삭제하는 데 사용될 수 있습니다. 그러나 얕은 사본 만 수행한다는 점에 유의해야합니다. 즉, 최상위 요소 나 속성 만 복사합니다. 배열 또는 객체에 다른 배열 또는 객체가 포함 된 경우 해당 배열 또는 객체는 값이 아닌 참조별로 복사됩니다.

확장 연산자는 나머지 연산자와 다르지만 둘 다 3 개의 점 (...)과 동일한 구문을 사용합니다. 나머지 연산자는 함수의 매개 변수 목록에서 사용될 수 있으며, 함수는 정의되지 않은 수의 매개 변수를 허용하며 배열로 처리 할 수 ​​있음을 나타냅니다. 문법

확장 연산자는 반복 가능한 객체에만 사용할 수 있습니다. 분리없이 반복 가능한 물체 바로 앞에 있어야합니다. 예를 들면 :
함수 매개 변수
• Math.min () 메소드를 예로 찍습니다. 이 메소드는 매개 변수로 하나 이상의 숫자를 취하고 가장 적은 수의 전달 된 매개 변수를 반환합니다.
숫자 배열이 있고이 숫자의 최소 값을 찾으려면 확장 연산자가없는 경우 인덱스와 하나씩 요소를 전달하거나 apply () 메소드를 사용하여 요소를 전달해야합니다. 인수로서 배열의. 예를 들면 :
첫 번째 매개 변수는이 호출 함수의 값을 변경하는 데 사용되기 때문에 첫 번째 매개 변수는 null입니다.

확장 연산자는 배열의 요소를 함수로 전달하기위한보다 편리하고 읽기 쉬운 솔루션입니다. 예를 들면 :

이 온라인 예에서 볼 수 있습니다 : CodePen 에서 예를 봅니다

배열을 만듭니다

확장 연산자는 기존 배열 또는 Symbol.erator () 메소드를 포함하는 기타 반복 가능한 개체에서 새 배열을 생성하는 데 사용될 수 있습니다. 이들은 루프의 for ...로 반복 할 수있는 객체입니다.

console.log(...arr);

예를 들어 배열을 복제하는 데 사용할 수 있습니다. 기존 배열의 값을 새 배열에 할당하면 새 배열을 변경하면 기존 배열이 업데이트됩니다.

console.log(...arr);

확장 연산자를 사용하면 기존 배열을 새 배열로 복제 할 수 있으며 새 배열에 대한 변경 사항은 기존 배열에 영향을 미치지 않습니다.

이것은 1 차원 배열 만 복제 할 것이라는 점에 유의해야합니다. 다차원 배열에서는 작동하지 않습니다.

확장 연산자는 여러 배열을 하나의 배열로 연결하는 데 사용될 수도 있습니다. 예를 들면 :

const numbers = [15, 13, 100, 20];
const minNumber = Math.min.apply(null, numbers);
console.log(minNumber); // 13

당신은 또한 문자열에 대한 확장 연산자를 사용하여 각 항목이 문자열의 문자 인 배열을 만들 수 있습니다 : .

객체를 만듭니다

확장 연산자는 다른 방식으로 객체를 만드는 데 사용될 수 있습니다.

const numbers = [15, 13, 100, 20];
const minNumber = Math.min(...numbers);
console.log(minNumber); // 13

다른 물체를 가볍게 복제하는 데 사용할 수 있습니다. 예를 들면 :

여러 객체를 하나의 객체로 병합하는 데 사용될 수도 있습니다. 예를 들면 :

const numbers = [15, 13, 100, 20];
const clonedNumbers = numbers;
clonedNumbers.push(24);
console.log(clonedNumbers); // [15, 13, 100, 20, 24]
console.log(numbers); // [15, 13, 100, 20, 24]

객체가 동일한 속성 이름을 공유하면 마지막 확장 객체의 속성 값이 사용됩니다. 예를 들면 : 확장 연산자는 배열의 인덱스가 속성이되고 해당 인덱스의 값이 속성의 값이되는 배열에서 개체를 생성하는 데 사용될 수 있습니다. 예를 들면 :

또한 문자열에서 객체를 만드는 데 사용될 수 있습니다. 마찬가지로 문자열의 인덱스가 속성이되고 해당 인덱스의 문자는 속성의 값이됩니다. 예를 들면 :

끄덕임을 배열로 변환 노드리스트는 문서의 요소 인 노드 모음입니다. 배열과 달리 이러한 요소는 항목 또는 항목과 같은 컬렉션의 메소드를 통해 액세스됩니다.

확장 연산자를 사용하여 NODELIST를 배열로 변환 할 수 있습니다. 예를 들면 :

const numbers = [15, 13, 100, 20];
const clonedNumbers = [...numbers];
clonedNumbers.push(24);
console.log(clonedNumbers); // [15, 13, 100, 20, 24]
console.log(numbers); // [15, 13, 100, 20]

배열에서 복제를 삭제합니다 세트 객체는 고유 한 값 만 저장하는 컬렉션입니다. NODELIST와 유사하게 세트는 확장 연산자를 사용하여 어레이로 변환 할 수 있습니다.

const evenNumbers = [2, 4, 6, 8];
const oddNumbers = [1, 3, 5, 7];
const allNumbers = [...evenNumbers, ...oddNumbers];
console.log(...allNumbers); //[2, 4, 6, 8, 1, 3, 5, 7]

세트 저장소는 고유 한 값 만 있으므로 확장 연산자와 쌍을 이루어 배열에서 복제를 삭제할 수 있습니다. 예를 들면 :

확장 연산자 및 잔류 연산자

const str = 'Hello, World!';
const strArr = [...str];
console.log(strArr); // ['H', 'e', 'l', 'l', 'o', ',', ' ', 'W', 'o', 'r', 'l', 'd', '!']

나머지 연산자는 또한 3 점 연산자 (...)이지만 다른 목적으로 사용됩니다. 나머지 연산자는 함수의 매개 변수 목록에서 사용할 수 있으며, 함수가 정의되지 않은 수의 매개 변수를 수락 함을 나타냅니다. 이러한 매개 변수는 배열로 처리 될 수 있습니다.

예 :

const obj = { name: 'Mark', age: 20};
const clonedObj = { ...obj };
console.log(clonedObj); // {name: 'Mark', age: 20}

이 예에서 나머지 연산자는 계산 기능을 계산하기위한 매개 변수로 사용됩니다. 그런 다음 배열의 항목을 반복하고 추가하여 합계를 계산합니다.

그런 다음 변수를 하나씩 매개 변수로 계산 함수로 하나씩 전달하거나 확장 연산자를 사용하여 배열의 요소를 매개 변수로 전달할 수 있습니다.

결론

const obj1 = { name: 'Mark', age: 20};
const obj2 = { occupation: 'Student' };
const clonedObj = { ...obj1, ...obj2 };
console.log(clonedObj); // {name: 'Mark', age: 20, occupation: 'Student'}

확장 된 연산자를 사용하면 코드를 읽을 수있는 상태에서 더 적은 줄의 코드로 더 많은 작업을 수행 할 수 있습니다. 반복 가능한 객체, 매개 변수를 함수로 전달하거나 다른 반복 가능한 객체에서 배열 및 객체를 작성하는 데 사용할 수 있습니다. 관련 판독 값 :

JavaScript에서 수학 메소드가 누락되었습니다 빠른 팁 : javaScript로 객체 배열을 정렬하는 방법 JavaScript에서 루프에 사용하는 방법 빠른 팁 : 문자열이 JavaScript의 정규 표현식과 일치하는지 테스트 《javaScript : 초보자에서 닌자까지
• JavaScript 확장 연산자 FAQ (FAQS)
• (원래 FAQ 컨텐츠와 유사하지만 자주 묻는 질문이지만 다른 단어를 추가하여 내용의 일관성을 유지하고 원본 텍스트를 직접 복사하지 않도록 추가해야합니다)

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