一、JS 基础知识之基础语法（3）--- 变量是什么及如何使用变量

1. 变量是什么

变量是计算机中用来存储数据的容器，它可以让计算机变得有记忆，简单来说，变量就像是一个装水的木桶。

变量并不是数据本身，它们只是一个用来存储数据的容器 ，通俗点说，变量就是一个个用来装东西的木桶，你可以用来装水，也可以用来装其他东西。

2. 如何使用变量

使用变量之前，我们需要先 声明变量 ，就是创建一个变量，声明变量由两部分构成：声明 关键字 、变量名（也叫标识符）

let 变量名 ：let 是声明变量的关键字，变量名就是变量的名称，例如：

声明变量之后，就可以给它赋值了，也称为 初始化

在上面我们定义了一个名叫 name 的木桶（变量），现在我们需要给它装入东西（即变量赋值 ）, 在变量名后面跟上一个 " = " ，然后就是你要放入木桶里的东西，可以是数值、字符串等

变量里面的数据通过变量名来获取

例如，我们可以将之前输入的姓名张三，用刚定义的 name 接收，然后在控制台输出：这样就可以将用户输入的字符串 "张三"，存入 name 容器了

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let name // 定义变量

      name = prompt('请输入姓名：') // 给变量赋值

      console.log(name) // 打印变量的值

    </script>
  </body>
</html>

上面是先声明了变量名，然后再进行赋值的，我们也可以在 声明变量的同时给变量初始化数据 ：

声明了一个 name 变量，同时里面存放了用户输入的数据（"张三"），运行结果与上例相同

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let name = prompt('请输入姓名：') // 定义变量的同时给变量赋值

      console.log(name) // 打印变量的值

    </script>
  </body>
</html>

变量赋值之后，还可以赋其它的值来更新原来变量的值：

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let name = '张三'
      name = '李四'
      console.log(name)
    </script>
  </body>
</html>

但 let 不允许 多次声明同一个变量 ，不然会报错，有的编译器也会直接给出提示：

也可以同时声明多个变量，可以在一行声明多个，也可以一行声明一个，多次声明：

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let name = '张三', age = 18

      console.log('姓名：' + name + '   ' + '年龄：' + age)
    </script>
  </body>
</html>

HTML 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let name = '张三'
      let age = 18

      console.log("姓名：" + name + "   " + "年龄：" + age)
    </script>
  </body>
</html>

3. 小案例 - 交换两个变量的值

需求：有两个变量， a 里面放的是 123，b 里面放的是 789，两个变量的值交换后， a 存放 789，b 存放 123

html 复制代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      let a = 123
      let b = 789
      let c // 临时变量

      c = a
      a = b
      b = c

      console.log('a 交换后的值是：' + a)
      console.log('b 交换后的值是：' + b)
    </script>
  </body>
</html>

分析：

先声明两个变量 a 、b ，用来存储原始值

再声明一个临时变量 c ，用来 " 过渡 "

把 a 的值先赋给临时变量 c ，这时 c = 123

再把 b 的值赋给 a ，此时 a = 789

最后把 c 的值赋给 b ，现在 b = 123

临时变量不用自动销毁