很多人都听说过ES6(也就是ECMAScript的新一代标准)并且对她充满了向往,下面通过一个ES6中小知识点——let命令,来解开她的神秘面纱,让大家初步认识一下ES6的语法规范。
        let命令属于ES6中的一个基本语法,与原有Javascript中的var的功能一样,都是用来声明一个变量。但是,他拥有了一些新的特性和使用规范:

  • 块级作用域有效
  • 不允许重复声明
  • 不存在变量作用域提升

1、块级作用域有效

使用let声明的变量作用域范围只在花括号{}内有效,而使用var声明的变量则在花括号之外也可以使用。


 
       在花括号中用var声明了一个a变量,用let声明了一个b变量。在花括号之外访问时,a可以正常访问到1,但是b却不能。原因是let声明的变量超出{}之后,就访问不到了

2、不允许重复声明

使用let声明的变量不允许出现同名,同名就报错。使用var的话就没有这个限制。

3、不存在变量作用域提升

使用let时,必须先声明再使用,如果在声明之前使用就会报错,用var时则会显示undefined。

4、实例

下面是一道非常经典的面试题,问点击按钮打印出来的结果是什么:


 
         在这个例子中,点击这3个按钮打印的都是:3,原因就是此时的i是一个全局变量i,按钮只是拿到了i的引用。也就是说按钮的i指向的同一个对象i,那么i的变化会同时影响到这三个按钮。i进过训话后变成了3,所以点击按钮打印出来的就都是3了。
但是我们想要的结果是:依次打印0、1、2怎么办?此时就是可以使用let命令,修改一下代码看一下:


 
       
        在代码中只用把 var i 改成 let i 即可,现在在for循环外打印i已经获取不到了,i已经不再是全局变量。此时点击按钮看到打印的结果为:0 1 2 ,达到了我们的预期。

这就是ES6中的let命令大家学会了吗?当然let只是ES6语法规范中的冰山一角,上海尚学堂web前端培训将为您奉献更多的精彩实用的前端相关知识!

 

ES6之命令妙用的更多相关文章

  1. shell中eval命令妙用——变量嵌套替换

    eval命令妙用--变量嵌套替换 eval命令在Linux下的应用非常广泛,在写脚本的时候遇到一个变量嵌套的问题,用eval迎刃而解,略试不爽啊. var1="hello" i=1 ...

  2. mysql中pager命令妙用

    pager命令的妙用在mysql,可以大大提高工作效率. 一 当处理大量数据时,不想显示查询的结果,而只需知道查询话费的时间. mysql> select *   from t3; +----- ...

  3. JS ES6 -- let命令

    1.ES6新增了块级作用域的let和const 这新特性let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. for循环的计数器,就很合适使用let命令 ...

  4. ES6 新增命令

    let               用来声明变量.它的用法类似于var,但是所声明的变量, 只在let命令所在的代码块内有效. 例: {var a=10; let b=20;}; console.lo ...

  5. 【ES6】let 命令

    let命令 为es6新增命令,用来声明变量,类似于var,但是let所声明的变量,只在let命令所在的块级作用域内有效 块级作用域写法(ES6块级作用域允许任意嵌套): // 块级作用域写法 { le ...

  6. ES6 快速开始

    Refs 现代框架 Vue React 都使用到了 ES6 (包括D3js) [常量] // ES5 中常量的写法 Object.defineProperty(window, "PI2&qu ...

  7. React相关:npm,ES6,

    1.NPM: 参考:npm使用入门  npm 学习笔记整理 2.ES6参考:ES6 let命令:ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块 ...

  8. ES6学习笔记(一)——扩展运算符和解构赋值

    前言 随着前端工程化的快速推进,在项目中使用ES6甚至更高的ES7等最近特性早已不是什么新鲜事.之前还觉得既然浏览器支持有限,那了解一下能看懂就好,然而仅仅了解还是不够的,现在放眼望去,那些成熟框架的 ...

  9. es6的let与const

    es6新增命令let,用于声明变量,他与var的不同主要有三点: let有块级作用域 let没有变量提升 同级作用域内,let不可以重复定义 let有块级作用域: es5 for(var i=0;i& ...

随机推荐

  1. synchronized锁机制 之 代码块锁(转)

    synchronized同步代码块 用关键字synchronized声明方法在某些情况下是有弊端的,比如A线程调用同步方法执行一个较长时间的任务,那么B线程必须等待比较长的时间.这种情况下可以尝试使用 ...

  2. 微信x5内核很鸡贼啊

    最近在写一个支付项目,然后要打通微信和支付宝支付,本来后端联调的时候直接调用weixin://wxpay/bizpayurl?XXXX接口就行的,完全走着通,然后到项目验收了就炸了,点不进去了,最后改 ...

  3. Android自动化之Monkey环境搭建(一)

    从事测试行业两年了,一直很喜欢研究新技术,但是最近有点慵懒.正好公司新出了产品,督促我学习monkey用来测其稳定性. 网上搜索了很久,内容总是很零散,通常需要找几篇文章才能搭好环境.特写此文,一篇文 ...

  4. 教你如何用ps制作紫色光斑效果

    1.新建800x800画布 2.设置前景色和背景色分别为#b38adb ,#212121;执行"滤镜"-"渲染"-"云彩"操作 3.执行&q ...

  5. 浏览器中的 JS 和 Node.js 中的 JS

    一个是前端技术,一个是后端技术 浏览器中的 JavaScript ECMAScript  语言基础,如语法.数据类型结构.一些内置对象 BOM(Browser Object Model)  一些操作页 ...

  6. 浅谈Java和PHP的异同

    编程范式: Java:纯面向对象的语言,有人说过:Java中一切皆对象!当然咯,人们都忘了Java的八种基本数据类型:int.double.boolean.byte.float.long.short. ...

  7. 前端js收藏

    1 爱心特效 <script type="text/javascript"> (function(window,document,undefined){ var hea ...

  8. python的语法小结

    break 与continue的区别: 1.break是直接中断全部循环 2.continue则是在只不执行此次所循环的东西,其它循环依旧执行,比方说只是跳过第4次循环,第5次循环照常进行. \n 表 ...

  9. 使用kbmmw中的随机数替换delphi 10.3 自带的随机数

    我们在开发中经常会使用随机数模拟各种随机条件,例如生成唯一的密码和令牌. 在计算机中,一般采用PRNG(伪随机序列发生器)模拟真实随机数.既然是随机,就要要没有任何规律, 在取值范围内均匀.独立.以确 ...

  10. Swagger2基本注解使用

    @Api:用在请求的类上,表示对类的说明 tags="说明该类的作用,可以在UI界面上看到的注解" value="该参数没什么意义,在UI界面上也看到,所以不需要配置&q ...