【ES6】ES6学习二：let、const、顶层对象window

可参考阮大神的文章：http://es6.ruanyifeng.com/

一、let变量

1、ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。举例：

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

说明：for循环的计数器，就很合适使用let命令。

2、不存在变量提升

“let不存在变量提升，它所声明的变量一定要在声明后使用，否则报错。”这句话有待考察，我试了一下，没有报错诶。

console.log(d);//undefined
let d = 3;

3、不允许重复声明

let不允许在相同作用域内，重复声明同一个变量。举例：

//报错
function fune() {
    let e = 10;
    var e = 11;
}

4、块级作用域

ES5 只有全局作用域和函数作用域，没有块级作用域，这带来很多不合理的场景。

场景一，用来计数的循环变量泄露为全局变量。举例：

var s = 'hello';
for (var i = 0; i < s.length; i++) {
  console.log(s[i]);
}
console.log(i); // 5

块级作用域的出现，实际上使得获得广泛应用的立即执行函数表达式（IIFE）不再必要了。

// IIFE 写法
(function () {
  var tmp = ...;
  ...
}());

// 块级作用域写法
{
  let tmp = ...;
  ...
}

二、const常量

1、const声明一个只读的常量。一旦声明，常量的值就不能改变。对于const来说，只声明不赋值，就会报错。

// ES5 中常量的写法：
Object.defineProperty(window, "PI2", {
    value: 3.1415926,
    writable: false,//不能写，即‘只读’
})
console.log(window.PI2)

// ES6 的常量写法：
const PI = 3.1415926
console.log(PI)
//PI = 4//此时再赋值，控制台会报错

// const foo;//此时控制台会报错

运行项目，在控制台得到常量的值，此时在控制台修改PI2的值，然后再打印，可以看到PI2的值没有改变，如下图所示：

说明：const实际上保证的并不是变量的值不得改动，而是变量指向的那个内存地址所保存的数据不得改动。

const foo = {};
// 为 foo 添加一个属性，可以成功
foo.prop = 123;
foo.prop // 123

// 将 foo 指向另一个对象，就会报错
foo = {}; // TypeError: "foo" is read-only

2、const的作用域与let命令相同：只在声明所在的块级作用域内有效。const命令声明的常量也是不提升，同样存在暂时性死区，只能在声明的位置后面使用。

const作用域代码举例：

// ES5中作用域
var callbacks = []
for (var i = 0; i <= 2; i++) {
    callbacks[i] = function() {
        return i * 2
    }
}
console.table([
    callbacks[0](),//6
    callbacks[1](),//6
    callbacks[2](),//6
])

//ES6中作用域
const callbacks2 = []
for (let j = 0; j <= 2; j++) {//let块作用域
    callbacks2[j] = function() {
        return j * 2
    }
}
console.table([
    callbacks2[0](),//0
    callbacks2[1](),//2
    callbacks2[2](),//4
]);

//ES5立即执行函数
(function() {
    const foo = function() {
        return 1
    }
    console.log("foo()===1", foo() === 1);

    (function() {
        const foo = function() {
            return 2
        }
        console.log("foo()===2", foo() === 2)
    })()
})()

//ES6中用大括号形成的块作用域
{
    function foo() {
        return 1
    }
    console.log("foo()===1", foo() === 1)
    {
        function foo() {
            return 2
        }
        console.log("foo()===2", foo() === 2)
    }
    console.log("foo()===1", foo() === 1);//true
}

三、顶层对象的属性

顶层对象，在浏览器环境指的是window对象，在 Node 指的是global对象。ES5 之中，顶层对象的属性与全局变量是等价的。从 ES6 开始，全局变量将逐步与顶层对象的属性脱钩。

var m = 1;
console.log(window.m)// 照阮大神的文章结果是1，实际是undefined

let n = 1;
console.log(window.n) // undefined