構造解析割当とは?
7554 ワード
ぶんぱいこうぞうぶんかい
1.構文
構造分解のデフォルト構文は、次のコードに示されます.var a, b, rest;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
[a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(a); // 1
console.log(b); // 2
console.log(rest); // [3, 4, 5]
({a, b} = {a:1, b:2});
console.log(a); // 1
console.log(b); // 2
構造分解で割り当てられた左側は、値を割り当てる変数で、右側は値です.var x = [1, 2, 3, 4, 5];
var [y, z] = x;
console.log(y); // 1
console.log(z); // 2
2.分解配列構造
デフォルト変数の割り当て
アレイ構造分解の変数の値を指定するデフォルトの方法は、次のとおりです.var foo = ["one", "two", "three"];
var [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"
デフォルト変数の割り当て
fooに1つ、2つ、3つの変数をそれぞれ保存し、出力を確保するために構造分解として変数1つ、2つ、3つに割り当てることができます.
宣言から分離された割当て
変数宣言と割り当てを別々にすることで、アレイ構造の分解を割り当てることができます.var a, b;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
デフォルトの設定
アレイ構造を分解すると、既定値を設定できます.var a, b;
[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7
デフォルトの設定
既定値はa=5、b=7です.[a=5,b=7]=[1]は、aに1が割り当てられて出力1となり、bにデフォルト値が7となるように決定される.
スワップ値
スワップとスワップの2つの値は、アレイ構造分解を使用して1行として表すことができます.var a = 1;
var b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
スワップ値
関数の戻り配列
構造分解は、関数から返される配列に割り当てることもできます.function f() {
return [1, 2];
}
var a, b;
[a, b] = f();
console.log(a); // 1
console.log(b); // 2
関数の戻り配列
f関数では、配列[1,2]を返します.この戻り値に構造分解を割り当てることで、変数aおよびbに値が出力されることを確認できます.
値を無視
アレイ構造の分解によって割り当てられた値も無視できます.function f() {
return [1, 2, 3];
}
var [a, , b] = f();
console.log(a); // 1
console.log(b); // 3
[a, , b] = [4, 5, 6];
console.log(a); // 4
console.log(b); // 6
値を無視
戻り値2と割当て値5が無視されているかどうかを確認できます.
すべての値を無視することもできます.
[,,] = [1, 2, 3];
変数として保存
...アレイ構造分解は、残りの先頭変数に割り当てることができます.var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]
変数として保存
最後に「,」を追加すると、SyntaxErrorが表示されます.残りの変数を使用する場合は特に注意してください.
var [a, ...b,] = [1, 2, 3];
//SyntaxError: rest element may not have a trailing comma
残りの変数に構造分解を割り当てると、最後にはできません.
正規表現から値を取得
アレイ構造分解割り当てにより、正規化されたアレイから簡単に値を取得できます.var url = "https://developer.mozilla.org/en-US/Web/JavaScript";
var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]
var [, protocol, fullhost, fullpath] = parsedURL;
console.log(protocol); // "https"
構造分解割り当てにより、正規化配列から値を簡単に取得できます.
3.分解対象構造
デフォルト変数の割り当て
var o = {p: 42, q: true};
var {p, q} = o;
console.log(p); // 42
console.log(q); // true
デフォルト変数の割り当て
宣言から分離された割当て
var a, b;
({a, b} = {a:1, b:2});
console.log(a);
console.log(b);
宣言から分離された割当て
新しい変数名に割り当てる
オブジェクト構造を使用して、新しい変数名に値を割り当てることができます.var o = {p: 42, q: true};
var {p: foo, q: bar} = o;
console.log(foo); // 42
console.log(bar); // true
新しい変数名に割り当てる
デフォルトの設定
オブジェクト構造分解では、既定値を設定することもできます.
ES 5におけるdefaultパラメータの実装
function drawES5Chart(options) {
options = options === undefined ? {} : options;
var size = options.size === undefined ? 'big' : options.size;
var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords;
var radius = options.radius === undefined ? 25 : options.radius;
console.log(size, cords, radius);
// now finally do some chart drawing
}
drawES5Chart({
cords: { x: 18, y: 30 },
radius: 30
});
ES 5でのdefalutパラメータの実装
ES 6でのdefaultパラメータの使用function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) {
console.log(size, cords, radius);
// do some chart drawing
}
drawES2015Chart({
cords: { x: 18, y: 30 },
radius: 30
});
ES 6でのdefaultパラメータの使用
オブジェクト構造分解でデフォルト値を使用する場合、ES 5とは異なる簡潔性をES 6で実現することができる.
ネストされたオブジェクトと配列構造の分解
var metadata = {
title: "Scratchpad",
translations: [
{
locale: "de",
localization_tags: [ ],
last_edit: "2014-04-14T08:43:37",
url: "/de/docs/Tools/Scratchpad",
title: "JavaScript-Umgebung"
}
],
url: "/en-US/docs/Tools/Scratchpad"
};
var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
console.log(englishTitle); // "Scratchpad"
console.log(localeTitle); // "JavaScript-Umgebung"
ネストされたオブジェクトと配列構造の分解
for ... こうぞうぶんかい
var people = [
{
name: "Mike Smith",
family: {
mother: "Jane Smith",
father: "Harry Smith",
sister: "Samantha Smith"
},
age: 35
},
{
name: "Tom Jones",
family: {
mother: "Norah Jones",
father: "Richard Jones",
brother: "Howard Jones"
},
age: 25
}
];
for (var {name: n, family: { father: f } } of people) {
console.log("Name: " + n + ", Father: " + f);
}
// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"
for .. こうぞうぶんかい
パラメータから構造を分解するには
パラメータに構造分解を使用することもできます.function userId({id}) {
return id;
}
function whois({displayName: displayName, fullName: {firstName: name}}){
console.log(displayName + " is " + name);
}
var user = {
id: 42,
displayName: "jdoe",
fullName: {
firstName: "John",
lastName: "Doe"
}
};
console.log("userId: " + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"
構造分解に慣れていない場合は、いくつかの困難が発生する可能性がありますが、構造分解を使用して簡潔なコードを記述できます.
計算された変数名の使用
実行時に計算される値は、構造分解変数の名前として使用できます.let key = "z";
let { [key]: foo } = { z: "bar" };
console.log(foo); // "bar"
計算された変数名の使用
var a, b, rest;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
[a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(a); // 1
console.log(b); // 2
console.log(rest); // [3, 4, 5]
({a, b} = {a:1, b:2});
console.log(a); // 1
console.log(b); // 2
var x = [1, 2, 3, 4, 5];
var [y, z] = x;
console.log(y); // 1
console.log(z); // 2
var foo = ["one", "two", "three"];
var [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"
var a, b;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
var a, b;
[a=5, b=7] = [1];
console.log(a); // 1
console.log(b); // 7
var a = 1;
var b = 3;
[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1
function f() {
return [1, 2];
}
var a, b;
[a, b] = f();
console.log(a); // 1
console.log(b); // 2
function f() {
return [1, 2, 3];
}
var [a, , b] = f();
console.log(a); // 1
console.log(b); // 3
[a, , b] = [4, 5, 6];
console.log(a); // 4
console.log(b); // 6
var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]
var url = "https://developer.mozilla.org/en-US/Web/JavaScript";
var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url);
console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"]
var [, protocol, fullhost, fullpath] = parsedURL;
console.log(protocol); // "https"
var o = {p: 42, q: true};
var {p, q} = o;
console.log(p); // 42
console.log(q); // true
({a, b} = {a:1, b:2});
console.log(a);
console.log(b);
var o = {p: 42, q: true};
var {p: foo, q: bar} = o;
console.log(foo); // 42
console.log(bar); // true
function drawES5Chart(options) {
options = options === undefined ? {} : options;
var size = options.size === undefined ? 'big' : options.size;
var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords;
var radius = options.radius === undefined ? 25 : options.radius;
console.log(size, cords, radius);
// now finally do some chart drawing
}
drawES5Chart({
cords: { x: 18, y: 30 },
radius: 30
});
function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) {
console.log(size, cords, radius);
// do some chart drawing
}
drawES2015Chart({
cords: { x: 18, y: 30 },
radius: 30
});
var metadata = {
title: "Scratchpad",
translations: [
{
locale: "de",
localization_tags: [ ],
last_edit: "2014-04-14T08:43:37",
url: "/de/docs/Tools/Scratchpad",
title: "JavaScript-Umgebung"
}
],
url: "/en-US/docs/Tools/Scratchpad"
};
var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;
console.log(englishTitle); // "Scratchpad"
console.log(localeTitle); // "JavaScript-Umgebung"
var people = [
{
name: "Mike Smith",
family: {
mother: "Jane Smith",
father: "Harry Smith",
sister: "Samantha Smith"
},
age: 35
},
{
name: "Tom Jones",
family: {
mother: "Norah Jones",
father: "Richard Jones",
brother: "Howard Jones"
},
age: 25
}
];
for (var {name: n, family: { father: f } } of people) {
console.log("Name: " + n + ", Father: " + f);
}
// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"
function userId({id}) {
return id;
}
function whois({displayName: displayName, fullName: {firstName: name}}){
console.log(displayName + " is " + name);
}
var user = {
id: 42,
displayName: "jdoe",
fullName: {
firstName: "John",
lastName: "Doe"
}
};
console.log("userId: " + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"
let key = "z";
let { [key]: foo } = { z: "bar" };
console.log(foo); // "bar"
//Computed property names (ES2015)
var i = 0;
var a = {
["foo" + ++i]: i,
["foo" + ++i]: i,
["foo" + ++i]: i
};
console.log(a.foo1); // 1
console.log(a.foo2); // 2
console.log(a.foo3); // 3
var param = 'size';
var config = {
[param]: 12,
["mobile" + param.charAt(0).toUpperCase() + param.slice(1)]: 4
};
console.log(config); // { size: 12, mobileSize: 4 }
ES 6では、実行時にエンティティオブジェクトから計算された値をPropertyの名前として使用できます.Reference
この問題について(構造解析割当とは?), 我々は、より多くの情報をここで見つけました https://velog.io/@gusahr119/구조문해-할당이란テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol