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 URL锚点取值方法
Feb 25 Javascript
jquery下组织javascript代码(js函数化)
Aug 25 Javascript
js对象与打印对象分析比较
Apr 23 Javascript
制作jquery遮罩层效果导航菜单代码分享
Dec 25 Javascript
jquery实现TAB选项卡鼠标经过带延迟效果的方法
Jul 27 Javascript
原生js封装自定义滚动条
Mar 24 Javascript
浅析node.js的模块加载机制
May 25 Javascript
JS实现前端页面的搜索功能
Jun 12 Javascript
微信小程序画布圆形进度条显示效果
Nov 17 Javascript
JavaScript遍历数组的三种方法map、forEach与filter实例详解
Feb 27 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 Javascript
详解element-ui 表单校验 Rules 配置 常用黑科技
Jul 11 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.ini 中文版
2006/10/28 PHP
PHP 文件上传全攻略
2010/04/28 PHP
php tp验证表单与自动填充函数代码
2012/02/22 PHP
php使HTML标签自动补全闭合函数代码
2012/10/04 PHP
PHP积分兑换接口实例
2015/02/09 PHP
php实现的mongodb操作类实例
2015/04/03 PHP
Javascript 变量作用域 两个可能会被忽略的小特性
2010/03/23 Javascript
jQuery 源码分析笔记(7) Queue
2011/06/19 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
2012/01/15 Javascript
jquery固定底网站底部菜单效果
2013/08/13 Javascript
JavaScript操作cookie类实例
2015/03/31 Javascript
javascript实现五星评分功能
2015/11/10 Javascript
jQuery基于cookie实现的购物车实例分析
2015/12/24 Javascript
JS克隆,属性,数组,对象,函数实例分析
2016/11/26 Javascript
bootstrap日历插件datetimepicker使用方法
2016/12/14 Javascript
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
2018/05/28 Javascript
[54:29]2018DOTA2亚洲邀请赛 4.7 淘汰赛 VP vs LGD 第二场
2018/04/09 DOTA
[01:15:16]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第一场 1月26日
2021/03/11 DOTA
python encode和decode的妙用
2009/09/02 Python
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
用ReactJS和Python的Flask框架编写留言板的代码示例
2015/12/19 Python
Python中使用platform模块获取系统信息的用法教程
2016/07/08 Python
Python实现将一个大文件按段落分隔为多个小文件的简单操作方法
2017/04/17 Python
Python这样操作能存储100多万行的xlsx文件
2019/04/16 Python
使用Python实现牛顿法求极值
2020/02/10 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
Ray-Ban雷朋瑞典官方网站:全球领先的太阳眼镜品牌
2019/08/22 全球购物
工程总经理工作职责
2013/12/09 职场文书
《自然之道》教学反思
2014/02/11 职场文书
《绿色蝈蝈》教学反思
2014/03/02 职场文书
同学聚会致辞集锦
2015/07/28 职场文书
2016年万圣节家长开放日活动总结
2016/04/05 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书
Springboot使用Spring Data JPA实现数据库操作
2021/06/30 Java/Android
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技