让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 兼容FF的onmouseenter和onmouseleave的代码
Jul 19 Javascript
JS 获取span标签中的值的代码 支持ie与firefox
Aug 24 Javascript
javascript代码编写需要注意的7个小细节小结
Sep 21 Javascript
jsPDF导出pdf示例
May 02 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
如何提高Dom访问速度
Jan 05 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
Jan 30 Javascript
微信小程序控制台提示warning:Now you can provide attr "wx:key" for a "wx:for" to improve performance解决方法
Feb 21 Javascript
ionic2.0双击返回键退出应用
Sep 17 Javascript
微信小程序和H5页面间相互跳转代码实例
Sep 19 Javascript
vue组件创建的三种方式小结
Feb 03 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
《星际争霸》各版本雷兽特点图文解析 雷兽不同形态一览
2020/03/02 星际争霸
php长字符串定义方法
2012/07/12 PHP
ThinkPHP的RBAC(基于角色权限控制)深入解析
2013/06/17 PHP
PHP写日志的实现方法
2014/11/05 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
php使用gettimeofday函数返回当前时间并存放在关联数组里
2015/03/19 PHP
YII Framework教程之异常处理详解
2016/03/14 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
JQuery Tips相关(1)----关于$.Ready()
2014/08/14 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
Bootstrap每天必学之导航组件
2016/04/25 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
JS判断字符串变量是否含有某个字串的实现方法
2016/06/03 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
2019/05/07 Javascript
微信小程序点击列表跳转到对应详情页过程解析
2019/09/26 Javascript
jQuery与原生JavaScript选择HTML元素集合用法对比分析
2019/11/26 jQuery
vue中template的三种写法示例
2020/10/21 Javascript
[56:14]Fnatic vs OG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
对Python中DataFrame选择某列值为XX的行实例详解
2019/01/29 Python
Python下简易的单例模式详解
2019/04/08 Python
如何基于python生成list的所有的子集
2019/11/11 Python
Python正则表达式如何匹配中文
2020/05/27 Python
Tarte Cosmetics官网:美国最受欢迎的化妆品公司之一
2017/08/24 全球购物
西班牙最好的在线购买葡萄酒的商店:Vinoseleccion
2019/10/30 全球购物
婚礼主持词
2014/03/13 职场文书
官僚主义现象查摆问题整改措施
2014/10/04 职场文书
黄山导游词
2015/01/31 职场文书
个人优缺点总结
2015/02/28 职场文书
一波干货,会议主持词开场白范文
2019/05/06 职场文书
Mysql 如何批量插入数据
2021/04/06 MySQL