JavaScript全栈Pre-Course
  • Introduction
  • 课程介绍
  • Start
    • 教学方法
    • 软件和工具
  • 基本技能
    • 如何提问
    • Markdown 使用
    • 如何写 blog
    • Git 的简单应用
    • GitHub Pages
    • 在Chrome DevTools中进行调试
  • JavaScript基础
    • 如何引用JavaScript
    • 变量
    • 数据类型
    • 数学运算符
    • 逻辑运算符
    • 条件分支结构
    • 循环结构
    • 字符串
    • 对象
    • 数组
    • 函数
    • DOM 介绍
  • 整洁代码
  • 初识Linux
Powered by GitBook
On this page
  • 本节学习目标
  • 本节内容
  • 其他资料推荐
  • 本节练习
  1. JavaScript基础

变量

Previous如何引用JavaScriptNext数据类型

Last updated 6 years ago

本节学习目标

  • 理解程序中变量的概念

  • 掌握JavaScript中是定义和初始化变量的方法

本节内容

简单来说,变量就是存储信息的容器。

如下图所示,变量就相当与一个”盒子“,用来存储信息,比如:“Bob”,“true”,35等。同时,为了能够区分不同的盒子里存储的是什么信息,需要为每一个”盒子“起一个名字,称为“变量名”。当然,在”盒子“中存储的信息都有不同的数据类型,比如,若是存储了姓名“Bob”,那它就是字符串类型,若是存储了年龄35,那它就是数字类型,不同的语言会有不同的数据类型,JavaScript也有自己的数据类型,我们将会在下一节中讲述。

变量在使用前通常有两个步骤:声明和初始化。声明就相当于拿了一个"盒子"说这个"盒子"就用来存储姓名了,即指定变量名;初始化相当于将信息放在这个"盒子"中存储,比如将”Bob“放在"盒子"中存储。

在JavaScript中,变量是松散类型的,所谓松散类型就是可以用变量来保存任何类型的数据。换句哈说,每个变量仅仅是一个用户保存值的占位符而已。在JavaScript中定义变量使用var来声明一个变量,后面跟一个变量名,变量名必须是合法的标识符,包含:大小写字母,数组,下划线‘_’,美元符号‘$’,但不能以数字开头。如下所示:

var message = 'Hello World';  // Right!
var 2age = 30; // Wrong! 变量名不能以数字开头

在上一面提到,JavaScript中的变量是松散类型的,但是松散类型不是说JavaScript中没有数据类型,而意思是:我们在用"盒子"来存储信息时,不必规定这个”盒子“这能存储数字类型的信息,而是数字,字符串,日期等什么类型的信息都可以存储,但是数据本身是由数据类型的。

我们也可以像下面这样来声明一个变量:

var information;

这行代码定义了一个名为information的变量,该变量可以用来存储任何值(像这样未经过初始化的变量,会被保存一个特殊的值——undefined)。

在JavaScript中当一个变量已经被声明和初始化之后,还可以对该变量的值进行修改,如下:

var name = 'Bob';
name = 'Mike';

可以看到在上述代码中的第二行将姓名改为’Mike‘。之前我们提到JavaScript是松散类型的,我们是否可以向下面这样修改变量呢?

var name = 'Bob';
name = 10; // 有效!但不推荐

在这个例子中,变量name一开始保存了一个字符串的值’Bob‘,然后该值又被一个数字值10取代。虽然这种方式在JavaScript中完全有效,但是我们不建议修改变量时修改所保存值的类型。

有时我们可能需要同时定义多个变量,比如要一起定义姓名,年龄,学号,我们可以用下面的方法来定义变量:

var name = 'Bob';
var age = 16;
var stuNo = 0012323;

// 也可以这样定义
var name = 'Bob',
    age = 16,
    stuNo = 0012323;

第一种方法我们分别定义了三个变量,通过对比上面两种方法可以发现第二种方法将分号改为逗号,只有一个var同时定义了三个变量。同样,由于JavaScript是松散类型的,因而使用不同类型初始化变量的操作可以放在一条语句中来完成。虽然代码里的换行和变量缩进不是必须的,但这样做可以提高代码的可读性。

其他资料推荐

本节练习

  • 判断下面哪些是合法的标识符(变量名)?

    • 5Name

    • getName

    • $age

    • _sayHello

JS 变量 - MDN
在JS中如何声明变量?