ホームページ > ウェブフロントエンド > jsチュートリアル > ES6 での構造化代入の使用の説明

ES6 での構造化代入の使用の説明

不言
リリース: 2018-11-14 15:45:21
転載
1954 人が閲覧しました

この記事の内容は、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
ログイン後にコピー

パラメータが不足しているため必要ありません未定義、デフォルトのパラメータを使用できます

let [a, b, c=3]=[1,2]
console.log(a) // 1
console.log(b) // 2
console.log(c) // 3
ログイン後にコピー

Yes 既存の変数の構造化代入

let a, b
[a, b]=[1,2]
console.log(a, b)// 1,2
ログイン後にコピー

興味深い配列の構造化チェスト

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}
ログイン後にコピー

属性が不十分です

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
ログイン後にコピー

以上がES6 での構造化代入の使用の説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:https://segmentfault.com/a/1190000016988939
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート