【前端每日基础】day2 const var let的区别

var: 在早期的 JavaScript 中,var 是声明变量的唯一方式。它有以下特点:
var 声明的变量是函数作用域(function-scoped),而不是块作用域(block-scoped),这意味着它们在整个函数内部都是可见的。
可以在声明变量之前使用(变量提升),这可能会导致一些意外的行为。

变量提升是 JavaScript 中的一种特性,它允许在声明变量之前对变量进行访问。具体来说,当使用 var 声明变量时,JavaScript 引擎会在代码执行之前将变量的声明“提升”到当前作用域的顶部,而不管实际的声明语句是在哪里。这意味着你可以在变量声明之前引用变量,而不会抛出错误。
for example:

console.log(x); // undefined
var x = 10;

在这个例子中,虽然 console.log(x) 在 var x = 10; 之前,但不会抛出错误。这是因为变量声明被提升到了作用域的顶部,实际上相当于如下的代码:

var x;
console.log(x); // undefined
x = 10;

尽管变量提升在某些情况下可能有用,但它也可能导致一些意外的行为,尤其是对于初学者。例如,变量提升可能导致在预期之外使用变量的值,因为变量的实际赋值语句可能在预期之后执行。这可能会引发 bug 和难以调试的代码。

因此,建议在声明变量之前就使用变量可能会导致代码难以理解和维护,所以在现代 JavaScript 中,推荐使用 let 和 const 关键字来声明变量,因为它们不会导致变量提升,也可以帮助减少意外的行为。

let: let 是 ES6 引入的新的声明变量的方式。它修复了 var 的一些问题,具有以下特点:
let 声明的变量是块作用域的,只在声明的块级作用域内有效,这通常是一对花括号 {}。
不允许变量提升,必须先声明后使用。

块作用域(block scope)是指变量在指定的代码块内可见和可访问的范围。在 JavaScript 中,使用 let 和 const 关键字声明的变量具有块作用域。

一个块(block)通常指的是一对花括号 {} 包裹起来的一段代码,比如一个函数体、一个 if 语句块、一个循环体等等。在这个块内部声明的变量,在块外部是不可见的。
such as:

{
    let x = 10;
    console.log(x); // 输出 10
}

console.log(x); // 报错:x is not defined

在这个例子中,变量 x 是在一个块(由大括号 {} 包围)内部声明的,它只在这个块内部可见。因此,当我们在这个块外部尝试访问 x 时,会得到一个 “x is not defined” 的错误,因为 x 不在这个作用域内。

因此,块作用域就是指变量的可见范围限定在当前的代码块内部,超出了这个范围就无法访问这个变量。这与之前 JavaScript 中只有函数作用域的 var 声明方式形成了对比。

const: const 也是 ES6 引入的新的声明变量的方式,与 let 类似,但有以下不同:
const 声明的是常量,意味着它们的值不能再重新赋值。但请注意,对于复杂类型(如数组和对象),虽然不能重新分配整个变量,但可以修改其内容。
像 let 一样,const 也是块级作用域的。

复杂类型(也称为引用类型)指的是 JavaScript 中的对象(Object)和数组(Array)。相对于简单类型(例如数字、字符串、布尔值等),复杂类型可以存储更多的数据,并且可以通过引用来访问和修改。

在 JavaScript 中,变量可以存储两种类型的值:简单值(例如数字、字符串、布尔值)和复杂值(例如对象和数组)。简单值是按值传递的,而复杂值是按引用传递的。

const 关键字用于声明常量,它意味着常量的值在声明后不能被重新赋值。例如:

const PI = 3.14;
PI = 3.14159; // TypeError: Assignment to constant variable.

在这个例子中,我们尝试重新赋值常量 PI,但由于使用了 const 关键字声明,因此会抛出类型错误(TypeError)。

但对于复杂类型(对象和数组),const 声明的常量只保证变量指向的内存地址不会改变,但并不保证该内存地址中的内容不会改变。这意味着,尽管不能重新分配整个变量,但是可以修改其内容。

const myArray = [1, 2, 3];
myArray.push(4); // 可以修改数组的内容
console.log(myArray); // 输出 [1, 2, 3, 4]

在这个例子中,myArray 是一个数组常量,我们不能将其重新赋值为另一个数组,但是可以修改该数组的内容,例如向数组中添加新元素。这是因为 const 只能保证变量的引用不变,而不是变量指向的对象或数组的内容不变。

相关推荐

  1. 前端每日基础day2 const var let区别

    2024-05-11 20:28:02       37 阅读
  2. 前端每日基础day44——vue2和vue3区别

    2024-05-11 20:28:02       33 阅读
  3. 前端每日基础day1

    2024-05-11 20:28:02       32 阅读
  4. 前端每日基础day30

    2024-05-11 20:28:02       30 阅读
  5. 前端每日一题】day2

    2024-05-11 20:28:02       39 阅读
  6. 前端每日基础day34——HTTP和HTTPS

    2024-05-11 20:28:02       30 阅读
  7. 前端学习-CSS基础-Day2

    2024-05-11 20:28:02       39 阅读
  8. 前端每日基础day39——v-if 和 v-for优先级

    2024-05-11 20:28:02       34 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-05-11 20:28:02       98 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-05-11 20:28:02       106 阅读
  3. 在Django里面运行非项目文件

    2024-05-11 20:28:02       87 阅读
  4. Python语言-面向对象

    2024-05-11 20:28:02       96 阅读

热门阅读

  1. MySQL学习笔记12——效率和优化

    2024-05-11 20:28:02       151 阅读
  2. Unity 委托与事件、装箱和拆箱

    2024-05-11 20:28:02       32 阅读
  3. React 学习-5

    2024-05-11 20:28:02       35 阅读
  4. 6.5.Docker数据管理和端口映射应用

    2024-05-11 20:28:02       24 阅读
  5. 算法练习17——罗马数字转整数

    2024-05-11 20:28:02       29 阅读
  6. debian apt 更改阿里源

    2024-05-11 20:28:02       23 阅读
  7. android原生开发学习路线

    2024-05-11 20:28:02       30 阅读
  8. 算法详解——穷举法

    2024-05-11 20:28:02       26 阅读
  9. mysql5.x 的某些神奇问题

    2024-05-11 20:28:02       32 阅读