JavaScript 構造化代入の詳細な説明

JavaScript 構造化代入の詳細な説明

コンセプト

ES6 では、配列やオブジェクトから値を抽出するための、より簡潔な割り当てモードが提供されており、これをデストラクチャリングと呼びます。

例:

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

配列の分割

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

これは何を意味するのでしょうか? 次の例のように、左側の配列の項目は、右側の分解された配列の対応するインデックスの値を取得することを意味します。

[a, b, c] = [1, 2, 3]とします。
// a = 1
// b = 2
// c = 3

値を個別に宣言して割り当てる

変数を宣言することで、値を個別に分解して割り当てることができます。

: 変数を宣言し、値を割り当てる

// 変数を宣言する let a, b;
// 次に、それぞれ値 [a, b] = [1, 2] を割り当てます。
コンソールログ(a); // 1
コンソールログ(b); // 2

デフォルト値の構造化解除

分解によって抽出された値が未定義の場合は、デフォルト値を設定できます。

a、bとする。
// デフォルト値を設定 [a = 5, b = 7] = [1];
コンソールログ(a); // 1
コンソールログ(b); // 7

上記の例では、aとbの両方にデフォルト値を設定しています。

この場合、aまたはbの値が未定義の場合、設定のデフォルト値が対応する変数に割り当てられます(aには5が割り当てられ、bには7が割り当てられます)。

変数値の交換

これまでは、2つの変数を次のように交換していました。

//交換ab
c = a;
a = b;
b=c;

またはXOR方式

ただし、分割代入では、1 つの分割式で 2 つの変数値を交換できます。

a = 1 とします。
b = 3 とします。
//aとbの値を交換する [a, b] = [b, a];
コンソールログ(a); // 3
コンソールログ(b); // 1

関数によって返される配列の分解

配列を返す関数を直接分解することができます

関数c() {
  [10, 20]を返す。
}
a、bとする。
[a, b] = c();
コンソールログ(a); // 10
コンソールログ(b); // 20

上記の例では、c() の戻り値 [10, 20] を 1 行のコードで分解できます。

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

不要な戻り値を選択的にスキップできます

関数c() {
  [1, 2, 3]を返します。
}
[a, , b] = c() とします。
コンソールログ(a); // 1
コンソールログ(b); // 3

配列の残りを変数に割り当てる

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

[a, ...b] = [1, 2, 3]とします。
コンソールログ(a); // 1
console.log(b); // [2, 3]

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

知らせ:

ここで注意すべき点は、最後にカンマを入れられないことです。余分なカンマを入れると、エラーが報告されます。

[a, ...b,] = [1, 2, 3]とします。
// 構文エラー: 残りの要素に末尾のカンマがない可能性があります

ネストされた配列の分割

オブジェクトと同様に、配列もネストできます。

例:

定数color = ['#FF00FF', [255, 0, 255], 'rgb(255, 0, 255)'];
// ネストされた分割代入を使用して赤、緑、青を割り当てます
// ネストされた分割代入を使用して赤、緑、青を割り当てます
const [hex, [赤、緑、青]] = 色;
console.log(16進数、赤、緑、青); // #FF00FF 255 0 255

文字列の分割

配列の分解では、分解対象がトラバーサブル オブジェクトである場合、分解割り当てを実行できます。トラバーサブル オブジェクトとは、Iterator インターフェイスを実装するデータです。

[a, b, c, d, e] = 'hello' とします。
/*
a = 'h'
b = 'e'
c = 'l'
d = 'l'
e = 'お'
*/

オブジェクト分解

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

x = { y: 22, z: true } とします。
let { y, z } = x; // 省略形 let {y:y,z:z} = x; console.log(y); // 22
console.log(z); // 真

新しい変数名に値を割り当てる

オブジェクト分割を使用するときに変数の名前を変更できます

o = { p: 22, q: true } とします。
{p: foo, q: bar } = o とします。
コンソールログ(foo); // 22
console.log(bar); // 真

上記のコードに示すように、var {p: foo} = o はオブジェクト o のプロパティ名 p を取得し、それを foo という名前の変数に割り当てます。

デフォルト値の構造化解除

分解されたオブジェクトの値が未定義の場合、デフォルト値を設定できます。

{a = 10, b = 5} = {a: 3}とします。
コンソールログ(a); // 3
コンソールログ(b); // 5

デフォルト値を指定しながら新しいオブジェクト名に値を割り当てる

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

{a: aa = 10、b: bb = 5} = {a: 3}とします。
コンソールログ(aa); // 3
コンソールログ(bb); // 5

配列とオブジェクトの分割を一緒に使用する

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

定数プロパティ = [
  { id: 1、名前: 'Fizz' },
  { id: 2、名前: 'バズ' },
  { id: 3、名前: 'FizzBu​​zz' },
];
const [, , { name }] = props;
console.log(name); // "FizzBu​​zz"

不完全な解体

obj = {p: [{y: 'world'}] } とします。
let {p: [{ y }, x ] } = obj; //xを分解しない
// x = 未定義
// y = '世界'

オブジェクトに休止値を割り当てる

{a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}とします。
// a = 10
// b = 20
// 残り = {c: 30, d: 40}

ネストされたオブジェクトのデストラクチャリング(デストラクチャリングは無視できます)

obj = {p: ['hello', {y: 'world'}] };
{p: [x, {y}] } = objとします。
// x = 'こんにちは'
// y = '世界'
obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { }] } = obj; // yを無視
// x = 'こんにちは'

予防

宣言された変数の構造化解除には注意する

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

xとします。
1 は 0 です。

JavaScript エンジンは {x} をコード ブロックとして解釈するため、構文エラーが発生します。JavaScript がコード ブロックとして解釈するのを防ぐために、行の先頭に中括弧を記述しないでください。

正しい書き方:

xとします。
({x} = {x: 1});

正しい書き方は、分解代入ステートメント全体を括弧で囲むことで、正しく実行されます。

関数パラメータの分割代入

関数パラメータは分割代入を使って割り当てることもできる

関数 add([x, y]) {
	x + y を返します。
}
追加([1, 2]);

上記コードでは、add関数の引数は表面上は配列になっていますが、引数を渡す際に配列引数を変数xとyに分解しています。関数にとってはxとyを直接渡しているのと同じことになります。

脱構築の用途

分割代入には多くの用途がある

変数の値の交換

x = 1 とします。
y = 2とします。
y = 0;

上記のコードは、x と y の値を入れ替えます。これは簡潔なだけでなく、読みやすく、意味も明確です。

関数から複数の値を返す

関数は 1 つの値しか返せません。複数の値を返したい場合は、配列またはオブジェクトでのみこれらの値を返すことができます。分割代入を使用すると、バッグから何かを取り出すだけで、オブジェクトまたは配列からこれらの値を取得できます。

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

JSONデータの抽出

構造化代入は、JSON オブジェクトからデータを抽出する場合に特に便利です。

例:

jsonData = {
  id: 42,
  ステータス: 「OK」、
  データ: [867, 5309]
};
{id、ステータス、データ:数値} = jsonData;
console.log(ID、ステータス、番号);
// 42, "OK", [867, 5309]

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

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • ES6 における JavaScript 分割代入の一般的な使用法の概要
  • JavaScript の構造化代入を理解するのに役立つ記事
  • JavaScript 構造化分解割り当ての実践ガイド
  • JS ES の新機能、変数分離割り当て
  • JavaScript の構造化代入の一般的なシナリオと例 5 つ
  • js における浅いコピーと深いコピーの詳細な説明
  • JS ES6 変数分割代入の詳細な説明
  • JavaScript の割り当て、浅いコピーと深いコピーの違い

<<:  純粋な CSS で DIV サスペンションを実装するサンプル コード (固定位置)

>>:  Linux でのインストール中にソフトウェア パッケージの依存関係レポートに関連する問題の解決策

推薦する

CSS を使用して要素のスクロールバーを非表示にするサンプルコード

どの要素でもスクロールできるようにしながら、スクロールバーを非表示にするにはどうすればよいでしょうか...

W3C チュートリアル (9): W3C XPath アクティビティ

XPath は、XML ドキュメントの一部を選択するための言語です。 XPath は、XSLT、XQ...

Centos7でglibcをアップグレードするとシステム異常(起動できない)になる場合の解決方法

目次問題の原因:解決:解決:私は Centos7 を使用しています (理論的にはこの方法は Cent...

Vue の匿名スロットと名前付きスロットの詳細な説明

目次1. 匿名スロット2. 名前付きスロット要約するスロット (slot) は、Vue のコンテンツ...

HTML+CSS+JavaScript でシンプルな三目並べゲームを作成する

目次HTMLの実装CSSを追加Javascript部分の実装デモアドレス HTMLの実装まず、hea...

Vueはシンプルなショッピングカートの例を実装します

この記事では、参考までに、シンプルなショッピングカートケースを実装するためのVueの具体的なコードを...

Html+CSS 描画三角形アイコン

まずはレンダリングを見てみましょう: XML/HTML コードコンテンツをクリップボードにコピー&l...

Alibaba Cloud CentOS 7 に yum を使用して MySQL をインストールする正しい方法 (推奨)

yum クイックインストール mysql yumリポジトリを追加する rpm -Uvh http:...

MySQL のテーブルリターンとインデックスカバレッジの例の詳細な説明

目次インデックスタイプインデックス構造非クラスター化インデックスクエリインデックスカバー要約するイン...

HTML ボディタグと HTML でよく使われる制御タグの詳細な説明

1. <body> タグ: Web ページの本体をマークするために使用されます。body...

jsはシンプルな英語-中国語辞書を実装します

この記事では、参考までに、簡単な英中辞典を実装するためのjsの具体的なコードを紹介します。具体的な内...

Vueはズームイン、ズームアウト、ドラッグ機能を実装しています

この記事では、参考までに、ズームインとズームアウトのドラッグ機能を実現するためのVueの具体的なコー...

Canonical が Flutter で Linux デスクトップ アプリを有効化 (推奨)

Google の Flutter の目標は、どのプラットフォームを使用していても、ネイティブの速度...

CentOS での MySQL ログイン 1045 問題を解決する

アプリケーション全体を CentOS にデプロイする必要があるため、当然ながらデータベース操作は不可...

Centos7.4 システムに yum ソースから mysql 5.6 をインストールする

システム環境: centos7.4 1. データベースがインストールされているかどうかを確認します。...