详解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 相关文章推荐
Javascript在IE或Firefox下获取鼠标位置的代码
Dec 18 Javascript
jQuery 树形结构的选择器
Feb 15 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
Oct 28 Javascript
JavaScript对象反射用法实例
Apr 17 Javascript
Javascript递归打印Document层次关系实例分析
May 15 Javascript
jQuery实现点击小图显示大图代码分享
Aug 25 Javascript
使用Angular.js开发的注意事项
Oct 19 Javascript
详解如何较好的使用js
Dec 16 Javascript
vue2.0在没有dev-server.js下的本地数据配置方法
Feb 23 Javascript
JavaScript图片处理与合成总结
Mar 04 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 Javascript
Element el-button 按钮组件的使用详解
Feb 01 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实现小型站点广告管理(修正版)
2006/10/09 PHP
PHP获取某个月最大天数(最后一天)的方法
2015/07/29 PHP
使用PHP开发留言板功能
2019/11/19 PHP
JQuery 学习技巧总结
2010/05/21 Javascript
基于JQuery的简单实现折叠菜单代码
2010/09/15 Javascript
js实现的常用的左侧导航效果
2013/10/17 Javascript
Javascript delete 引用类型对象
2013/11/01 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
Nodejs sublime text 3安装与配置
2014/06/19 NodeJs
jquery实现手机号码选号的方法
2015/07/31 Javascript
在React框架中实现一些AngularJS中ng指令的例子
2016/03/06 Javascript
js滚轮事件兼容性问题需要注意哪些
2016/11/15 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
jQuery zTree树插件动态加载实例代码
2017/05/11 jQuery
vue实现导航栏效果(选中状态刷新不消失)
2017/12/13 Javascript
浅谈webpack打包之后的文件过大的解决方法
2018/03/07 Javascript
关于vue-router的那些事儿
2018/05/23 Javascript
JS实现获取自定义属性data值的方法示例
2018/12/19 Javascript
Vue自定义指令上报Google Analytics事件统计的方法
2019/02/25 Javascript
Vue运用transition实现过渡动画
2019/05/06 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
JS多个异步请求 按顺序执行next实现解析
2019/09/16 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
python执行等待程序直到第二天零点的方法
2015/04/23 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
Python编程实现tail-n查看日志文件的方法
2019/07/08 Python
Python类中self参数用法详解
2020/02/13 Python
python反爬虫方法的优缺点分析
2020/11/25 Python
python 实现aes256加密
2020/11/27 Python
一个基于canvas的移动端图片编辑器的实现
2020/10/28 HTML / CSS
Java基础面试题
2012/11/02 面试题
舞蹈教育学专业推荐信
2013/11/27 职场文书
行政主管岗位职责
2015/02/03 职场文书
博士论文答辩开场白
2015/06/01 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书