2021-07-29 11:08:52 +08:00
|
|
|
|
---
|
|
|
|
|
title: 02-变量
|
|
|
|
|
publish: true
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
<ArticleTopAd></ArticleTopAd>
|
2018-12-29 12:53:20 +08:00
|
|
|
|
|
2021-10-31 18:38:34 +08:00
|
|
|
|
## 常量(字面量):数字和字符串
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2021-10-31 18:38:34 +08:00
|
|
|
|
**常量**也称之为“字面量”,是固定值,不可改变。看见什么,它就是什么。
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2021-10-31 18:38:34 +08:00
|
|
|
|
常量有下面这几种:
|
2019-12-12 15:04:44 +08:00
|
|
|
|
|
2021-10-31 18:38:34 +08:00
|
|
|
|
- 数字常量(数值常量)
|
|
|
|
|
- 字符串
|
|
|
|
|
- 布尔常量
|
|
|
|
|
- 自定义常量
|
2019-12-12 15:04:44 +08:00
|
|
|
|
|
2021-10-31 18:38:34 +08:00
|
|
|
|
### 数字常量
|
2019-12-12 15:04:44 +08:00
|
|
|
|
|
2021-10-31 18:38:34 +08:00
|
|
|
|
数字常量非常简单,直接写数字就行,不需要任何其他的符号。既可以是证书,也可以是小数。例如:
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
|
|
|
|
```javascript
|
2021-10-31 18:38:34 +08:00
|
|
|
|
alert(996); //996是数字,所以不需要加引号。
|
2018-10-02 22:10:26 +08:00
|
|
|
|
```
|
|
|
|
|
|
2021-10-31 18:38:34 +08:00
|
|
|
|
2、字符串的字面量也很简单,但一定要加上引号。可以是单词、句子等。例如:
|
2019-12-11 18:16:28 +08:00
|
|
|
|
|
|
|
|
|
```javascript
|
2021-10-31 18:38:34 +08:00
|
|
|
|
console.log('996');
|
2019-12-11 18:16:28 +08:00
|
|
|
|
|
2021-10-31 18:38:34 +08:00
|
|
|
|
console.log('千古壹号,永不止步');
|
2019-12-11 18:16:28 +08:00
|
|
|
|
```
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2021-10-31 18:38:34 +08:00
|
|
|
|
温馨提示:996 是数字,'996'是字符串。
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2019-12-12 15:04:44 +08:00
|
|
|
|
(3)布尔字面量举例:
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
if (true) {
|
|
|
|
|
console.log('如果为真,就走这里面的代码);
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2018-10-02 22:10:26 +08:00
|
|
|
|
### 总结
|
|
|
|
|
|
2021-10-31 18:38:34 +08:00
|
|
|
|
字面量都可以直接使用,但是我们一般不会直接使用字面量,否则比较麻烦。比如说,多个地方要用到同一个字面量,还不如事先定义一个变量,用来保存字面量。
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2019-12-04 16:14:08 +08:00
|
|
|
|
变量更方便我们使用,所以在开发中都是通过变量去保存一个字面量,而不会直接使用字面量。
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2019-12-11 18:16:28 +08:00
|
|
|
|
## 变量的概念
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2019-12-12 15:04:44 +08:00
|
|
|
|
**变量**:是用于存放数据的容器。我们通过「变量名」获取数据,甚至可以修改数据。
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2019-12-11 18:16:28 +08:00
|
|
|
|
变量还可以用来保存字面量。
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2019-12-11 18:16:28 +08:00
|
|
|
|
**本质**:变量是程序在内存中申请的一块用来存放数据的空间。
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2019-12-11 18:16:28 +08:00
|
|
|
|
## 变量的声明和赋值
|
2019-12-04 22:54:48 +08:00
|
|
|
|
|
2020-05-30 23:24:59 +08:00
|
|
|
|
### 变量的声明/变量的定义
|
2019-12-11 18:16:28 +08:00
|
|
|
|
|
2021-10-31 18:38:34 +08:00
|
|
|
|
在 ES6 语法之前,统一使用`var`关键字来声明一个变量。比如:
|
2019-12-11 18:16:28 +08:00
|
|
|
|
|
|
|
|
|
```javascript
|
2020-05-30 23:24:59 +08:00
|
|
|
|
var name; // 声明一个名为 name 的变量
|
2019-12-11 18:16:28 +08:00
|
|
|
|
```
|
|
|
|
|
|
2021-10-31 18:38:34 +08:00
|
|
|
|
PS:**在 JavaScript 中,永远都是用 var 来定义变量**(在 ES6 之前),这和 C、Java 等语言不同。
|
2020-05-30 23:24:59 +08:00
|
|
|
|
|
|
|
|
|
### 变量的声明/定义(ES6)
|
|
|
|
|
|
2021-10-31 18:38:34 +08:00
|
|
|
|
在 ES6 语法及之后,可以使用 `const`、`let`关键字来声明一个变量
|
2020-05-30 23:24:59 +08:00
|
|
|
|
|
|
|
|
|
```js
|
|
|
|
|
const name; // 定义一个常量
|
|
|
|
|
|
|
|
|
|
let age;
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
如果你想定义一个常量,就用 const;如果你想定义一个变量,就用 let。
|
2019-12-11 18:16:28 +08:00
|
|
|
|
|
|
|
|
|
### 变量的赋值
|
|
|
|
|
|
|
|
|
|
变量的赋值:
|
|
|
|
|
|
|
|
|
|
```javascript
|
2021-10-31 18:38:34 +08:00
|
|
|
|
name = '千古壹号';
|
2019-12-11 18:16:28 +08:00
|
|
|
|
```
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2020-05-30 23:24:59 +08:00
|
|
|
|
变量的声明和赋值,写在一起,举例如下:
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
|
|
|
|
```javascript
|
2019-12-11 18:16:28 +08:00
|
|
|
|
var a = 100; // ES5语法
|
2019-12-04 22:54:48 +08:00
|
|
|
|
|
2019-12-11 18:16:28 +08:00
|
|
|
|
const b = hello; // ES6 语法
|
|
|
|
|
let b = world; // ES6 语法
|
2018-10-02 22:10:26 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
如下图所示:
|
|
|
|
|
|
|
|
|
|
![](http://img.smyhvae.com/20180116_2020.png)
|
|
|
|
|
|
2021-10-31 18:38:34 +08:00
|
|
|
|
var 是英语“variant”变量的缩写。后面要加一个空格,空格后面的东西就是“变量名”:
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2021-10-31 18:38:34 +08:00
|
|
|
|
- 定义变量:var 就是一个**关键字**,用来定义变量。所谓关键字,就是有特殊功能的单词。
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2021-10-31 18:38:34 +08:00
|
|
|
|
- 变量的赋值:等号表示**赋值**,将等号右边的值,赋给左边的变量。
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2021-10-31 18:38:34 +08:00
|
|
|
|
- 变量名:我们可以给变量任意的取名字。
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2019-12-11 18:16:28 +08:00
|
|
|
|
### 变量的初始化
|
|
|
|
|
|
|
|
|
|
有经验的程序员,会把声明和赋值写在一起:
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2019-12-11 18:16:28 +08:00
|
|
|
|
```javascript
|
2021-10-31 18:38:34 +08:00
|
|
|
|
var a = 100; //声明,并且赋值100
|
|
|
|
|
console.log(a); //输出100
|
2018-10-02 22:10:26 +08:00
|
|
|
|
```
|
|
|
|
|
|
2019-12-11 18:16:28 +08:00
|
|
|
|
声明一个变量并赋值, 我们称之为**变量的初始化**。
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2019-12-11 19:59:12 +08:00
|
|
|
|
## 变量声明和赋值的补充
|
2019-12-11 18:16:28 +08:00
|
|
|
|
|
2019-12-11 19:59:12 +08:00
|
|
|
|
### 修改变量的值
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2019-12-11 18:16:28 +08:00
|
|
|
|
一个变量被重新复赋值后,它原有的值就会被覆盖,变量值将以最后一次赋的值为准。
|
|
|
|
|
|
|
|
|
|
举例:
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
|
|
|
|
```javascript
|
2019-12-11 18:16:28 +08:00
|
|
|
|
var a = 100;
|
|
|
|
|
a = 110;
|
|
|
|
|
|
|
|
|
|
console.log(a); // 打印结果:110。因为 110 覆盖了 100
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### 同时声明多个变量
|
|
|
|
|
|
|
|
|
|
同时声明多个变量时,只需要写一个 var, 多个变量名之间用英文逗号隔开。
|
|
|
|
|
|
|
|
|
|
举例:
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
var name = '千古壹号', age = 27, number = 100;
|
2018-10-02 22:10:26 +08:00
|
|
|
|
```
|
|
|
|
|
|
2019-12-11 19:59:12 +08:00
|
|
|
|
### 变量声明的几种特殊情况
|
2019-12-11 18:16:28 +08:00
|
|
|
|
|
|
|
|
|
变量建议先声明,再使用。否则可能会报错。具体如下。
|
|
|
|
|
|
2021-10-31 18:38:34 +08:00
|
|
|
|
**写法 1**、先声明,再赋值:(正常)
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
|
|
|
|
```javascript
|
2019-12-11 18:16:28 +08:00
|
|
|
|
var a;
|
|
|
|
|
a = 100;
|
|
|
|
|
console.log(a); // 打印结果:100
|
|
|
|
|
```
|
2021-10-31 18:38:34 +08:00
|
|
|
|
|
|
|
|
|
**写法 2**、不声明,只赋值:(正常)
|
2019-12-11 18:16:28 +08:00
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
a = 100;
|
|
|
|
|
console.log(a); // 打印结果:100
|
|
|
|
|
```
|
|
|
|
|
|
2021-10-31 18:38:34 +08:00
|
|
|
|
**写法 3**、只声明,不赋值:(注意,打印 undefined)
|
2019-12-11 18:16:28 +08:00
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
var a;
|
|
|
|
|
console.log(a); // 打印结果:undefined
|
2018-10-02 22:10:26 +08:00
|
|
|
|
```
|
|
|
|
|
|
2021-10-31 18:38:34 +08:00
|
|
|
|
**写法 4**、不声明,不赋值,直接使用:(会报错)
|
2019-12-11 18:16:28 +08:00
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
console.log(a); // 会报错
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
控制台会报错:
|
|
|
|
|
|
|
|
|
|
![](http://img.smyhvae.com/20180116_2040.png)
|
|
|
|
|
|
2021-10-31 18:38:34 +08:00
|
|
|
|
**补充**:写法 1 和写法 2 虽然都正常,但这两种写法是有区别的,等以后学习了「变量提升」的概念就明白了。大多数情况下,我们都是采用的写法 1。
|
2019-12-11 18:16:28 +08:00
|
|
|
|
|
|
|
|
|
## 变量的命名规范
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2021-10-31 18:38:34 +08:00
|
|
|
|
大写字母是可以使用的,并且大小写敏感。也就是说 A 和 a 是两个变量。
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
|
|
|
|
```javascript
|
2021-10-31 18:38:34 +08:00
|
|
|
|
var A = 250; //变量1
|
|
|
|
|
var a = 888; //变量2
|
2018-10-02 22:10:26 +08:00
|
|
|
|
```
|
|
|
|
|
|
2019-12-11 19:59:12 +08:00
|
|
|
|
我们来整理一下**变量的命名规范**:
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2021-10-31 18:38:34 +08:00
|
|
|
|
- 只能由字母(A-Z、a-z)、数字(0-9)、下划线(\_)、美元符( $ )组成
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2021-10-31 18:38:34 +08:00
|
|
|
|
- 不能以数字开头。也就是说,必须以字母(A-Z、a-z)、下划线(\_)或者美元符( $ )开头。变量名中不允许出现空格。
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2021-10-31 18:38:34 +08:00
|
|
|
|
- 不用使用 JS 语言中保留的「关键字」和「保留字」作为变量名。
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2021-10-31 18:38:34 +08:00
|
|
|
|
- 建议用驼峰命名规则。比如 getElementById、matherAndFather、aaaOrBbbAndCcc
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2021-10-31 18:38:34 +08:00
|
|
|
|
- 变量名会区分大小写(javascript 是区分大小写的语言)。
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2021-10-31 18:38:34 +08:00
|
|
|
|
- 变量名长度不能超过 255 个字符。
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2021-10-31 18:38:34 +08:00
|
|
|
|
- 汉语可以作为变量名。但是不建议使用,因为 low。
|
2019-12-11 19:59:12 +08:00
|
|
|
|
|
|
|
|
|
## 标识符、关键字、保留字
|
|
|
|
|
|
|
|
|
|
### 标识符
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2021-10-31 18:38:34 +08:00
|
|
|
|
**标识符**:在 JS 中所有的可以由我们**自主命名**的都可以称之为标识符。
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2019-12-12 16:39:36 +08:00
|
|
|
|
例如:变量名、函数名、属性名、参数名都是属于标识符。通俗来讲,标识符就是我们写代码时为它们起的名字。
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2018-11-25 18:10:54 +08:00
|
|
|
|
**标识符的命名规则**和变量的命令规则是一样的。看上面一段就可以了。
|
|
|
|
|
|
2019-12-12 16:39:36 +08:00
|
|
|
|
同样,标识符不能使用语言中保留的**关键字**及**保留字**。如下。
|
2018-11-25 18:10:54 +08:00
|
|
|
|
|
2019-12-11 19:59:12 +08:00
|
|
|
|
### 关键字
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2020-05-30 23:24:59 +08:00
|
|
|
|
**关键字**:是指 JS 本身已经使用了的单词,我们不能再用它们充当变量、函数名等标识符。
|
2019-12-12 16:39:36 +08:00
|
|
|
|
|
|
|
|
|
JS 中的关键字如下:
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
break、continue、case、default、
|
|
|
|
|
|
|
|
|
|
if、else、switch、for、in、do、while、
|
|
|
|
|
|
|
|
|
|
try、catch、finally、throw、
|
|
|
|
|
|
|
|
|
|
var、void、function、return、new、
|
|
|
|
|
|
|
|
|
|
this、typeof、instanceof、delete、with、
|
|
|
|
|
|
|
|
|
|
true、false、null、undefined
|
|
|
|
|
```
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2019-12-11 19:59:12 +08:00
|
|
|
|
### 保留字
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2019-12-12 16:39:36 +08:00
|
|
|
|
**保留字**:实际上就是预留的“关键字”。意思是现在虽然还不是关键字,但是未来可能会成为关键字,同样不
|
|
|
|
|
能使用它们当充当变量名、函数名等标识符。
|
|
|
|
|
|
|
|
|
|
JS 中的保留字如下:
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
|
|
|
|
```
|
2019-12-11 19:59:12 +08:00
|
|
|
|
abstract、boolean、byte、char、class、const、
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2019-12-11 19:59:12 +08:00
|
|
|
|
debugger、double、enum、export、extends、final、float、goto
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2019-12-11 19:59:12 +08:00
|
|
|
|
implements、import、int、interface、long、native、package、
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2019-12-11 19:59:12 +08:00
|
|
|
|
private、protected、public、short、static、super、synchronized、throws、
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2019-12-11 19:59:12 +08:00
|
|
|
|
transient、volatile
|
2018-10-02 22:10:26 +08:00
|
|
|
|
```
|
|
|
|
|
|
2019-12-11 19:59:12 +08:00
|
|
|
|
## 举例
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2021-10-31 18:38:34 +08:00
|
|
|
|
**举例 1**:交换两个变量的值
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2019-12-11 19:59:12 +08:00
|
|
|
|
代码实现:
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
|
|
|
|
```javascript
|
2019-12-11 19:59:12 +08:00
|
|
|
|
var a1 = 100;
|
|
|
|
|
var a2 = 200;
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2019-12-11 19:59:12 +08:00
|
|
|
|
var temp;
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
2019-12-11 19:59:12 +08:00
|
|
|
|
temp = a1;
|
|
|
|
|
a1 = a2;
|
|
|
|
|
a2 = temp;
|
2018-10-02 22:10:26 +08:00
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
## 我的公众号
|
|
|
|
|
|
2021-05-24 12:43:12 +08:00
|
|
|
|
想学习**更多技能**?不妨关注我的微信公众号:**千古壹号**(id:`qianguyihao`)。
|
2018-10-02 22:10:26 +08:00
|
|
|
|
|
|
|
|
|
扫一扫,你将发现另一个全新的世界,而这将是一场美丽的意外:
|
|
|
|
|
|
2021-05-24 12:48:27 +08:00
|
|
|
|
![](https://img.smyhvae.com/20200102.png)
|