JavaScript の構造化代入について理解しましょう-jsチュートリアル-php.cn

この記事では、javascriptに関する関連知識を提供します。主に、配列の構造化、オブジェクトの構造、構造化の使用など、代入の構造化に関する関連問題を紹介します。お役に立てば幸いです。みんな助かります。

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

コンセプト

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

例:

[a, b] = [50, 100]; console.log(a); // expected output: 50 console.log(b); // expected output: 100 [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(rest); // expected output: [30, 40, 50]

ログイン後にコピー

配列構造化

配列の構造化は非常にシンプルかつ簡潔です。リテラルは代入式の左側で使用されます。配列リテラル内の各変数名は、構造化された配列の同じインデックス項目にマップされます。

これは何を意味しますか?以下の例のように、左側の配列項目は右側の分割された配列の対応するインデックスの値をそれぞれ取得しています

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

ログイン後にコピー

個別代入の宣言

分割して代入することができます変数宣言で値を個別に指定する

例: 変数を宣言し、それぞれに値を割り当てる

// 声明变量 let a, b; // 然后分别赋值 [a, b] = [1, 2]; console.log(a); // 1 console.log(b); // 2

ログイン後にコピー

デフォルト値の構造を解除する

値が取り出された場合分割することでunknownの場合、デフォルト値を設定できます:

let a, b; // 设置默认值 [a = 5, b = 7] = [1]; console.log(a); // 1 console.log(b); // 7

ログイン後にコピー

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

変数値を交換します

以前は、## を使用して 2 つの変数を交換していました。#

//交换abc = a;a = b;b = c;

ログイン後にコピー

XORmethod

ただし、代入を分割することで、交換することができます。構造化式内の 2 つの変数値

let a = 1;let b = 3;//交换a和b的值[a, b] = [b, a];console.log(a); // 3console.log(b); // 1

ログイン後にコピー

関数によって返される配列の構造化

#戻り値が配列である関数を直接分解できます

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

ログイン後にコピー

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

戻り値を無視します(または項目をスキップ)

「不要な戻り値を渡す」を選択してスキップできます

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

ログイン後にコピー

#代入配列の残りの値を変数に代入します

配列の分割を使用すると、代入配列の残りの部分をすべて代入できます。変数を与えます。

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

ログイン後にコピー

このようにすると、b も配列になり、配列内の項目はすべて残りの項目

注:

ここで注意してください最後にカンマを書くことはできません余分なカンマがあるとエラーが報告されます

let [a, ...b,] = [1, 2, 3];// SyntaxError: rest element may not have a trailing comma

ログイン後にコピー

ネストされた配列の構造化

オブジェクトと同様に、配列もネストされた構造化できます。

例:

const color = ['#FF00FF', [255, 0, 255], 'rgb(255, 0, 255)']; // Use nested destructuring to assign red, green and blue // 使用嵌套解构赋值 red, green, blue const [hex, [red, green, blue]] = color; console.log(hex, red, green, blue); // #FF00FF 255 0 255

ログイン後にコピー

String destructuring

配列の分割では、分割対象がトラバース可能なオブジェクトであれば、All を分解して代入することができ、そのオブジェクト、つまり Iterator インターフェースを実装したデータをトラバースすることができます

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;的简写 console.log(y); // 22 console.log(z); // true

ログイン後にコピー

#代入新しい変数名を指定します

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

let o = { p: 22, q: true }; let { p: foo, q: bar } = o; console.log(foo); // 22 console.log(bar); // true

ログイン後にコピー

上記のコードvar {p: foo} = o

オブジェクトを取得します o プロパティ名 p が foo という名前の変数に割り当てられます

分割デフォルト値

分割で取り出したオブジェクトの値が

unknownの場合、デフォルト値

let { a = 10, b = 5 } = { a: 3 }; console.log(a); // 3 console.log(b); // 5

ログイン後にコピー

## を設定することができます。

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

前述したように、新しいオブジェクト名に値を割り当てます。ここで、これを与えることができます。新しいオブジェクト名は次のようになります。デフォルト値。構造化されていない場合は、デフォルト値が自動的に使用されます。

let { a: aa = 10, b: bb = 5 } = { a: 3 }; console.log(aa); // 3 console.log(bb); // 5

ログイン後にコピー

配列とオブジェクトの両方の構造化を使用する

構造内では、配列とオブジェクトは一緒に使用できます

const props = [ { id: 1, name: 'Fizz' }, { id: 2, name: 'Buzz' }, { id: 3, name: 'FizzBuzz' }, ]; const [, , { name }] = props; console.log(name); // "FizzBuzz"

ログイン後にコピー

不完全な構造化

let obj = {p: [{y: 'world'}] }; let {p: [{ y }, x ] } = obj;//不解构x // x = undefined // 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 = 'hello' // y = 'world' let obj = {p: ['hello', {y: 'world'}] }; let {p: [x, { }] } = obj;//忽略y // x = 'hello'

ログイン後にコピー

注意事項

宣言された変数を構造化に使用する場合は注意してください

エラーデモンストレーション:

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

ログイン後にコピー

JavaScript エンジンは

{x}

をコードブロックとして認識するため、構文エラーが発生します。JavaScript が次のように解釈しないように、行の先頭に中かっこを記述することは避けなければなりません。コードブロック正しい書き方:

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

ログイン後にコピー

正しい書き方は、構造化代入文全体を括弧で囲むことです。そうすれば、次の構造化代入を正しく実行できます。関数パラメータ

関数のパラメータは構造化代入も使用できます

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

ログイン後にコピー

上記のコードでは、関数 add のパラメータは表面上は配列ですが、パラメータを渡すと配列パラメータは構造化されません変数 x と y については、関数の内部では、x と y を直接渡すのと同じです構造化の使用法

分割代入を使用する方法は多数あります

変数の値を交換する

let x = 1; let y = 2; [x, y] = [y, x];

ログイン後にコピー

上記のコードは、x との値を交換します。 y. この記述方法は、簡潔であるだけでなく読みやすく、セマンティクスが明確です

関数からの戻り値複数の値

関数は 1 つの値のみを返すことができます。複数の値を返したい場合は、配列またはオブジェクトでのみそれらの値を返すことができます。分割代入がある場合は、オブジェクトまたはオブジェクトから返すことができます。配列からこれらの値を取得するのは次のようなものですバッグから何かを取り出す

// 返回一个数组function example() { return [1, 2, 3];}let [a, b, c] = example(); // 返回一个对象 function example() { return { foo: 1, bar: 2 }; }let { foo, bar } = example();

ログイン後にコピー

提取JSON数据

解构赋值对于提取JSON对象中的数据，尤其有用

示例：

let jsonData = { id: 42, status: "OK", data: [867, 5309] }; let { id, status, data: number } = jsonData; console.log(id, status, number); // 42, "OK", [867, 5309]

ログイン後にコピー

使用上面的代码，我们就可以快速取出JSON数据中的值