Jetons un coup d'œil à la déstructuration d'objets en JavaScript

La déstructuration est un concept qui décompose l'un des types de données et attribue ses propriétés individuelles aux variables. Elle a été introduite dans l'article "JavaScript Destructuring Assignment 5 Common Scenarios and Exemples", examinons-le aujourd'hui.

Déstructuration de base

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

Comme le montre l'extrait de code ci-dessus, dans la syntaxe de déstructuration, la propriété de l'objet firstName est déconstruite et affectée à la variable définie sur le côté gauche de l'expression. Dans le scénario ci-dessus, les noms de propriétés de l'objet doivent correspondre aux variables définies dans l'expression de gauche. Si vous définissez d'autres noms de variables, vous n'obtiendrez pas la valeur souhaitée, telle que : 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

Comme il n'y a pas d'attribut trueName dans fullName, il est initialisé à non défini.

Déconstruction d'aliasSi vous devez attribuer des attributs d'objet à des noms de variables avec des noms d'attribut incohérents, vous pouvez l'implémenter avec le code suivant :
rrreee

Déstructuration de la valeur par défaut🎜Comme vous pouvez le voir dans le code ci-dessus, il n'y a pas de déstructuration de propriétés spécifiques dans l'objet. Généralement, la valeur sera attribuée à undefined. vous ne voulez pas qu'il soit non défini, vous pouvez lui définir une valeur par défaut, comme suit : 🎜rrreee🎜 Jetons un coup d'œil aux résultats sous l'attribut age : 🎜rrreee

Déconstruction REST🎜🎜Si vous souhaitez déconstruire un attribut d'un objet et que la structure d'attribut restante est une autre variable, comme suit : 🎜rrreee🎜Dans l'extrait de code ci-dessus, le L'attribut username est affecté à une variable et utilisé rest (...) attribue les propriétés restantes d'une variable à un objet distinct. 🎜🎜Apprentissage recommandé : "🎜Tutoriel vidéo JavaScript🎜"🎜🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!