TNotes.html-css-js

Appearance

to top

0001. var 关键字和变量 ​

1. 📝 概述 ​

  • 知识点：
    • 理解变量、内存、值是什么
    • 了解 var 关键字的基本使用
    • 直到 var 关键字已被淘汰，不再推荐使用

2. 💡 思维导图 ​

  • 思维导图

3. 📒 理解变量、内存、值 ​

  • 在编程中，变量（门牌号）指向内存中的特定位置（房间），这个位置中存储的内容（房间里的东西）就是值。
  • 内存 👉🏻 酒店
    • 内存：就像一栋酒店，有很多房间（存储空间）供客人使用。
  • 变量 👉🏻 门牌
    • 变量：就像房间的门牌号，用来标识和找到特定的房间。
  • 值 👉🏻 房间里的东西
    • 值：就像房间里的东西，可以是家具、家电等，是实际存储在房间（内存）里的内容。

4. 💻 demos.11 - var 关键字的作用域特性 ​

  • 函数作用域：当 var 在函数内部声明时，它的作用域仅限于该函数内。这意味着只能在声明它的函数内部访问该变量。
  • 全局作用域：如果 var 在任何函数外部声明，则它具有全局作用域，可以在代码的任何地方访问该变量，甚至在浏览器环境中会成为 window 对象的属性。
  • 提前初始化（Hoisting）：var 声明会被提升到其作用域的顶部，但赋值不会被提升。因此，在声明之前访问变量会导致其值为 undefined 而不是报错。
  • 可重复声明：在同一作用域中可以多次使用 var 声明同名变量，后面的声明不会报错，但也不会覆盖之前的声明。
javascript
function example() {
  console.log(x) // undefined
  var x = 10
  if (true) {
    var x = 20 // 重新声明同一变量
    console.log(x) // 20
  }
  console.log(x) // 20
}

example()
// undefined
// 20
// 20

在这个例子中，x 的值在函数范围内始终可见，并且在 if 块中再次声明 x 不会创建新的变量，而是修改同一个变量。

5. 📒 不再推荐使用 var 来声明变量 ​

  • 对 var 关键字有个简单的了解即可，var 基本算是退出历史舞台了。
  • ES6 推出了两个新的用于定义变量的关键字 let、const，它们解决了 var 关键字在定义变量时的诸多“问题”。
    • 为了方便相关知识点的介绍，后续部分文档中依旧会使用 var 来声明变量。
    • 但是，在实际工作中，不推荐使用 var 来声明变量，应该使用 let、const。
  • 到底什么时候使用 let、什么时候使用 const，这些在后面的内容中都会介绍到。这里可以简单提一嘴：
    • let 用来声明“变”量 - 也就是那些可能会被重新赋值的变量
    • const 用来声明“常”量 - 就是那些在初始化好之后，咱们不会再去改变它的值的变量

6. 💻 demos.1 - 理解变量和值 ​

javascript
var a = 1

/*
如何理解变量和值？
变量是对“值”的具名引用。
变量就是为“值”起名，然后引用这个名字，就等同于引用这个值。
变量的名字就是变量名。

var a = 1; 如何理解这行代码？
代码先声明变量 a
然后在变量 a 与数值 1 之间建立引用关系
称为将数值 1 “赋值” 给变量 a
之后引用变量名 a 就会得到数值 1

var a = 1; 这行代码中，最前面的 var 是什么？
最前面的 var 是变量声明命令。
var 表示通知解释引擎，要创建一个变量 a。
*/

7. 💻 demos.2 - 区分大小写 ​

javascript
var a = 1
var A = 2

console.log(a)
// 1

console.log(A)
// 2

/*
js 的变量名区分大小写
A 和 a 是两个不同的变量
*/

8. 💻 demos.3 - 变量的声明、赋值 ​

javascript
// var a = 1
var a
a = 1

/*
变量的声明和赋值，是分开的两个步骤。

var a = 1;

上面的代码将它们合在了一起，实际的步骤是下面这样。

var a;
a = 1;
*/

9. 💻 demos.4 - 仅声明未赋值为 undefined ​

javascript
var a
console.log(a)
// undefined

/*
如果只是声明变量而没有赋值，则该变量的值是 undefined。
undefined 是一个特殊的值，表示“无定义”。
*/

10. 💻 demos.5 - 全局变量 ​

javascript
// 5.js
// var a = 1;
a = 1

/*
JS 是很灵活的，在声明变量的时候，如果忘记了 var 命令，JS 会自动创建一个全局变量。

写法 1：
var a = 1;

写法 2：
a = 1;

上述两种写法，基本等效。
但是，写法 2 会创建一个全局变量，而写法 1 不会。
切记，你几乎没有任何理由使用【写法 2】这种写法，因为它会创建一个全局变量，这是非常危险的。
*/

11. 💻 demos.6 - 使用未声明的变量会报错 ​

javascript
a // ❌ ReferenceError: a is not defined

/*
如果一个变量没有声明就直接使用，js 会报错，告诉你变量未定义。
如果直接使用不存在的变量 a，系统将会报错，告诉你变量 a 没有声明。
*/

12. 💻 demos.7 - 可一次声明多个变量 ​

javascript
var a, b, c, d

/*
可以在同一条 var 命令中声明多个变量。
多个变量之间用逗号分隔。
*/

13. 💻 demos.8 - 理解“动态”类型 ​

javascript
var a = 1
a = 'hello' // ok

/*
JavaScript 是一种动态类型语言。
变量的类型没有限制，变量可以随时更改类型。

var a = 1
a = 'hello'

上述写法是 ok 的
一开始 a 存放的值是一个数字类型
然后修改变量 a 的值，改为一个字符串类型
*/

14. 💻 demos.9 - 变量重复声明无效 ​

javascript
var x = 1
var x // 该语句相当于不存在

console.log(x) // 1

/*
如果使用 var 重新声明一个已经存在的变量，是无效的。
你可以认为重复声明的语句不存在。

var x = 1
var x

你可以认为第二次声明 x 的语句不存在
*/

15. 💻 demos.10 - 变量重复声明并重新赋值 ​

javascript
var x = 1

console.log(x)
// 1

var x = 2

console.log(x)
// 2

/*
如果使用 var 重复声明同一个变量
并且重复声明的时候还进行了赋值
那么重复声明则会覆盖掉前面的语句

var x = 1
var x = 2

第二次声明时进行了赋值操作（声明的同时进行初始化操作）
赋的值会覆盖先前的值

下面两种写法是等效的。

【写法 1】
var x = 1
var x = 2

【写法 2】
var x = 1
var x // 相当于不存在
x = 2
*/