<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>
来源：https://www.cnblogs.com/LindaBlog/p/10869052.html