变量的学习_理解变量-优快云博客

本文链接：https://blog.youkuaiyun.com/HTML_Z/article/details/123380908

本文详细介绍了JavaScript中的变量，包括变量的作用、内存存储、声明、赋值、初始化、命名规范以及变量的使用案例，特别讲解了如何交换变量值的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

变量

目标

能够说出变量的主要作用
能够写出变量的初始化
能够说出变量的命名规范
能够画出变量是如何在内存中存储的
能够写出交换变量案例

<!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>
    <script>
      var myname = "旗木卡卡西";
      var address = "火影村";
      var age = 30;
      var email = "kakaxi@itcast.cn";
      var gz = 2000;
      console.log(myname, address, age, email, gz); // 旗木卡卡西 火影村 30 kakaxi@itcast.cn 2000
    </script>
  </head>
  <body></body>
</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>
    <script>
      // 1. 用户输入姓名 存储到一个myname的变量里面
      var myname = prompt("请输入您的姓名");
      // 2. 输出这个用户名
      alert(myname);
    </script>
  </head>
  <body></body>
</html>

3. 变量语法扩展

1. 更新变量

一个变量被重新复赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。

    <script>
      // 1. 更新变量
      var myname = "pink老师";
      console.log(myname); // pink老师
      myname = "迪丽热巴";
      console.log(myname); // 迪丽热巴
    </script>

2. 同时声明多个变量

同时声明多个变量时，只需要写一个 var，多个变量名之间使用英文逗号隔开。

    <script>
      // 2. 声明多个变量
      // var age = 18;
      // var address = "火影村";
      // var gz = 2000;
      var age = 18,
        address = "火影村",
        gz = 2000;
    </script>

3. 声明变量特殊情况

情况	说明	结果
var age; console.log(age);	只声明不赋值	undefined
console.log(age)	不声明不赋值直接使用	报错
age = 10; console.log(age);	不声明只赋值	10

    <script>
      // 声明变量的特殊情况
      // 只声明不赋值 结果是？ 程序也不知道里面存储的啥 所有结果undefined 未定义的
      var sex;
      console.log(sex); // undefined 未定义的
      // 不声明 不赋值 直接使用某个变量会报错滴
      // console.log(tel);
      // 不声明直接赋值使用
      qq = 110;
      console.log(qq); // 110 不提倡
    </script>

4. 变量命名规范

由字母（A - Za - z）、数字（0 - 9）、下划线（ _ ）、美元符号（ $ ）组合，如：usrAge、num01、_name
严格区分大小写。var app; 和 var App；是两个变量
不能以数字开头。18age 是错误的
不能是关键字、保留字。例如：var、for、while
变量名必须有意义。
遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。myFirstName
推进翻译网站：有道爱词霸

案例：课堂练习

要求：交换两个变量的值（实现思想：使用一个临时变量用来做中间存储）

    <script>
      // js 是编程语言有很强的逻辑性在里面：实现这个要求的思路 先怎么做后怎么做
      // 1. 我们需要一个临时变量帮助我们
      // 2. 把 apple1 给我们的临时变量 temp
      // 3. 把 apple2 里面的苹果给 apple1
      // 4. 把临时变量里面的值给 apple2
      var temp; // 声明了一个临时变量为空
      var apple1 = "青苹果";
      var apple2 = "红苹果";
      temp = apple1; // 把右边给左边
      console.log(temp); // 青苹果
      apple1 = apple2;
      console.log(apple1); // 红苹果
      apple2 = temp;
      console.log(apple2); // 青苹果
    </script>

5. 小结

为什么需要变量？
- 因为我们一些数据需要保存，所以需要变量
变量是什么？
- 变量就是一个容器，用来存放数据的。方便我们以后使用里面的数据
- 变量是内存里面的一块空间，用来存储数据
- 我们使用变量的时候，一定要声明变量，然后赋值
变量的本质是什么？
- 声明变量的本质是去内存申请空间
变量怎么使用的？
- 我们在使用变量的时候，一定要声明变量，然后赋值
什么是变量的初始化
- 声明变量并赋值我们称之为变量的初始化
变量命名规范有哪些？
- 变量名尽量要规范，见名知意——驼峰命名法
交换 2 个变量值的思路？
- 学会交换 2 个变量