ホームページ > 記事 > ウェブフロントエンド > ES6 データの分解についての深い理解
ES6 データ分解については誰もが聞いたことがあると思います。この記事は主に ES6 データ分解の使用方法を理解するのに役立ちます。非常に優れていると思いますので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。
オブジェクト分割
オブジェクト分割構文は、代入ステートメントの左側でオブジェクトリテラルを使用します
let node = { type: true, name: false } //既声明又赋值 let { type, name } = node; //或者先声明再赋值 let type, name ({type,name} = node); console.log(type);//true console.log(name);//false
型識別子と名前識別子は、ローカル変数を宣言するだけでなく、対応する属性値も読み取りますオブジェクトの .
構造化代入式の値は、式の右側の値です。構造化式の右側が null または未定義と評価されると、エラーがスローされます。
デフォルト値
構造化代入ステートメントを使用する場合、指定されたローカル変数がオブジェクト内に同じ名前の属性を見つけられない場合、変数には値 unknown が割り当てられます
let node = { type: true, name: false }, type, name, value; ({type,value,name} = node); console.log(type);//true console.log(name);//false console.log(value);//undefined
オプションで定義します。 指定されたプロパティが存在しない場合に使用するデフォルト値。
let node = { type: true, name: false }, type, name, value; ({ type, value = true, name } = node); console.log(type);//true console.log(name);//false console.log(value);//true
異なるローカル変数名に値を割り当てる
let node = { type: true, name: false, value: "dd" } let { type: localType, name: localName, value: localValue = "cc" } = node; console.log(localType); console.log(localName); console.log(localValue);
type:localType この構文は、type という名前の属性を読み取り、その値を変数 localType に格納することを意味します。この構文は、従来のオブジェクト リテラルの構文とは逆です
ネストされたオブジェクト構造
let node = { type: "Identifier", name: "foo", loc: { start: { line: 1, column: 1 }, end: { line: 1, column: 4 } } } let { loc: localL, loc: { start: localS, end: localE } } = node; console.log(localL);// start: {line: 1,column: 1},end: {line: 1,column: 4} console.log(localS);//{line: 1,column: 1} console.log(localE);//{line: 1,column: 4}
コロンの右側に中かっこがある場合、ターゲットがオブジェクト内でより深くネストされていることを意味します (loc: { start: localS, end: localE})
2 番目のデータの構造化
配列の構造化の構文は、オブジェクト リテラルが配列リテラルに置き換えられる点を除いて、オブジェクトの構造化と非常によく似ています。
let colors = ["red", "blue", "green"]; let [firstC, secondC, thirdC, thursC = "yellow"] = colors; console.log(firstC//red console.log(secondC);//blue console.log(thirdC);//green console.log(thursC);//yellow
分割モードでは一部の項目を無視して、対象の項目にのみ変数名を指定することもできます。
let colors = ["red","green","blue"]; let [,,thirdC] = colors; console.log(thirdC);//blue
thirdC の前のコンマは、配列内の前の項目に提供されるプレースホルダーです。このメソッドを使用すると、他の項目に名前を付けることなく、配列内の任意の場所から値を簡単に取得できます。
代入の構造化
let colors = ["red","green","blue"], firstColor = "black", secondColor = "purple"; [firstColor,secondColor] = colors; console.log(firstColor);//red console.log(secondColor);//green
配列の構造化には非常にユニークなユースケースがあり、2 つの変数の値を簡単に交換できます。
let a =1,b =2; [a,b] = [b,a]; console.log(a);//2 console.log(b);//1
ネストされた分解
let colors = ["red", ["green", "blue"], "yellow"]; let [firstC, [, ssc]] = colors; console.log(ssc);//blue
残りのアイテムを使用して配列のクローンを作成できます
let colors = ["red", "green", "blue"]; let [firstC, ...restC] = colors; console.log(firstC); console.log(...restC); console.log(restC[0]);//green console.log(restC[1]);//blue
トリプルミックスデコンストラクション
let colors = ["red", "green", "blue"]; let [...restC] = colors; console.log(restC);//["red", "green","blue"]
関連する推奨事項:
js が 26 文字を超える Excel テーブルをエクスポートする場合の ES6 の解決策
Babel を使用して es6 構文を es5 に変換する簡単な方法
以上がES6 データの分解についての深い理解の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。