解体のECMAScript変数割り当ての6

解体変数の割り当て

ES6は、特定のパターンに従ってせ、オブジェクトが解体と呼ばれる値の配列、割り当て変数から抽出されます。

1.アレイ割り当て解体

変数を割り当てる前に、あなただけの値を直接指定することができます。

// 直接指定值
let a = 1;
let b = 2;
let c = 3;

ES6は解体によって割り当てを可能にします。

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

上記のコードでは、a、b、c三つの変数は、アレイ内の対応する位置に応じて値が割り当てられます。

また、ネストされた配列の解体を割り当てることができます。

// 对嵌套数组进行解构赋值
let [x, [[y], z]] = [1, [[2], 3]];
x; // 1
y; // 2
z; // 3

// 对数组部分数据进行解构赋值
let [ , , third] = ["hello", "world", "!"];
third // "!"

let [x, ...y] = [1, 2, 3, 4];
x; // 1
y; // [2, 3, 4]

脱構築は、変数の値が同じで、成功していませんundefined。

let [x, y] = ['a'];
x; // "a"
y; // undefined

let [x] = [];
let [y, z] = [1];
x; // undefined
y; // 1
z; // undefined

注意：内部ES6厳密な等価演算子（===）、位置値があるか否かを判断します。したがって、アレイの厳密に等しいメンバーのみときundefined、デフォルトで有効にする値。

不完全解体、モードの左側に、すなわち等号、等号の右側の部分に一致する唯一のアレイ。脱構築は、まだ成功しています。

let [x, y] = [1, 2, 3, 4];
x; // 1
y; // 2

// 嵌套数组不完全解构
let [a, [b], d] = [1, [2, 3], 4];
a; // 1
b; // 2
d; // 4

デフォルト値

解体の割り当ては、デフォルト値を指定することができます。

// 指定默认值
let [flag= true] = [];
foo; // true

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

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

デフォルト値は表現することができますが、この表現は、使用された場合にのみ、評価されている遅延評価、です。

function f() {
  return 'Hello World!'
}

let [x = f()] = [1];
x; // 结果为1，函数不会执行

デフォルト値は、他の変数の割り当てを分解するために参照することができますが、変数がすでに宣言されなければなりません。

let [x = 1, y = x] = [];     // x=1; y=1
let [x = y, y = 1] = [];     // ReferenceError: y is not defined

2.オブジェクトの解体の割り当て

オブジェクトはまた、割り当てを解体することができます。

let { name, age} = { name: 'jidi', age: 22 };
name;  // "jidi"
age; // 22

オブジェクトの解体のために、変数名の順序は、それ以外の場合は値、リターンを得るために失敗し、正しい値を得るために、長い同じ名前の変数や属性などとして、配列（配列要素が順に配置され、場所決定の値）のような一貫性である必要はありませんundefined。

let { name, age} = {  age: 22, name: 'jidi' };
name;  // "jidi"
age; // 22

// 对象属性中找不到与变量名一致的属性，则值为undefined
let { sex} = { name: 'jidi', age: 22 };
sex; // undefined

オブジェクトの解体の割り当ては、変数の値を失敗しましたundefined。

let { sex} = { name: 'jidi' };
sex; // undefined

オブジェクトの解体の割り当ては、変数名や属性名が矛盾することができますが、次のように書かなければなりません。

let { name: xingming } = { name: 'jidi' };
xingming; // "jidi"

let obj = { first: 'hello', last: 'world' };
let { first: f, last: l } = obj;
f; // 'hello'
l; // 'world'

被験体への割り当てを非構造はまた、ネストされた構造を有する物体であってもよいです。

let person = {
  man: [
    { sex: '男' }
  ],
  woman: [
	{ sex: '女' }
  ]
};

let { man: [{ x }], woman: [{ y }]} = person;
x; // { sex: '男' }
y; // { sex: '女' }

上記の例では、manそしてwomanこの時間は可変ではなく、パターンが割り当てられません。あなたは次のように書き込まれるように、割り当てられている場合。

let { man, man: [{ x }], woman, woman: [{ y }]} = person;

ここでは別の例です。

const example= {
  first: {
    second: {
      name: 'jidi',
      age: 22
    }
  }
};

let { first, first:{ second }, first:{ second: name }, first:{ second: age }} = example;
first; // { second: { name: 'jidi', age: 22 }}
second; // { name: 'jidi', age: 22 }
name; // 'jidi'
age; // 22

解体の割当対象は、継承プロパティに撮影することができます。

const x= {};
const y= { name: 'jidi' };

// 将对象y设置为对象x的原型对象，对象x会继承原型对象y的属性name
Object.setPrototypeOf(x, y);

const { name} = x;
name; // 'jidi'

デフォルト値

オブジェクトの解体は、デフォルト値を指定することができます。条件の発効のデフォルト値は、そのオブジェクトのプロパティの値が正確に同じですundefined。

var { x = 3 } = {};
x; // 3

var {x, y = 5} = {x: 1};
x // 1
y // 5

注意： 配列は特殊なオブジェクトであるので、オブジェクトが分解さ属性配列にすることができます。

let arr = [1, 2, 3];
let { 0 : first, [arr.length - 1] : last, length } = arr;
first; // 1
last; // 3
length; // 3

3.解体割り当て文字列

分割代入文字列オブジェクトの類似の配列とみなすことができ、文字列を実行することができます。

const [x, y, z] = 'you';
x; // 'y'
y; // 'y'
z; // 'u'

4.分割代入する数値とブール値

割り当てを構造化代入するとき、等号の右辺は、数値およびブール値である場合、それは最初のオブジェクトを向けるだろう。

let { toString: s } = 123;
s === Number.prototype.toString; // true

let { toString: s } = true;
s === Boolean.prototype.toString; // true

注意：オンundefinedとnull解体割り当てが与えられます。

分割代入関数パラメータ

関数のパラメータも割り当てを構造化代入使用することができます。

// 例子一
function add([x, y]){
  return x + y;
}
add([1, 2]); // 3

// 例子二
[[1, 2], [3, 4]].map(([a, b]) => a + b); // [ 3, 7 ]

デストラクタパラメータがデフォルト値であってもよいです。

function move({ x = 0, y = 0 } = {} ) {
  return [x, y];
}

move({ x: 3, y: 8 }); // [3, 8]
move({ x: 3 }); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

6. "（）" が使用されます

コンパイラのために、最後の数式は、パターン、または式で、最初から知っている方法はありません。ES6ルールは次のとおりです。長い曖昧さの解体につながる可能性があるとして、あなたは括弧を使用することはできません。

あなたには「（）」の場合は使用できません。

以下の条件に属している、あなたは括弧を使用することはできません。

1.変数宣言文

// 在变量声明语句中使用（），全部报错
let [(x)] = [1];

let { x: (y) } = {};
let ({ x: y }) = {};
let { (x: y) } = {};
let { (x): y } = {};

let { x: ({ y: y }) } = { x: { y: 2 } };

2.関数のパラメータは
また、括弧を使用することはできません変数の宣言に属しパラメータを機能します。

// 函数参数解构赋值使用()报错
function f([(x)]) { return x; }
function f([x,(y)]) { return x; }

割当モードの3パート

// 赋值语句的模式部分使用（）,全部报错
({ x: y }) = { x: 'jidi' };
([x]) = [5];

ケースでは「（）」を使用することができます

状況は括弧だけを使用することができます。文の非モード部分の割り当ては、あなたは括弧を使用することができます。

[(b)] = [3]; 
({ p: (d) } = {});
[(parseInt.prop)] = [3]; 

上記割り当てがあるように、行うことができ、モード部分がされていない()含ま。

7.参考リンク

このブログは、私自身の研究ノートで、オリジナルを参照してください：ECMAScriptの6入門
質問があれば、指摘してください！
ようこそ通信、電子メール：[email protected]。