JavaScript 变量
var 关键字
1let message // 默认 undefined
声明后可以改变类型，但不推荐
1let message = 'hi'
2message = 100 // 合法，但不推荐
var 声明作用域，一个函数内部定义一个变量，在函数退出时被销毁
1function test() {
2 const message = 'hi' // 局部变量
3}
4test()
5console.log(message) // 出错！
在函数内定义变量时省略 var 操作符，可以创建一个全局变量：
1function test() {
2 message = "hi"; // 全局变量
3 // 在严格模式下，如果像这样给未声明的变量赋值，则会导致抛出ReferenceError。
4}
5test();
6console.log(message); // "hi"
定义多个变量
1const message = 'hi'
2const found = false
3const age = 29
4// 在严格模式下，不能定义名为eval 和arguments 的变量，否则会导致语法错误。
var 声明提升
1function foo() {
2 console.log(age)
3 var age = 26
4}
5foo() // undefined
关键字声明的变量会自动提升到函数作用域顶部，相当于：
1function foo() {
2 let age
3 console.log(age)
4 age = 26
5}
6foo() // undefined
反复多次使用 var 声明同一个变量也没有问题
1function foo() {
2 var age = 16
3 var age = 26
4 var age = 36
5 console.log(age)
6}
7foo() // 36
let 声明
let 声明的范围是块作用域：
1if (true) {
2 var name = 'Matt'
3 console.log(name) // Matt
4}
5console.log(name) // Matt
6
7if (true) {
8 const age = 26
9 console.log(age) // 26
10}
11console.log(age) // ReferenceError: age 没有定义
不能重复声明
1let age;
2let age; // SyntaxError；标识符age 已经声明过了
块作用域没有重复声明则使用相同标识符则不会报错
1var name = 'Nicholas'
2console.log(name) // 'Nicholas'
3if (true) {
4 var name = 'Matt'
5 console.log(name) // 'Matt'
6}
7const age = 30
8console.log(age) // 30
9if (true) {
10 const age = 26
11 console.log(age) // 26
12}
两个关键字不能重复声明
1var name;
2let name; // SyntaxError
3let age;
4var age; // SyntaxError
暂时性死区
1// name 会被提升
2console.log(name) // undefined
3var name = 'Matt'
4// age 不会被提升
5console.log(age) // ReferenceError：age 没有定义
6let age = 26
全局声明
let 在全局作用域中声明的变量不会成为 window 对象的属性（var 声明的变量则会）
1const name = 'Matt'
2console.log(window.name) // 'Matt'
3const age = 26
4console.log(window.age) // undefined
注意
不过 let 声明还是在全局作用域中发生的，变量会在整个页面生命周期内续存。所以不要重复声明同一个变量，避免 SyntaxError
条件声明
1<script>
2 var a = 1;
3 let b = 2;
4</script>
5<script>
6 console.log(a); // 1
7 console.log(b); // 2
8</script>
JavaScript 引擎会自动将多余的声明在作用域顶部合并为一个声明。但是 let 是块级作用域，所以检查不到之前是否声明过。
1<script>
2 var name = 'Nicholas';
3 let age = 26;
4</script>
5<script>
6 // 假设脚本不确定页面中是否已经声明了同名变量
7 // 那它可以假设还没有声明过
8 var name = 'Matt';
9 // 这里没问题，因为可以被作为一个提升声明来处理
10 // 不需要检查之前是否声明过同名变量
11
12 let age = 36; // age 之前声明过，这里会报错
13</script>
try/catch 语句或 typeof 操作符也不能解决
1<script>
2 let name = 'Nicholas';
3 let age = 36;
4</script>
5<script>
6 if (typeof name === 'undefined') {
7 let name; // name 被限制在if {} 块的作用域内
8 }
9 name = 'Matt'; // 因此这个赋值形同全局赋值
10 try {
11 console.log(age); // 如果age 没有声明过，则会报错
12 } catch (error) {
13 let age; // age 被限制在catch {}块的作用域内
14 }
15 age = 26; // 这个赋值形同全局赋值
16</script>
for 循环中的 let 声明
使用 var 时变量会渗透到外面
1for (var i = 0; i < 5; ++i) {
2 // 循环逻辑
3}
4console.log(i) // 5
let 之后则不会，因为遇到 {} 就会形成作用域块
1for (let i = 0; i < 5; ++i) {
2 // 循环逻辑
3}
4console.log(i) // ReferenceError: i 没有定义
常见的异步循环问题
1for (var i = 0; i < 5; ++i)
2 setTimeout(() => console.log(i), 0)
3
4// 你可能以为会输出0、1、2、3、4
5// 实际上会输出5、5、5、5、5
在延迟定时器执行时，他是异步的，循环已经结束了，最后的值始终都是 5。
使用 let 才是期望的值
1for (let i = 0; i < 5; ++i)
2 setTimeout(() => console.log(i), 0)
3
4// 会输出0、1、2、3、4
每次迭代循环声明一个新的迭代变量，每个 setTimeout 引用的都是不同的变量实例。这种风格也适用于 for in、for of。
const 声明
const 的行为与 let 基本相同，但是他是常量，声明之后不能修改，尝试修改 const 声明的变量会导致运行时错误。
1const age = 26;
2age = 36; // TypeError: 给常量赋值
3
4// const 也不允许重复声明
5const name = 'Matt';
6const name = 'Nicholas'; // SyntaxError
7
8// const 声明的作用域也是块
9const name = 'Matt';
10if (true) {
11 const name = 'Nicholas';
12}
13console.log(name); // Matt
但是 const 声明只限制声明的引用：
1const person = {}
2person.name = 'Matt' // ok
如果想让整个对象都不能修改，可以使用 Object.freeze()
1const obj = Object.freeze({})
2obj.name = 'Jake' // 不会报错，但会静默失败
3console.log(obj.name) // undefined
在 for 中 const 与 let 一样分别独立创建变量的实例，但是不能用 const 来迭代变量（因为变量 i 要自增）
1for (const i = 0; i < 10; ++i) {} // TypeError：给常量赋值
只想用 const 声明一个不会被修改的 for 循环变量，那也是可以的
1let i = 0
2for (const j = 7; i < 5; ++i)
3 console.log(j)
4
5// 7, 7, 7, 7, 7
6for (const key in { a: 1, b: 2 })
7 console.log(key)
8
9// a, b
10for (const value of [1, 2, 3, 4, 5])
11 console.log(value)
12
13// 1, 2, 3, 4, 5
函数声明提升与 var 声明提升
1var a = 'Tom';
2function a() {}
3
4console.log(a); // 'Tom'
function与var都存在变量提升，但function比var优先级高。上面的代码就相当于：
1function a() {}
2var a;
3a = 'Tom';
4
5console.log(a); // 'Tom'
