JavaScriptでの破棄の割り当て

ジャバスクリプト.面白い.ランゲージ.私は個人的にそれが好きですが、他の人がなぜそれほど好きでないかについて見ることができます.ECMAScript 6、別名ES 6は、JavaScript開発をより楽しくする本当に良い特徴の良い握りを導入しました.この短いポストでは、破壊課題について少し話をしたいと思います.
MDN 次の方法で、破壊課題を記述します

The destructuring assignment syntax is a JavaScript expression that makes it possible to unpack values from arrays, or properties from objects, into distinct variables.

つまり、配列やオブジェクトを簡単に取り出し、変数から値を取り出すことができます.

オブジェクトによる割り当ての破壊
三次元空間内の点を表すオブジェクトを持っていると仮定します.

let myPointInSpace = {
  x: 3,
  y: -2,
  z: 2.7
}

あなたがポイントの座標でいくつかのコンピューティングをしたいと仮定しますx , y , and z 簡単な参照のためのいくつかの変数の点の座標.次のようにします.

let x = myPointInSpace.x;
let y = myPointInSpace.y;
let z = myPointInSpace.z;

let distance = Math.sqrt(x*x + y*y + z*z);

これは確かに動作!しかし、十分な時間を行う場合は、コピー/貼り付けの病気になる可能性があります.破壊の割り当てを使用すると、はるかに簡潔な方法でそれらの座標を没収することができます!以下に

let {x, y, z} = myPointInSpace;

let distance = Math.sqrt(x*x + y*y + z*z);

この場合の巻き括弧は破壊課題を示す.上の1行目はmyPointInSpace 変数を指定し、カーブレ括弧内で指定されたプロパティを探し、個々の変数代入に戻す.
便利に、オブジェクトのプロパティ値のサブセットのみをプルできます.例えば、あなたがちょうど必要ならばx and y コーディネート、あなたはちょうど同様にできました:

let {x, y} = myPointInSpace;

アレイによる破壊割当
オブジェクトを使用しているときに、破棄の割り当ては素晴らしいですが、同様の方法で配列を使用することもできます.代わりに、スペースの我々の点が3タプル(または3つの値の配列)として表されると仮定しましょう.

let myPointInSpace = [3, -2, 2.7];

この点の座標をプルする古い学校の方法は次のようになります.

let x = myPointInSpace[0];
let y = myPointInSpace[1];
let z = myPointInSpace[2];

破壊の割り当てを行うと、以下のように短縮できます.

let [x, y, z] = myPointInSpace;

かなりきれい!

実例
私は実際にそれを利用し、その有用性を鑑賞する前に、いくつかの倍に破壊の割り当てについて読んだ.私は簡単に値をpluckingに関与して上記の簡単な例を示したが、私はいくつかのより有用な例を紹介したい.

デフォルト関数値の設定
関数を書くとき、私はしばしば入力として単一のオブジェクトを使用して、それからそのオブジェクトから値を引きます.破壊的な割り当てはこれに役立ち、ES 6で導入された「デフォルトパラメータ」を利用することができます.
あなたが数時間、分、秒の数を取り、その時間の量をミリ秒の数に変換する関数を記述したいとしましょう.以下のようにします.

let toMilliseconds = ({
  hours = 0,
  minutes = 0,
  seconds = 0
}) => {
  // Compute the # of ms
  let ms = (hours * 60 * 60 * 1000) + (minutes * 60 * 1000) + (seconds * 1000);
  // Return the # of ms
  return ms;
}

これは奇妙な関数宣言のように見えるかもしれませんが、入力としてオブジェクトに渡すことができますtoMilliseconds() 関数がキーを探すhours , minutes , and seconds 使う.それが渡されたオブジェクトのそれらのキーのどれかを見つけないならば、それはちょうど0にデフォルトです.これを使用するには、次のようになります.

let ms1 = toMilliseconds({hours: 3, minutes: 42, seconds: 33});
let ms2 = toMilliseconds({minutes: 7});

上の2行目でhours and seconds 0にデフォルト値を取得し、明示的に時間や秒の数を渡す必要はありません.
私はいくつかの関数が多くのパラメータをたくさん持っているので、このように書く機能のようになりました.

スワッピング値
スワップ変数の値は多少一般的な手続きであり、一時的な変数を作成することが多い.これが古典的な例です.

// Initial values
let x = 5;
let y = 3;

// Now swap, creating tmp variable
let tmp = y;
y = x;
x = tmp;
delete tmp;

しかし、破壊的な割り当ては、これをより簡潔にします.

// Initial values
let x = 5;
let y = 3;

// Now swap
[x, y] = [y, x];

あなた自身が頻繁に変数を交換見つける場合は、破壊は本当に良いツールになることができます.

値を引いて新しい名前を与える
オブジェクトの破壊を行うと、実際には、破壊しているオブジェクトのキー以外の変数の名前を指定できます.あなたがAPIを使用していると仮定し、APIはあなたが使用したくない奇妙な名前を持っている応答を返します.次のようなもの

let apiResponse = {
  someWeirdKeyForX: 3,
  someWeirdKeyForY: -7
}

我々は、プルすることができますx and y 値は、その応答から、私たちが好きなものを何でも名前を言うx and y . これを行うには、次の構文を使用します.

let {someWeirdKeyForX: x, someWeirdKeyForY: y} = apiResponse;

The someWeirdKeyForX: x 破壊の一部は、キーをプルしたいと宣言するsomeWeirdKeyForX からapiResponse そして、変数名にそれを割り当てたいですx . これは驚くほど便利です.現実的に、私はこのようなものを割り当てるのと同じくらい簡単にシナリオでこれを使用するのが好きですapiResponse.latitude to lat and apiResponse.longitude to lng .

危ない!
私が何度かつまずいた1つの小さい「gotcha」は時々、あなたが括弧であなたの破壊している声明をラップする必要があるという事実でした.あなたの破壊的な声明が変数宣言キーワードから始めないならばvar , let , or const ), あなたの文を括弧で包む必要があります.私はコンパイラは、この方法を区別する方法を知っていると仮定している{ ... } 破壊文と{ ... } これはコードのブロックを示します.
これが私の言いたいことです.次のコードを考えます.

// Declare x and y ahead of time
let x, y;
// Object that we will destructure
let o = {x: 3, y: -7};

// Try to destructure
{x, y} = o; // -> No good!

コンパイラはコードの最後の行を解釈する方法を知りません.次のように変更する必要があります.

// Declare x and y ahead of time
let x, y;
// Object that we will destructure
let o = {x: 3, y: -7};

// Successfully destructure
({x, y} = o); // -> Good!

あなた自身が破壊を使用して見つける場合は、この少しの注意を認識していることを確認!

もっと!
MDN は、割り当ての破壊の多くの例があります.もっと知りたい場合は、そのページをチェックしてください.
次の投稿では、JavaScriptの残りの部分にダイブして、演算子を展開し、どのように破壊課題に移行するかを見ます.