ES6精讲---let和const的使用

       各位，今天我为大家带来ES6标准的精要解读，如果需要详细的学习ES6的相关内容，可以参考阮一峰老师的博客文章。我这里只讲述在日常开发中经常使用到的ES6的相关特性。(视频和PPT  关注公众号:computer_life)

     这是本门课程的第一讲--let和const关键字的使用

     一、let的使用及其注意事项

    到ES6为止，定义变量使用到的关键字有两个，即var和let。下面我们用表格列出两种方式的使用情况，供大家来参考比较。

说明	var	let
申明位置	使用前后都可以申明	必须在使用前就申明
变量解析	编写时在使用后申明的变量存在变量提升	不会进行变量提升，要使用必须先申明
作用范围	全局或者整个函数	只在申明变量的局部能够使用
全局定义	变量会成为window对象的属性，不会成为global的属性	变量不会成为全局对象的属性

     综述：相较于var，let定义的变量更严谨，可以从语法层面避免重复申明等问题；而且let定义的变量因为只在局部代码段内有效，不存在变量污染。 

     由于let关键字的变量是相较于var有了全面性的改进和提升，建议在es6的项目中全面使用let来代替var来定义变量

接下来，我们通过一些例子来演示let关键字的使用（测试环境 nodejs 10.2.0）

例1：正常定义(先申明变量再使用)

   let str1 = 'hello'

   console.log(str1)    //  hello

 

例2：先使用再定义(出错)

console.log(str1)  //  str1 is not defined

let str1 = 'hello'

 

例3: 在for循环内定义

let sum = 0;

for(let i=0; i<= 100; i++ ){

  sum += i

}

console.log(i)    //  i is not defined

console.log(sum)  

 

例4: 代码段内定义

let  n  = 5

 if (false) {

   let n = 10

   console.log(n)  // 代码段打印没有执行

}

console.log(n)  // 5

 

例5: 代码段内定义

let  n  = 5

if (true) {

let n = 10

   console.log(n)  // 10  ->  代码内定义 就用代码段的值

}

  console.log(n)  // 5

 

例6: 代码段内定义

let  n  = 5

if (true) {

   console.log(n)  // n is not defined（必须先定义再使用）

   let n = 10

}

console.log(n)  // 5

 

例7: 代码段内

let  n  = 5

if (true) {

console.log(n)  // 5 (代码段内没有定义 就使用全局或者上一级定义的变量)

}

console.log(n)  // 5

 

例8: let与var在定义全局变量(nodejs)

let n=5

var sum = 100

console.log(global.n)  // undefined(未定义该属性)

console.log(global.sum) // undefined

 

例9: let与var在定义全局变量(浏览器)

let n=5

var sum = 100

console.log(window.n)   // undefined(未定义该属性)

console.log(window.sum)  // 100

 

 

二、const的使用及其注意事项

const关键字定义程序里面的常量，使用是必须在申明常量的同时就定义了相关的值，而且在程序运行中，不能再次赋值。可以通俗的理解为“出生决定一切”，看几个例子（测试环境 node 10.2.0）

例1:(正常定义)

   const PI = 3.1415926

   console.log(PI)

 

例2: (先申请，后定义)

const PI   // Missing initializer in const declaration(缺少常量初始值)

PI = 3.1415926  

console.log(PI)