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 相关文章推荐
JQuery textlimit 显示用户输入的字符数 限制用户输入的字符数
May 14 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
Apr 27 Javascript
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
JS与C#编码解码
Dec 03 Javascript
javascript贪吃蛇完整版(源码)
Dec 09 Javascript
javascript实现一个简单的弹出窗
Feb 22 Javascript
JS平滑无缝滚动效果的实现代码
May 06 Javascript
详解支持Angular 2的表格控件
Jan 19 Javascript
vue2.0路由切换后页面滚动位置不变BUG的解决方法
Mar 14 Javascript
vue 内置过滤器的使用总结(附加自定义过滤器)
Dec 11 Javascript
node.js监听文件变化的实现方法
Apr 17 Javascript
JavaScript实现省份城市的三级联动
Feb 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实现的仿阿里巴巴实现同类产品翻页
2009/12/11 PHP
PHP MemCached高级缓存配置图文教程
2010/08/05 PHP
php数组函数序列之array_pop() - 删除数组中的最后一个元素
2011/11/07 PHP
PHP持久连接mysql_pconnect()函数使用介绍
2012/02/05 PHP
关于php 高并发解决的一点思路
2017/04/16 PHP
jQuery 开天辟地入门篇一
2009/12/09 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
详解JavaScript中的表单验证
2015/06/16 Javascript
详解JavaScript逻辑Not运算符
2015/12/04 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
很棒的一组js图片轮播特效
2017/01/12 Javascript
seajs实现强制刷新本地缓存的方法分析
2017/10/16 Javascript
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
在 Angular6 中使用 HTTP 请求服务端数据的步骤详解
2018/08/06 Javascript
CentOS7中源码编译安装NodeJS的完整步骤
2018/10/13 NodeJs
微信小程序实现发送模板消息功能示例【通过openid推送消息给用户】
2019/05/05 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
python读写ini配置文件方法实例分析
2015/06/30 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
Python OpenCV处理图像之滤镜和图像运算
2018/07/10 Python
通过python扫描二维码/条形码并打印数据
2019/11/14 Python
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
汽车销售顾问求职自荐信
2014/01/01 职场文书
人事专员工作职责
2014/02/22 职场文书
电气工程及其自动化专业求职信
2014/06/23 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
车队安全员岗位职责
2015/02/15 职场文书
清洁员岗位职责
2015/02/15 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
小学班主任培训心得体会
2016/01/07 职场文书
《去年的树》教学反思
2016/02/18 职场文书
创业计划书之珠宝饰品
2019/08/26 职场文书
Java实现二分搜索树的示例代码
2022/03/17 Java/Android
Python代码实现双链表
2022/05/25 Python
mysql函数之截取字符串的实现
2022/08/14 MySQL