es6 の分解とは何を意味しますか?

es6 では、構造化とは、配列やオブジェクトから特定のパターンに従って値を抽出し、変数に値を割り当てる行為を指します。一般的なものには、オブジェクト構造、配列の構造化、および混合構造化が含まれます。データの構造化の一種で、情報の抽出を簡素化するために構造をより小さな部分に分解するプロセス。

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

es6 での構造化とは何ですか

構造化: Baidu 百科事典では構造分解を意味します。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

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

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 ブロックのコードとして、等号のみを使用すると、エラーが報告されます。

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

ネストされたオブジェクトの構造化では、引き続き中括弧を使用します。さらに深く進むための構造化の最初のレベルです。1 つのレイヤーで検索します。最初に栗を見てみましょう:

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

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

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

配列の構造化

配列の構造化では配列リテラルが使用され、すべての構造化操作は配列内で完了します。また、配列の構造化はオブジェクト リテラル構文のように使用する必要はありません。オブジェクトのプロパティ。

let colors = [ 'red', 'green', 'blue' ]
let [ firstColor, secondColor ] = colors
console.log(firstColor) // 'red'
console.log(secondColor) // 'green'

配列分割構文では、主に配列内の位置に基づいて値を選択し、それを任意の変数に格納できます。明示的に宣言されていない要素は直接無視されます。

let [ , , thirdColor ] = colors
console.log(thirdColor) // 'blue'

配列分割の変数交換

従来の ES5 では、値を交換するには通常、転送として 3 番目の一時変数を導入する必要がありますが、配列分割代入構文を使用する場合、追加の変数を追加する必要はありません。

// ES5中互换值：
 let a = 1, b = 2, tmp;
 tmp = a
 a = b
 b = tmp
 console.log(a, b) // 2, 1
 // ES6中互换值
 let a = 1, b = 2;
 [ a, b ] = [b, a]
 console.log(a, b) // 2, 1

ネストされたデータの構造化

 let colors = [ 'red', [ 'green', 'lightgreen'], 'blue' ]
 let [ firstColor, [ secondColor, thirdColor ], fourthColor ] = colors
 console.log(firstColor) // red
console.log(secondColor) // green
console.log(thirdColor) // lightgreen
console.log(fourthColor) // blue

デフォルト値

配列構造化代入式の配列内の任意の位置にデフォルト値を追加することもできます。指定位置 存在しない場合、または値が未定義の場合は、デフォルト値が使用されます

let colors = [ 'red' ]
let [ firstColor, secondColor = 'green' ] = colors
console.log(firstColor) // red
console.log(secondColor) // green

不定要素

...これは展開演算子です。その目的は誰もが知っているはずです。配列を操作するときに配列を文字列に展開するために使用できます。配列の構造化では、... 構文を使用して、配列内の残りの要素を特定の変数に割り当てることができます。

let colors = [ 'red', 'green', 'blue' ]
let [ firstColor, ...restColors ] = colors
console.log(firstColosr) // 'red'
console.log(restColors.length); // 2
console.log(restColors[0]); // "green"
console.log(restColors[1]); // "blue"

配列コピー

ES5 では、開発者は配列のクローンを作成するために concat() メソッドをよく使用します

var colors = [ "red", "green", "blue" ];
var clonedColors = colors.concat();
console.log(clonedColors); //"[red,green,blue]"

concat() メソッドはもともと 2 つの配列を接続するように設計されていました。呼び出し時にパラメータが渡されない場合、現在の関数のコピーが返されます。

ES6 では、不定要素の構文を使用して同じ目標を達成できます。

let colors = [ "red", "green", "blue" ];
let [ ...clonedColors ] = colors;
console.log(clonedColors); //"[red,green,blue]"

非構造化配列では、 independent 要素は最後のエントリである必要があります。要素の後にカンマを追加すると、プログラムで構文エラーがスローされます。

混合分解

let err = {
    errors: [
        {
            msg: 'this is a message'
        },
        {
            title: 'this is a title'
        }
    ]
}

上記のコードでは、err オブジェクトにはエラーが含まれており、errors は配列であり、新しいオブジェクトが含まれています。オブジェクトの中で。上記の栗を段階的に分解して分解することができます:

let { errors } = err
let [ firstArr ] = errors
let { msg } = firstArr
console.log(msg) // 'this is a message'
也可以这样解构
let [ , { title }] = err.errors
console.log(title) // 'this is a title'
let [{ msg }] = err.errors
console.log(msg) // 'this is a message'

より複雑なものを見てみましょう. 実際、順序さえわかれば、これはまだ非常に簡単に理解できます。

let node = {
    type: "Identifier",
    loc: {
      start: {
      line: 1,
      column: 1
       }
    },
    range: [0, 3]
};
let {
    loc: { start },
    range: [ startIndex ]
  } = node;
console.log(start.line); // 1
console.log(start.column); // 1
console.log(startIndex); // 0

実際の使用法 - パラメータの分解

は、通常、以下に示すように、関数パラメータをカプセル化するときに使用されます。

// options 上的属性表示附加参数
function setCookie(name, value, options) {
       options = options || {};
       let secure = options.secure,
       path = options.path,
       domain = options.domain,
       expires = options.expires;
       // 设置 cookie 的代码
}
//可以改写为：对options进行解构并赋予默认值
function setCookie(name, value, { secure, path, domain, expires } = {}) {
// ...
}

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

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