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 Xml增删改查(IE下)操作实现代码
Jan 30 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
Sep 05 Javascript
NPM 安装cordova时警告:npm WARN deprecated minimatch@2.0.10: Please update to minimatch 3.0.2 or higher to
Dec 20 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
Dec 23 Javascript
基于zepto.js实现手机相册功能
Jul 11 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
JavaScript实现异步图像上传功能
Jul 12 Javascript
Intellij IDEA搭建vue-cli项目的方法步骤
Oct 20 Javascript
详解如何创建并发布一个 vue 组件
Nov 08 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
VUE实现吸底按钮
Mar 04 Vue.js
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
再说下636单管机
2021/03/02 无线电
学习ExtJS Column布局
2009/10/08 Javascript
JQuery toggle使用分析
2009/11/16 Javascript
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
JavaScript中的一些定位属性[图解]
2010/07/14 Javascript
AlertBox 弹出层信息提示框效果实现步骤
2010/10/11 Javascript
Javascript学习笔记之数组的遍历和 length 属性
2014/11/23 Javascript
JS限制条件补全问题实例分析
2016/12/16 Javascript
JavaScript实现弹出广告功能
2017/03/30 Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
2017/06/21 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
Nodejs使用Mongodb存储与提供后端CRD服务详解
2018/09/04 NodeJs
layer 刷新某个页面的实现方法
2019/09/05 Javascript
完美解决通过IP地址访问VUE项目的问题
2020/07/18 Javascript
python中cPickle用法例子分享
2014/01/03 Python
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
使用Python的Twisted框架编写非阻塞程序的代码示例
2016/05/25 Python
Python引用计数操作示例
2018/08/23 Python
详解python配置虚拟环境
2019/04/08 Python
一行python实现树形结构的方法
2019/08/09 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
使用python快速实现不同机器间文件夹共享方式
2019/12/22 Python
python 将dicom图片转换成jpg图片的实例
2020/01/13 Python
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
手工制作的男士奢华英国鞋和服装之家:Goodwin Smith
2019/06/21 全球购物
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
四风存在的原因分析
2014/02/11 职场文书
说明书格式及范文
2014/05/07 职场文书
2014年人事科工作总结
2014/11/19 职场文书
护士年终考核评语
2014/12/31 职场文书
举起手来观后感
2015/06/09 职场文书
医院中层管理人员培训心得体会
2016/01/11 职场文书
初一数学教学反思
2016/02/17 职场文书
高一化学教学反思
2016/02/22 职场文书
Django migrate报错的解决方案
2021/05/20 Python
MySQL日期时间函数知识汇总
2022/03/17 MySQL