详解javascript中var与ES6规范中let、const区别与用法


Posted in Javascript onJanuary 11, 2020

随着ES6规范的到来,Js中定义变量的方法已经由单一的 var 方式发展到了 var、let、const 三种之多。var 众所周知,可那俩新来的货到底有啥新特性呢?到底该啥时候用呢?下面就是小编总结出的关于javascript中var与ES6规范中let、const区别详解

我们先来絮叨絮叨 var 方式定义变量有啥 bug ?

Js没有块级作用域

请看这样一条规则:在JS函数中的var声明,其作用域是函数体的全部。

for(var i=0;i<10;i++){
     var a = 'a';
  }
  console.log(a);

明明已经跳出 for 循环了,却还可以访问到 for 循环内定义的变量 a ,甚至连 i 都可以被放访问到,尴尬~

2.** 循环内变量过度共享 **

你可以猜一下当执行以下这段代码时会发生什么

for (var i = 0; i < 3; i++) {
   setTimeout(function () {
    console.log(i)
   }, 1000);
 }

在浏览器里运行一下,看看和你预想的结果是否相同?

没错,控制台输出了3个3,而不是预想的 0、1、2。

事实上,这个问题的答案是,循环本身及三次 timeout 回调均共享唯一的变量 ** i 。当循环结束执行时,i 的值为3。所以当第一个 timeout 执行时,调用的 i 当让也为 3 了。

话说到这儿,想必客官已经猜到 let 是干嘛用的。

你没猜错,就是解决这两个bug的。你尽可以把上述的两个例子中的 var 替代成 let 再运行一次。

注意:必须声明 'use strict' 后才能使用let声明变量,否则浏览并不能显示结果

let是更完美的var

let声明的变量拥有块级作用域。 也就是说用let声明的变量的作用域只是外层块,而不是整个外层函数。let 声明仍然保留了提升特性,但不会盲目提升,在示例一中,通过将var替换为let可以快速修复问题,如果你处处使用let进行声明,就不会遇到类似的bug。

let声明的全局变量不是全局对象的属性。这就意味着,你不可以通过window.变量名的方式访问这些变量。它们只存在于一个不可见的块的作用域中,这个块理论上是Web页面中运行的所有JS代码的外层块。

形如for (let x...)的循环在每次迭代时都为x创建新的绑定。

这是一个非常微妙的区别,拿示例二来说,如果一个for (let...)循环执行多次并且循环保持了一个闭包,那么每个闭包将捕捉一个循环变量的不同值作为副本,而不是所有闭包都捕捉循环变量的同一个值。

所以示例二中,也以通过将var替换为let修复bug。

这种情况适用于现有的三种循环方式:for-of、for-in、以及传统的用分号分隔的类C循环。

用let重定义变量会抛出一个语法错误(SyntaxError)。

这个很好理解,用代码说话

let a = 'a';
let a = 'b';

上述写法是不允许的,浏览器会报错,因为重复定义了。

** 在这些不同之外,let和var几乎很相似了。举个例子,它们都支持使用逗号分隔声明多重变量,它们也都支持解构特性。 **

ES6引入的第三个声明类关键词:const

一句话说明白,const 就是用来定义常量的!任何脑洞(fei)大(zhu)开(liu)的写法都是非法的

比如这样:

//只声明变量不赋值
const a
这样:
//重复声明变量
const a = 'a';
const a = 'b';

还有这样:

//给变量重新赋值
const a = 'a';
a = 'b'

再来个黑科技:

//不过不推荐这么干,实在没啥意思,常量常量,不变的才叫常量嘛~
const a = {a:'a'};
//重新赋值当然是行不通的了
a = {a:'b'};
//嘿嘿嘿科技
a.a = 'b'

const 确实没啥说的,普通用户使用完全没问题,高(dou)端(bi)用户咋用都是问题。

以上就是小编对 var、let、const 用法的一些总结,有不当之处,还请大大们指出。

更多关于Javascript ES6规范详解请查看下面的相关文章

Javascript 相关文章推荐
js自定义方法通过隐藏iframe实现文件下载
Feb 21 Javascript
javascript学习笔记(二)数组和对象部分
Sep 30 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
Nov 10 Javascript
jQuery中:reset选择器用法实例
Jan 04 Javascript
JS折半插入排序算法实例
Dec 02 Javascript
Vue 莹石摄像头直播视频实例代码
Aug 31 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
Oct 29 Javascript
webpack 静态资源集中输出的方法示例
Nov 09 Javascript
jQuery-ui插件sortable实现自由拖动排序
Dec 01 jQuery
webpack 如何解析代码模块路径的实现
Sep 04 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 Javascript
Vue使用富文本编辑器Vue-Quill-Editor(含图片自定义上传服务、清除复制粘贴样式等)
May 15 Javascript
jQuery实现鼠标移入显示蒙版效果
Jan 11 #jQuery
jQuery实现手风琴效果(蒙版)
Jan 11 #jQuery
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 #jQuery
javascript实现蒙版与禁止页面滚动
Jan 11 #Javascript
js实现蒙版效果
Jan 11 #Javascript
js实现橱窗展示效果
Jan 11 #Javascript
vue实现购物车选择功能
Jan 10 #Javascript
You might like
php 删除无限级目录与文件代码共享
2008/11/22 PHP
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
PHP动态编译出现Cannot find autoconf的解决方法
2014/11/05 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
php根据用户名和手机号查询是否存在手机号码
2017/02/16 PHP
PHP中的Iterator迭代对象属性详解
2019/04/12 PHP
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
IE6下focus与blur错乱的解决方案
2011/07/31 Javascript
js中function()使用方法
2013/12/24 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
jQuery实现下拉框多选 jquery-multiselect 的实例代码
2016/07/14 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
js实现掷骰子小游戏
2019/10/24 Javascript
javascript实现切割轮播效果
2019/11/28 Javascript
浅析vue-router中params和query的区别
2019/12/24 Javascript
js 解析 JSON 数据简单示例
2020/04/21 Javascript
Node登录权限验证token验证实现的方法示例
2020/05/25 Javascript
python人人网登录应用实例
2014/09/26 Python
简单使用Python自动生成文章
2014/12/25 Python
Python中列表、字典、元组数据结构的简单学习笔记
2016/03/20 Python
详解python中requirements.txt的一切
2017/03/03 Python
基于Modernizr 让网站进行优雅降级的分析
2013/04/21 HTML / CSS
美国最大的在线寄售和旧货店:Swap.com
2018/08/27 全球购物
手工制作的音乐盒:Music Box Attic
2019/09/05 全球购物
C#软件工程师英语面试题
2015/06/07 面试题
智乐游戏测试笔试题
2014/05/21 面试题
手机促销活动方案
2014/02/05 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
留学经费担保书
2014/05/12 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
运动会加油稿20字
2014/11/15 职场文书
仰望星空观后感
2015/06/10 职场文书
Java 在线考试云平台的实现
2021/11/23 Java/Android