Web/04-JavaScript基础/03-常量和变量.md

394 lines
10 KiB
JavaScript
Raw Normal View History

---
2021-10-31 21:13:20 +08:00
title: 03-常量和变量
---
<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
- 数字常量数值常量
2021-10-31 21:13:20 +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 21:13:20 +08:00
数字常量非常简单直接写数字就行不需要任何其他的符号既可以是整数也可以是浮点数
例如
2018-10-02 22:10:26 +08:00
```javascript
2021-10-31 21:13:20 +08:00
// 不需要加引号
alert(996); // 996是整数
alert(3.14); // 3.14是浮点数(即带了小数)
2018-10-02 22:10:26 +08:00
```
2021-10-31 21:13:20 +08:00
### 字符串常量
字符串常量就是用单引号或双引号括起来的内容可以是单词句子等一定要加引号在JS中只要是单引号或双引号括起来的内容都是字符串常量
例如
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 21:13:20 +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
2021-10-31 21:13:20 +08:00
### 布尔常量
布尔常量就是表达****或者****在JS中用 true false 来表达
布尔字面量举例
2019-12-12 15:04:44 +08:00
```javascript
if (true) {
console.log('如果为真就走这里面的代码);
}
```
2021-10-31 21:13:20 +08:00
### 自定义常量const
2018-10-02 22:10:26 +08:00
2021-10-31 21:13:20 +08:00
自定义常量是ES6中新增的语法它的语法格式是这样的
2018-10-02 22:10:26 +08:00
2021-10-31 21:13:20 +08:00
```js
const 常量名称 = 常量取值;
```
举例
```js
const name = '千古壹号'; // 定义常量name它的取值是 千古壹号
// name = '许嵩'; // 既然 name 是常量,所以这一行是错误的写法,因为 name 无法被修改为其他的值
console.log(name); // 打印结果:千古壹号
```
后续我们讲ES6语法的时候会深入学习 const 用法
### 开发技巧用变量定义常量
我们一般不会直接使用常量否则会导致代码冗余不易维护如果多个地方要用到同一个常量那就建议事先定义一个变量用来保存这个常量然后在需要的地方去引用这个变量就行了另外当我们学习了ES6中的 const 之后还可以使用自定义常量达到目的
2018-10-02 22:10:26 +08:00
2019-12-11 18:16:28 +08:00
## 变量的概念
2018-10-02 22:10:26 +08:00
2021-10-31 21:13:20 +08:00
**变量**表示可以被修改的数据我们通过变量名获取数据甚至修改数据
变量还可以用来保存常量
**本质**变量是程序在内存中申请的一块用来存放数据的空间打个比方超市里的储物格就是变量, 在不同的时间段里, 储物格中存储的数据可以不一样
2018-10-02 22:10:26 +08:00
2021-10-31 21:13:20 +08:00
## 变量的定义和赋值
2018-10-02 22:10:26 +08:00
2021-10-31 21:13:20 +08:00
定义变量是在告诉浏览器我们需要一块内存空间相当于生成超市里的储物格
2018-10-02 22:10:26 +08:00
2021-10-31 21:13:20 +08:00
给变量赋值就是往相当于往储物格里塞东西可能今天上午塞的是面包🍞下午就换成了蛋糕🍰
2019-12-04 22:54:48 +08:00
2021-10-31 21:13:20 +08:00
### 变量的定义/声明ES5
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
2021-10-31 21:13:20 +08:00
var name; // 定义一个名为 name 的变量。name是变量名。
2019-12-11 18:16:28 +08:00
```
2021-10-31 21:13:20 +08:00
var 是英语variant变量的缩写后面要加一个空格空格后面的东西就是变量名
2021-10-31 18:38:34 +08:00
PS** JavaScript 永远都是用 var 来定义变量** ES6 之前这和 CJava 等语言不同
2020-05-30 23:24:59 +08:00
2021-10-31 21:13:20 +08:00
### 变量的定义/声明ES6
2020-05-30 23:24:59 +08:00
2021-10-31 21:13:20 +08:00
ES6 语法及之后的版本里可以使用 `const``let`关键字来定义一个变量
2020-05-30 23:24:59 +08:00
```js
const name; // 定义一个常量
2021-10-31 21:13:20 +08:00
let age; // 定义一个变量
2020-05-30 23:24:59 +08:00
```
如果你想定义一个常量就用 const如果你想定义一个变量就用 let
2019-12-11 18:16:28 +08:00
### 变量的赋值
2021-10-31 21:13:20 +08:00
变量赋值举例
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
2021-10-31 21:13:20 +08:00
综合起来变量的定义赋值取值举例如下
```js
// 定义:声明一个变量
var num;
// 赋值:往变量中存储数据
num = 996;
// 取值:从变量中获取存储的数据
console.log(num);
```
### 合并写法
变量的定义和赋值还可以合并写在一起是实战中常用的写法举例如下
2018-10-02 22:10:26 +08:00
```javascript
2019-12-11 18:16:28 +08:00
var a = 100; // ES5语法
2021-10-31 21:13:20 +08:00
console.log(a);
2019-12-04 22:54:48 +08:00
2019-12-11 18:16:28 +08:00
const b = hello; // ES6 语法
2021-10-31 21:13:20 +08:00
let c = world; // ES6 语法
c = qianguyihao; // 修改 变量 C 的值
2018-10-02 22:10:26 +08:00
```
2021-10-31 21:13:20 +08:00
定义一个变量并赋值 我们称之为**变量的初始化**如下图所示
2018-10-02 22:10:26 +08:00
![](http://img.smyhvae.com/20180116_2020.png)
2021-10-31 21:13:20 +08:00
2018-10-02 22:10:26 +08:00
2021-10-31 18:38:34 +08:00
- 定义变量var 就是一个**关键字**用来定义变量所谓关键字就是有特殊功能的单词
2021-10-31 21:13:20 +08:00
- 变量赋值等号表示**赋值**将等号右边的值赋给左边的变量
- 变量名我们可以给变量起个名字
2018-10-02 22:10:26 +08:00
2021-10-31 21:13:20 +08:00
### 变量的初始化重要
2018-10-02 22:10:26 +08:00
2021-10-31 21:13:20 +08:00
第一次给变量赋值称之为**变量的初始化**这个概念非常重要第二次给这个变量赋值也就是修改这个变量的值就不叫初始化了
2018-10-02 22:10:26 +08:00
2021-10-31 21:13:20 +08:00
一个变量如果没有进行初始化只声明不赋值那么这个变量中存储的值是`undefined`这个知识点必须知道
2019-12-11 18:16:28 +08:00
2021-10-31 21:13:20 +08:00
变量的初始化可以有两种形式如下
2018-10-02 22:10:26 +08:00
2021-10-31 21:13:20 +08:00
形式1先定义在赋值举例
```js
var name;
name = 'qianguyhihao';
2018-10-02 22:10:26 +08:00
```
2021-10-31 21:13:20 +08:00
形式2在定义的同时进行初始化也就是上一小段讲的合并写法举例
```js
var name = 'qianguyihao';
```
2018-10-02 22:10:26 +08:00
2021-10-31 21:13:20 +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
```
2021-10-31 21:13:20 +08:00
### 同时定义多个变量
2019-12-11 18:16:28 +08:00
2021-10-31 21:13:20 +08:00
1同时定义多个变量时只需要写一个 var 多个变量名之间用英文逗号隔开举例
2019-12-11 18:16:28 +08:00
```javascript
2021-10-31 21:13:20 +08:00
// 同时定义多个变量
var num1, num2;
```
2定义多个变量的同时分别进行初始化举例
```js
// 定义多个变量的同时,进行初始化
var num1 = 10, num2 = 20;
```
如果多个变量初始化的初始化值都是一样的则可以这样简写
```js
var num1, num2;
num1 = num2 = 10; // 重点在这一行
console.log(num1); // 10
console.log(num2); // 10
```
上面的写法和下面的写法是有区别的注意看打印结果
```js
var num1, num2 = 10;
console.log(num1); // undefined
console.log(num2); // 10
2018-10-02 22:10:26 +08:00
```
2021-11-01 16:18:46 +08:00
### 变量之间可以相互赋值
```js
var num1, num2;
num1 = 10;
num2 = num1; // 把 num1 的值拷贝一份,赋值给 num2
console.log(num2); // 10
```
### 变量如果重复定义
在ES5中如果用 var 定义了同名变量那么后定义的变量会覆盖先定义的变量举例
```js
var name = '许嵩';
var name = '千古壹号'; // 这里会重新定义一个新的变量 name
console.log(name); // 千古壹号
```
2021-10-31 21:13:20 +08:00
### 变量声明和赋值的特殊情况
2019-12-11 18:16:28 +08:00
2021-10-31 21:13:20 +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
2021-10-31 21:13:20 +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
2021-11-01 16:18:46 +08:00
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-Za-z)数字(0-9)下划线(\_)美元符( $ )组成
2018-10-02 22:10:26 +08:00
2021-10-31 18:38:34 +08:00
- 不能以数字开头也就是说必须以字母(A-Za-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
- 建议用驼峰命名规则比如 getElementByIdmatherAndFatheraaaOrBbbAndCcc
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
**标识符的命名规则**和变量的命令规则是一样的看上面一段就可以了
2019-12-12 16:39:36 +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 中的关键字如下
```
breakcontinuecasedefault
ifelseswitchforindowhile
trycatchfinallythrow
varvoidfunctionreturnnew
thistypeofinstanceofdeletewith
truefalsenullundefined
```
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
abstractbooleanbytecharclassconst
2018-10-02 22:10:26 +08:00
2019-12-11 19:59:12 +08:00
debuggerdoubleenumexportextendsfinalfloatgoto
2018-10-02 22:10:26 +08:00
2019-12-11 19:59:12 +08:00
implementsimportintinterfacelongnativepackage
2018-10-02 22:10:26 +08:00
2019-12-11 19:59:12 +08:00
privateprotectedpublicshortstaticsupersynchronizedthrows
2018-10-02 22:10:26 +08:00
2019-12-11 19:59:12 +08:00
transientvolatile
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)