一、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

临时变量不用自动销毁

相关推荐
ᖰ・◡・ᖳ4 小时前
JavaScript:PC端特效--缓动动画
开发语言·前端·javascript·css·学习·html5
布Coder7 小时前
前端 vue + element-ui 框架从 0 - 1 搭建
前端·javascript·vue.js
小刘不知道叫啥9 小时前
简单说一下 Webpack分包
前端·javascript·webpack·node.js
MessiGo9 小时前
Javascript 编程基础(2)基础知识 | 2.1、javascript与Node.js
开发语言·javascript·node.js
前端达人10 小时前
React 播客专栏 Vol.13|样式不难搞,Tailwind CSS 与 SVG 实战入门
前端·javascript·css·react.js·前端框架
W.Y.B.G11 小时前
vue3 vite 项目中自动导入图片
前端·javascript·vue.js
阳光开朗大男孩 = ̄ω ̄=11 小时前
【Vue篇】潮汐中的生命周期观测站
前端·javascript·vue.js
邝邝邝邝丹12 小时前
React学习———Immer 和 use-immer
javascript·学习·react.js
魔术师ID12 小时前
vue2.0 组件生命周期
前端·javascript·vue.js·学习·visual studio code
面包资料屋13 小时前
整理了 2009 - 2025 年的【199 管综真题 + 解析】PDF,全套共 34 份文件
开发语言·javascript·pdf