ES6 확장 연산 자 와 rest 연산 자 용법 인 스 턴 스 분석

본 논문 의 사례 는 ES6 확장 연산 자 와 rest 연산 자 용법 을 서술 하 였 다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
연산 자 는 매개 변수 와 대상 배열 이 알 수 없 는 상황 에서 의 프로 그래 밍 을 잘 해결 하여 코드 를 더욱 건장 하고 간결 하 게 할 수 있 습 니 다.
연산 자 는 두 가지 가 있 습 니 다.대상 확장 연산 자 와 rest 연산 자 입 니 다.

1.대상 확장(spread)연산 자(...)
(1)매개 변수 개수 문제 해결
이전에 우리 가 프로 그래 밍 한 매개 변 수 는 일반적으로 확정 되 었 다.그렇지 않 으 면 잘못 보고 하거나 이상 할 것 이다.다음 과 같다.

function test(a,b,c,d) {
 console.log(a)
 console.log(b)
 console.log(c)
 console.log(d)
 console.log(e)//e is not defined
}
test(1,2,3,4)

매개 변수 가 고정 되 어 있 으 면 불필요 한 매개 변수 가 잘못 될 수 있 습 니 다.
그러나 우 리 는 여러 개의 파 라 메 터 를 전달 하고 싶 지만 매개 변수의 개 수 를 확정 하지 못 할 때 대상 확장 연산 자 를 사용 하여 파 라 메 터 를 만 들 수 있 습 니 다.

function test1(...arg) {
 console.log(arg[0]);//1
 console.log(arg[1]);//2
 console.log(arg[2]);//3
 console.log(arg[3])//4
 console.log(arg[4])//5
 console.log(arg[5])//undefined
}
test1(1,2,3,4,5)

이 때 프로그램 은 잘못 보고 하지 않 을 것 이 며,여분의 값 을 되 돌려 주 는 결 과 는 undefined 이다.여러 값 을 전달 할 수 있 고 방법 에서 많이 인용 해도 틀 리 지 않 는 다 는 뜻 이다.
(2)배열 할당 문제 해결
우 리 는 먼저 하나의 예 를 들 어 설명 합 니 다.우 리 는 두 배열 의 arr 1 과 arr 2 를 설명 한 다음 에 arr 1 의 값 을 arr 2 에 부여 한 다음 에 arr 2 의 값 을 바 꾸 면 arr 1 의 값 도 바 뀌 었 습 니 다.왜냐하면 우 리 는 메모리 스 택 에 대한 인용 이지 실제 할당 이 아 닙 니 다.

let arr1=['i','love','you'];
let arr2=arr1;
console.log("arr2====",arr2);
arr2.push('too');
console.log("arr1====>",arr1);

콘 솔 출력 결과:
["i", "love", "you"]
["i", "love", "you", "too"]
이것 은 우리 가 보고 싶 지 않 은 것 이다.대상 확장 연산 자 를 이용 하여 이 문 제 를 간단하게 해결 할 수 있다.지금 우 리 는 코드 를 개조 할 수 있다.

let arr1=['i','love','you'];
let arr2=[...arr1];
console.log(arr2);
arr2.push('too');
console.log(arr1);

결국 우리 의 arr 1 이 변 하지 않 았 음 을 볼 수 있 고 간단 한 확장 연산 자 는 이 문 제 를 해결 했다.
2.rest 연산 자
(1)의미
rest 매개 변수 역할:남 은 쉼표 로 구 분 된 매개 변수 시퀀스 를 배열 매개 변수 로 변환 합 니 다.
메모:rest 매개 변 수 는 마지막 매개 변수 여야 합 니 다.그렇지 않 으 면 잘못 보 고 됩 니 다.
rest 연산 자 는 대상 확장 연산 자 와 유사 한 점 이 많 습 니 다.예 를 들 어:

function test(first,...arg){
 console.log("first==>",first)//0
 console.log("arg=====>",arg)
}
test(0,1,2,3,4,5,6,7);

출력 결 과 는:
first==> 0
arg=====>[1, 2, 3, 4, 5, 6, 7]
(2)rest 연산 자 를 순환 출력 하 는 방법
for...of 순환 으로 arg 값 을 출력 합 니 다.

function test(first,...arg){
 for(let val of arg){
  console.log(val)
 }
}
test(0,1,2,3,4,5,6,7);

결 과 는:
1,2,3,4,5,6,7
마지막 요약:
4.567917.확장 연산 자 는 세 개의 점 번호 로 표시 하 는데 기능 은 배열 이나 배열 대상 을 일련의 쉼표 로 구분 하 는 값 으로 전개 하 는 것 이다

rest 연산 자 도 세 개의 점 이지 만 그 기능 은 확장 연산 자 와 정반 대 이다.쉼표 로 구 분 된 값 서열 을 하나의 배열 로 조합 한다

4.567917.세 개의 점(...)이 등호 왼쪽 에 있 거나 형 삼 위 에 놓는다.rest 연산 자 입 니 다.
4.567917.세 개가 등호 오른쪽 에 있 거나 실제 인삼 에 놓 으 면 spread 연산 자 입 니 다또는 할당 되 는 쪽 에 놓 으 면 rest 연산 자 입 니 다.할당 방식 spread 연산 자 에 놓 습 니 다.
관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.
자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있다.
본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.