扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > 其他 >聊聊Js解构赋值的5个常见场景和实例
  • 125

0
分享到

聊聊Js解构赋值的5个常见场景和实例

JavaScriptVue.js 2023-05-14 22:05:42 125人浏览 八月长安
摘要

本篇文章给大家带来了关于javascript的相关知识，其中主要跟大家聊一聊js解构赋值的5个常见场景和实例，感兴趣的朋友下面一起来看一下吧，希望对大家有帮助。解构赋值语法是一种 JavaScript 表达式，通过解构赋值, 可以将属性/值

本篇文章给大家带来了关于javascript的相关知识，其中主要跟大家聊一聊js解构赋值的5个常见场景和实例，感兴趣的朋友下面一起来看一下吧，希望对大家有帮助。

解构赋值语法是一种 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 未定义的情况下有一个默认值。

总结

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

以上就是聊聊Js解构赋值的5个常见场景和实例的详细内容，更多请关注编程网其它相关文章！

--结束END--

本文标题: 聊聊Js解构赋值的5个常见场景和实例

本文链接: https://lsjlt.com/news/207095.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 聊聊Js解构赋值的5个常见场景和实例
    本篇文章给大家带来了关于JavaScript的相关知识，其中主要跟大家聊一聊js解构赋值的5个常见场景和实例，感兴趣的朋友下面一起来看一下吧，希望对大家有帮助。解构赋值语法是一种 JavaScript 表达式，通过解构赋值, 可以将属性/值...
    99+
    2023-05-14
    JavaScript Vue.js
  • JavaScript解构赋值的5个常见场景与实例教程
    目录前言1. 提取数据 2. 别名取值 3. 动态属性 4. 对象解构中的 Rest 5. 默认值 总结 前言 解构赋值语法是一种 JavaScript 表达式，通过解构赋值, 可以...
    99+
    2024-04-02
  • Js解构赋值的常见场景有哪些
    这篇“Js解构赋值的常见场景有哪些”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“Js解构赋值的常见场景有哪些”文章吧。解构赋...
    99+
    2023-07-05
  • JavaScript解构赋值的常见场景有哪些
    这篇文章主要为大家展示了“JavaScript解构赋值的常见场景有哪些”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“JavaScript解构赋值的常见场景有哪些”这篇文章吧。1. 提取数据先来看...
    99+
    2023-06-25
  • JavaScript解构赋值的陷阱：避免常见的错误和问题
    变量声明和解构赋值： 在使用解构赋值时，重要的是要注意变量的声明和解构的顺序。如果在解构之前声明变量，可能会导致意外的结果。以下示例演示了这种问题： // 错误示范 let {x, y} = {x: 1, y: 2}; // 结果：...
    99+
    2024-02-22
    JavaScript 解构赋值 陷阱 问题 解决方法
  • JavaScript对象和数组的解构赋值实例分析
    本文小编为大家详细介绍“JavaScript对象和数组的解构赋值实例分析”，内容详细，步骤清晰，细节处理妥当，希望这篇“JavaScript对象和数组的解构赋值实例分析”文章能帮助大家解决疑惑，下面跟着小编...
    99+
    2024-04-02
软考高级职称资格查询
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作