ES6 확장 연산 자 사용 방법 예시
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 확장 연산 자 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
JavaScript로 카드 놀이를 넘기는 애니메이션을 만들려고했습니다.카드를 넘기는 애니메이션을 만들어 보았습니다. 폴더 구성은 다음과 같습니다. 코드는 다음과 같습니다. card_turning.html 다음은 JavaScript 코드입니다. cardTurning.js 결과는, 이런 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.