ES6知识点整理之对象解构赋值应用示例


Posted in Javascript onApril 17, 2019

本文实例讲述了ES6知识点整理之对象解构赋值应用。分享给大家供大家参考,具体如下:

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring), 在对象的解构赋值中有一些需要注意的事项

初识对象的解构

var {name} = {
 name:'Joh',
 age:10
};
console.log(name); // Joh

通过解构的形式取出对象中的属性值

对解构出的属性进行重命名

var {name} = {
 name:'Joh',
 age:10
};
console.log(name); // Joh
// 通过{属性:新的名称} = 对象的方式 对解构出的属性进行重命名
var {color:color2} = {
 color:'red',
 age:10
};
console.log(color2); // red
console.log(color); // 此处报错:Uncaught ReferenceError: color is not defined

对象嵌套解构中模式和变量的区别

var obj = {
   a:{
    b:{
     c:123
    }
   }
};
let {a:{b:{c}}} = obj; // 针对嵌套解构的最终输出只能是最里层的,外层的a和b都作为解构中的一种模式存在,而不是变量,只有c能正常输出
console.log(c); // 123
console.log(a, b, c); // Uncaught ReferenceError: a is not defined 报错之后停止

解析对象的默认值

var obj = {
 name:'Joh',
 age:22
};
var {name, id='999', age} = obj;
console.log(name, id ,age); // Joh 999 22
var obj2 ={
 name:'Lily',
 age:10
};
var {name:name2, id:id2='888', age:age2} = obj2;
console.log(name2, id2, age2); // Lily 888 10

解构对象中可能出现的异常

① 父解构的节点为undefined,在编程中一定要注意这个,属于粗心错误 :

let {x:{y}} = {name:{y:12}};
// 父结构中没有x属性名, 错误:Cannot destructure property `y` of 'undefined' or 'null'.

② 事先定义了一个变量重名错误 :

let name;
let {name} = {name:'Joh'};
// Uncaught SyntaxError: Identifier 'name' has already been declared

解决方案1:

let name;
let {name:name2} = {name:'Joh'};
console.log(name2);
//运行结果:Joh

解决方案2:

var name;
var {name} = {name:'Joh'};
console.log(name);
//运行结果:Joh

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.3water.com/code/HtmlJsRun测试上述代码运行结果。

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
Jquery多选下拉列表插件jquery multiselect功能介绍及使用
May 24 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
Aug 14 Javascript
去除html代码里面的script正则方法
May 19 Javascript
Bootstrap如何创建表单
Oct 21 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
Nov 25 Javascript
jQuery UI制作选项卡(tabs)
Dec 13 Javascript
JavaScript中call和apply方法的区别实例分析
Aug 03 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
vue 实现强制类型转换 数字类型转为字符串
Nov 07 Javascript
JavaScript鼠标拖拽事件详解
Apr 03 Javascript
《javascript设计模式》学习笔记七:Javascript面向对象程序设计组合模式详解
Apr 08 Javascript
ES6知识点整理之函数对象参数默认值及其解构应用示例
Apr 17 #Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 #Javascript
一篇文章,教你学会Vue CLI 插件开发
Apr 17 #Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
Apr 17 #Javascript
mpvue性能优化实战技巧(小结)
Apr 17 #Javascript
node.js监听文件变化的实现方法
Apr 17 #Javascript
vue中格式化时间过滤器代码实例
Apr 17 #Javascript
You might like
Smarty foreach控制循环次数的一些方法
2015/07/01 PHP
phpinfo的知识点总结
2019/10/10 PHP
得到文本框选中的文字,动态插入文字的js代码
2007/03/07 Javascript
Dom加载让图片加载完再执行的脚本代码
2008/05/15 Javascript
左右悬浮可分组的网站QQ在线客服代码(可谓经典)
2012/12/21 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
2015/10/29 Javascript
JSONObject使用方法详解
2015/12/17 Javascript
JavaScript的==运算详解
2016/07/20 Javascript
前端框架Vue.js中Directive知识详解
2016/09/12 Javascript
angular.extend方法的具体使用
2017/09/14 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
2018/07/13 Javascript
koa2使用ejs和nunjucks作为模板引擎的使用
2018/11/27 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
2020/11/07 Javascript
[04:39]显微镜下的DOTA2第十三期—Pis卡尔个人秀
2014/04/04 DOTA
python面向对象多线程爬虫爬取搜狐页面的实例代码
2018/05/31 Python
Python3多目标赋值及共享引用注意事项
2019/05/27 Python
python设置环境变量的原因和方法
2019/06/24 Python
基于MSELoss()与CrossEntropyLoss()的区别详解
2020/01/02 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
keras load model时出现Missing Layer错误的解决方式
2020/06/11 Python
Python爬取网站图片并保存的实现示例
2021/02/26 Python
HTML5之SVG 2D入门11—用户交互性(动画)介绍及应用
2013/01/30 HTML / CSS
基于HTML5实现类似微信手机摇一摇功能(计算摇动次数)
2017/07/24 HTML / CSS
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
大专自我鉴定范文
2013/10/23 职场文书
质量工程师岗位职责
2013/11/16 职场文书
坚定理想信念心得体会
2014/03/11 职场文书
小学生常见病防治方案
2014/06/06 职场文书
综艺节目策划方案
2014/06/13 职场文书
档案工作个人总结
2015/03/03 职场文书
2015年端午节活动方案
2015/05/05 职场文书
2019年大学生职业生涯规划书
2019/03/25 职场文书
党风廉政建设心得体会
2019/05/21 职场文书