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 相关文章推荐
JavaScript DOM 添加事件
Feb 14 Javascript
javascript检测浏览器的缩放状态实现代码
Sep 28 Javascript
javascript实现checkBox的全选,反选与赋值
Mar 12 Javascript
JavaScript原生xmlHttp与jquery的ajax方法json数据格式实例
Dec 04 Javascript
javascript实现input file上传图片预览效果
Dec 31 Javascript
Javascript的比较汇总
Jul 25 Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
详解React-Router中Url参数改变页面不刷新的解决办法
May 08 Javascript
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
浅析Vue 中的 render 函数
Feb 28 Javascript
浅谈es6中的元编程
Dec 01 Javascript
Vue仿Bibibili首页的问题
Jan 21 Vue.js
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程序实现支持页面后退的两种方法
2008/06/30 PHP
一些使用频率比较高的php函数
2008/10/03 PHP
VIM中设置php自动缩进为4个空格的方法详解
2013/06/14 PHP
详解HTTP Cookie状态管理机制
2016/01/14 PHP
PHP-FPM 设置多pool及配置文件重写操作示例
2019/10/02 PHP
用php实现分页效果的示例代码
2020/12/10 PHP
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
UI Events 用户界面事件
2012/06/27 Javascript
js delete 用法(删除对象属性及变量)
2014/08/24 Javascript
深入理解javascript严格模式(Strict Mode)
2014/11/28 Javascript
Javascript中的作用域和上下文深入理解
2015/07/03 Javascript
JS实现自定义简单网页软键盘效果代码
2015/11/05 Javascript
基于JS代码实现当鼠标悬停表格上显示这一格的全部内容
2016/06/12 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
基于jQuery实现挂号平台首页源码
2020/01/06 jQuery
[02:48]DOTA2超级联赛专访海涛:你们的选择没有错
2013/06/07 DOTA
[00:34]TI7不朽珍藏III——纯金地穴编织者饰品展示
2017/07/15 DOTA
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
centos 下面安装python2.7 +pip +mysqld
2014/11/18 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
python中将一个全部为int的list 转化为str的list方法
2018/04/09 Python
基于Python log 的正确打开方式
2018/04/28 Python
对python中GUI,Label和Button的实例详解
2019/06/27 Python
深入解析神经网络从原理到实现
2019/07/26 Python
详解Python time库的使用
2019/10/10 Python
python命令 -u参数用法解析
2019/10/24 Python
Python动态声明变量赋值代码实例
2019/12/30 Python
Python爬取阿拉丁统计信息过程图解
2020/05/12 Python
基于HTML5 Canvas 实现弹出框效果
2017/06/05 HTML / CSS
印度在线杂货店:bigbasket
2018/08/23 全球购物
中国制造网:Made-in-China.com
2019/10/25 全球购物
年会活动策划方案
2014/01/23 职场文书
营销与策划实训报告
2014/11/05 职场文书
保留意见审计报告
2015/06/05 职场文书
css position fixed 左右双定位的实现代码
2021/04/29 HTML / CSS