Heim > Artikel > Web-Frontend > 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.
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
如果想从一个对象中解构一个属性,剩下的属性结构为另一个变量,如下:
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
fullName
kein Attribut trueName
gibt, wird es auf undefiniert
.
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: 🎜rrreeeusername
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!