es6 の分解とは何ですか

es6 では、構造化とは、特定のパターンに従って配列やオブジェクトから値を抽出し、変数に値を代入するプロセスであり、データ結果を分割してより小さな部分に分割するプロセスです。情報の抽出を簡素化するという目的を達成するために、より一般的なのはオブジェクトの構造化、配列の構造化、および混合の構造化です。

このチュートリアルの動作環境: Windows 10 システム、ECMAScript バージョン 6.0、Dell G3 コンピューター。

es6 の構造化とは

構造化: Baidu 百科事典では構造分解を意味します。ES6 では、配列やオブジェクトから値を抽出し、特定のパターンに従って変数に値を割り当てることができます。構造化のためと呼ばれます。

開発においてより一般的なものには、オブジェクトの構造化、配列の構造化、および混合の構造化が含まれます。これは、情報の抽出を簡素化するために、データ構造をより小さな部分に分割するプロセスです。

既存のオブジェクトまたは配列を 1 つずつ分割して、必要なデータを抽出します。これは、データ構造を破壊し、より小さな部分に分割するプロセスです。

ES6 では、抽出する値に一致する新しいモードを使用します。代入の構造化にはこのモードが使用されます。パターンは、分解しているデータ構造をマップし、パターンに一致するデータのみが抽出されます。

オブジェクトの構造化の例

オブジェクト内の値を取得する従来の方法

let node = {
    type: 'Identifier',
    name: 'foo'
}
console.log(node.type) // Identifier
console.log(node.foo) // foo

構造化を使用する

let node = {
    type: 'Identifier',
    name: 'foo'
}
let { type, name } = node
console.log(type) // Identifier
console.log(name) // foo

指定されたローカル変数名が存在しない場合オブジェクトの場合、このローカル変数には未定義の値が割り当てられます

let { type, name, value } = node
console.log(type) // Identifier
console.log(name) // foo
console.log(value) // undefined

指定された属性が存在しない場合は、存在しない属性に対して任意のデフォルト値を定義できます

let { type, name, value = true } = node
console.log(type) // Identifier
console.log(name) // foo
console.log(value) // true

構造化と代入のための新しい変数名

let arr = {
  six: '男',
  age: 19
}
let {six:newSix, age:newAge} = arr
console.log(six, age) // six is not defined
console.log(newSix, newAge) // 男 19

上記を見ておかしいと思いませんか? 従来のオブジェクトの代入では、左側に 4 つの属性、右側に値があります。ただし、分割では右側が属性、左側が値となるため、新しい変数名は右側になります。

let、var、または const を使用してオブジェクトを構造解除する場合、構造化されたオブジェクトの値が存在してはなりません。

var、let、const の割り当てを使用しない場合、構造化ステートメントを () で囲む必要があります。

（{type，name} = node);//{}在js中作为代码块，单独使用加等号会报错会报错

ネストされたオブジェクトの構造化

ネストされたオブジェクトのオブジェクトの構造化では、構造化の最初のレベルで引き続き中括弧を使用して、次のレベルにドリルダウンして検索します。まずクリを見てみましょう:

let node = {
    type: "Identifier",
    name: "foo",
    loc: {
        start: {
            line: 1,
            column: 1
        },
        end: {
            line: 1,
            column: 4
        }
    }
}

上記はネストされたオブジェクトです。オブジェクト ノード、まず最初のレイヤーを分解しましょう

let { loc, type, name } = node // {} Identifier foo

{} 内の属性の順序を意図的に混乱させていることがわかります。結果は依然として正しく出力されているため、対応する特定のメソッドは次のとおりであると推測できます。名前に基づくものであり、順序とは関係ありません。

2 番目のレイヤーの分解を続けます

let { loc: { start }} = node;
console.log(start.line); // 1
console.log(start.column); // 4

ここでは、start を新しいカスタム ローカル変数に割り当てることもできます (newStart に割り当てることを前提としています)

let { loc: { start: newStart }} = node
console.log(newStart.line) // 1
console.log(newStart.column) // 4

概要は次のとおりです。 :

コロンより前のすべての識別子はオブジェクト内の取得位置を表し、右側は代入される変数名です。コロンの後に中括弧がある場合は、最終的に代入される値を意味しますオブジェクト内のより深いレベルにネストされています。

【関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]

以上がes6 の分解とは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。