讓JavaScript代碼更加精簡的方法技巧

更新時間：2022年06月01日 08:37:05 作者：天行無忌

這篇文章主要介紹了讓JavaScript代碼更加精簡的方法技巧,文章通過使用?JavaScript對象解構(gòu)來節(jié)省代碼，JavaScript?對象解構(gòu)賦值在項(xiàng)目開發(fā)中是一個常用的技能。下文實(shí)現(xiàn)過程需要的小伙伴可以參考一下

前言：

使用 JavaScript 對象解構(gòu)來節(jié)省代碼，JavaScript 對象解構(gòu)賦值在項(xiàng)目開發(fā)中是一個常用的技能。

先來看一個 article 對象，有兩個屬性 title 和 description。

const article = {
    title: "JavaScript對象解構(gòu)賦值",
    description:
        "解構(gòu)是一個概念，分解其中一種數(shù)據(jù)類型并將其單獨(dú)的屬性分配給變量",
};

在 ES6 之前，需要將對象的屬性賦值給變量時，通常是這樣做：

const title = article.title;
const description = article.description

但是 ES6 引入了對象解構(gòu)語法，它提供了另一種將對象屬性賦值給變量的方法：

const { title, description: desc } = article;
console.log(title); // JavaScript對象解構(gòu)賦值
console.log(desc); //  解構(gòu)是一個概念，分解其中一種數(shù)據(jù)類型并將其單獨(dú)的屬性分配給變量

上述代碼將屬性 title 和 description 屬性賦值給變量 title 和 desc 。

語法說明： 冒號 (:) 之前的標(biāo)識符是對象的屬性，冒號之后的標(biāo)識符是新定義的變量。

對象解構(gòu)示例 {}

解構(gòu)空對象

使用 OR 運(yùn)算符 || 為空對象定義默認(rèn)值，在對象為 null 的情況下定義一個默認(rèn)值空對象 {} 。

function getArticle() {
    return null;
}
const { title, description } = getArticle() || {};

// 錯誤的情況
const { title, description } = getArticle() ;

嵌套對象解構(gòu)

直接看下面代碼：

const article = {
    id: 1001,
    detail: {
        title: "JavaScript對象解構(gòu)賦值",
        description:
            "解構(gòu)是一個概念，分解其中一種數(shù)據(jù)類型并將其單獨(dú)的屬性分配給變量",
    },
};
const {
    detail: { title, description },
    detail,
} = article;
console.log(title); // JavaScript對象解構(gòu)賦值
console.log(description); // 解構(gòu)是一個概念，分解其中一種數(shù)據(jù)類型并將其單獨(dú)的屬性分配給變量
console.log(detail); // { title: 'JavaScript對象解構(gòu)賦值', description: '解構(gòu)是一個概念，分解其中一種數(shù)據(jù)類型并將其單獨(dú)的屬性分配給變量' }