Parlons de 5 scénarios courants et exemples de mission de déstructuration JS

Cet article vous apporte des connaissances pertinentes sur JavaScript. Il parle principalement de 5 scénarios courants et d'exemples de déstructuration et d'affectation de js. Les amis intéressés peuvent jeter un œil ci-dessous.

La syntaxe d'affectation de déstructuration est une expression JavaScript. Grâce à l'affectation de déstructuration, les attributs/valeurs peuvent être retirés des objets/tableaux et affectés à d'autres variables. Cette syntaxe est une nouvelle syntaxe introduite par la spécification ECMAscript 6 qui facilite l'obtention de valeurs à partir de tableaux et d'objets.

1. Extraire des données

Voyons d'abord comment déconstruire des objets en JavaScript. Vous pouvez commencer par cet exemple simple d'un objet produit.

const product = {
    id: 1,
    title: "Nike Air Zoom Pegasus 38",
    product_image: "/resources/products/01.jpeg",
    shown: "White/Pure Platinum/Midnight Navy/Wolf Grey",
    price: 120,
};
const { id, price, title } = product;

De cette façon, vous pouvez accéder aux propriétés correspondantes des manières suivantes :

console.log(id); // 1
console.log(price); // 120
console.log(title); // Nike Air Zoom Pegasus 38

La déstructuration peut rendre le code plus clair et plus concis. Et si vous aviez besoin de déconstruire un objet plus complexe ? C'est-à-dire un objet dans un objet.

Supposons maintenant que vous devez obtenir les attributs de l'un des produits à partir des données de la liste de produits, comme suit :

const products = [
    {
        id: 1,
        title: "Nike Air Zoom Pegasus 38",
        price: 120,
    },
    {
        id: 2,
        title: "Nike Air Zoom Alphafly NEXT%",
        price: 275,
    },
    {
        id: 3,
        title: "Nike Zoom Fly 4",
        price: 89.0,
    },
];

Ici, la liste de produits est imbriquée dans plusieurs couches, et vous devez accéder aux informations du produit, vous pouvez déconstruire autant de niveaux que possible pour obtenir les propriétés de l'objet produit.

const [tmp, { id, title, price }] = products;
console.log(id); // 2
console.log(title); // Nike Air Zoom Alphafly NEXT%
console.log(price); // 275

Le code ci-dessus est uniquement utilisé pour démontrer son utilisation. Il n'est pas recommandé d'obtenir des informations sur les objets dans un tableau de cette manière pendant le développement du projet.

Habituellement, la liste de données ne doit pas nécessairement être un tableau. En termes d'efficacité d'acquisition, l'accès aux objets cartographiques est plus efficace que l'accès au tableau. Vous pouvez modifier les données ci-dessus en un objet cartographique, comme suit :

const products = {
    1: {
        title: "Nike Air Zoom Pegasus 38",
        price: 120,
    },
    2: {
        title: "Nike Air Zoom Alphafly NEXT%",
        price: 275,
    },
    3: {
        title: "Nike Zoom Fly 4",
        price: 89.0,
    },
};
const {
    2: { id, title, price },
} = products;
console.log(id); // 2
console.log(title); // Nike Air Zoom Alphafly NEXT%
console.log(price); // 275

En JavaScript, les données peuvent être des variables et des méthodes, donc l'affectation de déstructuration peut également être utilisée dans la définition des paramètres de fonction, comme suit :

const printArticle = ({ title, remark }) => {
    console.log(title);
    console.log(remark);
};
printArticle({
    title: "JavaScript 解构赋值",
    remark: "解构赋值的实用场景介绍",
});

Lors de l'utilisation des frameworks tels que React ou Vue Ce faisant, il existe de nombreux endroits où des affectations de déstructuration se produisent, comme l'introduction de méthodes, etc.

2. Valeur d'alias

Si vous souhaitez créer une variable avec un nom différent de la propriété, vous pouvez utiliser la fonction alias de déstructuration d'objet.

const { identifier: aliasIdentifier } = expression;

identifier est le nom de la propriété à laquelle accéder et aliasIdentifier est le nom de la variable. L'utilisation spécifique est la suivante : identifier 是要访问的属性的名称，aliasIdentifier 是变量名称。具体用法如下：

const products = {
    1: {
        title: "Nike Air Zoom Pegasus 38",
        price: 120,
    },
    2: {
        title: "Nike Air Zoom Alphafly NEXT%",
        price: 275,
    },
    3: {
        title: "Nike Zoom Fly 4",
        price: 89.0,
    },
};
const {
    2: { price: productPrice },
} = products;

console.log(productPrice); // 275

3. 动态属性

可以使用动态名称提取到变量属性（属性名称在运行时已知）：

const { [propName]: identifier } = expression;

propName 表达式应计算为属性名称（通常是字符串），标识符应指示解构后创建的变量名称，用法如下：

const products = {
    1: {
        title: "Nike Air Zoom Pegasus 38",
        price: 120,
    },
    2: {
        title: "Nike Air Zoom Alphafly NEXT%",
        price: 275,
    },
    3: {
        title: "Nike Zoom Fly 4",
        price: 89.0,
    },
};
const productKey = "1";
const { [productKey]: product } = products;
console.log(product); // { title: 'Nike Air Zoom Pegasus 38', price: 120 }

上面代码中，可以通过更新 productKey 的值进而使得 product 的值也跟随变化。

4. 对象解构中的 Rest

将 rest 语法添加到解构中，Rest 属性收集那些尚未被解构模式拾取的剩余可枚举属性键。

const { identifier, ...rest } = expression;

解构后，变量标识符包含属性值。 rest 变量是一个具有其余属性的普通对象。

const product = {
    title: "Nike Air Zoom Pegasus 38",
    price: 120,
    quantity: 5,
    category_id: 1,
    reviews: 9830,
    total: 45,
};
const { title, ...others } = product;
console.log(others); // { price: 120, quantity: 5, category_id: 1, reviews: 9830, total: 45 }

对于数组，可以通过 Rest 的实现首尾值的获取：

const numbers = [1, 2, 3];
const [head, ...tail] = numbers;
console.log(head); // 1
console.log(tail); // [ 2, 3 ]

5. 默认值

正如前面介绍的那样可以在解构数组时为其分配默认值：

const RGBA = [255, 34];
const [R, G, B = 0, A = 1] = RGBA;
console.log(R); // 255
console.log(G); // 34
console.log(B); // 0
console.log(A); // 1

这样，可以将确保在 B、A 未定义的情况下有一个默认值。

总结

解构是一个非常实用的特性，它被添加到了 JavaScript 的 ES6 版本中了。通过解构，可以快速方便地从对象和数组中提取属性或数据到单独的变量中。它适用于嵌套对象，可以使用 ...rrreee

3. Les attributs dynamiques

peuvent être extraits en attributs variables à l'aide de noms dynamiques (les noms d'attribut sont connus au moment de l'exécution) : rrreeepropName doit être évaluée au nom de la propriété (généralement une chaîne) et l'identifiant doit indiquer le nom de la variable créée après la déstructuration, l'utilisation est la suivante :
rrreee

Dans le code ci-dessus, il peut être mis à jour par mise à jour de la productKey La valeur entraîne à son tour la modification de la valeur de product en conséquence. 🎜

4. Rest dans la déstructuration d'objets🎜🎜Ajoutez la syntaxe rest à la déstructuration, et l'attribut Rest collecte les clés de propriété énumérables restantes qui n'ont pas été récupérées par le mode de déstructuration. 🎜rrreee🎜Après déstructuration, l'identifiant de la variable contient la valeur de l'attribut. Une variable rest est un objet ordinaire avec des propriétés restantes. 🎜rrreee🎜Pour les tableaux, vous pouvez obtenir la première et la dernière valeurs​​via Rest : 🎜rrreee

5 Valeur par défaut🎜🎜Comme mentionné précédemment, vous pouvez attribuer une valeur par défaut. valeur lors de la déconstruction du tableau Valeur : 🎜rrreee🎜De cette façon, vous pouvez vous assurer qu'il existe une valeur par défaut si B ou A ne sont pas définis. 🎜

Résumé🎜🎜La déstructuration est une fonctionnalité très utile qui a été ajoutée à la version ES6 de JavaScript. La déstructuration vous permet d'extraire rapidement et facilement des propriétés ou des données d'objets et de tableaux dans des variables distinctes. Il fonctionne avec des objets imbriqués et les affectations de tableaux peuvent être attribuées à l'aide des opérateurs .... 🎜🎜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!