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 相关文章推荐
经常用的图片在容器中的水平垂直居中实例
Jun 10 Javascript
JavaScript之HTMLCollection接口代码
Apr 27 Javascript
基于jquery实现的移入页面上空文本框时,让它变为焦点,移出清除焦点
Jul 26 Javascript
jquery实现图片翻页效果
Dec 23 Javascript
javascript实现仿腾讯游戏选择
May 14 Javascript
JS组件Form表单验证神器BootstrapValidator
Jan 26 Javascript
js HTML5 Ajax实现文件上传进度条功能
Feb 13 Javascript
vue 挂载路由到头部导航的方法
Nov 13 Javascript
jQuery zTree 异步加载添加子节点重复问题
Nov 29 jQuery
Layui 设置select下拉框自动选中某项的方法
Aug 14 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
Aug 27 Javascript
vue中添加与删除关键字搜索功能
Oct 12 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的PSR规范中文版
2013/09/28 PHP
PHP中使用Imagick操作PSD文件实例
2015/01/26 PHP
PHP模板引擎Smarty内置变量调解器用法详解
2016/04/11 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
PHP实现将标点符号正则替换为空格的方法
2017/08/09 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
PHP接入支付宝接口失效流程详解
2020/11/10 PHP
Javascript技术技巧大全(五)
2007/01/22 Javascript
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果
2013/04/26 Javascript
JS批量操作CSS属性详细解析
2013/12/16 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
JS上传组件FileUpload自定义模板的使用方法
2016/05/10 Javascript
大型JavaScript应用程序架构设计模式
2016/06/29 Javascript
JS中from 表单序列化提交的代码
2017/01/20 Javascript
bootstrap table使用入门基本用法
2017/05/24 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
细说webpack源码之compile流程-入口函数run
2017/12/26 Javascript
Django+Vue跨域环境配置详解
2018/07/06 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
JavaScript代码异常监控实现过程详解
2020/02/17 Javascript
Python中使用hashlib模块处理算法的教程
2015/04/28 Python
Python 从一个文件中调用另一个文件的类方法
2019/01/10 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
如何在 Django 模板中输出 "{{"
2020/01/24 Python
Python 使用 environs 库定义环境变量的方法
2020/02/25 Python
解决reload(sys)后print失效的问题
2020/04/25 Python
关于webview适配H5上传照片或者视频文件的方法
2020/11/04 HTML / CSS
作为网站管理者应当如何防范XSS
2014/08/16 面试题
上课迟到检讨书
2014/01/19 职场文书
团日活动总结书
2014/05/08 职场文书
学校运动会加油词
2015/07/18 职场文书
观看《杨善洲》宣传教育片心得体会
2016/01/23 职场文书
2019年关于小学生课外阅读情况的分析报告
2019/12/02 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python
mysql幻读详解实例以及解决办法
2022/06/16 MySQL