Javascript 構造化代入の詳細

Javascript 構造化代入の詳細

1. 配列の分解

[a, b, c] = [1,2,3]とする
コンソール.log(a, b, c) // 1 2 3


配列に加えて、文字列などの反復可能なオブジェクトも構造化分解できる。

[最初、2番目] = "彼"とする

console.log(first, second) // 彼

2. オブジェクトの分解

代入の右側はオブジェクトで、左側は中括弧で囲まれたカンマで区切られた変数名です。

{a, b, c} = {a:1, b:2, c:3} とします。
コンソール.log(a,b,c) // 1 2 3


左側の変数名は、オブジェクト内のプロパティ名と同じである必要があります。一致しない場合は、左側の変数名にundefinedが割り当てられます。例えば:

{a,b,d} = {a:1,b:2,c:3}とします。
console.log(a,b,d) // 1 2 未定義


変数名が属性名と異なる場合は、コロン区切りを使用して変数名に属性名を割り当てることができます。

例えば:

{a,b,c:d} = {a:1,b:2,c:3}とします。
コンソール.log(a,b,d) // 1 2 3


3. 不完全な解体

分割代入の左側の変数の数は、右側の配列の要素の数と一致しない場合があります。

(1)左側の余分な変数は未定義に設定されます。

[a, b, c] = [1, 2]とする

console.log(a, b, c) // 1 2 未定義

(2)右側の余分な値は直接無視される

[a, b, c] = [1, 2, 3, 4]とする

コンソール.log(a, b, c) // 1 2 3


(3)左側にカンマを入れると、特定の値をスキップできる。

[a, , c] = [1, 2, 3, 4]とする

コンソールログ(a, c) // 1 3


(4)右側の余分な値は次のようにして変数に集めることができる。

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

コンソール.log(a, b, c) // 1 2 [3, 4]


4. 分割代入を使用して変数交換を実装する

a = 1、b = 2 とします。
[a, b] = [b, a]
コンソールログ(a) //2
コンソールログ(b) //1

Javascript分解課題の詳細に関するこの記事はこれで終わりです。より関連性の高いJavascript分解課題の内容については、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JS 構造化分解の 5 つの興味深い使い方
  • ES6 バージョンの JavaScript で分割代入を解析する
  • JavaScript の構造化代入を理解するのに役立つ記事
  • JavaScript オブジェクト分割の使用例の分析
  • JavaScript 構造化分解割り当ての実践ガイド
  • JavaScript 構造化代入の詳細な説明
  • JavaScript ES6 分割演算子の理解と応用
  • ES6 における JavaScript 分割代入の一般的な使用法の概要

<<:  CSS3は、欠けた角の長方形、折り畳まれた角の長方形、欠けた角の境界線を実装しています。

>>:  HTMLファイル内の中国語の文字化けとブラウザでの表示の問題

推薦する

XHTML 入門チュートリアル: XHTML タグ

XHTML タグの紹介<br />おそらく、前のセクションで、XHTML ファイルと通常...

MySQL トリガー構文とアプリケーション例

この記事では、例を使用して MySQL トリガーの構文とアプリケーションを説明します。ご参考までに、...

JS での Reduce() メソッドの使用の概要

目次1. 文法2. 例3. その他の関連方法長い間、reduce() メソッドの具体的な使い方を理解...

webkit-box-reflect を巧みに使用してさまざまな動的効果を実現する (要約)

かなり前の記事で、 -webkit-box-reflectプロパティについて説明しました。リフレクシ...

MySQL のソート関数 field() の詳細な例

序文私たちの日常の開発プロセスでは、ソートが頻繁に使用され、そのような要求がある場合もあります。たと...

JS は VUE コンポーネントに基づいて都市リスト効果を実装します

この記事の例では、VUEコンポーネントに基づいて都市リストエフェクトを実装するための具体的なコードを...

CSSスタイルで実現されるHTML背景色のグラデーション効果

エフェクトのスクリーンショット:実装コード:コードをコピーコードは次のとおりです。 <!DOC...

React のグローバル状態管理の 3 つの基本メカニズムの調査

目次序文小道具コンテクスト州要約する序文最新のフロントエンド フレームワークはすべて、コンポーネント...

nginxとバックエンドポート間の競合の解決策

質問: Alice 管理システムを開発しているときに、すべてのバックエンド インターフェイスが最初の...

Nginxを再コンパイルしてモジュールを追加する方法

Nginx をコンパイルしてインストールするときに、http_ssl_module などの一部のモジ...

Linux trコマンドの使用

1. はじめにtr はテキストの一部を変換または削除するために使用されます。 tr は transl...

HTML コードの書き方に関する提案のまとめ

リソースファイルのプロトコルを省略する画像、メディアファイル、スタイル、スクリプトの URL では、...

MySQL の日付と時刻の加算と減算のサンプル コード

目次1.MySQLは時間間隔を加算または減算します2. 日付を減算する最近、MySQL を見直してい...

v-model 双方向バインディングデータを実装する vue カスタム コンポーネントのサンプル コード

プロジェクトでは、プロジェクトが呼び出すカスタム パブリック コンポーネントに遭遇します。通常、pr...

Docker ベースの Tomcat クラスタと Nginx ロード バランシングの展開の概要

目次前面に書かれた1. Ngixnイメージの作成2. Java Web (Tomcat) アプリケー...