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

Posted 2022-01-26 黑木令

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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()