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作用域容易记错的两个地方分析
Jun 22 Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
textarea不能通过maxlength属性来限制字数的解决方法
Sep 01 Javascript
JavaScript实现将UPC转换成ISBN的方法
May 26 Javascript
JS实现根据文件字节数返回文件大小的方法
Aug 02 Javascript
javascript字符串对象常用api函数小结(连接,替换,分割,转换等)
Sep 20 Javascript
遍历js中对象的属性和值的实例
Nov 21 Javascript
Javascript 实现计算器时间功能详解及实例(二)
Jan 08 Javascript
手写简单的jQuery雪花飘落效果实例
Apr 22 jQuery
详解js类型判断
May 22 Javascript
详解ECMAScript typeof用法
Jul 25 Javascript
关于AngularJS中几种Providers的区别总结
May 17 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
一个数据采集类
2007/02/14 PHP
PHP 数组教程 定义数组
2009/10/23 PHP
php 空格,换行,跳格使用说明
2009/12/18 PHP
自己在做项目过程中学到的PHP知识收集
2012/08/20 PHP
解析PHP计算页面执行时间的实现代码
2013/06/18 PHP
PHP使用http_build_query()构造URL字符串的方法
2016/04/02 PHP
php 读写json文件及修改json的方法
2018/03/07 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
简单实例处理url特殊符号&处理(2种方法)
2013/04/02 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
基于jquery实现select选择框内容左右移动添加删除代码分享
2015/08/25 Javascript
JS日期格式化之javascript Date format
2015/10/01 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
jQuery+CSS3+Html5实现弹出层效果实例代码(附源码下载)
2016/05/16 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
简单介绍Python下自己编写web框架的一些要点
2015/04/29 Python
Python的Django框架中settings文件的部署建议
2015/05/30 Python
Python+Opencv识别两张相似图片
2020/03/23 Python
Python实现简易Web爬虫详解
2018/01/03 Python
Django中Model的使用方法教程
2018/03/07 Python
python numpy数组的索引和切片的操作方法
2018/10/20 Python
python实现微信小程序用户登录、模板推送
2019/08/28 Python
Python处理session的方法整理
2019/08/29 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
Python PyQt5整理介绍
2020/04/01 Python
基于Python测试程序是否有错误
2020/05/16 Python
使用CSS3的appearance属性改变元素的外观的方法
2015/12/12 HTML / CSS
品质管理部岗位职责范文
2014/03/01 职场文书
出国留学经济担保书
2014/04/01 职场文书
美国留学经济担保书
2014/05/20 职场文书
低碳环保口号
2014/06/12 职场文书
第二批党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
幼儿园小班个人总结
2015/02/12 职场文书
交通安全学习心得体会
2016/01/18 职场文书
利用 Python 的 Pandas和 NumPy 库来清理数据
2022/04/13 Python