ES6 データ分解の詳細な解釈

この記事では、ES6 でのデータ分解の使用について詳しく説明し、参考にさせていただきます。

1 オブジェクトの構造化

オブジェクトの構造化構文は、代入ステートメントの左側でオブジェクト リテラルを使用します

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"]

3つの混合分解

let node = {
type: "Identifier",
name: 'foo',
loc: {
  start: {
    line: 1,
    column: 1
  },
  end: {
    line: 1,
    column: 4
  }
},
range: [0, 3]
}

let {
type,
name: localName,
loc: {
  start: {
    line: ll
  },
  end: {
    column: col
  }
},
range: [, second]
} = node;

console.log(type);//Identifier
console.log(localName);//foo
console.log(ll);//1
console.log(col);//4
console.log(second);//3

上記は皆さんのためにまとめました、私は将来的にはそうなることを願っています。誰にとっても役立ちます。

関連記事:

Android に React ネイティブ ブリッジングを実装する方法と具体的な手順は何ですか?

AngularJSの$windowウィンドウオブジェクトの概念の詳細な解釈

VueJsでwindow.resizeを監視する方法とそれを具体的に実装する方法?

angularjs でページ アダプテーションを実装するにはどうすればよいですか?

vueでカスタムディレクティブを開発する方法

以上がES6 データ分解の詳細な解釈の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。