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 dialog 异步调用ashx,webservice数据的代码
Aug 03 Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
JavaScript实现DIV层拖动及动态增加新层的方法
May 12 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
jQuery EasyUI结合zTree树形结构制作web页面
Sep 01 jQuery
VUE element-ui 写个复用Table组件的示例代码
Nov 18 Javascript
解决使用vue.js路由后失效的问题
Mar 17 Javascript
浅谈vue项目打包优化策略
Sep 29 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
vue axios请求成功却进入catch的原因分析
Sep 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
PhpMyAdmin出现export.php Missing parameter: what /export_type错误解决方法
2012/08/09 PHP
MyEclipse常用配置图文教程
2014/09/11 PHP
ThinkPHP实现非标准名称数据表快速创建模型的方法
2014/11/29 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
Mootools 1.2教程 输入过滤第二部分(字符串)
2009/09/15 Javascript
javascript与asp.net(c#)互相调用方法
2009/12/13 Javascript
深入理解JavaScript系列(16) 闭包(Closures)
2012/04/12 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
jQuery实现判断滚动条到底部
2015/06/23 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
简单实现Bootstrap标签页
2020/08/09 Javascript
EasyUI的DataGrid每行数据添加操作按钮的实现代码
2017/08/22 Javascript
JS中使用textPath实现线条上的文字
2017/12/25 Javascript
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
js+css实现扇形导航效果
2020/08/18 Javascript
js实现鼠标滑动到某个div禁止滚动
2020/09/17 Javascript
JavaScript实现网页下拉菜单效果
2020/11/20 Javascript
[53:10]完美世界DOTA2联赛决赛日 FTD vs GXR 第二场 11.08
2020/11/11 DOTA
Python实现控制台输入密码的方法
2015/05/29 Python
Python设计模式之桥接模式原理与用法实例分析
2019/01/10 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
Python3实现取图片中特定的像素替换指定的颜色示例
2019/01/24 Python
django admin后台添加导出excel功能示例代码
2019/05/15 Python
在python里面运用多继承方法详解
2019/07/01 Python
Django框架基础模板标签与filter使用方法详解
2019/07/23 Python
基于python的列表list和集合set操作
2019/11/24 Python
python集成开发环境配置(pycharm)
2020/02/14 Python
详解Python设计模式之策略模式
2020/06/15 Python
美国老牌主机服务商:iPage
2016/07/22 全球购物
喜诗官方在线巧克力店:See’s Candies
2017/01/01 全球购物
高品质和独特的产品世界:Creations and Collections
2018/01/07 全球购物
英国蜡烛、蜡烛配件和家居香氛购买网站:Yankee Candle
2018/12/12 全球购物
房屋租赁协议书(标准版)
2014/10/02 职场文书
如何写新闻稿
2015/07/18 职场文书
男方家长婚礼答谢词
2015/09/29 职场文书
详解nginx安装过程并代理下载服务器文件
2022/02/12 Servers