es6 let和const的用法

<template>
  <div>
    <el-button @click="click()">let用法：点击看控制台</el-button>
    <el-button @click="clickConst()">const用法：点击看控制台</el-button>
  </div>
</template>
<script>
 export default {
    name: "Base",
 methods: {
      click: function () {
        /*1、let作用域:自己最近的{}*/
 let a = 10;//只在let命令所在的代码块内有效（在click方法外引用就会报错）。适用于for循环。
 var c = [];
 for (let i = 0; i < 10; i++) {
          /*i用var定义,输出结果都是10，也就是说，所有数组c的成员里面的i，
           指向的都是同一个i，导致运行时输出的是最后一轮的i的值，也就是10。*/
 c[i] = function () {
            console.log(i);
 };
 }
        c[7]();//结果7，使用let定义时i是几输出就是几

        //2、变量提升*/
 for (let j = 0; j < 3; j++) {
          // let j = 'abc';
 console.log(j);//输出0 1 2
 }
        let bar = 2;
 console.log("let:" + bar); // 必须先声明再使用，输出2

 console.log("var:" + foo); // 变量先使用再声明会报错undefined
 var foo = 2;

 /*3、暂时性死区:意味着typeof不再是一个百分之百安全的操作。
              本质：只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，
              只有等到声明变量的那一行代码出现，才可以获取和使用该变量。
         */
 if (true) {
          // TDZ开始
 tmp = 'abc';
 console.log("tmp:" + tmp); // abc

 let tmp; // TDZ结束
 console.log("let声明：" + tmp); // undefined

 tmp = 123;
 console.log("tmp赋值：" + tmp); // 123

          //eg.

 typeof x;
 console.log("typeOf：" + x);// undefined

 let x;
 console.log("x：" + x);// undefined

 console.log(typeof undeclared_variable);// undefined 如果一个变量根本没有被声明，使用typeof反而不会报错。
 }

        function bar1(x = y, y = 2) {//此处x已声明，但是y没有声明，处于死区
 console.log([x, y]);
 }

        bar1(); // undefined

 function bar2(x = 3, y = x) {//此处x和y已声明，使用这两个变量没问题
 console.log([x, y]);
 }

        bar2(); // [3,3]

 var x1 = x1;
 console.log(x1);// undefined

        //let x1 = x1;
 console.log(x1);// 报错(在变量x的声明语句还没有执行完成前，就去取x的值，导致报错”x 未定义“。)

        /*4、不允许重复声明变量或参数，否则报错*/

        /*5、变量嵌套定义时的特点：
        * 1）外层无法读取内层作用域定义的内部变量,如变量 insane
        * 2）内层可以定义与外层作用域同名的变量,如变量 insane1*/

 {
          {
            {
              {
                {
                  let insane = 'Hello World'
 }
                //console.log("insane:"+insane); // 报错insane is not defined"
 }
            }
          }
        }

        {
          {
            {
              {
                let insane1 = 'Hello World';
 console.log("insane1:" + insane1); // 输出Hello World
 {
                  let insane1 = 'Hello World1';
 console.log("insane1:" + insane1); // 输出Hello World1
 }

              }
            }
          }
        }

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

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

        /*块级作用域之中，函数声明语句的行为类似于let，在块级作用域之外不可引用。*/
 function f() {
          console.log('I am outside!');
 }

        (function () {
          if (false) {
            // 重复声明一次函数f
 function f() {
              console.log('I am inside!');
 }
          }
          f();//I am outside!似乎if内声明的函数一直没有调用到
 }());
 },
 clickConst: function () {
        /*1、定义：const声明一个只读的常量。一旦声明，常量的值就不能改变。
        * const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。
        * */
 const PI= 3.1415926;//不变的常量
       // PI=3;//报错，不能重新赋值

       // const foo;//const只声明不赋值也报错
        /*2、const 作用域
        * const的作用域与let命令相同：只在声明所在的块级作用域内有效。如下示例
        * */
 if (true) {
          const MAX = 5;
 }
       //console.log(MAX);//MAX is not defined"

        /*也有暂时性死区，声明的位置需要在使用前面，否则报错；
        * 不能重复声明变量
        * */
 var message = "Hello!";
 //const message = "Goodbye!";//报错，不能重复声明同一个变量

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

        /*4、声明变量的方法
        * var命令和function命令声明的全局变量，依旧是顶层对象的属性；
        * 另一方面规定，let命令、const命令、class命令声明的全局变量，不属于顶层对象的属性。
        * */

 }
    }
  }
</script>
<style>
</style>