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ファイル内の中国語の文字化けとブラウザでの表示の問題

推薦する

コンテンツウェブページの画像プレビューのデザイン

<br />以前、「コンテンツページ番号のプレビューナビゲーション」と「写真プレビューナ...

MySQL 構成マスタースレーブサーバー (マスター 1 台とスレーブ複数台)

目次アイデアホスト構成confを変更する再起動テストスレーブ 1 の構成スレーブ2の構成マスターとス...

VirtualBox でのホストオンリー + NAT モードのネットワーク構成

VirtualBoxのHost Only+NATモードのネットワーク構成は参考用です。具体的な内容は...

Zabbix設定 DingTalkアラーム機能実装コード

必要Zabbix で DingTalk アラームを設定する方法は、Prometheus で Ding...

MySQLでストアドプロシージャをデバッグする最も簡単な方法

同僚から、一時テーブルを使用して変数データを挿入して表示する方法を教わったことがありますが、この方法...

フロア効果を実現するためのJavaScript

この記事では、フロア効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。...

Linux の圧縮および解凍コマンドの紹介

目次一般的な圧縮形式: gz .bz2 .xz .zip一般的に使用されるアーカイブは圧縮を必要とす...

ウェブデザイナーが注意すべき 43 のウェブデザインの間違い

これはウェブサイトのユーザビリティに関する記事です。著者は自身の経験に基づいて、ウェブサイトのデザイ...

CSS コード省略 div+css レイアウト コード省略仕様

略語を使用すると、CSS ファイルのサイズが小さくなり、読みやすくなります。 CSS 省略形の主なル...

Linuxのtimeコマンドの使い方の詳しい説明

1. コマンドの紹介時間は、コマンドの実行に費やされた時間や関連するシステム リソース、その他の情報...

レスポンシブなカードホバー効果を実現するための HTML+CSS

目次成し遂げる:要約:言うことはあまりありませんが、まずは効果を見てみましょう。 カードホバー、レス...

Linuxがすべてのコマンドをサポートしていない問題の解決策

Linux がすべてのコマンドをサポートしていない場合はどうすればいいですか?すべてのLinuxコマ...

Linux CentOS MySQL データベースのインストールと設定のチュートリアル

MySQLデータベースのインストールに関するメモ、みんなで共有a) MySQL ソースインストールパ...

Tomcatの再構成後に起動が遅くなる問題を迅速に解決

Jenkins+Tomcatサーバーの設定中に、Tomcat設定ファイルが変更され、サーバーのTom...

jQueryはシンプルなボタンの色の変更を実装します

HTML と CSS で、ボタンの色を設定したいとします。 目的の効果は得られますが、プロセスはかな...