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

推薦する

時間のかかるMySQLレコードのSQL例の詳細な説明

mysqlは時間のかかるSQLを記録しますMySQL は、最適化と分析のために、時間のかかる SQL...

テーブルの4辺を上下左右にスクロールするように固定する方法

質問:最近、プロジェクトの統計を行っていたときに、テーブルを上下にスクロールしたときにテーブルの先頭...

js の通常形式の日付と時刻に 0 を自動的に追加する 2 つのソリューション

目次背景解決策1アイデア:コード:解決策2アイデア:要約する参照する背景日付と時間をフォーマットする...

mysql8.0.11 winx64 のインストールと設定方法のグラフィック チュートリアル (win10)

mysql 8.0.11 winx64のインストールチュートリアルは以下のように記録され、みんなと...

実行後にdocker nginxにアクセスできない問題の解決策

## 1最近、docker デプロイメントを学習しており、当初は nginx を docker 化す...

ウェブサイトのコンテンツの一部を傍受するための iframe を実装するためのアイデアとコード

コードをコピーコードは次のとおりです。 <div スタイル="幅:630px;高さ:...

Vue フロントエンド開発補助機能状態管理詳細例

目次マップ状態マップゲッターマップミューテーションマップアクション例まとめマップ状態コンポーネントが...

初心者のための HTML コーディングガイドライン 30 選

1. HTMLタグは常に閉じる前のページのソース コードでは、次のような記述がよく見られます。 &l...

あまり使われていない、または誤解されている HTML タグ 10 個

ここでは、あまり使われていない、または誤解されている 10 個の HTML タグを紹介します。あまり...

JavaScript 配列の include と Reduce の基本的な使用法

目次序文配列.プロトタイプ.includes文法パラメータ戻り値例配列プロトタイプの削減文法パラメー...

docker compose を使ってワンクリックで分散構成センター Apollo を展開するプロセスの詳細な説明

導入分散について話すときは、分散構成センター、分散ログ、分散リンク トラッキングなどについて考える必...

JavaScript で 9 グリッドのモバイル パズル ゲームを実装

この記事では、Jiugonggeモバイルパズルゲームを実装するためのJavaScriptの具体的なコ...

Vue コンポーネント (Vuex を含む) 間の値の転送に関する簡単な説明

目次父から息子へ:息子から父へ: Vuex を使用せずにコンポーネント間で値を渡す方法は、親から子、...

Reactプロジェクトで画像を導入するいくつかの方法

imgタグは画像を導入しますreactは実際にはjsリーダー関数を介してページをレンダリングするため...