Machen Sie sich mit der JavaScript-Destrukturierungsaufgabe vertraut

Dieser Artikel vermittelt Ihnen relevantes Wissen über Javascript und stellt hauptsächlich verwandte Themen zur Destrukturierungszuweisung vor, einschließlich Array-Destrukturierung, Objektstruktur und Verwendung von Destrukturierung usw. Ich hoffe, dass er für alle hilfreich ist.

-Reformationsempfehlungen: JavaScript -Lerntutorial

Concepts

es6 bietet einen prägnanteren Zuordnungsmodus, um Werte aus Arrays und Objekten zu extrahieren, was als Destructuring

-Beispiel:

[a, b] = [50, 100];
console.log(a);
// expected output: 50
console.log(b);
// expected output: 100

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(rest);
// expected output: [30, 40, 50]

array Destructuring bezeichnet wird

Array-Destrukturierung ist sehr einfach und prägnant. Verwenden Sie ein Array-Literal auf der linken Seite des Zuweisungsausdrucks. Jeder Variablenname im Array-Literal wird demselben Indexelement des destrukturierten Arrays zugeordnet wie folgt: Genau wie in diesem Beispiel erhalten die Elemente im Array auf der linken Seite jeweils die Werte der entsprechenden Indizes des destrukturierten Arrays auf der rechten Seite ​separat durch Variablendeklaration

Beispiel: Variablen deklarieren und Werte separat zuweisen

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

Dekonstruieren Sie den Standardwert

Wenn der dekonstruierte Wert undefiniert ist, können Sie den Standardwert festlegen:

// 声明变量
let a, b;
// 然后分别赋值
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

Im obigen Beispiel legen wir Standardwerte für a und b fest

Auf diese Weise wird in diesem Fall, wenn der Wert von a oder b undefiniert ist, der festgelegte Standardwert zugewiesen die entsprechende Variable (5 ist a zugewiesen, 7 ist b zugewiesen)

Variablenwerte austauschen

undefined，可以设置默认值：

let a, b;
// 设置默认值
[a = 5, b = 7] = [1];
console.log(a); // 1
console.log(b); // 7

在上面的例子中，我们给a和b均设置了默认值
这种情况下，如果a或b的值是undefined，它将把设置的默认值赋给相应变量（5赋给a，7赋给b）

交换变量值

以往我们进行两个变量的交换，都是使用

//交换abc = a;a = b;b = c;

或者异或的方法

然而在解构赋值中，我们可以在一个解构表达式中交换两个变量值

let a = 1;let b = 3;//交换a和b的值[a, b] = [b, a];console.log(a); // 3console.log(b); // 1

解构函数返回的数组

我们可以直接解构一个返回值为数组的函数

function c() {
  return [10, 20];}let a, b;[a, b] = c();console.log(a); // 10console.log(b); // 20

在上面的例子中，**c()**的返回值[10，20]可以在单独的同一行代码中使用解构

忽略返回值（或跳过某一项）

你可以有选择性的跳过一些不想得到的返回值

function c() {
  return [1, 2, 3];}let [a, , b] = c();console.log(a); // 1console.log(b); // 3

赋值数组剩余值给一个变量

当你使用数组解构时，你可以把赋值数组剩余的部分全部赋给一个变量

let [a, ...b] = [1, 2, 3];console.log(a); // 1console.log(b); // [2, 3]

这样的话b也会变成一个数组了，数组中的项是剩余的所有项

注意：
这里要小心结尾是不能再写逗号的，如果多了一个逗号将会报错

let [a, ...b,] = [1, 2, 3];// SyntaxError: rest element may not have a trailing comma

嵌套数组解构

像对象一样，数组也可以进行嵌套解构

示例：

const color = ['#FF00FF', [255, 0, 255], 'rgb(255, 0, 255)'];
// Use nested destructuring to assign red, green and blue
// 使用嵌套解构赋值 red, green, blue
const [hex, [red, green, blue]] = color;
console.log(hex, red, green, blue); // #FF00FF 255 0 255

字符串解构

在数组解构中，解构的目标若为可遍历对象，皆可进行解构赋值，可遍历对象即实现Iterator接口的数据

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

对象解构

基础对象解构

let x = { y: 22, z: true };
let { y, z } = x; // let {y:y,z:z} = x;的简写

console.log(y); // 22
console.log(z); // true

赋值给新变量名

当使用对象解构时可以改变变量的名称

let o = { p: 22, q: true };
let { p: foo, q: bar } = o;

console.log(foo); // 22
console.log(bar); // true

如上代码var {p: foo} = o 获取对象 o 的属性名 p，然后赋值给一个名称为 foo 的变量

解构默认值

如果解构取出的对象值是undefined，我们可以设置默认值

let { a = 10, b = 5 } = { a: 3 };

console.log(a); // 3
console.log(b); // 5

赋值给新对象名的同时提供默认值

前面提到过我们赋值给新的对象名，这里我们可以给这个新的对象名提供一个默认值，如果没有解构它，就会自动使用默认值

let { a: aa = 10, b: bb = 5 } = { a: 3 };

console.log(aa); // 3
console.log(bb); // 5

同时使用数组和对象解构

在结构中数组和对象可以一起使用

const props = [
  { id: 1, name: 'Fizz' },
  { id: 2, name: 'Buzz' },
  { id: 3, name: 'FizzBuzz' },
];

const [, , { name }] = props;
console.log(name); // "FizzBuzz"

不完全解构

let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;//不解构x

// x = undefined
// y = 'world'

赋值剩余值给一个对象

let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}

嵌套对象解构（可忽略解构）

let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, { y }] } = obj;
// x = 'hello'
// y = 'world'
let obj = {p: ['hello', {y: 'world'}] };
let {p: [x, {  }] } = obj;//忽略y
// x = 'hello'

注意事项

小心使用已声明变量进行解构

错误示范：

let x;{x} = {x: 1};

JavaScript引擎会将{x} In der Vergangenheit haben wir beim Austauschen zweier Variablen immer

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

oder XOR verwendet Zuweisung können wir zwei Variablenwerte in einem Destrukturierungsausdruck austauschen.

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

Die Destrukturierungsfunktion gibt das Array zurück.

Wir können eine Funktion, deren Rückgabewert ein Array ist, direkt destrukturieren Der Rückgabewert [10, 20] von **c()** kann in einer separaten Codezeile destrukturiert werden

Ignorieren Sie den Rückgabewert (oder überspringen Sie ein Element)

Sie können einige unerwünschte Rückgabewerte selektiv überspringen

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

Weisen Sie den verbleibenden Wert des Arrays einer Variablen zu.

Wenn Sie die Array-Destrukturierung verwenden, können Sie alle verbleibenden Teile des Zuweisungsarrays einer Variablen zuweisen.

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

In diesem Fall wird b auch zu einem Array und Die Elemente im Array sind alle verbleibenden Elemente

Hinweis:

Seien Sie hier vorsichtig und die Endung lautet. Es können keine weiteren Kommas geschrieben werden. Wenn ein zusätzliches Komma vorhanden ist, wird ein Fehler gemeldet

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

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

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

🎜🎜Verschachtelte Array-Destrukturierung 🎜🎜🎜Arrays können wie Objekte auch verschachtelt dekonstruiert werden Objekt sind die Daten, die die Iterator-Schnittstelle implementieren code var {p: foo} = o ruft den Attributnamen p des Objekts o ab und weist ihn dann einem Wert namens foo zu. Die Variable 🎜🎜🎜destrukturiert den Standardwert🎜🎜🎜Wenn der Objektwert übernommen wird Wenn die Destrukturierung undefiniert ist, können wir den Standardwert 🎜rrreee🎜🎜festlegen, ihn dem neuen Objektnamen zuweisen und den Standardwert bereitstellen 🎜🎜🎜before Wie bereits erwähnt, weisen wir einem neuen Objekt einen Wert zu Objektname. Hier können wir einen Standardwert für diesen neuen Objektnamen angeben. Wenn er nicht destrukturiert wird, wird der Standardwert automatisch verwendet. Es können sowohl Array- als auch Objektdestrukturierung verwendet werden Zusammen verwendet🎜rrreee🎜🎜Unvollständige Destrukturierung🎜🎜rrreee🎜Zuweisen des verbleibenden Werts zu einem Objekt🎜rrreee🎜🎜Verschachtelte Objektdestrukturierung (Destrukturierung kann ignoriert werden)🎜🎜rrreee🎜Hinweise🎜🎜🎜Mit Vorsicht verwenden. Deklarieren Variablen zur Destrukturierung verwenden 🎜🎜🎜 🎜Fehlerbeispiel: 🎜🎜rrreee🎜Die JavaScript-Engine interpretiert {x} als Codeblock, was zu einem Syntaxfehler führt. Wir müssen das Schreiben von geschweiften Klammern am Anfang der Zeile vermeiden, um JavaScript zu vermeiden als Codeblock interpretieren 🎜🎜Richtiges Schreiben: 🎜🎜rrreee🎜Richtiges Schreiben: Setzen Sie die gesamte destrukturierende Zuweisungsanweisung in Klammern, und Sie können sie korrekt ausführen🎜🎜🎜Destrukturierende Zuweisung von Funktionsparametern🎜🎜🎜Funktionsparameter können auch sein Zuweisung durch Destrukturierung🎜rrreee🎜Im obigen Code ist der Parameter der Funktion add ein Array auf der Oberfläche, aber bei der Übergabe des Parameters wird der Array-Parameter in die Variablen x und y zerlegt. Für das Innere der Funktion ist dies der Fall das Gleiche wie die direkte Übergabe von x und y ist dasselbe🎜🎜Der Zweck der Destrukturierung🎜🎜Es gibt viele Verwendungsmöglichkeiten für die Destrukturierungszuweisung🎜🎜🎜Austauschen der Werte von Variablen🎜🎜rrreee🎜Der obige Code tauscht die Werte von aus x und y. Diese Schreibmethode ist nicht nur prägnant, sondern auch leicht zu lesen, die Semantik ist klar. 🎜🎜🎜Mehrere Werte von der Funktion zurückgeben. Die Funktion kann nur einen Wert zurückgeben, wenn wir mehrere Werte zurückgeben möchten Wir können diese Werte nur in ein Array oder Objekt einfügen und sie zurückgeben. Wenn wir die Destrukturierungszuweisung haben, ist das Abrufen dieser Werte von einem Objekt oder Array so, als würde man etwas aus einer Tasche holen 🎜

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

提取JSON数据

解构赋值对于提取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]

使用上面的代码，我们就可以快速取出JSON数据中的值

相关推荐：javascript教程

Das obige ist der detaillierte Inhalt vonMachen Sie sich mit der JavaScript-Destrukturierungsaufgabe vertraut. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!