ECMAScript6変数の構造化代入の詳細説明-jsチュートリアル-php.cn

ES6 では、配列やオブジェクトから値を抽出し、特定のパターンに従って変数に値を割り当てることができます。これは構造化と呼ばれます。この記事では主に、入れ子になった配列の構造化の例を説明します。 , c] = [1, 2, 3];

この書き方は、等号の両側のパターンが同じであれば、左側の変数が代入されます。対応する値。

以下はネストされた配列を使用した構造化の例です

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3
let [ , , third] = ["foo", "bar", "baz"];
third // "baz"
let [x, , y] = [1, 2, 3];
x // 1
y // 3
let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]
let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []

ログイン後にコピー

構造化が失敗した場合、変数の値は未定義と等しくなります

fooは未定義と等しくなります

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

ログイン後にコピー

不完全な構造化とは、上のパターンのみを意味します等号の左側が一致します等号の右側の配列の一部

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

ログイン後にコピー

等号の右側が配列でない場合、エラーが報告されます。

// 报错let [foo] = 1;
let [foo] = false;
let [foo] = NaN;
let [foo] = undefined;
let [foo] = null;
let [foo] = {};

ログイン後にコピー

分割代入はvarコマンドだけでなくletコマンドやconstコマンドにも適用できます

var [v1, v2, ..., vN ] = array;
let [v1, v2, ..., vN ] = array;
const [v1, v2, ..., vN ] = array;

ログイン後にコピー

Set構造体の場合、配列の分割代入も使用できます。

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

ログイン後にコピー

特定のデータ構造が Iterator インターフェースを持つ限り、配列形式での分割代入が使用できます。

function* fibs() {
  var a = 0;
  var b = 1;
  while (true) {
  yield a;
   [a, b] = [b, a + b];
  }
}
var [first, second, third, fourth, fifth, sixth] = fibs();
sixth // 5

ログイン後にコピー

fibs はネイティブに Iterator インターフェースを持つ Generator 関数です。代入を分割すると、このインターフェイスから値が取得されます

代入を分割すると、デフォルト値を指定できます。

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

ログイン後にコピー

ES6 は内部的に厳密等価演算子 ( === ) を使用して、位置に値があるかどうかを判断します。したがって、配列メンバーが undefined と厳密に等しくない場合、デフォルト値は有効になりません。

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

ログイン後にコピー

配列メンバーが null の場合、null は厳密には unknown と等しくないため、デフォルト値は有効になりません

function f() {
console.log('aaa');
}
let [x = f()] = [1];
//等价于
let x;
if ([1][0] === undefined) {
  x = f();
} else {
  x = [1][0];
}

ログイン後にコピー

デフォルト値が式の場合、式は遅延評価されます。使用時期いつ評価されるか

デフォルト値は、分割代入の他の変数を参照できますが、その変数は宣言されている必要があります

let [x = 1, y = x] = []; // x=1; y=1
let [x = 1, y = x] = [2]; // x=2; y=2
let [x = 1, y = x] = [1, 2]; // x=1; y=2
let [x = y, y = 1] = []; // ReferenceError

ログイン後にコピー

なぜなら、xがデフォルト値yを使用するとき、yはまだ宣言されていないからです

分割代入オブジェクトの

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

ログイン後にコピー

配列の要素は順番に配置され、変数の値はその位置によって決まりますが、オブジェクトの属性には順序がありません。変数には取得する属性と同じ名前が必要です。正しい値

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

ログイン後にコピー

実際、オブジェクトの分割代入は次のとおりです。形式の略称

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

ログイン後にコピー

オブジェクトの分割と代入の内部メカニズムは、最初に同じ名前の属性を見つけてから、それを対応する変数。実際に代入されるのは前者ではなく後者です

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

ログイン後にコピー

上記のコードでは、実際に代入されるのはモードfooではなく変数bazです

変数の宣言と代入は一体化されています。 let と const の場合、変数は再宣言できないため、割り当てられた変数が以前に宣言されている場合は、エラーが報告されます

let foo;
let {foo} = {foo: 1}; 
// SyntaxError: Duplicate declaration "foo"
let baz;
let {bar: baz} = {bar: 1}; 
// SyntaxError: Duplicate declaration "baz"

ログイン後にコピー

var コマンドでは再宣言が許可されているため、このエラーは let と const コマンドを使用する場合にのみ表示されます。 2 番目の let コマンドがない場合、上記のコードはエラーを報告しません

let foo;
({foo} = {foo: 1}); // 成功
let baz;
({bar: baz} = {bar: 1}); // 成功

ログイン後にコピー

配列と同様、構造の分割は入れ子構造を持つオブジェクトにも使用できます

var obj = {
  p: [
   "Hello",
   { y: "World" }
  ]
};
var { p: [x, { y }] } = obj;
x // "Hello"
y // "World"

ログイン後にコピー

このとき、p は変数ではなくパターンであるため、値は代入されません

var node = {
  loc: {
   start: {
     line: 1,
     column: 5
   }
  }
};
var { loc: { start: { line }} } = node;
line // 1
loc // error: loc is undefined
start // error: start is undefined

ログイン後にコピー

line のみが変数、loc と start はどちらもパターンで代入されません

ネストされた代入の例。

let obj = {};
let arr = [];
({ foo: obj.prop, bar: arr[0] } = { foo: 123, bar: true });
obj // {prop:123}
arr // [true]

ログイン後にコピー

オブジェクトの分割では、デフォルト値も指定されます

var {x = 3} = {};
x // 3
var {x, y = 5} = {x: 1};
x // 1
y // 5
var { message: msg = "Something went wrong" } = {};
msg // "Something went wrong"

ログイン後にコピー

デフォルト値が有効になる条件は、オブジェクトの属性値が厳密に未定義に等しいことです

var {x = 3} = {x: undefined};
x // 3
var {x = 3} = {x: null};
x // null

ログイン後にコピー

分割が失敗した場合、変数は未定義に等しい

var {foo} = {bar: 'baz'};
foo // undefined

ログイン後にコピー

分割モードはネストされたオブジェクトであり、子オブジェクトが配置されている親属性が存在しない場合、エラーが報告されます

// 报错
var {foo: {bar}} = {baz: 'baz'};

ログイン後にコピー

の左側のオブジェクトの foo 属性等号は子オブジェクトに対応します。このサブオブジェクトの bar 属性は、構造化時にエラーを報告します。この時点では foo は unknown に等しいため、サブプロパティを再度取得するとエラーが報告されます

宣言された変数を代入の構造化に使用したい場合は、細心の注意を払う必要があります

// 错误的写法
var x;
{x} = {x: 1};
// SyntaxError: syntax error
// 正确的写法
({x} = {x: 1});

ログイン後にコピー

JavaScript エンジンが{x} をコードブロックとして理解すると、文法エラーが発生します。この問題は、JavaScript がコードブロックとして解釈しないように、行の先頭に中括弧を書かないことによってのみ解決できます

オブジェクトの分割代入により、既存のオブジェクトのメソッドを変数に簡単に割り当てることができます

let { log, sin, cos } = Math;

ログイン後にコピー

Math オブジェクトの log、sine、cosine メソッドが対応する変数に割り当てられるため、より使いやすくなります。

文字列の分解と代入

文字列を分解して代入することもできます。このとき、文字列は配列状のオブジェクトに変換されます

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

ログイン後にコピー

配列状のオブジェクトにはlength属性があるので、この属性も分解して代入することができます

let {length : len} = 'hello';
len // 5

ログイン後にコピー

数値やブール値の分解と代入

代入すると、等号の右側が数値またはブール値の場合、最初にオブジェクトに変換されます

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

ログイン後にコピー

数値とブール値のパッケージングオブジェクトはtoString属性を持っているので、変数 s は値を取得できます

分割代入のルールは、等号の右側が値である限り、値がオブジェクトではないため、最初にオブジェクトに変換することです。 unfineed や null はオブジェクトに変換できないため、分解して代入するとエラーとなります。

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

ログイン後にコピー

関数パラメータの分割代入

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

ログイン後にコピー

関数パラメータの分割はデフォルト値も使用可能

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]

ログイン後にコピー

関数moveのパラメータはオブジェクトであり、このオブジェクトを分割することで変数xとyの値が得られます。構造化が失敗した場合、x と y はデフォルト値と等しくなります。

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

ログイン後にコピー

は変数 x と y のデフォルト値を指定するのではなく、関数 move のパラメータのデフォルト値を指定するため、別の値が得られます。以前の書き方より結果が変わりました。未定義は関数パラメータのデフォルト値をトリガーします

括弧の問題

解构赋值虽然很方便，但是解析起来并不容易。对于编译器来说，一个式子到底是模式，还是表达式，没有办法从一开始就知道，必须解析到（或解析不到）等号才能知道如果模式中出现圆括号怎么处理。ES6的规则是，只要有可能导致解构的歧义，就不得使用圆括号。但是，这条规则实际上不那么容易辨别，处理起来相当麻烦。因此，建议只要有可能，就不要在模式中放置圆括号

不能使用圆括号的情况

1.变量声明语句中，不能带有圆括号

// 全部报错
var [(a)] = [1];
var {x: (c)} = {};
var ({x: c}) = {};
var {(x: c)} = {};
var {(x): c} = {};}
var { o: ({ p: p }) } = { o: { p: 2 } };

ログイン後にコピー

2.函数参数中不能使用圆括号

// 报错
function f([(z)]) { return z; }

ログイン後にコピー

3.赋值语句中，不能将整个模式，或嵌

套模式中的一层，放在圆括号之中

将整个模式放在模式之中，导致报错

// 全部报错
({ p: a }) = { p: 42 };
([a]) = [5];

ログイン後にコピー

将嵌套模式的一层，放在圆括号之中，导致报错

[({ p: a }), { x: c }] = [{}, {}];

ログイン後にコピー

可以使用圆括号的况

赋值语句的非模式部分，可以使用圆括号

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

ログイン後にコピー

首先它们都是赋值语句，而不是声明语句；其次它们的圆括号都不属于模式的一部分。第一行语句中，模式是取数组的第一个成员，跟圆括号无关；第二行语句中，模式是p，而不是d；第三行语句与第一行语句的性
质一致

用途

1.交换变量的值

[x, y] = [y, x];

ログイン後にコピー

2.从函数返回多个值

// 返回一个数组
function example() {
  return [1, 2, 3];
}
var [a, b, c] = example();
// 返回一个对象
function example() {
  return {
   foo: 1,
   bar: 2
  };
}
var { foo, bar } = example();

ログイン後にコピー

3.函数参数的定义

解构赋值可以方便地将一组参数与变量名对应起来

function f([x, y, z]) { ... }
f([1, 2, 3]);
// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});

ログイン後にコピー

4.提取JSON数据

var jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};
let { id, status, data: number } = jsonData;
console.log(id, status, number);
// 42, "OK", [867, 5309]

ログイン後にコピー

5.函数参数的默认值

jQuery.ajax = function (url, {
  async = true,
  beforeSend = function () {},
  cache = true,
  complete = function () {},
  crossDomain = false,
  global = true,
  // ... more config
}) {
  // ... do stuff
};

ログイン後にコピー

6.便利Map结构

var map = new Map();
map.set('first', 'hello');
map.set('second', 'world');
for (let [key, value] of map) {
  console.log(key + " is " + value);
}
// first is hello
// second is world
// 获取键名
for (let [key] of map) {
// ...
}
// 获取键值
for (let [,value] of map) {
// ...
}

ログイン後にコピー

7.输入模块的指定方法

const { SourceMapConsumer, SourceNode } = require("source-map")

ログイン後にコピー