写点什么

如何在 JavaScript 中让代码更加精简

作者:devpoint
  • 2022 年 5 月 30 日
  • 本文字数:858 字

    阅读完需:约 3 分钟

如何在 JavaScript 中让代码更加精简

答案是使用 JavaScript 对象解构来节省代码,JavaScript 对象解构赋值在项目开发中是一个常用的技能。


先来看一个 article 对象,有两个属性 titledescription


const article = {    title: "JavaScript对象解构赋值",    description:        "解构是一个概念,分解其中一种数据类型并将其单独的属性分配给变量",};
复制代码


在 ES6 之前,需要将对象的属性赋值给变量时,通常是这样做:


const title = article.title;const description = article.description
复制代码


但是 ES6 引入了对象解构语法,它提供了另一种将对象属性赋值给变量的方法:


const { title, description: desc } = article;
console.log(title); // JavaScript对象解构赋值console.log(desc); // 解构是一个概念,分解其中一种数据类型并将其单独的属性分配给变量
复制代码


上述代码将属性 titledescription 属性赋值给变量 titledesc


语法说明: 冒号 (:) 之前的标识符是对象的属性,冒号之后的标识符是新定义的变量。

对象解构示例 {}

解构空对象

使用 OR 运算符 || 为空对象定义默认值,在对象为 null 的情况下定义一个默认值空对象 {}


function getArticle() {    return null;}const { title, description } = getArticle() || {};
// 错误的情况const { title, description } = getArticle() ;
复制代码

嵌套对象解构

直接看下面代码:


const article = {    id: 1001,    detail: {        title: "JavaScript对象解构赋值",        description:            "解构是一个概念,分解其中一种数据类型并将其单独的属性分配给变量",    },};const {    detail: { title, description },    detail,} = article;console.log(title); // JavaScript对象解构赋值console.log(description); // 解构是一个概念,分解其中一种数据类型并将其单独的属性分配给变量console.log(detail); // { title: 'JavaScript对象解构赋值', description: '解构是一个概念,分解其中一种数据类型并将其单独的属性分配给变量' }
复制代码


注意:对象解构默认将对象的属性分配给具有相同名称的变量。

发布于: 刚刚阅读数: 4
用户头像

devpoint

关注

细节的追求者 2011.11.12 加入

专注前端开发,用技术创造价值!

评论

发布
暂无评论
如何在 JavaScript 中让代码更加精简_ES6_devpoint_InfoQ写作社区