Js解构赋值的常见场景有哪些
这篇“Js解构赋值的常见场景有哪些”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“Js解构赋值的常见场景有哪些”文章吧。
创新互联建站是一家专注于成都网站设计、成都网站制作与策划设计,阜南网站建设哪家好?创新互联建站做网站,专注于网站建设10余年,网设计领域的专业建站公司;建站业务涵盖:阜南等地区。阜南做网站价格咨询:028-86922220
解构赋值语法是一种 JavaScript 表达式,通过解构赋值, 可以将属性/值从对象/数组中取出,赋值给其他变量。这种语法是 ECMAscript 6 规范引入了一种新语法,可以更轻松地从数组和对象中获取值。
1. 提取数据
先来看看如何在 JavaScript 中解构对象,可以从这个商品对象的简单示例开始。
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;
这样,就可以通过以下方式访问相应的属性:
console.log(id); // 1
console.log(price); // 120
console.log(title); // Nike Air Zoom Pegasus 38
解构,能够让代码更加清晰简洁。如果需要解构一个更复杂的对象呢?即对象中的对象。
现在假设需要从商品列表数据中获取其中一个商品的属性,如下:
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,
},
];
在这里,产品列表嵌套了几层,需要访问商品的信息,可以解构尽可能多的级别以获取商品对象的属性。
const [tmp, { id, title, price }] = products;
console.log(id); // 2
console.log(title); // Nike Air Zoom Alphafly NEXT%
console.log(price); // 275
上面的代码仅用于展示其用法,项目开发中不建议再数组中这样获取对象信息。
通常,数据列表不一定非要数组,从获取效率来说,map 对象的访问比数组效率要高。可以将上面的数据改为 map 对象,如下:
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
在 JavaScript 中,数据可以是变量和方法,因此解构赋值也适合用在函数参数的定义,如下:
const printArticle = ({ title, remark }) => {
console.log(title);
console.log(remark);
};
printArticle({
title: "JavaScript 解构赋值",
remark: "解构赋值的实用场景介绍",
});
在使用 React 或 Vue 等框架时,有很多解构赋值的地方,如方法的引入等等。
2. 别名取值
如果想创建与属性名称不同的变量,那么可以使用对象解构的别名功能。
const { identifier: aliasIdentifier } = expression;
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 未定义的情况下有一个默认值。
以上就是关于“Js解构赋值的常见场景有哪些”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。
分享题目:Js解构赋值的常见场景有哪些
本文路径:http://pwwzsj.com/article/ppissc.html