123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990 |
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8" />
- <meta http-equiv="X-UA-Compatible" content="IE=edge" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
- <title>Document</title>
- </head>
- <body>
- <script>
- // 变量声明 通过var来实现
- var a = 10;
- console.log(a);
- // ES6 提出两个新的创建变量的关键字 keyword
- // 分别为 let 和 const
- let age = 18;
- console.log(age);
- // 对比var : 1 var 声明变量 有提升过程(会给提升的变量初始值 = undefined) 而let没有
- console.log(b); // undefined
- var b;
- // let 在定义之前 去使用变量,会报错
- // console.log(c); // 报错 Uncaught ReferenceError: Cannot access 'c' before initialization
- let c;
- // console.log(d); //访问不存在的变量 Uncaught ReferenceError: d is not defined
- // 实际工作中,var定义的变量 具有提升的特性。但是实践告诉我们 这个特性并不是好的事情。因为会降低代码的可读性,错误的使用会导致一些意外不可预知的错误。
- // 实际开发时,代码的实现 要 A:完成特定功能 B;让人看懂你的代码(维护)
- // 先定义,再使用
- // 先赋值,再运算
- // 对比var : 2 var 可以重复定义同一变量;而let不可
- var e;
- var e;
- // 下面代码 会报错 Uncaught SyntaxError: Identifier 'f' has already been declared
- // let f;
- // let f;
- // 对比 var : 3 var 定义的变量只有两种作用域(全局作用域 以及 函数作用域(局部作用域))而 let 具有块级作用域
- // 在函数中var定义的变量具有函数作用域,只有在函数体中可以被有效的访问到,
- // 而不在任何函数中var定义的变量具有全局作用域,可以在任何位置被有效的访问到
- var g; // 全局变量
- function fn() {
- var h; // 局部变量
- }
- // let 定义的变量 具有自己的块级作用域;
- // 块:代码块 在js中使用 {} 代码代码块
- {
- var i; // 全局变量
- let j = 'j'; // 块级作用域,只有在它定义的代码块中可以被有效的访问到
- console.log(j);
- }
- console.log(i); // undefined
- // console.log(j); // 在代码块 外部使用let定义变量 会报错 Uncaught ReferenceError: j is not defined
- if (true) {
- let k = 'k';
- }
- // console.log(k);
- // 在循环中,通过let定义的变量 同样具有块级作用域,但是与其他的块有区别
- // 下面代码 会循环3次,因此会产生3个代码块,也就说是 创建3个块级作用域,里面都会定义属于自己作用域的变量l
- for (let l = 0; l < 3; l++) {
- console.log(l);
- }
- // 下面函数中代码 由于函数体 也是用{}包裹的 因此 即属于块级作用域 也是函数作用域
- // function foo() {
- // var aa;
- // let aa;
- // }
- // foo();
- // var bb;
- // let bb;
- {
- hh = 10; // 在let定义变量之前的区域,不准许对该变量进行任何的操作。
- let hh;
- }
- </script>
- </body>
- </html>
|