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 快捷键设置实现代码
Mar 13 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
Dec 28 Javascript
javascript全局变量封装模块实现代码
Nov 28 Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 Javascript
JS中对象与字符串的互相转换详解
May 20 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
基于require.js的使用(实例讲解)
Sep 07 Javascript
详解Vue 中 extend 、component 、mixins 、extends 的区别
Dec 20 Javascript
微信小程序日期选择器实例代码
Jul 18 Javascript
一文了解Vue中的nextTick
May 06 Javascript
vue 弹出遮罩层样式实例
Jul 22 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
Dec 07 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读取文件内容的几种方法详解
2013/06/26 PHP
php合并数组并保留键值的实现方法
2018/03/12 PHP
搭建PhpStorm+PhpStudy开发环境的超详细教程
2020/09/17 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
深入理解JavaScript系列(30):设计模式之外观模式详解
2015/03/03 Javascript
jquery实现仿新浪微博带动画效果弹出层代码(可关闭、可拖动)
2015/10/12 Javascript
JavaScript如何调试有哪些建议和技巧附五款有用的调试工具
2015/10/28 Javascript
Javascript打印局部页面实例
2016/06/21 Javascript
基于js实现二级下拉联动
2016/12/17 Javascript
jquery 正整数数字校验正则表达式
2017/01/10 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
Node.js数据库操作之连接MySQL数据库(一)
2017/03/04 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
React router动态加载组件之适配器模式的应用详解
2018/09/12 Javascript
微信小程序签到功能
2018/10/31 Javascript
Vue 3.0 全家桶抢先体验
2020/04/28 Javascript
python实现用户登录系统
2016/05/21 Python
如何用Python实现简单的Markdown转换器
2018/07/16 Python
python虚拟环境迁移方法
2019/01/03 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
Python socket聊天脚本代码实例
2020/01/02 Python
通俗讲解python 装饰器
2020/09/07 Python
Python Selenium操作Cookie的实例方法
2021/02/28 Python
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
西尔斯百货官网:Sears
2016/09/06 全球购物
Stuart Weitzman欧盟:美国奢华鞋履品牌
2017/05/24 全球购物
菲律宾酒店预订网站:Hotels.com菲律宾
2017/07/12 全球购物
Java的类与C++的类有什么不同
2014/01/18 面试题
党委班子对照检查材料
2014/08/19 职场文书
医院反腐倡廉演讲稿
2014/09/16 职场文书
2015年计划生育责任书
2015/05/08 职场文书
小学秋季运动会通讯稿
2015/11/25 职场文书
vue实现书本翻页动画效果实例详解
2022/04/08 Vue.js
苹果可能正在打击不进行更新的 App
2022/04/24 数码科技
Python+pyaudio实现音频控制示例详解
2022/07/23 Python