ES6 할당 해제, 확장 연산 자 / 확장 연산 자
5120 단어 js/javascript
ES6 는 일정한 패턴 에 따라 배열 과 대상 에서 값 을 추출 하고 변 수 를 할당 할 수 있 는데 이 를 해체 라 고 한다.
1. 할당 해제: 기본 용법, 이름 바 꾸 기, 기본 값 해제
: , , ,
let json = [" ", 20, " "]
let [name,age,sex] = json;
console.log(name,age,sex); // 20
// : , , , :let ["name","age","sex"] = [" ", 20, " "]; 。
// :
name=" " // " " " "
----------------------------------------------------
: key ,
let json = {
name:" ",
age:20,
sex:" "
}
let { name,age:a,sex:b } = json;
console.log(name,a,b); // 20
----------------------------------------------------
:
let json = [" ", 20, " "]
let [name,age,sex,love=" "] = json;
console.log(name,age,sex,love); // 20
: : , null , , null 。
undefiend , 。 :
let [name,age,sex,love=" "] = [" ", 20, " ",undefiend];
console.log(name,age,sex,love); // 20
let [name,age,sex,love=" "] = [" ", 20, " ",null];
console.log(name,age,sex,love); // 20 null
두 수의 위 치 를 교환 하 다.
let a = 10;
let b = 20;
[a,b] = [b,a]
console.log(a,b) // 20 10
2. 대상 재 구성 할당:
// :
let {name,age,sex} = {name:" ", age:"20", sex:" "} ;
console.log(name); //
console.log(age); // 20
console.log(sex); //
// :
let {name,age, sex, friend} = {name:" ", age:"20", sex:" ", friend:[" ", " "]} ;
console.log(name); //
console.log(age); // 20
console.log(sex); //
console.log(friend); // [" ", " "]
// :
let {name,age, sex, friend, pet} = {name:" ", age:"20", sex:" ", friend:[" ", " "], pet:{name:" " ,age:"2"}} ;
console.log(name); //
console.log(age); // 20
console.log(sex); //
console.log(friend); // [" ", " "]
console.log(pet); // {name:" " ,age:"2"}
// : ,key , key , undefined, 。
let {name:str} = {name:" "};
console.log(name); //
console.log(str); //
// , , key ;
대상 에 대해 먼저 변 수 를 정의 한 다음 에 할당 문 제 를 분석 합 니 다. :{} 앞 에 let 와 같은 변수 성명 자가 없 으 면 브 라 우 저 는 {} 을 블록 급 역할 영역 으로 보고 문법 오 류 를 보고 합 니 다.
, , ,
let a;
{ a } = { a:"123", b:12}
----------------------------------------------------------
, , ()
let a;
({ a } = { a:"123", b:12})
3. 배열 구성 해제 할당:
let [arr1, [arr2, arr3, [arr4, arr5]]] = [1, [2, 3, [4, 5]]];
concole.log(arr1,arr2,arr3,arr4,arr5) // 1, 2, 3, 4, 5
// : ,
// undefiend
let [arr] = [];
console.log(arr) // undefiend
let [a, b, c] = [1, 2, 3];
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3
// :
let [a, , , c] = [1, 2, 3];
console.log(a) // 1
console.log(c) // undefined
4. 기본 유형의 해체 할당: (개발 중 멀미 가 적 습 니 다. 알 면 됩 니 다)
//String , 。
let [a, b, c, d, e] = " ";
console.log(a) //
console.log(b) //
console.log(c) //
console.log(d) //
console.log(e) //
//Number , 。
let [a, b, c, d, e] = 12306;
console.log(a) //
console.log(b) //
console.log(c) //
console.log(d) //
console.log(e) //
확장 연산 자
문법 은 세 가지 점 입 니 다.
:
let arr = ["red","blue",green]
console.log(...arr) // red blue green
-------------------------------------------------------
: ,
function show(...a){
console.log(arguments) // [1,2,3,4,5,6]
console.log(a) // [1,2,3,4,5,6]
}
show(1,2,3,4,5,6)
-------------------------------------------------------
:
function show(a,b,...c){
console.log(a) // 1
console.log(b) // 2
console.log(c) // [3,4,5,6]
}
show(1,2,3,4,5,6)
: ,
function show(a,...b,c){
//
}
show(1,2,3,4,5,6)
복사 배열, 대상: 얕 은 복사
let arr = [1,2,3,4];
//let arr2 = Array.from(arr) //
let arr2 = [...arr]
console.log(arr2) // [1,2,3,4]
let arr = {name:"a",age:12};
let arr2 = {...arr}
console.log(arr2) // {name:"a",age:12}