Werfen wir einen Blick auf die Objektdestrukturierung in JavaScript

Destrukturierung ist ein Konzept, das einen der Datentypen zerlegt und seine einzelnen Eigenschaften Variablen zuweist. Es wurde im Artikel „JavaScript Destructuring Assignment 5 Common Scenarios and Examples“ vorgestellt, schauen wir uns das heute an.

Grundlegende Destrukturierung

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
};
const { firstName, lastName } = fullName; // 解构语法
console.log(firstName); // Quintion
console.log(lastName); // Tang

Wie im obigen Codeausschnitt zu sehen ist, wird in der Destrukturierungssyntax die Objekteigenschaft firstName dekonstruiert und der auf der linken Seite des Ausdrucks definierten Variablen zugewiesen. Im obigen Szenario sollten die Eigenschaftsnamen des Objekts mit den im Ausdruck links definierten Variablen übereinstimmen. Wenn Sie andere Variablennamen definieren, erhalten Sie nicht den gewünschten Wert, wie zum Beispiel: firstName 对象属性并将其分配给表达式左侧定义的变量。在上述场景中，对象的属性名称应与左侧表达式中定义的变量匹配。 如果定义其他变量名称，则获取不到想要的值，如：

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
};
const { firstName, trueName } = fullName; // 解构语法
console.log(firstName); // Quintion
console.log(trueName); // undefined

由于在 fullName 中没有属性 trueName ，所以它被初始化为 undefined。

别名解构

如果需要把对象属性赋值给属性名不一致的变量名，可以如下代码来实现：

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
};
const { firstName: trueName, lastName } = fullName; // 解构语法
console.log(trueName); // Quintion
console.log(lastName); // Tang

默认值解构

在上面代码中有看到，对象中不存在特定属性的解构，一般会赋值为 undefined ，如果不希望是 undefined ，可以为其设置一个默认值，如下：

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
};
const { firstName: trueName, lastName, age = 18 } = fullName; // 解构语法
console.log(trueName); // Quintion
console.log(lastName); // Tang
console.log(age); // 18

下面来看下存在 age 属性下的结果：

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
    age: 30,
};
const { firstName: trueName, lastName, age = 18 } = fullName; // 解构语法
console.log(trueName); // Quintion
console.log(lastName); // Tang
console.log(age); // 30

REST解构

如果想从一个对象中解构一个属性，剩下的属性结构为另一个变量，如下：

const fullName = {
    firstName: "Quintion",
    lastName: "Tang",
    age: 30,
};
const { age, ...username } = fullName; // 解构语法
console.log(username); // { firstName: 'Quintion', lastName: 'Tang' }
console.log(age); // 30

在上面的代码片段中，将 username 属性分配给了一个变量，并使用了 rest 运算符 (...rrreee

Da es in fullName kein Attribut trueName gibt, wird es auf undefiniert.

Alias-DekonstruktionWenn Sie Variablennamen mit inkonsistenten Attributnamen Objektattribute zuweisen müssen, können Sie dies mit dem folgenden Code implementieren:
rrreee

Destrukturierung des Standardwerts🎜Wie Sie im obigen Code sehen können, erfolgt keine Destrukturierung bestimmter Attribute im Objekt. Im Allgemeinen wird der Wert undefiniert zugewiesen Wenn Sie nicht möchten, dass es undefiniert ist, können Sie wie folgt einen Standardwert dafür festlegen: 🎜rrreee🎜 Schauen wir uns die Ergebnisse unter dem Attribut age an: 🎜rrreee

REST-Dekonstruktion🎜🎜Wenn Sie ein Attribut aus einem Objekt dekonstruieren möchten und die verbleibende Attributstruktur eine andere Variable ist, wie folgt: 🎜rrreee🎜Im obigen Codeausschnitt wird die Das Attribut username wird einer Variablen zugewiesen und verwendet. rest-Operator (...) weist die restlichen Eigenschaften einer Variablen einem separaten Objekt zu. 🎜🎜Empfohlenes Lernen: „🎜JavaScript-Video-Tutorial🎜“🎜🎜

Das obige ist der detaillierte Inhalt vonWerfen wir einen Blick auf die Objektdestrukturierung in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!