Analyse der Destrukturierungszuweisung in ES6 (Codebeispiel)

Der Inhalt dieses Artikels befasst sich mit der Analyse der Destrukturierungszuweisung in ES6 (Codebeispiele). Ich hoffe, dass er für Sie hilfreich ist.

ES6 ermöglicht das Extrahieren von Werten aus Arrays und Objekten und das Zuweisen von Werten zu Variablen nach bestimmten Mustern, was als Destrukturierung bezeichnet wird.

Wer kann destrukturieren?

Arrays können mithilfe von Arrays destrukturiert werden. Für Set-Strukturen kann auch die destrukturierende Zuweisung von Arrays verwendet werden.
Die Regel der Destrukturierungszuweisung lautet: Solange der Wert auf der rechten Seite des Gleichheitszeichens kein Objekt oder Array ist, konvertieren Sie ihn zuerst in ein Objekt.

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

Solange eine bestimmte Datenstruktur über eine Iterator-Schnittstelle verfügt, kann tatsächlich eine destrukturierende Zuweisung in Form eines Arrays verwendet werden.

function* fibs() {
  let a = 0;
  let b = 1;
  while (true) {
    yield a;
    [a, b] = [b, a + b];
  }
}

let [first, second, third, fourth, fifth, sixth] = fibs();
sixth // 5

Im obigen Code ist fibs eine Generatorfunktion (siehe Generatorfunktion), die nativ über eine Iteratorschnittstelle verfügt. Durch die Destrukturierungszuweisung wird der Wert wiederum von dieser Schnittstelle abgerufen.
Die obige Anweisung meldet einen Fehler, weil der Wert auf der rechten Seite des Gleichheitszeichens nach der Konvertierung in ein Objekt (die ersten fünf Ausdrücke) entweder nicht über die Iterator-Schnittstelle verfügt oder er selbst nicht über die Iterator-Schnittstelle verfügt (der letzte Ausdruck).
Wenn die rechte Seite des Destrukturierungszuweisungsausdrucks (= der folgende Ausdruck) null oder undefiniert ergibt, wird ein Fehler ausgegeben. Denn jeder Versuch, null oder undefiniert zu lesen, führt zu einem „Laufzeitfehler“.

Destrukturierung fehlt Initialisierungsfehler

Wenn Destrukturierung verwendet wird, um Variablen mit var, let oder const zu deklarieren, ein Initialisierer (d. h. der Wert auf der rechten Seite des Gleichen). Hinweisschild) muss vorhanden sein. Der folgende Code gibt einen Fehler aufgrund eines fehlenden Initialisierers aus:

//    语法错误！
var    {type,name};
//    语法错误！
let    {type,name};
//    语法错误！
const {type,name};

Ähnlich wie bei der Objektdestrukturierung müssen Sie bei Verwendung von var , let , const für die Array-Destrukturierung einen Initialisierer angeben.

Deklarierte Variablen werden zur Destrukturierung der Zuweisung verwendet

Objekt

// 错误的写法
let x;
{x} = {x: 1};
// SyntaxError: syntax error

Der obige Code meldet einen Fehler, da die JavaScript-Engine {x} als versteht Ein Codeblock, der zu einem Syntaxfehler führt. Dieses Problem lässt sich nur dadurch lösen, dass man die geschweifte Klammer nicht am Anfang der Zeile schreibt, um zu verhindern, dass JavaScript sie als Codeblock interpretiert.

// 正确的写法
let x;
({x} = {x: 1});

Array

Sie können die Array-Destrukturierung in Zuweisungsausdrücken verwenden, aber im Gegensatz zur Objektdestrukturierung müssen Sie den Ausdruck nicht in Klammern setzen, zum Beispiel:

let    colors=["red","green","blue"    ],
let    firstColor    =    "black",
let    secondColor    =    "purple";
[firstColor,secondColor    ]    =    colors;
console.log(firstColor);//    "red"
console.log(secondColor);//    "green"

Der Wert des destrukturierenden Zuweisungsausdrucks

Der Wert des destrukturierenden Zuweisungsausdrucks ist der Wert auf der rechten Seite des Ausdrucks (nach =). Dies bedeutet, dass ein destrukturierender Zuweisungsausdruck überall dort verwendet werden kann, wo ein Wert erwartet wird. Übergeben Sie beispielsweise einen Wert an eine Funktion:

let    node={type:    "Identifier",name:    "foo"},
let type = "Literal",
let name = 5;
function    outputInfo(value)    {
    console.log(value    ===    node);    //    true
}

outputInfo({type,name}=node);

console.log(type);//    "Identifier"
console.log(name);//    "foo"

Array-destrukturierende Zuweisung

Array-destrukturierender Zuweisungsausdruck rvalue error

Wenn die rechte Seite des Gleichheitszeichen Wenn es sich nicht um ein Array handelt (oder streng genommen um keine durchquerbare Struktur, siehe Iterator), wird ein Fehler gemeldet.
Wenn {} zum Dekonstruieren der linken Seite verwendet wird, wird der R-Wert in ein Objekt konvertiert und es werden keine Fehler gemeldet, außer null und undefiniert.

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

Dekonstruktion eines eindimensionalen Arrays

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

Der obige Code zeigt an, dass Werte aus dem Array extrahiert und Variablen entsprechend den entsprechenden Positionen zugewiesen werden können.

Destrukturierung verschachtelter Arrays

let    [firstColor,[secondColor]] = ["red",["green","lightgreen"],"blue"];
console.log(firstColor);//    "red"
console.log(secondColor);//    "green"

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

Unvollständige Destrukturierung

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

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

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

let    [,firstColor,[secondColor]] = ["red","blue",["green","lightgreen"]];
firstColor//blue
secondColor//["green","lightgreen"]

Destrukturierung ist nicht erfolgreich

Wenn das Element an der angegebenen Position nicht existiert oder sein Wert vorhanden ist undefiniert , dann ist die Dekonstruktion nicht erfolgreich und der Wert der Variablen ist gleich undefiniert.

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

Standardwert

Wenn die Destrukturierung des Elements an der angegebenen Position nicht erfolgreich ist, wird dieser Standardwert verwendet.
Beachten Sie, dass ES6 intern den strikten Gleichheitsoperator (===) verwendet, um zu bestimmen, ob eine Position einen Wert hat. Daher wird der Standardwert nur wirksam, wenn ein Array-Mitglied strikt gleich undefiniert ist.
Wenn ein Array-Mitglied null ist, wird der Standardwert nicht wirksam, da null nicht unbedingt undefiniert ist.

let    colors = ["red"];
let    [firstColor,secondColor    = "green"]=colors
console.log(firstColor);//"red"
console.log(secondColor);//    "green"

let [foo = true] = [];
foo // true

Wenn der Standardwert ein Ausdruck ist, wird der Ausdruck träge ausgewertet, das heißt, er wird nur ausgewertet, wenn er verwendet wird.

function f() {
  console.log('aaa');
}

let [x = f()] = [1];

Da x im obigen Code einen Wert erhalten kann, wird die Funktion f überhaupt nicht ausgeführt. Der obige Code entspricht tatsächlich dem folgenden Code.
Der Standardwert kann sich auf andere Variablen mit destrukturierender Zuweisung beziehen, die Variable muss jedoch deklariert worden sein.

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: y is not defined

Destrukturierung verbleibender Elemente

Array-Destrukturierung hat ein ähnliches Konzept namens Restelemente ( rest items ), das ... Syntax verwendet, um die verbleibenden Elemente einer angegebenen Variablen zuzuweisen.

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

Aber es hat noch eine weitere nützliche Funktion. Das praktische Klonen von Arrays ist eine eklatant vermisste Funktion in JS. In ES5 verwenden Entwickler häufig eine einfache Methode, nämlich die Methode concat() zum Klonen eines Arrays.

var    colors = ["red","green","blue"];
var    clonedColors = colors.concat();
console.log(clonedColors);//"[red,green,blue]"

In ES6 können Sie die Restsyntax verwenden, um den gleichen Effekt zu erzielen. Wie folgt umgesetzt:

let    colors = ["red","green","blue"];
let    [...clonedColors] = colors;
console.log(clonedColors);//"[red,green,blue]"

Achtung! Das verbleibende Element muss der letzte Teil des Array-Destrukturierungsmusters sein und darf nicht von einem Komma gefolgt werden, andernfalls handelt es sich um einen Syntaxfehler.

Destrukturierende Zuordnung von Objekten

解构不仅可以用于数组，还可以用于对象。对象的解构与数组有一个重要的不同。数组的元素是按次序排列的，变量的取值由它的位置决定；而对象的属性没有次序，变量必须与属性同名，才能取到正确的值。  
对象的解构赋值的解构和数组的差不多，只是[]换为了{}，嵌套对象多了个：，还有对象不在乎属性的顺序，所以对象的不完全解构是不必要像数组那样的，想要哪个属性直接写属性名就行了，同时还多了个别名的设置。

//普通对象的解构
let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"

//嵌套对象的解构
let obj = {
  p: [
    'Hello',
    { y: 'World' }
  ]
};
let { p: [x, { y }] } = obj;
//注意，这时p是模式，不是变量，因此不会被赋值。
//如果p也要作为变量赋值，可以写成下
//let { p, p: [x, { y }] } = obj;
x // "Hello"
y // "World"
//另一个例子 
const node = {
  loc: {
    start: {
      line: 1,
      column: 5
    }
  }
};
let { loc, loc: { start }, loc: { start: { line }} } = node;
line // 1
loc  // Object {start: Object}
start // Object {line: 1, column: 5}
//注意，最后一次对line属性的解构赋值之中，只有line是变量，loc和start都是模式，不是变量。

//默认值
var {x = 3} = {};
x // 3
var {x, y = 5} = {x: 1};
x // 1
y // 5
//默认值生效的条件是，对象的属性值严格等于undefined
var {x = 3} = {x: undefined};
x // 3
var {x = 3} = {x: null};
x // null

//解构不成功，变量的值等于undefined。
let {foo} = {bar: 'baz'};
foo // undefined
// foo这时等于undefined，再取子属性就会报错
let {foo: {bar}} = {baz: 'baz'};

//由于数组本质是特殊的对象，因此可以对数组进行对象属性的解构。
let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3
//length属性
let {length : len} = [1,2,3];
len//3

设置别名

ES6    有一个扩展语法，允许你在给本地变量赋值时使用一个不同的名称。

let { foo: baz } = { foo: 'aaa', bar: 'bbb' };
baz // "aaa"

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

字符串的解构赋值

字符串也可以解构赋值。这是因为此时，字符串被转换成了一个类似数组的对象。

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

let {toString} = NaN；
toString === Number.prototype.toString//true

函数参数的解构赋值

函数的参数也可以使用解构赋值。

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

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

上面代码中，函数add的参数表面上是一个数组，但在传入参数的那一刻，数组参数就被解构成变量x和y。对于函数内部的代码来说，它们能感受到的参数就是x和y。  
函数参数的解构也可以使用默认值。

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等于默认值。当    JS    的函数接收大量可选参数时，一个常用模式是创建一个    options    对象，其中包含了附加的参数。

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]

js会先把实参传进形参的右值，代替左值，如果没传，默认用形参的右值。  
undefined就会触发函数参数的默认值。

[1, undefined, 3].map((x = 'yes') => x);
// [ 1, 'yes', 3 ]

用途

交换变量的值

let x = 1;
let y = 2;

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

取出从函数返回的值

函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。

// 返回一个数组

function example() {
  return [1, 2, 3];
}
let [a, b, c] = example();

// 返回一个对象

function example() {
  return {
    foo: 1,
    bar: 2
  };
}
let { foo, bar } = example();

函数无次序参数的传入

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

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

提取 JSON 数据

let jsonData = {
  id: 42,
  status: "OK",
  data: [867, 5309]
};

let { id, status, data: number } = jsonData;

console.log(id, status, number);
// 42, "OK", [867, 5309]

函数参数的默认值

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

指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句。

遍历 Map 结构

任何部署了 Iterator 接口的对象，都可以用for...of循环遍历。Map 结构原生支持Iterator接口，配合变量的解构赋值，获取键名和键值就非常方便。

const 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) {
  // ...
}

输入模块的指定方法

加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。

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

Das obige ist der detaillierte Inhalt vonAnalyse der Destrukturierungszuweisung in ES6 (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!