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 相关文章推荐
JS写的数字拼图小游戏代码[学习参考]
Oct 29 Javascript
js中substring和substr的定义和用法
May 05 Javascript
node.js中的fs.readdirSync方法使用说明
Dec 17 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 Javascript
Javascript的比较汇总
Jul 25 Javascript
JS中的phototype详解
Feb 04 Javascript
vue图片加载与显示默认图片实例代码
Mar 16 Javascript
基于jquery.page.js实现分页效果
Jan 01 jQuery
JS使用正则表达式提交页面验证的代码
Oct 16 Javascript
基于element-ui对话框el-dialog初始化的校验问题解决
Sep 11 Javascript
vue 数据操作相关总结
Dec 17 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
《PHP边学边教》(02.Apache+PHP环境配置――上篇)
2006/12/13 PHP
thinkphp 中的volist标签在ajax操作中的特殊性(推荐)
2018/01/15 PHP
类似CSDN图片切换效果脚本
2009/09/17 Javascript
验证javascript中Object和Function的关系的三段简单代码
2010/06/27 Javascript
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
JS给超链接加确认对话框的方法
2015/02/24 Javascript
Jquery动态添加输入框的方法
2015/05/29 Javascript
详谈JS中实现种子随机数及作用
2016/07/19 Javascript
JavaScript 数组- Array的方法总结(推荐)
2016/07/21 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
2016/12/14 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
使用vue制作FullPage页面滚动效果
2017/08/21 Javascript
使用vue + less 实现简单换肤功能的示例
2018/02/21 Javascript
jQuery中可见性过滤器简单用法示例
2018/03/31 jQuery
解决vue路由name同名,路由重复的问题
2020/08/05 Javascript
用vue设计一个日历表
2020/12/03 Vue.js
JavaScript this关键字的深入详解
2021/01/14 Javascript
详谈Python基础之内置函数和递归
2017/06/21 Python
python利用MethodType绑定方法到类示例代码
2017/08/27 Python
Python使用base64模块进行二进制数据编码详解
2018/01/11 Python
Python实现PS滤镜碎片特效功能示例
2018/01/24 Python
Python lambda函数基本用法实例分析
2018/03/16 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2019/01/23 Python
Python3.8中使用f-strings调试
2019/05/22 Python
python做反被爬保护的方法
2019/07/01 Python
代码实例讲解python3的编码问题
2019/07/08 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
使用HTML5进行SVG矢量图形绘制的入门教程
2016/02/19 HTML / CSS
导游的职业规划书范文
2013/12/27 职场文书
环保倡议书100字
2014/05/15 职场文书
群众路线调研报告范文
2014/11/03 职场文书
《地震中的父与子》教学反思
2016/02/16 职场文书
高中美术教学反思
2016/02/17 职场文书
如何用PHP实现多线程编程
2021/05/26 PHP