>웹 프론트엔드 >JS 튜토리얼 >ES6의 구조분해 할당 사용에 대한 설명

ES6의 구조분해 할당 사용에 대한 설명

不言
不言앞으로
2018-11-14 15:45:211976검색

이 기사의 내용은 ES6의 구조화 할당 사용에 관한 것입니다. 이는 특정 참고 가치가 있으므로 도움이 될 수 있습니다.

개요

솔직히 말해서 구조 분해 할당은 특히 다른 es6과 함께 사용할 때 매우 유용하므로 간단히 구조 분해 할당을 말하는 방법은 다음과 같습니다. 예를 들어 구조 분해 할당은 동전 분할 확장 기계, 넣어 10센트, 50센트, 1위안 동전을 모두 동전 분할기에 넣으면 자동으로 동전이 모두 분리됩니다. 원하는 것을 꺼내기만 하면 됩니다! 解构赋值呢,打个比方:解构赋值就是一个硬币拆分机,将所有的一毛、五毛、一块硬币投入硬币拆分机,他就自动将所有的硬币分好了,拿出你要的就行了!

解构数组

可以从一个数组从取出你想要的一个数据或者一组数据

普通

let [a, b, c]=[1,2,3]
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3

和剩余参数一起用

let [a, b, ...c]=[1,2,3,4,5]
console.log(a) // 1
console.log(b) // 2
console.log(c) // [3,4,5]

省略一些参数

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

参数不够

let [a, b, c]=[1,2]
console.log(a) // 1
console.log(b) // 2
console.log(c) // undefined

参数不够又不想要undefined

배열 해체

배열에서 원하는 데이터 조각이나 데이터 그룹을 꺼낼 수 있습니다

보통

let [a, b, c=3]=[1,2]
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3
나머지 매개변수와 함께 사용하세요

let a, b
[a, b]=[1,2]
console.log(a, b)// 1,2
일부 매개변수 생략

let a=1,b=2
[a, b]=[b, a]
console.log(a) // 2
console.log(b) // 1

매개변수 부족

let [,match]="hello world".match(/h(e)/) 
// 匹配的结果是 ["he", "e", index: 0, input: "hello world", groups: undefined]

console.log(match) // 'e'
다시 매개변수가 부족합니다. 정의되지 않음을 원하지 않으면 기본 매개변수

let {a, b}={a:1,b:2}
console.log(a) // 1
console.log(b) // 2
를 사용하여 기존 변수를 분해하고 값을 할당할 수 있습니다.

let {a,...b}={a:1,b:2,c:3}
console.log(a) // 1
console.log(b) // {b:2,c:3}
흥미로운 배열 구조 분해 밤나무

2개 교환 변수

let {a, b, c}={a:1,b:2}
console.log(a) // 1
console.log(b) // 2
console.log(c) // undefined
정규 일치 결과 가져오기

let {a, b, c=3}={a:1,b:2}
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3
객체를 해체하면

객체 또는 하위 객체

일반

let {a:aa, b:bb}={a:1,b:2}
console.log(aa) // 1
console.log(bb) // 2
나머지 속성

let {a:aa, b:bb, c:cc=3}={a:1,b:2}
console.log(aa) // 1
console.log(bb) // 2
console.log(cc) // 3
속성이 충분하지 않음

에서 객체의 속성 값을 꺼낼 수 있습니다.

let {name, books:[book]}={name:"haha",books:['book1']}
console.log(name) // 'haha'
console.log(book) // 'book1'
속성이 충분하지 않으면 기본 매개변수를 사용할 수 있습니다🎜
for(let {name} of [{name:1},{name:2}]){
    console.log(name) // 1 2
}
🎜새 변수에 값을 할당하려면🎜
let register({name, pwd}){
    console.log(name, pwd)
}
register({name:'1',pwd:'2'}) //1,2
🎜새 변수에 값을 할당하고 기본값을 제공하세요🎜
let a,b
({a, b}={a:1,b:2}) // 需要提升优先级,否则 {a, b} 会被解析成代码块
console.log(a, b)// 1, 2
🎜매우 깊은 개체도 분해할 수 있습니다🎜rrreee🎜 반복 중 구조 분해🎜rrreee🎜소멸자 함수 매개변수🎜rrreee🎜기존 변수에 값을 할당하는 것은 매우 특별합니다🎜rrreee

위 내용은 ES6의 구조분해 할당 사용에 대한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 https://segmentfault.com/a/1190000016988939에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제