Maison >interface Web >js tutoriel >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.
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.
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
可以使用动态名称提取到变量属性(属性名称在运行时已知):
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
的值也跟随变化。
将 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 ]
正如前面介绍的那样可以在解构数组时为其分配默认值:
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
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
productKey
La valeur entraîne à son tour la modification de la valeur de product
en conséquence. 🎜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 valeursvia Rest : 🎜rrreeeB
ou A ne sont pas définis. 🎜 ...
. 🎜🎜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!