JavaScript ES6 - let 与 const 使用方及与var对比

1
2
3
4
5
6
7
1. 在 ES6 之前, 也就是 ES5 中, 有两个作用域
   1. 全局作用域
   2. 函数作用域
   
2. 在 ES6 中新增加了 '块级作用域' {} 。

1
2
3
4
5
6
7
8
9
10
11
12
// let 声明一个变量
function test1() {
  let num1 = 1111
  var num2 = 2222
  console.log('此时 let 与 var 没有任何区别: ', num1, num2);
}
// 此时使用 let 与 var 没有任何区别
test1()
// 打印结果:
// 此时 let 与 var 没有任何区别:  1111 2222

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// ES6 let
function test2() {
  for (let index = 1; index < 3; index++) {
    console.log('块级作用域内: ', index);
    // 打印结果:
    // 块级作用域内:  1
    // 块级作用域内:  2
  }
  /**
   * 1. 此处打印 'index' 报错: ReferenceError: index is not defined (报错的意思是: 引用错误, 'index' 没有找到)
   *    1. 这里体现的是: let 声明的变量, 只在自己的块级作用域内有效 。
   * 2. ES6 是强制开启严格模式的; 在 ES5 中使用严格模式需要设置 "use strict";
   *    1. 在严格模式下, 变量未声明不能引用, 否则就会报错 'ReferenceError' 。
   */
  // console.log('块级作用域 -外- 循环外打印 index: ', index);
  // 打印结果:
  // Uncaught ReferenceError: index is not defined
}
test2()



// 与 ES5 对比
function test3() {
  for (var i = 1; i < 3; i++) {
    console.log(i);
  }
  console.log('循环外打印 -- 得到最终结果 i: ', i);
  // 打印结果:
  // 循环外打印 -- 得到最终结果 i:  3
}
test3()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 使用 let 时, 不能重复声明变量
function test4() {
  /**
   * 友情提示:
   * 1. 报错: Error: Cannot find module "./class/1-let与const命令.js"
   *    1. 有可能是文件没有编译成功
   */
  let num = 1
  let num = 2
}
// test4()
// 执行结果:
// 报错: Error: Cannot find module "./class/1-let与const命令.js"

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/**
 * const 关键字
 * 1. const 声明一个 '常量' (注意: 是常量而不是变量)
 *    1. 常量的含义就是不能修改(不严谨)
 *    2. const 也是有块级作用域的
 *    3. const 声明的时候必须赋值
 */
function last1() {
  const num1 = 3.1415926
  console.log(num1);
}
last1()

1
2
3
4
5
6
7
8
9
10
11
12
function last2() {
  const num2 = 3.1415926
  /**
   * 报错:  SyntaxError: "num2" is read-only (意思就是说 'num2' 是一个只读属性, 不能修改)
   */
  // num2 = 3333
  // console.log('常量不能修改 num2 : ', num2);
  // 打印结果:
  // 报错: Error: Cannot find module "./class/1-let与const命令.js"
}
last2()

1
2
3
4
5
6
7
8
9
10
11
function last3() {
  /**
   * 报错: SyntaxError: Unexpected token (118:12) (意思是: 不完整)
   */
  const num3;
  // num3 = 3333 // 这里写与不写都会报相同的错
  console.log('声明时必须赋值 num3 : ', num3);
}
last3()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function last4() {
  const PI = 3.14
  const num4 = {
    newNum: 4444
  }

  // 对常量 num4 做一个修改
  num4.b = '修改常量: 增加一个值'
  num4.newNum = '修改常量: 常量对象中已有的值'

  /**
   * 这里的修改之所以成功, 是因为 num4 常量是一个对象, 对象是 '引用类型' (引用类型: 最后的返回值是对象存储的内存中的指针)。
   * 也就是我们声明的 num4 是指向这个对象的存储的指针, 这个指针是不变的, 但是对象本身是可以变得 。
   */

  console.log('const 不能修改, 这一句是不严谨的 num4 : ', PI, num4);
}
last4()