ES6 확장 연산 자 사용 방법 예시

spread 와 rest 연산 자 는 무엇 입 니까?
spread 와 rest 연산 자 는 ES6 에서 모두(...)로 표시 합 니 다.그 중에서 spread 는 확장(전개)연산 자 이 고 rest 는 나머지(수집)연산 자 입 니 다.서로 다른 곳 에서 이 연산 자 를 사용 하 는 것 은 서로 다른 작용 을 하기 때문에 읽 기와 쓰기 두 가지 측면 에서 고려 할 수 있다.그 중에서 쓰기 조작 은 수집 작용 을 하고 읽 기 조작 은 전개 작용 을 한다.ES6 에 서 는(...)연산 자 는 배열 에 만 유효 하 며,ES7 에 대상 에 대한 확장 을 추가 합 니 다.
배열 의 확장 연산 자
rest 연산 자(수집 작용)
없 을 때(...)연산 자 를 사용 할 때 합 의 를 구 하 는 기능 함 수 를 실현 하려 면 들 어 오 는 매개 변수 가 정 해 지지 않 고 arguments 만 사용 할 수 있 습 니 다.예 를 들 면:

function sum(){
	let sumNumber=0;
    for(let i=0;i<arguments.length;i++){
        sumNumber += arguments[i];
    }
    return sumNumber;
}
console.log(sum(1,2,3));	//6
console.log(sum(4,5,6,7,8));	//30

rest 연산 자 를 사용 할 때 우리 의 코드 는 매우 간결 할 수 있 습 니 다.

function sum(...arg){
	let sumNumber=0;
   	arg.forEach(function(ele){
        sumNumber+=ele;
    })
    return sumNumber;
}
console.log(sum(1,2,3));	//6
console.log(sum(4,5,6,7,8));	//30

이 때 들 어 오 는 매개 변 수 는 arg 에 기록 되 고 하나의 배열 이 됩 니 다.우 리 는 arg 를 인쇄 할 수 있 습 니 다:

function sum(...arg){
    console.log(arg);
}
console.log(sum(1,2,3));	// (3) [1, 2, 3]
console.log(sum(4,5,6,7,8));	//(5) [4, 5, 6, 7, 8]

만약 우리 가 들 어 오 는 매개 변수 에 반드시 들 어 와 야 할 항목 이 있다 면,우 리 는 형 삼 의 마지막 자리 에서 rest 연산 자 를 사용 할 수 있 습 니 다.

function test(a, b, ...arg) {
	console.log(a,b,arg);
}
test(1,2,3,4,5,6,7,8);//1 2 (6) [3, 4, 5, 6, 7, 8]

출력 된 a,b 는 실제 인삼 의 앞 두 가지 항목 을 볼 수 있 고 뒤에 들 어 오 는 매개 변 수 는 모두 배열 로 바 뀌 어 arg 에 저 장 됩 니 다.
spread 연산 자(전개 작용)

let arr=[1,2,3,4,5];
console.log(arr);	//(5) [1, 2, 3, 4, 5]
console.log(...arr);	// 1 2 3 4 5

(...)연산 자 를 사용 하면 배열 을 펼 치고 출력 하 는 것 을 볼 수 있 습 니 다.
우리 가 배열 을 합병 하고 싶 을 때 전통 적 인 방법 은:

let arr1=[1,2,3];
let arr2=[5,6,7,8];
let arr3=[].arr3.concat(arr1,arr2);	//   let arr3=new Array();arr3.concat(arr1,arr2);
console.log(arr3);	//(7) [1, 2, 3, 5, 6, 7, 8]

연산 자 를 사용 하 는 방법:

let arr1=[1,2,3];
let arr2=[5,6,7,8];
let arr3=[...arr1,...arr2];
console.log(arr3);	//(7) [1, 2, 3, 5, 6, 7, 8]

우 리 는 그것 이 어떻게 실현 되 었 는 지 보 자.우 리 는 babel 을 사용 하여 ES6 문법 을 ES5 로 바 꿀 수 있다.

"use strict";

var arr1 = [1, 2, 3];
var arr2 = [5, 6, 7, 8];
var arr3 = [].concat(arr1, arr2);

그것 의 실현 원 리 를 볼 수 있 는 것 도 수조 의 concat 방법 이다.그래서(...)연산 자 는 문법 사탕 으로 원래 의 기능 에 영향 을 주지 않 는 다.
대상 의 확장 연산 자
얕 은 클론
ES7 에서(...)연산 자 는 대상 의 확장 을 지원 합 니 다.

let school={	
    name:'xxx  '，
    history:'50'
};
let teacher={
    leader:{
        name:'xx  '，
        age:'40',
    },
    personNum:60
};

우리 가 상기 대상 을 다른 대상 에 복제 하려 면 전통 적 인 방법 은 자신 이 clone 함 수 를 쓰 거나 jQuery 의 extend 방법 을 사용 하 는 것 이다.지금 우 리 는 연산 자 를 사용 하면 완성 할 수 있다.

let obj={
    ...school,
    ...teacher
}
console.log(obj);	/*  Object
					history: "50"
					leader: {name: "xx  ", age: "40"}
					name: "xxx  "
					personNum: 60
					__proto__: Object*/

(...)연산 자 를 사용 하면 쉽게 복 제 를 완성 할 수 있 지만,이 복 제 는 얕 은 복제 입 니 다.예 를 들 면:

obj.leader.name="xxx";
console.log(obj);	/*history: "50"
					leader: {name: "xxx", age: "40"}
					name: "xxx  "
					personNum: 60
					__proto__: Object */
console.log(teacher); /*leader: {name: "xxx", age: "40"}
						personNum: 60
						__proto__: Object */

ES6 에 도 얕 은 복제 방법 이 있 습 니 다:Object.assign({},obj 1,obj 2,...)
그것 은 뒤의 대상 을 첫 번 째 대상 으로 복제 할 것 이다.

let school={	
    name:'xxx  '，
    history:'50'
};
let teacher={
    leader:{
        name:'xx  '，
        age:'40',
    },
    personNum:60
};
let obj={};
Object.assign(obj,school,teacher);
console.log(obj);	/*history: "50"
					leader: {name: "xx  ", age: "40"}
					name: "xxx  "
					personNum: 60
					__proto__: Object*/

복제 도 완 성 된 것 으로 보인다.
심 클론
obj 에서 leader 의 name 값 을 수정 할 때 원래 teacher 대상 에서 해당 하 는 값 도 바 뀌 었 습 니 다.심 한 복 제 를 실현 하려 면 상기 코드 를 수정 할 수 있 습 니 다.

let school={	
    name:'xxx  '，
    history:'50'
};
let leader={
     name:'xx  '，
       age:'40',
}
let teacher={
    leader:{
        ...leader
    }
    personNum:60
};
let obj={
    ...school,
    ...teacher,
    leader:{
        ...leader
    }
}

console.log(obj);	/*history: "50"
					leader: {name: "xx  ", age: "40"}
					name: "xxx  "
            		personNum: 60
					__proto__: Object*/

obj.leader.name="xxx";

cosnole.log(obj);	/*history: "50"
					leader: {name: "xxx", age: "40"}
					name: "xxx  "
					personNum: 60
					__proto__: Object*/
console.log(leader);.	/*age: "40"
						name: "xx  "
						__proto__: Object*/
console.log(teacher);	/*leader: {name: "xx  ", age: "40"}
						personNum: 60
						__proto__: Object*/

이 를 통 해 알 수 있 듯 이 우 리 는 obj 에서 leader 의 name 값 을 바 꾸 었 고 obj 대상 에서 만 바 뀌 었 으 며 teacher 대상 과 leader 대상 은 바 뀌 지 않 았 습 니 다.
만약 에 여러 층 의 인용 치가 있다 면 이 방법 을 추천 하지 않 고 스스로 깊 은 복제 방법 을 쓸 수 있다.물론 다른 방법 도 있어 서 새로운 길 을 개척 할 수 있다.JSON 을 사용 하여 먼저 복제 할 대상 을 하나의 문자열 로 바 꾼 다음 대상 으로 바 꿀 수 있 습 니 다.그러면 새로 얻 은 대상 도 원래 얻 은 대상 과 관계 가 없습니다.

let teacher={
    leader:{
        name:'xx  ',
       	age:'40',
    }
    personNum:60
};
let obj=JSON.parse(JSON.stringify(teacher));
console.log(obj);	/*leader: {name: "xx  ", age: "40"}
					personNum: 60
					__proto__: Object*/

obj.leader.name="xxx";

console.log(obj.leader.name);	//"xxx"
console.log(teacher.leader.name);	//"xx  "

그러나 이 방법 은 함수(function(),정규(reg),특수 대상(new Data()을 포함 한 대상 을 복제 할 때 위 에서 말 한 속성 을 잃 어 버 립 니 다.위의 속성 이 없 으 면 이 방법 을 사용 할 수 있 습 니 다.
총결산
ES6 확장 연산 자 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 ES6 확장 연산 자 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!