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 相关文章推荐
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
javascript实现Table间隔色以及选择高亮(和动态切换数据)的方法
May 14 Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 Javascript
AngularJs Injecting Services Into Controllers详解
Sep 02 Javascript
JS制作类似选项卡切换的年历
Dec 03 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 Javascript
Vue 单文件中的数据传递示例
Mar 21 Javascript
详解微信小程序 登录获取unionid
Jun 27 Javascript
JS库之Waypoints的用法详解
Sep 13 Javascript
jquery.picsign图片标注组件实例详解
Feb 02 jQuery
angularJs中$scope数据序列化的实例
Sep 30 Javascript
vue 动态组件(component :is) 和 dom元素限制(is)用法说明
Sep 04 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
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
php调用KyotoTycoon简单实例
2015/04/02 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
PHP性能分析工具XHProf安装使用教程
2015/05/13 PHP
php编程每天必学之验证码
2016/03/03 PHP
PHP 5.6.11 访问SQL Server2008R2的几种情况详解
2016/08/08 PHP
PHP unlink与rmdir删除目录及目录下所有文件实例代码
2018/02/07 PHP
Javascript 同时提交多个Web表单的方法
2009/02/19 Javascript
轻松创建nodejs服务器(5):事件处理程序
2014/12/18 NodeJs
jQuery实现两款有动画功能的导航菜单代码
2015/09/16 Javascript
jQuery实现鼠标经过像翻页和描点链接效果
2016/08/08 Javascript
微信小程序  wx.request合法域名配置详解
2016/11/23 Javascript
JS实现的相册图片左右滚动完整实例
2016/11/23 Javascript
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
Vue中keep-alive 实现后退不刷新并保持滚动位置
2020/03/17 Javascript
js实现双色球效果
2020/08/02 Javascript
jquery插件懒加载的示例
2020/10/24 jQuery
vue实现表格合并功能
2020/12/01 Vue.js
python+VTK环境搭建及第一个简单程序代码
2017/12/13 Python
python pygame模块编写飞机大战
2018/11/20 Python
Python用Try语句捕获异常的实例方法
2019/06/26 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
python 双循环遍历list 变量判断代码
2020/05/04 Python
Python: glob匹配文件的操作
2020/12/11 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
美国玩具公司:U.S.Toy
2018/05/19 全球购物
公务员转正鉴定材料
2014/02/11 职场文书
创新比赛获奖感言
2014/02/13 职场文书
暑假社会实践心得体会
2014/09/02 职场文书
大学生职业生涯规划大赛作品(精品)
2014/09/17 职场文书
婚宴邀请函
2015/01/30 职场文书
Python3 使用pip安装git并获取Yahoo金融数据的操作
2021/04/08 Python
js不常见操作运算符总结
2021/11/20 Javascript
二维码条形码生成的JavaScript脚本库
2022/07/07 Javascript