【フロントエンド】(四)ES 6の新しい特性の解構賦値

目次

解構賦値

とは

配列用時

オブジェクト用時

文字列の解構賦値

関数パラメータの解構賦値

解構賦値とは
等号の左右のフォーマットと同じように、右の値を左の変数に割り当てることができます.この書き方は実質的に「パターンマッチング」です.例を挙げると、以前に割り当てられた値:

var a = 1;
var b = 2;
var c = 3;

割り当ての解除:

var [a, b, c] = [1, 2, 3];

解構賦値はvarコマンドだけでなくletコマンドおよびconstコマンドにも適用されます.

は、あるデータ構造がIteratorインタフェースを有する限り、配列形式の解構賦値を採用することができる.

等号の右側の値がオブジェクトでない限り、先にオブジェクトに変換します.undefinedとnullはオブジェクトに変換できないため、それらを解体して値を割り当てると、エラーが発生します.

let {
      prop: x } = undefined; // TypeError
let {
      prop: y } = null; // TypeError

配列に使用する場合
要求:等号の右側は配列でなければなりません

基本用法:

var [a, b, c] = [1, 2, 3];

解体が成功しなければ、変数の値はundefinedに等しい.

var [bar, foo] = [1];   //foo undefined

不完全接合解体

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4

Set構造についても配列の解構賦値を用いることができる.

let [x, y, z] = new Set(["a", "b", "c"]);
x // "a

デフォルト値

を設定

[x, y = 'b'] = ['a', undefined]; // x='a', y='b'

なお、ES 6内部では厳密に等しい演算子(===)を用いて、1つの位置に値があるか否かを判断する.したがって、配列メンバーがundefinedと厳密に等しくない場合、デフォルト値は有効になりません.

var [x = 1] = [undefined];
x // 1

var [x = 1] = [null];
x // null

オブジェクトに使用する場合

基本用法

var {
      foo, bar } = {
      foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

コロン設定属性別名

var {
      foo: a } = {
      foo: 'aaa', bar: 'bbb' };
a // "aaa"
foo // error: foo is not defined

オブジェクトの解構賦値の内部メカニズムは、同名の属性を見つけてから対応する変数に付与することです.本当に与えられたのは後者で、前者ではありません.fooはマッチングモードであり,aこそ変数である.本当に割り当てられているのは、モードfooではなく変数aです.

類似配列の解賦値を不完全に解構する.

デフォルト値類似配列の解体賦値

文字列の解構賦値
文字列は、配列に似たオブジェクトに変換されます.

const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"

関数パラメータの解構賦値

function add([x, y]){
     
  return x + y;
}

add([1, 2]); // 3