让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 相关文章推荐
javascript里的条件判断
Feb 27 Javascript
批量实现面向对象的实例代码
Jul 01 Javascript
js限制文本框只能输入数字方法小结
Jun 16 Javascript
JavaScript不使用prototype和new实现继承机制
Dec 29 Javascript
小心!AngularJS结合RequireJS做文件合并压缩的那些坑
Jan 09 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
详解小程序如何动态绑定点击的执行方法
Nov 26 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 Javascript
Vue使用Proxy代理后仍无法生效的解决
Nov 13 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
php下图片文字混合水印与缩略图实现代码
2009/12/11 PHP
php批量更改数据库表前缀实现方法
2013/10/26 PHP
Yii学习总结之数据访问对象 (DAO)
2015/02/22 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
PHP中类与对象功能、用法实例解读
2020/03/27 PHP
javascript web对话框与弹出窗口
2009/02/22 Javascript
js 中的switch表达式使用示例
2020/06/03 Javascript
Javascript控制div属性动态变化实例分析
2015/10/08 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
JS扩展类,克隆对象与混合类实例分析
2016/11/26 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
移动端效果之Swiper详解
2017/10/09 Javascript
Vue实现PopupWindow组件详解
2018/04/28 Javascript
Python的Urllib库的基本使用教程
2015/04/30 Python
使用Python对Excel进行读写操作
2017/03/30 Python
python3+PyQt5实现自定义分数滑块部件
2018/04/24 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
详解python中的闭包
2020/09/07 Python
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
DOUGLAS波兰:在线销售香水和化妆品
2020/07/05 全球购物
第一范式(1NF)、第二范式(2NF)和第三范式(3NF)之间的区别是什么?
2016/04/28 面试题
成人毕业生自我鉴定
2013/10/18 职场文书
夜大毕业生自我鉴定
2013/10/31 职场文书
酒店秘书求职信范文
2014/02/17 职场文书
应届毕业生自荐书
2014/06/18 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
先进典型事迹材料
2014/12/29 职场文书
2015年骨干教师工作总结
2015/05/26 职场文书
美丽心灵观后感
2015/06/01 职场文书
Java Kafka 消费积压监控的示例代码
2021/07/01 Java/Android
Python实现抖音热搜定时爬取功能
2022/03/16 Python