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 相关文章推荐
javascript getElementsByTagName
Jan 31 Javascript
打造基于jQuery的高性能TreeView(asp.net)
Feb 23 Javascript
AngularJS入门教程之控制器详解
Jul 27 Javascript
微信小程序 简单DEMO布局,逻辑,样式的练习
Nov 30 Javascript
jQuery UI制作选项卡(tabs)
Dec 13 Javascript
移动端利用H5实现压缩图片上传功能
Mar 29 Javascript
mac上node.js环境的安装测试
Jul 03 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 Javascript
vue+element模态框中新增模态框和删除功能
Jun 11 Javascript
vue自定义标签和单页面多路由的实现代码
May 03 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
Sep 22 Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 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
php 删除cookie和浏览器重定向
2009/03/16 PHP
执行、获取远程代码返回:file_get_contents 超时处理的问题详解
2013/06/25 PHP
PHP捕获Fatal error错误的方法
2014/06/11 PHP
采用memcache在web集群中实现session的同步会话
2014/07/05 PHP
详解PHP中websocket的使用方法
2016/09/15 PHP
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
载入jQuery库的最佳方法详细说明及实现代码
2012/12/28 Javascript
javascript实现div的显示和隐藏的小例子
2013/06/25 Javascript
SOSO地图JS画出标注和中心点以html形式运行
2013/08/09 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
2015/03/04 Javascript
javascript实现简单加载随机色方块
2015/12/25 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
jQuery响应滚动条事件功能示例
2017/10/14 jQuery
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
Vue开发Html5微信公众号的步骤
2019/04/11 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
2020/07/24 Javascript
Python基于OpenCV实现视频的人脸检测
2018/01/23 Python
对python中两种列表元素去重函数性能的比较方法
2018/06/29 Python
详解python运行三种方式
2019/05/13 Python
Python何时应该使用Lambda函数
2019/07/02 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
HTML5中使用json对象的实例代码
2018/09/10 HTML / CSS
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
世界上获奖最多的手机镜头:Olloclip
2018/03/03 全球购物
小学美术兴趣小组活动总结
2014/07/07 职场文书
妇女工作先进事迹
2014/08/17 职场文书
村官2015年度工作总结
2015/10/14 职场文书
幼儿教师远程研修感悟
2015/11/18 职场文书
k-means & DBSCAN 总结
2021/04/27 Python
Opencv实现二维直方图的计算及绘制
2021/07/21 Python
Oracle 多表查询基本语法实例
2022/04/18 Oracle