让JavaScript代码更加精简的方法技巧


Posted in Javascript onJune 01, 2022

前言:

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

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

到此这篇关于 让JavaScript代码更加精简的方法技巧的文章就介绍到这了,更多相关JS精简代码内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
ext form 表单提交数据的方法小结
Aug 08 Javascript
jquery autocomplete自动完成插件的的使用方法
Aug 07 Javascript
这些年、我收集的JQuery代码小结
Aug 01 Javascript
jq选项卡鼠标延迟的插件实例
May 13 Javascript
Extjs4 类的定义和扩展实例
Jun 28 Javascript
JS获取当前网址、主机地址项目根路径
Nov 19 Javascript
JavaScript中的Array 对象(数组对象)
Jun 02 Javascript
解析jquery easyui tree异步加载子节点问题
Mar 08 Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 Javascript
layui清除radio的选中状态实例
Nov 14 Javascript
js实现小星星游戏
Mar 23 Javascript
Vue项目vscode 安装eslint插件的方法(代码自动修复)
Apr 15 Javascript
cypress测试本地web应用
Jun 01 #Javascript
vue实现登陆页面开发实践
May 30 #Vue.js
Echarts如何重新渲染实例详解
May 30 #Javascript
vue router 动态路由清除方式
May 25 #Vue.js
vue如何清除浏览器历史栈
May 25 #Vue.js
ant design charts 获取后端接口数据展示
May 25 #Javascript
vue3不同环境下实现配置代理
May 25 #Vue.js
You might like
新安装的MySQL数据库需要注意的安全知识
2008/07/30 PHP
PHP中通过加号合并数组的一个简单方法分享
2011/01/27 PHP
smarty基础之拼接字符串的详解
2013/06/18 PHP
php汉字转拼音的示例
2014/02/27 PHP
实例讲解PHP设计模式编程中的简单工厂模式
2016/02/29 PHP
PHP+Mysql+Ajax实现淘宝客服或阿里旺旺聊天功能(前台页面)
2017/06/16 PHP
jquery对dom的操作常用方法整理
2013/06/25 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
通过JS获取Request.QueryString()参数的值实现方法
2016/09/27 Javascript
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
微信小程序返回多级页面的实现方法
2017/10/27 Javascript
vue init webpack 建vue项目报错的解决方法
2018/09/29 Javascript
简单了解JavaScript中的执行上下文和堆栈
2019/06/24 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
Python的“二维”字典 (two-dimension dictionary)定义与实现方法
2016/04/27 Python
Python3连接MySQL(pymysql)模拟转账实现代码
2016/05/24 Python
Python+Selenium自动化实现分页(pagination)处理
2017/03/31 Python
Python实现查找匹配项作处理后再替换回去的方法
2017/06/10 Python
Python实现读取json文件到excel表
2017/11/18 Python
详解python3中zipfile模块用法
2018/06/18 Python
python实现图片插入文字
2019/11/26 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
keras用auc做metrics以及早停实例
2020/07/02 Python
python中用Scrapy实现定时爬虫的实例讲解
2021/01/18 Python
Flask处理Web表单的实现方法
2021/01/31 Python
俄罗斯电动工具和设备购物网站:Vseinstrumenti.ru
2020/11/12 全球购物
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
C#里面如何判断一个Object是否是某种类型(如Boolean)?
2016/02/10 面试题
岗位职责的定义
2013/11/10 职场文书
终端业务员岗位职责
2013/11/27 职场文书
工厂采购员岗位职责
2014/04/08 职场文书
中学生操行评语大全
2014/04/24 职场文书
广播体操口号
2014/06/18 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书
2016年中学清明节活动总结
2016/04/01 职场文书
MySQL添加索引特点及优化问题
2022/07/23 MySQL