プロのようなJavaScriptオブジェクトの破壊

こんにちは!
長い間、現在、私はJavaScriptで破壊の概念に関して現在仕事で使用しているトリックのカップルの上でメモを取りたいです.私は、私が学んで、現在日常的に使用しているものの大部分がちょうど私が彼らをしばしばこれを利用するのを止めるならば、フェードアウトすると感じます.だから、毎日見ていなくても長い間、彼らと一緒に私を刺さるようにすることを決めました.私は中学校と高校ではこれを行うが、私が大学を始めた直後に停止し、私は今の結果を感じる、私は本当に不安定な記憶を持っている特別考慮.
JavaScriptで破壊のアイデアに慣れていない人のために、以下の簡単な概要です.あなたがそれについての記事のトンもありますので、もしこれがあまりにも簡潔であるか、十分に明確でないならば、より多くの内容を探してください.)
破壊は、人々が使用するJavaScriptの中に常に存在しませんでした、概念は、ES 6またはES 2015this を参照).
このアイデアは基本的にオブジェクトのプロパティや配列の値に基づいて変数の代入を行う方法です.あなたが何かを構造化することの反対の考えであると考えるならば、あなたはそれがあなたが望む値を見つけて、それから変数をつくるためにそれを使用するまで、オブジェクトが断片に「分解されている」ことを得ます.
あなたが破壊する存在を知らないと考えているオブジェクトに含まれる値を持っていると思われる変数を作成する方法の1つを示す次のコードをチェックします.
注意classs は、キーワードとの衝突を避けるために、テキスト全体のように書かれますclass .

const homoSapiens = {
  kingdom: 'Animalia',
  classs: 'Mammalia',
  family: 'Hominidae',
  genus: 'Homo',
  species: 'H. sapiens'
}

const homoSapiensFamily = homoSapiens.family;

// and if you want to be certain of the type of the variable, you would
// set a default value for it in case the `family` property does not 
// exist in the source object
const safeHomoSapiensFamily = homoSapiens.family || '';

あなたは、あなたがそのオブジェクトで使用したい各プロパティに対して同じことをしなければならないことを確認します.それは本当に大きな痛みではありません.しかし、変数を作成し、その型を確かめるために、破壊する力を利用することができるとき、なぜ我々はそのようにしなければなりませんか?
以下は、同じことを達成するために破壊を使用するスニペットです.

const { family = '', species = '' } = homoSapiens;

ここでは、2つの変数family and species ソースオブジェクトに同じ名前を持つプロパティに基づきます.また、これらの2つのプロパティがオブジェクトに含まれていない場合でも、文字列になることを確認しています.
あなたはfamily and species 自分で見た場合、本当に意味のある変数名ではありません.また、オブジェクトのプロパティ名を使用する代わりに、変数名(別名)を指定することもできます.

const {
  family: homoSapiensFamily = '',
  species: homoSapiensSpecies = ''
} = homoSapiens;

ここでは、以前と同じ値を使いますが、現在、私たちはhomoSapiensFamily and homoSapiensSpecies . より意味のある、右?
あなたが今までに考えを得たならば、あなたはそれについて夢中になることができて、本当の入れ子にされたオブジェクトを外すことができると気がつきました.

const homoSapiens = {
  classs: {
    name: 'Mammalia',
    super: {
      name: 'Tetrapoda'
    },
    sub: {
      name: 'Theria'
    }
  },
  species: 'H. sapiens'
};

const {
  classs: {
    super: {
      name: homoSapiensSuperClass = ''
    }
  }
} = homoSapiens;

ここで変数名を作成しましたhomoSapiensSuperClass の値Tetrapoda .
入れ子になったオブジェクトを削除しようとすると、いくつかの時点で指定したプロパティが存在しません.

// considering the previous homoSapiens object

const {
  classs: {
    infra: {
      name: homoSapiensInfraClass = ''
    }
  }
} = homoSapiens;

これを試してみてください.

Uncaught TypeError: Cannot destructure property `name` of 'undefined' or 'null'.

これは、ソースオブジェクトでは実際にオブジェクトを持っていないためですinfra の下にclasss オブジェクト.したがって、homoSapiensInfraClass 変数は定義されません.
これを避けるために、オブジェクトを破壊している間、あなたが通過している各プロパティのデフォルト値を設定することができます.この特定のケースでは、あなたはそのためのデフォルト値を確認したいですinfra プロパティはオブジェクトであるため、プロパティが存在しない場合には破壊し続けることができます.

const {
  classs: {
    infra: {
      name: homoSapiensInfraClass = ''
    } = {}
  } = {}
} = homoSapiens;

このようにhomoSapiens objectには、infra 変数として定義されるhomoSapiensInfraClass 設定したデフォルト値、あるいはundefined デフォルト値を設定しなかった場合.

また、配列で動作します!
この考え方は基本的に配列と同じですが、違いは構文が少し違うという事実とは別に、プロパティ名を考慮することはできず、代わりに配列の項目の順序に基づいて物事を行います.

const [first, second ] = ['a', 'b'];
// first will be 'a' and second will be 'b'

// you can also set default values
const [safeFirst = 'a', safeSecond = 'b'] = ['a']
// safeSecond here will have a value of 'b'

また、関数の署名で動作します!
また、関数コンテキストに受信されるオブジェクトの特定のプロパティだけを公開するために、関数シグネチャで破壊することもできます.

const homoSapiens = {
  kingdom: 'Animalia',
  classs: 'Mammalia',
  family: 'Hominidae',
  genus: 'Homo',
  species: 'H. sapiens'
}

function logSpeciesInfo ({ species = '', kingdom = '', classs = '' }) {
  console.log(`The species ${species} belongs to the ${kingdom} kingdom and ${classs} class.' );
}

logSpeciesInfo(homoSapiens);
// Logs "The species H. sapiens belongs to the Animalia kingdom and Mammalia class."

関数ヘッダー内で指定されていないオブジェクトからの他のプロパティは、関数本体内に存在しません.

どこでも破壊できますか.
そこには本当にクールなテーブルがありますDestructuring assignment この構文の現在のブラウザ互換性を示すMDNウェブドキュメントのページ.あなたは、互換性があなたのための問題ではありませんので、広くサポートされていることがわかります.IEはあなたのためのものです.


クイズ
あなたがこのポストで学んだことで、あなたはどんな余分の変数も使わずに2つの変数の値を交換するために破壊する力を使うことができますか?コメントを見る前に試してください.
コメントで知らせてください!また、他のユースケースを使用している場合は、次のように共有してください
読書ありがとう!