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

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

不言
풀어 주다: 2018-11-14 15:45:21
앞으로
1968명이 탐색했습니다.

이 기사의 내용은 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으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿