ES6中let、const的区别及变量的解构赋值操作方法实例分析


Posted in Javascript onOctober 15, 2019

本文实例讲述了ES6中let、const的区别及变量的解构赋值操作方法。分享给大家供大家参考,具体如下:

声明:本文内容依照阮一峰老师ECMAScript 6 入门一书所总结。

let和const

相同点

  1. 都存在块级作用域
  2. 都不存在变量声明提升
  3. 都会造成“暂时性死区”
  4. 在一个作用域下不可重复声明

不同点

  1. const一旦声明必须立即赋值
  2. const声明的变量指向的内存地址不得改动。

变量解构赋值

数组的解构赋值

解构成功

let [a, b, c] = [1, 2, 3];

解构不成功

let [foo] = [];

不完全解构

let [x, y] = [1, 2, 3];

默认值

let [foo = true] = [];

解构条件:只要某种数据结构具有 Iterator 接口,都可以采用数组形式的解构赋值。

对象的解构赋值

与数组的区别:对象的解构与数组有一个重要的不同。数组的元素是按次序排列的,变量的取值由它的位置决定;而对象的属性没有次序,变量必须与属性同名,才能取到正确的值。

应用:可以很方便地将现有对象的方法,赋值到某个变量。

let { log, sin, cos } = Math;

字符串的解构赋值

原理:字符串被转换成了一个类似数组的对象。

const [a, b, c, d, e] = 'hello';

类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值。

let {length : len} = 'hello';
len // 5

数值和布尔值的解构赋值

let {toString: s} = 123;
s === Number.prototype.toString // true
let {toString: s} = true;
s === Boolean.prototype.toString // true

函数参数的解构赋值

[[1, 2], [3, 4]].map(([a, b]) => a + b);
// [ 3, 7 ]

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

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

Javascript 相关文章推荐
js封装的textarea操作方法集合(兼容很好)
Nov 16 Javascript
关于innerHTML后丢失动态绑定的EVENT问题解决方法
May 19 Javascript
javascript实现window.print()去除页眉页脚
Dec 30 Javascript
深入浅析jQuery对象$.html
Aug 22 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 Javascript
laravel-admin 与 vue 结合使用实例代码详解
Jun 04 Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 Javascript
JS实现iframe中子父页面跨域通讯的方法分析
Mar 10 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
Apr 26 Javascript
QT与javascript交互数据的实现
May 26 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 #Javascript
vue实现树形结构样式和功能的实例代码
Oct 15 #Javascript
谈谈IntersectionObserver懒加载的具体使用
Oct 15 #Javascript
js实现开关灯效果
Mar 30 #Javascript
JS实现灯泡开关特效
Mar 30 #Javascript
浅谈微信小程序列表埋点曝光指南
Oct 15 #Javascript
javascript网页随机点名实现过程解析
Oct 15 #Javascript
You might like
PHP创建自己的Composer包方法
2018/04/09 PHP
javascript URL锚点取值方法
2009/02/25 Javascript
Mozilla 表达式 __noSuchMethod__
2009/04/05 Javascript
javascript fullscreen全屏实现代码
2009/04/09 Javascript
用 Javascript 验证表单(form)中的单选(radio)值
2009/09/08 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
AngularJS入门之动画
2016/07/27 Javascript
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
VUE写一个简单的表格实例
2019/08/06 Javascript
基于vue和bootstrap实现简单留言板功能
2020/05/30 Javascript
使用nodejs实现JSON文件自动转Excel的工具(推荐)
2020/06/24 NodeJs
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
React Ant Design树形表格的复杂增删改操作
2020/11/02 Javascript
[01:40]2014DOTA2国际邀请赛 三冰SOLO赛后采访恶搞
2014/07/09 DOTA
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
[39:53]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第一场 11.19
2020/11/19 DOTA
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
python实现汉诺塔算法
2021/03/01 Python
python3对拉勾数据进行可视化分析的方法详解
2019/04/03 Python
Django使用Channels实现WebSocket的方法
2019/07/28 Python
Timex手表官网:美国运动休闲手表品牌
2017/01/28 全球购物
关于递归的一道.NET面试题
2013/05/12 面试题
资深地理教师自我评价
2013/09/21 职场文书
职业生涯规划书的格式
2013/12/29 职场文书
中学生国旗下讲话稿
2014/04/26 职场文书
环保建议书500字
2014/05/14 职场文书
医学专业毕业生求职信
2014/06/20 职场文书
第一批党的群众路线教育实践活动总结报告
2014/07/03 职场文书
平安工地汇报材料
2014/08/19 职场文书
党员个人批评与自我批评
2014/10/14 职场文书
ORACLE数据库对long类型字段进行模糊匹配的解决思路
2021/04/07 Oracle
Python基础之元组与文件知识总结
2021/05/19 Python
总结Python使用过程中的bug
2021/06/18 Python