JS ES6における構造化分解についてお話しましょう

JS ES6における構造化分解についてお話しましょう

概要

es6 では、配列またはオブジェクトから指定された要素を取得する新しい方法が追加されました。これが今日お話しする「デストラクチャリング」です。

まず配列の分解について話しましょう

構造化分解する前に、通常はインデックスに基づいて配列内の指定された要素を取得します。

定数arr = [1, 2, 3]; 
定数a = arr[1];

分解後、次のメソッドを使用して配列内の要素をすばやく取得できます。

定数arr = [1, 2, 3];
定数[a, b, c] = arr;

コンソールにログ出力します。
コンソールログ(b);
コンソールログ(c);

これはそれぞれa、b、cの値を出力します。

1

2

3

最初の 2 つの要素のみを取得したい場合は、次のように記述できます。

定数arr = [1, 2, 3];
定数[a, b] = arr;

コンソールにログ出力します。
コンソールログ(b);

スプレッド演算子を組み合わせて、配列で指定された複数の要素を取得することもできます。次に例を示します。

定数arr = [1, 2, 3];
定数[a, ...brr] = arr;

コンソールにログ出力します。
コンソールログ(brr);

このように、brr は 1 以外の要素で構成される配列となり、a と brr の印刷された値は次のようになります。

1

[23]

配列内の特定の要素のみを取得したい場合はどうすればよいでしょうか?たとえば、配列に 2 つだけ取得したい場合は、どのように記述すればよいでしょうか?

定数arr = [1, 2, 3];
定数[, a] = arr;
コンソールにログ出力します。

上記では、特定の位置にある要素を取得するために、分解が配列自体の位置と一致するように、プレースホルダーとしてコンマを使用しています。
ご覧のとおり、構造化分解の出現により、配列内の指定された位置にある 1 つ以上の要素を取得することが容易になりました。これはコード内での重要な応用でもあります。

配列の分解について話した後、

オブジェクトの解体

配列の分割とは異なり、オブジェクトの分割はプロパティ名に基づいて一致します。オブジェクトには配列の添え字のような順序がないため、添え字を使用して抽出することはできません。
たとえば、オブジェクト obj を定義し、その name 属性の値を取得したい場合は、次のように記述できます。

定数オブジェクト = {
    名前: 'wudixiaodoujie'、
    年齢: 18
};
定数名 = obj;
console.log(名前);
武藤小豆傑

定数年齢 = 0;
定数 age: perAge } = obj;
console.log(年齢ごと);
18

オブジェクトの分解は広く使用されています。たとえば、オブジェクトのプロパティやメソッドを頻繁に呼び出す必要がある場合は、分解によって変数に割り当てることができます。変数を介して呼び出すと、ある程度コードの量を減らすことができます。

以上がJS ES6におけるデコンストラクションの詳しい内容です。JS ES6におけるデコンストラクションの詳細については、123WORDPRESS.COMの他の関連記事もご覧ください。

以下もご興味があるかもしれません:
  • JSでES6クラスの使い方をすぐにマスター
  • JS ES6 変数分割代入の詳細な説明
  • JS ES6 スプレッド演算子の魔法のような使い方
  • JS ES6 非同期ソリューション
  • ES6 での Javascript 構造化分解の実装
  • JavaScript の ES6 仕様における let と const の使い方と違い
  • 実用的な JS 開発の問題を解決するための 24 の ES6 メソッド (要約)
  • JavaScript ES6クラスの実装原理の詳細な説明
  • JavaScript における ES6 プロキシの具体的な使用法
  • JS ES6コーディング標準の詳細な説明

<<:  MySQL インデックスの詳細な説明

>>:  意外と知らないLinuxのSSHコマンドの使い方7選を徹底解説

推薦する

Mysql 5.6ではユーザー名とパスワードを変更するメソッドが追加されました

まずMySQLにログインする シェル> mysql --user=root mysqlパスワー...

MySQLデスクトップツールSQLyogのリソースとアクティベーション方法は、白黒のコマンドラインに別れを告げます

では、早速リソースについて見ていきましょう。 123WORDPRESS.COM ダウンロードSQLy...

Alibaba Cloud OSS によってアップロードされた Nginx プロキシ転送実装コード

序文ミニプログラムのアップロードには https が必要なので、サーバーの https は lets...

MySQLの大規模テーブル最適化ソリューションについての簡単な説明

背景Alibaba Cloud RDS for MySQL(MySQL バージョン 5.7)データベ...

CentOS システムのディスク パーティションを拡張する方法

問題/障害/シナリオ/要件Eve-ng の仮想マシン OVA のハードディスクは 38G しかないた...

Linux での MySQL 5.6.33 のインストールと設定のチュートリアル

このチュートリアルでは、LinuxでのMySQL 5.6.33のインストールと設定方法を参考までに紹...

Nginx をインストールして複数のドメイン名を設定する方法

Nginx のインストールCentOS 6.x yum にはデフォルトで nginx ソフトウェア ...

Office ファイルのオンライン プレビュー用の Vue サンプル コード

最近、電子アーカイブに取り組んでおり、バックエンドではファイルの Huawei Cloud OSS ...

数十行のjsを使用してクールなキャンバスインタラクティブ効果を実現する方法を教えます

目次1. 円を描く2. マウスで動かした円3. マウスでドラッグした粒子4. カラーグラデーション粒...

Dockerコンテナとホスト間のデータ相互作用の概要

序文実稼働環境で Docker を使用する場合、多くの場合、データを複数のコンテナ間で永続化または共...

HTMLフォームアプリケーションにはチェックボックスとラジオボタンの使用が含まれます

チェックボックスやラジオボタンの使用を含むコードをコピーコードは次のとおりです。 <!DOCT...

MySQL マスタースレーブレプリケーション構成プロセス

メインライブラリの構成1. MySQLを設定する vim /etc/my.cn # ファイルに次の内...

Linux NFSメカニズムの動作原理と例の分析

NFS とは何ですか?ネットワークファイルシステムネットワーク上でファイルを保存および整理するための...

JS の 3 つの主要な問題、非同期性とシングルスレッドについて簡単に説明します。

目次シングルスレッド非同期シングルスレッドしかし、開発中にネットワーク リクエストやスケジュールされ...

CSS 属性を使用してマウス イベントをブロックする方法 (マウス クリックは上位の要素を貫通する可能性があります)

由来: 数日前、テスターから写真を見るという要件が送られてきました。 この要件を見たとき、私は少し混...