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动态加载二
Aug 22 Javascript
jquery中one()方法的用法实例
Jan 16 Javascript
js事件处理程序跨浏览器解决方案
Mar 27 Javascript
BootStrap 动态添加验证项和取消验证项的实现方法
Sep 28 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
BootStrap table使用方法分析
Nov 08 Javascript
JavaScript trim 实现去除字符串首尾指定字符的简单方法
Dec 27 Javascript
JS实现计算小于非负数n的素数的数量算法示例
Feb 26 Javascript
Node.js 路由的实现方法
Jun 05 Javascript
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
微信小程序实现时间进度条功能
Nov 17 Javascript
原生JavaScript实现留言板
Jan 10 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
解析centos中Apache、php、mysql 默认安装路径
2013/06/25 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
PHP实现mysqli批量执行多条语句的方法示例
2017/07/22 PHP
javascript实现的动态文字变换
2007/07/28 Javascript
利用JQuery的load函数动态加载其它页面的内容的实现代码
2010/12/14 Javascript
jtable列中自定义button示例代码
2013/11/21 Javascript
js如何判断访问是来自搜索引擎(蜘蛛人)还是直接访问
2015/09/14 Javascript
BootStrap 可编辑表Table格
2016/11/24 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
常用的javascript设计模式
2017/01/11 Javascript
BootStrap select2 动态改变值的方法
2017/02/10 Javascript
vue element中axios下载文件(后端Python)
2019/05/10 Javascript
JS数组方法shift()、unshift()用法实例分析
2020/01/18 Javascript
js Math数学简单使用操作示例
2020/03/13 Javascript
vue实现列表滚动的过渡动画
2020/06/29 Javascript
python re正则表达式模块(Regular Expression)
2014/07/16 Python
在Python中操作字典之update()方法的使用
2015/05/22 Python
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
基于python(urlparse)模板的使用方法总结
2017/10/13 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
python3实现SMTP发送邮件详细教程
2018/06/19 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
什么是python的id函数
2020/06/11 Python
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
英国最大的天然和有机产品在线零售商之一:Big Green Smile
2020/05/06 全球购物
好的自荐信的要求
2013/10/30 职场文书
行政助理的岗位职责
2014/02/18 职场文书
国培远程培训感言
2014/03/08 职场文书
社区志愿者活动总结
2014/06/26 职场文书
机关党员四风问题个人整改措施
2014/10/26 职场文书
微观世界观后感
2015/06/10 职场文书
用python画城市轮播地图
2021/05/28 Python
手把手教你实现PyTorch的MNIST数据集
2021/06/28 Python
PC版《死亡搁浅导剪版》现已发售 展开全新的探险
2022/04/03 其他游戏