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

推薦する

デザイン理論: なぜ私たちは間違った場所を見ているのでしょうか?

数日前、バスで仕事に行きました。バスのカードリーダーの実際の使用シーンを実際に見て、カードリーダーの...

HTML テーブルの行間および列間の操作 (rowspan、colspan)

一般的に、<td> 要素の colspan 属性はセルの列間操作を実装するために使用され...

Centos7.X Linux システムに tomcat8 をインストールするためのグラフィック チュートリアル

1. Tomcatのインストールパスを作成する mkdir /usr/local/tomcat 2....

Vueでスワイパープラグインを使用する際の問題を解決する

デモを作成するときにこのプラグインを使用していくつか問題が発生したため、プラグインの使用方法といくつ...

ライフゲームの JavaScript 実装

目次コンセプト紹介論理的ルール完全なコード主な実装コンセプト紹介セルオートマトンとは、コンピュータの...

MySQL 学習ノート ヘルプ ドキュメント

システムヘルプを表示help contents mysql> ヘルプコンテンツ; ヘルプ カテ...

モバイル署名機能を実装するJavaScript

この記事では、モバイル署名機能を実装するためのJavaScriptの具体的なコードを参考までに共有し...

VMware 15 を使用して仮想マシンをインストールし、CentOS 8 を使用する詳細な手順

序文:現在、Linux と .Net Core を学習しており、クロスプラットフォームの知識を学んで...

Vue-CLI マルチページディレクトリパッケージ化手順の記録

ページディレクトリ構造 デフォルトの HTML テンプレート ファイル public/index.h...

マウスがカード上に移動したときにフローティング効果を実現する CSS の使用例

原理ホバーしたときに要素に影を設定します: box-shadow で、通常とは異なるスタイルにします...

MySQL の datetime フィールドの丸め操作

目次序文1. 背景2. シミュレーションテスト3. 結論要約する序文もし私が罠に陥っていなかったら、...

Vueはカウンターのシンプルな生成を実装します

この記事では、Vueカウンターの簡単な実装コードを例として紹介します。具体的な内容は以下のとおりです...

コメント付きのスネークゲームを実装する js

この記事の例では、スネークゲームを実装するためのjsの具体的なコードを参考までに共有しています。具体...

ウェブデザインのためのオンライン開発ツール10選の紹介

1. オンラインテキストジェネレーターBlindTextGenerator: デザイナーにとって、こ...

仮想マシンのディスクサイズを拡張する方法

Vmvare が仮想マシンのディスク サイズを設定した後、ディスク領域が不足していることがわかりまし...