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選を徹底解説

推薦する

Windows および Linux で tomcat9 を介して war パッケージを手動で展開する方法

Windows 環境と Linux 環境では結果が異なります。ウィンドウズステップ 1: Maven...

CSS を使用して等アスペクト比のアダプティブ コンテナを実装する方法

最近、モバイル ページを開発しているときに、ページの幅が 100% の場合、高さは幅の半分になり、携...

HTML 特殊文字変換表

キャラクター小数点文字番号エンティティ名---未使用空間---スペースバー! ! ---感嘆符「 」...

ミニプログラムでマインドマップを描く方法

目次マインドマップとは何ですか? F6で描く方法アリペイ微信要約するマインドマップとは何ですか?マイ...

Linux クラウド サーバー上に SFTP サーバーとイメージ サーバーを構築する方法

まず、SFTP プロトコルと FTP プロトコルの違いを理解してください。ここでは詳細には触れません...

Ubuntu 18.04 は pyenv、pyenv-virtualenv、virtualenv、Numpy、SciPy、Pillow、Matplotlib をインストールします

1. 現在、Pythonのバージョン管理ツールは数多く存在します。その中でも比較的使いやすいのがPy...

React における setState の同期または非同期の問題の理解

目次1. setState は同期的ですか?非同期ですか? 2. 非同期的に動作する1. React...

MySQLデータの重複チェックと重複排除の実装ステートメント

テーブル user があり、フィールドは id、nick_name、password、email、p...

ReactにおけるRefの相互利用の詳細な説明

目次1. まずRefとは何かを説明しましょう2. フックでのrefの使用1. HTMLDomフックで...

JSはBaidu Newsナビゲーションバーの効果を実現

この記事では、Baidu News Navigation Barの効果を実現するための具体的なJSコ...

Dockerコンテナに入る方法と出る方法

1 Dockerサービスを開始するまず、docker サービスを開始する方法を知っておく必要がありま...

nginxフォワードプロキシとリバースプロキシの詳細な説明

目次フォワードプロキシnginx リバースプロキシnginx リバースプロキシ 02リバースプロキシ...

CSS3 でクールなスライス画像カルーセル効果を実現

今日は、CSS を使用してクールな画像カルーセル コンポーネントを作成する方法を学びます。その原理は...

MySQL マスタースレーブの原理と構成の詳細

MySQLのマスタースレーブ構成と原理、参考までに具体的な内容は以下のとおりです。 1. 環境の選択...

MySQL でコミットされていないトランザクション情報を見つける方法

少し前に、「ORACLE でコミットされていないトランザクションの SQL ステートメントを見つける...