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

ES6 语法: let 与 const

本文主要讲解 let / const / var 关键字相关内容, 解释了它们的基本用法以及相关需要注意的知识点; 其中还包含一些作用域的相关概念 。

let / const / var 它们的作用基本上是一致的, 但是它们还是有很多区别的; 下面我们就来看看他们之间的区别与作用 。

1. 作用域

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

2 let 声明一个变量

// let 声明一个变量
function test1() {
  let num1 = 1111
  var num2 = 2222
  console.log('此时 let 与 var 没有任何区别: ', num1, num2);
}
// 此时使用 let 与 var 没有任何区别
test1()
// 打印结果:
// 此时 let 与 var 没有任何区别:  1111 2222

2.1 块级作用域

// 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()

2.2 使用 let 时, 不能重复声明变量

// 使用 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"

3. const 关键字

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

3.1 const 声明的常量不能修改(不严谨)

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()

3.2 const 声明时必须赋值

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

3.3 const 不能修改这一句是不严谨的

function last4() {
  const PI = 3.14
  const num4 = {
    newNum: 4444
  }

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

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

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

如果对你有所帮助，喜欢的可以点个关注; 文章会持续打磨 。

有什么想要了解的前端知识吗? 可以在评论区留言, 会及时跟进分享所相关内容 。

整理知识点不易, 每次都是在工作繁忙之余夜深人静之时整理, 无论知识点是大是小, 都会验证后再分享, 以防自己发表的文章给大家造成误导 。如有问题还望不吝赐教，本人会及时更改 (本文原创, 如需转载，请注明出处) 。