要約：楽しいES6の解体の割り当て。
- オリジナル：解体の5つのJS興味深い使用
- 翻訳：フロントアッシュ
1.交換変数
この方法は、通常は例を見てするために、2つの変数の追加、一時変数の交換を必要とします。
let a = 1;
let b = 2;
let temp;
temp = a;
a = b;
b = temp;
a; // => 2
b; // => 1tempそれは最初に保存し、一時的な変数であるa値を。その後、b値がに割り当てられa、その後、temp値が割り当てられますb。
あなたはよりシンプルになります解体方法を使用している場合は、どのような地獄は必要ありませんtemp変数を。
let a = 1;
let b = 2;
[a, b] = [b, a];
a; // => 2
b; // => 1[a，b] = [b，a]解体割り当て、右、配列を作成し[b, a]、それがあります[2,1]。この配列は2、所与の割り当てられているa1に割り当てられ、b。
このアプローチはまた、きれいに見えるために一時的な配列が、少なくともこの方法を作成しますが、あなたはまた、解体交換を使用することができる2一つの変数以上。
let zero = 2;
let one = 1;
let two = 0;
[zero, one, two] = [two, one, zero];
zero; // => 0
one; // => 1
two; // => 22配列の要素にアクセスします
シナリオの種類は、我々は、アレイ内の空の項目を有することができます。そして、あなたは最初の配列、二またはn番目の項目にアクセスしたいのですが、エントリが存在しない場合、デフォルト値が指定されています。
典型的には、アレイ用いてlength決定するプロパティを
const colors = [];
let firstColor = 'white';
if (colors.length > 0) {
firstColor = colors[0];
}
firstColor; // => 'white'配列の解体を使用すると、同じ効果を達成するために、より単純なことができます：
const colors = [];
const [firstColor = 'white'] = colors;
firstColor; // => 'white'const [firstColor = 'white'] = colors解体は、colors配列の最初の要素は、に割り当てられるfirstColor変数。配列インデックスがあれば0割り当てられている「何もありません要素white」デフォルト。
もちろん、それはまた、あなたが唯一の第二の要素にアクセスする場合、あなたがそうすることができ、より柔軟にすることができます。
const colors = [];
const [, secondColor = 'black'] = colors;
secondColor; // => 'black'解体の左側にカンマに注意してください。それは、最初の要素を無視することを意味secondColor使用してcolors、配列のインデックス1割当て要素。
3.操作不変
私が使用し始めたときReactとReduxするとき、不変性に準拠するためにいくつかのコードを書くことを余儀なく。簡単に一方向のデータフローを処理するために：で、最初のいくつかの困難が、その後私はそれが利益を見ました。
不変性の要件は、元のオブジェクトを変更することはできません。幸い、解体が簡単に特定の操作を達成していない方法で変更することができます。
const numbers = [1, 2, 3];
const [, ...fooNumbers] = numbers;
fooNumbers; // => [2, 3]
numbers; // => [1, 2, 3]解体は、[, ... fooNumbers] = numbers新しい配列を作成しfooNumbers、fooNumbers含有するnumbers第一の要素に加えて要素。
numbers 配列は、変更操作の不変性を保持しません。
同様に不変オブジェクトは、オブジェクトから、プロパティから削除してからしようとすることができますbig削除fooのプロパティを：
const big = {
foo: 'value Foo',
bar: 'value Bar'
};
const { foo, ...small } = big;
small; // => { bar: 'value Bar' }
big; // => { foo: 'value Foo', bar: 'value Bar' }4.解体イテラブル
最初のいくつかのケースでは、解体のアレイの使用は、それは任意に達成することができるプロトコル（反復可能なプロトコル）繰り返してもよい解体オブジェクト。
多くのネイティブのプリミティブ型やオブジェクトが反復可能です：array、string、typed arrays、setとmap。
あなたは基本的なタイプに限定したくない場合は、反復的なプロトコルを介して達成することができ解体ロジックをカスタマイズすることができます。
moviesこれは、含まれているmovieオブジェクトのリストを。解体movies、それはなりtitle得る文字列として素晴らしいです。のは、カスタムイテレータを実装してみましょう。
const movies = {
list: [
{ title: 'Heat' },
{ title: 'Interstellar' }
],
[Symbol.iterator]() {
let index = 0;
return {
next: () => {
if (index < this.list.length) {
const value = this.list[index++].title;
return { value, done: false };
}
return { done: true };
}
};
}
};
const [firstMovieTitle] = movies;
console.log(firstMovieTitle); // => 'Heat'
moviesオブジェクト定義することでSymbol.iterator合意反復法を達成するために反復されますtitle。
従い反復可能なプロトコルを可能moviesにオブジェクトtitle特定方法は、最初に読み取ることであるmoviesのをtitle：const [firstMovieTitle] = movies。
動的プロパティの解体
経験によると、解体はプロパティによって、オブジェクトの配列の解体よりも一般的です。
オブジェクトの脱構築は、よりシンプルになります。
const movie = { title: 'Heat' };
const { title } = movie;
title; // => 'Heat'
const {title} = movie変数を作成しtitle、プロパティとmovie.titleそれに値を割り当てます。
オブジェクトが分解するときに、私たちはまだオブジェクトを分解するために、動的属性名を使用することができますプロパティの名前を知っている必要はないことを少し驚きました。
解体の方法仕事のダイナミクスを理解するために、書き込みgreet機能を：
function greet(obj, nameProp) {
const { [nameProp]: name = 'Unknown' } = obj;
return `Hello, ${name}!`;
}
greet({ name: 'Batman' }, 'name'); // => 'Hello, Batman!'
greet({ }, 'name'); // => 'Hello, Unknown!'
使用する2と呼ばれるパラメータgreet()オブジェクトと属性名：機能を。
greet()内部、割り当てを構造化代入const {[nameProp]：name ='Unknown'} = objの形で角括弧を使用して、[nameProp]動的属性名を読み出し、name変数は、動的属性値を受信します。
プロパティが存在しない場合はいっそのこと、あなたはのデフォルト値を指定することができますUnknown「」
コードが展開された後BUGがリアルタイムで知ることができない存在し、その後これらのバグを解決するためにも、私たちは誰もが素敵なお勧めするための方法ここでは、時間のデバッグログを費やしBUG監視ツールのFundebugを。
オリジナル：https://dmitripavlutin.com/5-interesting-uses-javascript-destructuring/
Fundebugについて
Fundebugの JavaScriptの上の焦点は、マイクロチャネル、マイクロチャネルのゲーム、アリペイ小さなプログラム、リアルタイムのオンライン監視BUGネイティブ、Node.jsのとJavaアプリケーションに反応アプレット。2016年以来、二から一一が正式に立ち上げ、Fundebugは20億+エラーイベントの合計を取り扱う、有料顧客はサンシャイン保険、クルミのプログラミング、ライチFM、1対1、マイクロパルスの頭部、青年同盟や他の多くのコミュニティのブランドを持っています。ようこそ無料お試し！