ES6学习之路～～let和const申明

申明变量的方法:
es5: var 和 function 两种.
es6: var、 function、 let、 const、 import、 class 共6种

var 用来申明变量
function 用来申明函数
let 用来申明变量
const 用来申明常量
import 申明模块名
class 申明一个类

let命令

• 基础用法： 同var一样申明变量

    {        var a = 1;        let b =10;    }    console.log(a);     //1    console.log(b);     //ReferenceError: b is not defined

这里的区别在于let申明的变量作用域只在所在区块内部有效，再看以下示例：

    //示例一    for(let i = 0; i < 10; i ++){    }    console.log('let',i);    //ReferenceError: i is not defined          for(var j = 0; j < 10; j ++){    }    console.log('var',j);   // 10

• let不存在变量提升，所以一定要先申明再使用，否则报错

    // 示例二    console.log(c);     // ReferenceError: c is not defined    console.log(typeof(c));     // ReferenceError: c is not defined (万能的typeof现在也不安全了)    let c = 10;    console.log(d);     // undefined。 (undefined表示变量已申明，但没有赋值)    console.log(typeof(d));     // undefined    var d = 23;    {        e = 23;    }       console.log(e);     //23    (未申明的污染全局的变量)    console.log(typeof(e));     //number

观察以上三组表达式可以看出，var申明会提升变量，let申明不会提升变量

• 暂时性死区 ： 只要块级作用域内部let申明了变量，该变量就绑定了这个作用域，不再受外部影响

    // 示例三    var f = 233;    if(true){        console.log(f);    // ReferenceError: f is not defined        f = 'abc';   // ReferenceError: f is not defined        let f;        console.log(f);     //undefined        f = 'abc';        console.log(f);     // abc    }

1. 外层申明的变量f在有let申明的块级作用域内打印报错,说明不受外部申明影响
2. 先赋值再申明报错,在块级作用域内,let申明前的这一部分就形成了let所申明的变量的死区
3. 申明后可以正常赋值等操作

• 不允许重复申明

    // 示例四    (function () {        var g = 1;        console.log(g);     // 1        var g = 2;        console.log(g);     // 2    }());    (function () {        var h = 1;        console.log(h);     // 1        let h = 2;        console.log(h);     // SyntaxError: Identifier 'h' has already been declared    }());    (function () {        let i = 1;        console.log(i);     // SyntaxError: Identifier 'h' has already been declared        let i = 2;        console.log(i);     // SyntaxError: Identifier 'h' has already been declared    }());

const 命令

• const 用来申明常量，一旦申明，它的值就不能变，所以需要在申明时完成赋值

    const a = 123;    console.log(a);     // 123    a = 'abc';  //  TypeError: Assignment to constant variable.

• const 作用域与 let 相同

    if(true){        const b = 5;    }    console.log(b);     // ReferenceError: b is not defined

• const 也不能重复申明变量

    const c = 132;    console.log(c);     // 132    const c = 123;      // SyntaxError: Identifier 'c' has already been declared    var c = 45;         // SyntaxError: Identifier 'c' has already been declared

• const 常量特殊的地方：

  1. const申明一个对象时，这个对象的地址是个常量，可以给对象添加东西进去，但不可以给这个对象重新赋值一个对象

    const d = {};    d.k1 = 'v1';    d.k2 = 'v2';    console.log(d.k1,d.k2);     // v1 v2    d = {'x':'y'}   //TypeError: Assignment to constant variable.

1. 同样的，数组也是需要占用地址的，因此const数组时，也可以对该数组进行数组元素操作

    const e = [];    e.push('hello');    e.push('world');    e.push('!');    console.log(e.length);     // 3    e = [1,2,3,4];  // TypeError: Assignment to constant variable.

1. 申明冻结的对象，将不能对对象进行相关操作

    const f = Object.freeze({});    f.prop = 123;   // 不起任何效果    console.log(f.prop);        //undefined

• 跨模块常量

const申明的常量只在当前代码块有效，如果想设置跨模块的常量，可用下面的写法：

1. cons.js

    export const A = 11111;    export const B = 22222;    export const C = 33333;

1. test.js

    // 第一种调用方法    import * as cons from './cons'    console.log(cons.A);    console.log(cons.B);    console.log(cons.C);    // 第二种调用方法    import {A,B,C} from './cons'    console.log(A,B,C);

全局对象的属性

• 全局对象是最顶层的对象，在浏览器环境指导是window对象，在node环境指的是global对象
• 在ES5中，全局对象的属性与全局变量是等价的：

    // 在浏览器环境下    window.a = 1;    console.log(window.a);  // 1    console.log(a);         // 1    // 在node环境下    global.a = 1;    console.log(global.a);  // 1    console.log(a);         // 1

像在最顶层的 var a = 123; 这种申明不知不觉的就创造了全局对象的属性： window.a = 123； 这被认为是javascript的一大问题

• 在ES6中，为了改变这个现象，一方面规定var和function申明的全局变量依旧是全局对象的属性；另一方面规定let、const和class命令申明的全局变量不属于全局对象的属性：

    function run() {        console.log('hello');    }    window.run();       // hello（浏览器环境）    global.b = 1;    console.log(window.b);  // 1    console.log(b);     // 1    let c = 3;    console.log(window.c);  // undefined    console.log(global.c);  // undefined    console.log(c);     // 3

涉及到的代码请前往我的仓库下载,顺手给个star就更好啦^_^…

写完这个申明,小编突然发现这里面涉及到很多作用域的问题,尤其是块级作用域更是ES6新增的东西,所以小编会在下期更新中详解作用域这一关键词