快捷導(dǎo)航

讓JavaScript代碼更加精簡(jiǎn)的方法技巧

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

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

前言：

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

先來看一個(gè) article 對(duì)象，有兩個(gè)屬性 title 和 description。

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

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

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

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

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

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

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

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

解構(gòu)空對(duì)象

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

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

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

嵌套對(duì)象解構(gòu)

直接看下面代碼：

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