JavaScript の構造化代入について理解しましょう

関連する推奨事項: JavaScript 学習チュートリアルの

概念

ES6 は、配列やオブジェクトから値を抽出するためのより簡潔な割り当てモードを提供します。これは、構造化と呼ばれます

例:

[a, b] = [50, 100];
コンソール.ログ(a);
// 期待される出力: 50
コンソール.ログ(b);
// 期待される出力: 100

[a, b, ...残り] = [10, 20, 30, 40, 50];
コンソール.ログ(残り);
// 期待される出力: [30, 40, 50]

配列の構造化

配列の構造化は非常に単純かつ簡潔です。配列リテラル内の各変数名は、構造化された変数の同じインデックスにマップされます。配列の項目は何を

意味しますか? 以下の例のように、左側の配列内の項目は、右側の非構造化配列の対応するインデックスの値を取得します。

let [a, b, c] = [1, 2、3];
// a = 1
// b = 2
// c = 3 は、

変数宣言を通じて

個別に割り当てを宣言します。

例: 変数を宣言し、値を個別に割り当てます。

// 変数を宣言します。
// 次に値を割り当てます [a, b] = [1, 2];
コンソール.log(a); // 1
console.log(b); // 2

デフォルト値

分割時に取り出した値がundefined場合は、デフォルト値を設定できます

。
// デフォルト値を設定 [a = 5, b = 7] = [1];
コンソール.log(a); // 1
console.log(b); // 7

上記の例では、a と b の両方にデフォルト値を設定しています。この場合、a または b の値がundefinedの場合、設定されたデフォルト値が対応する値に割り当てられます。変数 (5 は a に割り当てられ、7 は b に割り当てられます)

変数値を交換

する場合、常に

//exchange abc = a;a = b;b = c;

を

ただし、分解では代入では、構造化式で 2 つの変数の値を交換できます

let a = 1 let b = 3;//a と b の値を交換します [a, b] = [b, a]; console.log(a); // 3console.log(b); // 1

関数によって返される配列を分解します。

c

() {
  return [10, 20];}let a, b;[a, b] = c();console.log(a); // 10console.log(b); // 20

上記の例では、 ** c()** の戻り値 [10, 20] を別のコード行で使用すると、

戻り値を無視する (または特定の項目をスキップする)

ことができ、

関数 c ( ) {
  return [1, 2, 3];}let [a, , b] = c();console.log(a); // 1console.log(b); // 3

配列の残りの値を a に代入します。

化

を使用する場合、割り当てられた配列の残りの部分をすべて変数に割り当てることができます。

let [a, ...b] = [1, 2, 3];console.log(a); .log(b ); // [2, 3]

この場合、 b も配列になり、配列内の項目はすべて残りの項目になります

。
ここで、末尾にカンマを記述できないことに注意してください。余分なカンマがある場合、エラーが報告されます

let [a, ...b,] = [1, 2, 3];// SyntaxError:rest element末尾にコンマを付けることはできません

。

た配列の構造化 オブジェクト

と

同様に、配列もネストできます。

// ネストされた分割構造を使用して、赤、緑、青を割り当てます
// ネストされた分割構造を使用して、赤、緑、青を割り当てます
const [hex, [赤、緑、青]] = 色;
console.log(hex, red, green, blue); // #FF00FF 255 0 255

文字列の構造化

配列の構造化では、構造化の対象が通過可能なオブジェクトの場合、構造化と代入を実行できます。データ

let [a, b, c, d, e] = 'hello';/*
a = 'h'
b = 'e'
c = 'l'
d = 'l'
e = 'o'
*/

オブジェクトの分解

基本的なオブジェクトの分解

let x = { y: 22, z: true };
let { y, z } = x; // let {y:y,z:z} = x の省略形; // 22
console.log(z); // true

は新しい変数名に割り当てられます。

オブジェクトの構造化を使用する場合、変数の名前は変更できます。

let o = { p: 22, q: true };
let { p: foo, q: bar } = o;

コンソール.log(foo); // 22
console.log(bar); // 上記のコードは true

var {p: foo} = oオブジェクト o のプロパティ名 p を取得し、それを foo という名前の変数に割り当て

ます

。分割による出力はundefinedです。デフォルト値

let { a = 10, b = 5 } = { a: 3 }; を設定できます。

コンソール.log(a); // 3
console.log(b); // 5

新しいオブジェクト名に値を割り当て、デフォルト値を指定します。

前述のように、ここで新しいオブジェクト名に値を割り当てます。分解されていない場合は、デフォルト値が自動的に使用されます

let { a: aa = 10, b: bb = 5 } = { a: 3 };

コンソール.log(aa); // 3
console.log(bb); // 5

配列とオブジェクトの

構造化を同時に使用する

const props = [
  { id: 1, 名前: 'フィズ' },
  { id: 2, 名前: 'バズ' },
  { id: 3、名前: 'フィズバズ' }、
];

const [, , {名前}] = 小道具;
console.log(name); // 「FizzBu​​zz」

は完全には分解されていません

let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;//x を分解しません

// x = 未定義
// y = 'world' は

残りの値をオブジェクトに代入します

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
//rest = {c: 30, d: 40}

ネストされたオブジェクトの構造化 (構造化は無視できます)

let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'こんにちは'
// y = 'ワールド'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { }] } = obj;// y を無視する
// x = 'hello'

注:

には宣言された変数を使用することに注意してください

:

let x;{x} = {x: 1};

JavaScript エンジンは{x}をコード ブロックとして認識し、次のような構文が生成されます。エラー。JavaScript がコード ブロックとして解釈しないように、行の先頭に中かっこを記述することは避けたいと考えています。

正しい

書き方

:

let

function add([x, y])

{

	return x + y;}add([1, 2]);

上記のコードでは、関数 add のパラメータは表面上の配列ですが、パラメータを渡すと、配列パラメータが変数 x と y に分解されます。関数 内部的には、x と y を直接渡すのと同じです。

変数の値を交換する

方法

(x = 1 の場合)

を使用することです。

y = 2 とします。
[x, y] = [y, x];

複数の値を返す

セマンティクスも明確です。

関数からは

1 つの値しか返せません。複数の値を返したい場合は、それらの値を配列またはオブジェクトに入れて、それらの値を取得して返すことしかできません。オブジェクトまたは配列からの検索は、何かを検索するようなものです

// 配列関数を返します example() {
  return [1, 2, 3];}let [a, b, c] = example();
  // オブジェクト関数を返します example() {
  戻る {
    フー: 1、
    バー: 2
  };
  }let { foo, bar } = example();

JSON

データの

、

JSON オブジェクト内のデータを抽出する場合に特に便利です。

  ID:42、
  ステータス: "OK"、
  データ: [867、5309]
};

let { ID、ステータス、データ: 数値 } = jsonData;

console.log(id, ステータス, 番号);
// 42, "OK", [867, 5309]

上記のコードを使用すると、JSON データの値をすばやく取得できます。

関連する推奨事項: JavaScript チュートリアル

上記は、For の JavaScript の構造化割り当ての詳細を理解するためのものです。詳細については、php に注目してください。中国語の Web サイトのその他の関連記事もご覧ください。