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

Posted 天行无忌

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何在 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: 解构是一个概念,分解其中一种数据类型并将其单独的属性分配给变量 

以上是关于如何在 JavaScript 中让代码更加精简的主要内容,如果未能解决你的问题,请参考以下文章

如何在javascript中让一个链接变成灰色,不可点击?

如何在CDialog中让EnableMenuItem有效...

Javascript开发中让代码性能变高的小技巧

在VS中让一个JS文件智能提示另一个JS文件中的成员2--具体引用

掌握JavaScript中让人迷惑的闭包

你如何在android中让代码暂停几秒钟?