亲宝软件园·资讯

展开

JS精简代码

天行无忌 人气:0

前言:

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

先来看一个 article 对象,有两个属性 title 和 description

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); //  解构是一个概念,分解其中一种数据类型并将其单独的属性分配给变量

上述代码将属性 title 和 description 属性赋值给变量 title 和 desc 。

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

对象解构示例 {}

解构空对象

使用 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: '解构是一个概念,分解其中一种数据类型并将其单独的属性分配给变量' }

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

加载全部内容

相关教程
猜你喜欢
用户评论