▓▓▓▓▓▓ 大致介绍

  ES6是下一代的JavaScript语言的标准,目标是让JavaScript可以用来编写大型的复杂程序,成为企业级开发语言,要查看浏览器对ES6的支持程度可以用阮一峰大佬写的工具ES-Checker

  安装:(需要安装npm(心累),推荐用cnpm)

    npm install -g es-checker
    es-checker

  效果(有具体的支持情况):

▓▓▓▓▓▓ let

  let命令,和var的作用一样,都是用来声明变量,只是let命令只在所在的代码块内有效

  经典的例子:

  1. var a = [];
  2.  
  3. for(var i=0;i<10;i++){
  4. a[i] = function(){
  5. console.log(i);
  6. }
  7. }
  8.  
  9. a[4](); //
  10. console.log(i); //

  经典的例子,就不赘述,这里a数组都是引用的同一个i

  改用 let:

  1. var a = [];
  2.  
  3. for(let i=0;i<10;i++){
  4. a[i] = function(){
  5. console.log(i);
  6. }
  7. }
  8.  
  9. a[4](); //
  10. console.log(i); // ReferenceError: i is not defined

  这里i用let声明,就只在本次循环中存在,每次循环都会创建一个i

  注意:在for循环中,循环语句是一个作用域,而循环体内部又是一个子作用域
  例如:

  1. for(let i=0;i<3;i++){
  2. let i = 'abd';
  3. console.log(i);
  4. }
  5.  
  6. //abd
  7. //abd
  8. //abd

  可以看出循环体内的i和循环语句中的i是分离的

▓▓▓▓▓▓ let的特点

  1、不存在变量提升

  1. console.log(a); //undefined
  2. var a = '123';
  3.  
  4. console.log(b);
  5. let b = '123'; //ReferenceError: b is not defined

  

  

  2、暂时性死区
  如果在一个块级作用域内有let命令,那他声明的变量就绑定这个块级作用域,不受外部的影响

  1. var a = '123';
  2.  
  3. if(true){
  4. a = '456';
  5. console.log(a); //ReferenceError: a is not defined
  6.  
  7. let a;
  8. console.log(a); //undefined
  9. }

  

  ES6明确规定,如果区块中存在let或者const命令,这个区块对这些命令声明的变量,从一开始就形成封闭作用域,凡是在声明之前使用这些变量都会报错

  这里a是用let声明的,所以在let声明之前使用a都会报错

  3、不能重复声明

  let不允许在同一个作用域内,声明同一个变量

  1. //报错
  2. {
  3. var a = '123';
  4. let a = '456';
  5. }
  6.  
  7. //报错
  8. {
  9. let a = '123';
  10. var a = '456';
  11. }
  12.  
  13. //报错
  14. {
  15. let a = '123';
  16. let a = '123';
  17. }

  注意:在函数内不能重复声明参数

  1. //报错
  2. function test(target) {
  3. let target;
  4. }
  5.  
  6. //不报错
  7. function test(target){
  8. {
  9. let target;
  10. }
  11. }

   在第二个函数里不报错,是应为{}中时一个新的子作用域,和参数target不是在同一个块内了

▓▓▓▓▓▓ 块级作用域

  let为JavaScript新增了块级作用域

  使用var是没有块作用域概念的

  1. var a = '123';
  2.  
  3. if(true){
  4. var a = '456';
  5. }
  6.  
  7. console.log(a); //

  

  使用let就有了块作用域

  1. let a = '123';
  2.  
  3. if(true){
  4. let a = '456';
  5. }
  6.  
  7. console.log(a); //

  外层的代码块不受内层代码块的影响

▓▓▓▓▓▓ 块级作用域和函数声明

  ES5规定函数只能在顶层作用域和函数作用域中声明,不能在块作用域中声明
  ES6 引入了块级作用域,明确允许在块级作用域之中声明函数。ES6 规定,块级作用域之中,函数声明语句的行为类似于let,在块级作用域之外不可引用。
  例如:

  1. function f(){
  2. console.log('out');
  3. }
  4.  
  5. (function(){
  6.  
  7. if(false){
  8. function f(){
  9. console.log('in')
  10. };
  11. };
  12.  
  13. f();
  14.  
  15. }());

  在ES5中结果是 'in'。就是函数声明提升,不在多赘述
  在ES6中,理想的结果是'out',但是在浏览器中运行时,却会报错,这是为什么?因为如果这么突兀,那么老的代码就会出现很多的问题,所以,ES6规定浏览器可以有自己的的行为方式
    1、允许在块级作用域内声明函数。
    2、函数声明类似于var,即会提升到全局作用域或函数作用域的头部。
    3、同时,函数声明还会提升到所在的块级作用域的头部。

  注意,上面三条规则只对 ES6 的浏览器实现有效,其他环境的实现不用遵守,还是将块级作用域的函数声明当作let处理。

  在ES6中实际执行的代码是

  1. function f(){
  2. console.log('out');
  3. }
  4.  
  5. (function(){
  6.  
  7. var f = undefined;
  8.  
  9. if(false){
  10. function f(){
  11. console.log('in')
  12. };
  13. };
  14.  
  15. f();
  16.  
  17. }());

  注意:ES6 的块级作用域允许声明函数的规则,只在使用大括号的情况下成立,如果没有使用大括号,就会报错。

  1. // 不报错
  2. 'use strict';
  3. if (true) {
  4. function f() {}
  5. }
  6.  
  7. // 报错
  8. 'use strict';
  9. if (true)
  10. function f() {}

▓▓▓▓▓▓ const命令

  const声明一个只读的常量,一旦声明,常量的值就不能改变。所以在使用const时,一旦声明就要立即初始化
  const和let一样,只存在与本块作用域中没有声明提升存在暂时性死区不可重复声明

  const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址不得改动。对于简单类型的数据(数值、字符串、布尔值),值就保存在变量指向的那个内存地址,因此等同于常量。但对于复合类型的数据(主要是对象和数组),变量指向的内存地址,保存的只是一个指针,const只能保证这个指针是固定的,至于它指向的数据结构是不是可变的,就完全不能控制了。因此,将一个对象声明为常量必须非常小心。

  例如:

  1. const a = {
  2. id: 1,
  3. name:'qqqq'
  4. };
  5. a.id = 2;
  6.  
  7. a = {}; //报错

  参考资料: 

        ECMAScript 6入门-阮一峰

ECMAScript6-let和const命令的更多相关文章

  1. ECMAScript6 入门-let与const命令

    块级作用域 1:let命令声明的变量只在let命令所在的代码块有效--简而言之 大括号既是代码块,也就是说存在块级作用域了. { let a =10; var b =1; } a // Referen ...

  2. ECMAScript6-let与const命令详解

    前言 <ECMAScript入门>是一本开源的JavaScript语言教程,全面介绍ECMAScript6新引入的语法特性. let和const命令,是第一章开始介绍,也是比较基础的知识. ...

  3. es6学习笔记(1) let和const命令详解

    let和const命令: Es6新增了let命令,声明变量,但与var不一样的,只在let命令所在的代码块内有效(如for循环之外let声明的变量就不再有效).并且let不像var那样会发生" ...

  4. let和const命令//////////////////////z

    let和const命令 let命令 块级作用域 const命令 全局对象的属性 let命令 基本用法 ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的 ...

  5. ES6之let(理解闭包)和const命令

    ES6之let(理解闭包)和const命令 最近做项目的过程中,使用到了ES6,因为之前很少接触,所以使用起来还不够熟悉.因此购买了阮一峰老师的ES6标准入门,在此感谢阮一峰老师的著作. 我们知道,E ...

  6. ECMAScript 6入门 - let和const命令

    详细学习链接: http://es6.ruanyifeng.com/#docs/let let命令 基本用法 ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命 ...

  7. ES6 入门系列 - let 和 const 命令

    let命令 基本用法 ES6新增了let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效. { let a = ; ; } a // ReferenceEr ...

  8. ES6 之 let和const命令 Symbol Promise对象

    ECMAScript 6入门 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准,已经在2015年6月正式发布了. (2016年6月,发布了小幅修订的<ECMASc ...

  9. let和const命令

    let命令 1.let用来声明变量,类似于var,但只在代码块内有效. { let a = 1; var b = 2; } console.log(a); //a is not defined con ...

随机推荐

  1. Android 如何保证service在后台不被kill

    Android 其实无法做多绝对的不被后台kill掉,我们只能尽量使用一些操作提升不被kill的机会. 一.onStartCommand方法,返回START_STICKY   START_STICKY ...

  2. BZOJ 1875: [SDOI2009]HH去散步(矩阵乘法)

    首先,题意就把我们引向了矩阵乘法,注意边长m<=60,那么就按边建图,变成一个120个点的图,然后乱搞就行了。 PS:WA了N久改了3次终于A了QAQ CODE: #include<cst ...

  3. JS 基础学习随想

    2012年就已经接触过了js,给我的印象:这是一门谈不上复杂的语言.大概这就是所谓的学的越浅,用的越少,觉得自己会的东西好像得更多吧!开始做基础练习题的时候觉得好像都十分简单.可是后来在做到对象数组的 ...

  4. 连连看的原生JS实现

    那天闲来无事,便想找个小游戏来打发时间,后来便找到了连连看, 玩了一会儿感觉无聊,想到各位高手用JS做的各种小游戏,便想自己也来做一个,于是便有了这几天的成果. 代码是用 原生JS 实现的,只是用来学 ...

  5. 操作符、语句、函数——Javascript高级程序设计

    1.操作符 一元操作符:++.--放在变量前后的区别,+.—表示正负 位操作符:64位存储.32位计算,对NOT.AND.OR.XOR.<<.>>.>>>的掌 ...

  6. 【译】Nodejs最好的ORM - TypeORM

    TypeORM github: https://github.com/typeorm/typeorm 这篇译文是从TypeORM github上的使用说明上翻译过来的,已经提交PR并merge到库中了 ...

  7. Matlab立体标定mat转换成Opencv的CvMat

    最近在做基于双目视觉的三维重建.比较opencv和matlab工具箱的立体标定结果精度时,发现貌似如果手工选取角点不那么离谱的话,matlab标定结果精度更高也更鲁棒.就想先用matlab标定好相机, ...

  8. 了解 : prevent default

    基本了解是阻止事件之前设置好的事件触发,像是angular router ui里的 preventDefault是这样的. 在$stateChange的是后,可以调用preventDefault 来阻 ...

  9. [前言] 实现一个Android电子书阅读APP

    大家好,我是小方,我将在接下来的几篇文章中从零实现一个网络小说阅读器,从安卓编程最基础的部分讲起,直至成功完成我们的应用,从新建一个项目开始,不断添加新的代码,添加新的界面,循序渐进,涵盖所有我们需要 ...

  10. 阿里云开发之OSS数据迁移

    最近由于项目需求,需要将一个aliyun账号下的oss数据导入到两一个aliyun账号下的oss,经过一番坎坷,最终搞定. 1.查看oss数据迁移官方文档,我是在本地windows电脑上进行操作的,先 ...