一. 认识 js 变量

程序中变量的数据

在我们平时开发中，使用最多的并不是固定的数据，而是会变换的数据：
- 比如购物车商品的数量、价格的计算等
- 比如微信聊天中消息条数、时间、语音的长度、头像、名称等

变化数据的记录 – 变量

如果我们希望记录某一个之后会变量的数据，在 js 中我们可以定义一个变量：
- 一个变量，就是一个用于存放数值的容器
- 变量可以指在电脑存储器里存在值的被命名的存储空间
- 在程序设计中，变量（英语：Variable，scalar）是指一个包含部分已知或未知数值或信息（即一个值）的存储地址
- 这个数值可能是一个用于计算的数字，或者是一个句子中的字符串，或者其他任意的数据
- 变量的独特之处在于它存放的数值是可以改变的
我们可以把变量想象成一个盒子，盒子里面装着我们的数据，我们需要给盒子进行一个特性的名称。
- 例如，变量 message 可以被想象成一个标有 “message” 的盒子，盒子里面的值为 “Hello!”
- 并且，这个盒子的值，我们想改变多少次，就可以改变多少次

命名格式

在 js 中如何命名一个变量呢？包含两部分：
- 变量的声明：
  - 在 js 中声明一个变量使用 var 关键字（variable 单词的缩写）（后续学习 ES6 还有 let、const 声明方式）
- 变量的赋值：
  - 使用 = 给变量进行赋值
    js
```
var name = 'later-zc'
```
这个过程也可以分开操作：
js
```
var name;
name = 'later-zc'
```

同时声明多个变量：

var name, age, height;
name = 'later-zc'
age = 18
height = 1.78

var 
  name = 'later-zc', 
  age = 18,
  height = 1.78

命名规范

变量命名规则：必须遵守
- 首字符必须是一个字母、下划线 _ 或一个美元符号 $
- 其他字符可以是字母、下划线、美元符号或数字
- 不能使用关键字和保留字命名：
  - https://developer.mozilla.org/zh-CN/docs/web/javascript/reference/lexical_grammar
- 变量严格区分大小写
变量命名规范：建议遵守
- 多个单词使用驼峰标识
- 赋值 = 两边都加上一个空格
- 一条语句结束后加上分号 ; 也有很多人的习惯是不加
- 变量应该做到见名知意

变量的练习

定义变量，保存两个数字，并且对两个变量的数字进行交换

方式一：使用临时变量
方式二：不使用临时变量

var 
  num1 = 10,
  num2 = 20;
num1 = num1 + num2 // num1: 30  num2: 20
num2 = num1 - num2 // num1: 30  num2: 10
num1 = num1 - num2 // num1: 20  num2: 10

变量的使用注意

注意一：如果一个变量未声明（declaration）就直接使用，那么会报变量未定义的错误：xx is not defined
注意二：如果一个变量有声明，但是没有赋值，那么默认值是 undefined
js
```
var info
console.log(info) // undefined
```
注意三：如果没有使用 var 声明变量也可以，但是不推荐（实际会被添加到 window 对象上）

二. js 的数据类型

js 中的值都具有特定的类型
- 例如，字符串或数字
- 我们可以将值赋值给一个变量，那么这个变量就具备了特定的类型
- 一个变量可以在前一刻是个字符串，下一刻就存储一个数字
- 允许这种操作的编程语言，例如 js，被称为“动态类型”（dynamically typed）的编程语言
在 js 中有 8 种基本的数据类型（7 种原始类型 和 1 种复杂类型）
- Number
- String
- Boolean
- Null
- undefined
- Object
- BigInt
- Symbol

1. Number 类型

number 类型代表整数和浮点数

var intNum = 18, floatNum = 18.8

数字 number 可以有很多操作，比如，乘法 *、除法 /、加法 +、减法 - 等等
js
```
var num1 = 10 * 2, num2 = 10 / 4
```
除了常规的数字，还包括所谓的“特殊数值（“special numeric values”）”也属于 Number 类型
- Infinity：代表数学概念中的无穷大 ∞，也可以表示 -Infinity
- 比如 1/0 得到的就是无穷大
NaN: NaN 代表一个计算错误，它是一个错误的操作所得到的结果
- 比如字符串和一个数字相乘
在之前我们学习过进制的概念，数字类型也有其他的进制表示方法：
- 十进制、十六进制、二进制、八进制
  js
```
10 // 十进制 => 10
0x10 // 十六进制 => 16
0o10 // 八进制 => 8
0b10 // 二进制 => 2
```
数字表示的范围：
- 最小正数值：Number.MAX_VALUE，这个值为： 5e-324，小于这个的数字会被转化为 0
- 最大正数值：Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
isNaN()
- 用于判断是否不是一个数字。不是数字返回 true，是数字返回 false

2. String 类型

在开发中我们经常会有一些文本需要表示，这个时候我们会使用字符串 String：
- 比如人的姓名：later，地址：广州市，简介：认真是一种可怕的力量
js 中的字符串必须被括在引号里，有三种包含字符串的方式
- 双引号、单引号、反引号（es6 新增语法）
  js
```
var str1 = "双引号"
var str2 = '单引号'
var str3 = `反引号`
```
前后的引号类型必须一致：
- 如果在字符串里面本身包括单引号，可以使用双引号
- 如果在字符串里面本身包括双引号，可以使用单引号
  js
```
var msg = '我是"later_先森"'
```
字符串中的转义字符
- 除了普通的可打印字符以外，一些有特殊功能的字符可以通过转义字符的形式放入字符串中：
  转义字符表示符号
  \' 单引号
  \'' 双引号
  \\ 反斜杠
  \n 换行符
  \r 回车符
  \t 制表符
  \b 退格符
- 转义字符串开发中只有特殊场景才会用到，暂时掌握单引号、双引号、换行符、制表符四个的用法即可
注意：
- 要表示（反斜杠）\ 符号时，需要在前面再加一个 \，因为 \ 会被 js 引擎当作转义符使用
字符串的属性和方法
- 字符串还有很多细节和操作方法，在后续学习了面向对象后，我们再详细学习
- 这里我们先掌握几个基本的字符串使用操作：
- 操作一：字符串拼接，通过 + 运算符
  js
```
var str1 = 'hello', str2 = 'world'
var str3 = str1 + str2
```
- 操作二：获取字符串长度
  js
```
var str = 'hello world'
str.length // 11
```

转义字符	表示符号
`\'`	单引号
`\''`	双引号
`\\`	反斜杠
`\n`	换行符
`\r`	回车符
`\t`	制表符
`\b`	退格符

3. Boolean 类型

Boolean（布尔）类型用于表示真假：
- 比如开发中，我们会判断一个账号是否登录、是否是管理员、是否具备某个权限、是否拥有某个英雄、皮肤等
布尔（英语：Boolean）是计算机科学中的逻辑数据类型，以发明布尔代数的数学家乔治·布尔为名
Boolean 类型仅包含两个值：true 和 false
js
```
var flag = true, oflag = false
```

4. Undefined 类型

Undefined 类型只有一个值，就是特殊值 undefined
- 如果我们声明一个变量，但是没有对其进行初始化时，它默认就是 undefined
  js
```
var msg;
console.log(msg) // undefined
```
下面的代码是一样的
js
```
var msg;
var msg = undefined;
```

注意：
最好在变量定义的时候进行初始化，而不只是声明一个变量
不要显示的将一个变量赋值为 undefined，如果变量刚开始什么都没有，我们可以初始化为 0、空字符串、null 等值

5. Object 类型

Object 类型是一个特殊的类型，我们通常把它称为引用类型或者复杂类型
- 其他的数据类型我们通常称之为 “原始类型”，因为它们的值只包含一个单独的内容（字符串、数字或者其他）
- Object 往往可以表示一组数据，是其他数据的一个集合
- 在 js 中我们可以使用 花括号 {} 的方式来表示一个对象
  js
```
var obj = {
  name: 'later',
  age: '23'
}
```
- Object 是对象的意思，后续我们会专门讲解面向对象的概念等

6. Null 类型

Null 类型同样只有一个值，即特殊值 null
- null 类型通常用来表示一个对象为空，所以通常我们在给一个对象进行初始化时，会赋值为 null
  js
```
typeof null; // object，早期设计上所遗留下来的问题

var obj = null;
obj = {
  name: 'later',
  age: 18
}
```
null 和 undefined 的关系：
- undefined 通常只有在一个变量声明但是未初始化时，它的默认值是 undefined 才会用到
- 并且我们不推荐直接给一个变量赋值为 undefined，所以很少主动来使用
- null 值常用，当一个变量准备保存一个对象，但是这个对象不确定时，我们可以先赋值为 null

7. 数据类型总结

js 中有8种数据类型，7种基本/原始数据类型，1种引用/复杂类型数据
- number 用于任何类型的数字：整数或浮点数
- string 用于字符串：一个字符串可以包含0个或多个字符，所以没有单独的单字符类型
- boolean 用于 true 和 false
- undefined 用于未定义的值 —— 只有一个 undefined 值的独立类型
- object 用于更复杂的数据结构，是其他数据的集合
- null 用于未知的值 —— 只有一个 null 值的独立类型
后续学习的类型：
- symbol 用于唯一的标识符
- bigint 用于任意长度的整数

三. typeof 操作符

因为 ECMAScript 的类型系统是松散的，所以需要一种手段来确定任意变量的数据类型
- typeof 操作符就是为此而生的
对一个值使用 typeof 操作符会返回下列字符串之一：
- "undefined" 表示值未定义
- "boolean" 表示值为布尔值
- "string" 表示值为字符串
- "number" 表示值为数值
- "object" 表示值为对象（不代表函数）或 null
  - null 一般是将一个对象赋值为 null，是 js 发展历史遗留下来的问题
  - null 存在的意义就是为对象进行初始化的
- "function" 表示值为函数
- “symbol” 表示值为符号
typeof() 的用法：
- 你可能还会遇到另一种语法：typeof(x)，它与 typeof x 相同
- typeof 是一个操作符，并非是一个函数，() 只是将后续的内容当做一个整体而已

四. 数据类型转换

在开发中，我们可能会在不同的数据类型之间进行某些操作
- 比如把一个 String 类型的数字和另外一个 Number 类型的数字进行运算
- 比如把一个 String 类型的文本和另外一个 Number 类型的数字进行相加
- 比如把一个 String 类型或 Number 类型的内容，当做一个 Boolean 类型来进行判断
也就是在开发中，我们会经常需要对数据类型进行转换：
- 大多数情况下，运算符和函数会自动将赋予它们的值转换为正确的类型，这是一种隐式转换
- 我们也可以，通过显示的方式来对数据类型进行转换
接下来我们来看一下数据类型之间的转换：
- String、Number、Boolean 类型

1. 字符串 String 的转换

其他类型经常需要转换成字符串类型，比如和字符串拼接在一起或者使用字符串中的方法
转换方式一：隐式转换
- 一个字符串和另一个字符串进行 + 操作
  - 如果 + 运算符左右两边有一个是字符串，那么另一边会自动转换成字符串类型进行拼接
- 某些函数的执行也会自动将参数转为字符串类型，比如 console.log 函数
转换方式二：显式转换
- 调用 String() 函数
- 调用 toString() 方法
- 方法和函数的区别，我们后续在讲解面向对象时会讲到

2. 数字类型 Number 的转换

其他类型也可能会转成数字类型
转换方式一：隐式转换
- 在算数运算中，通常会将其他类型转换成数字类型来进行运算
  - 比如 "6" / "2"
  - 但是如果是 + 运算，并且其中一边有字符串，那么还是按照字符串来连接的
转换方式二：显式转换
- 我们也可以使用 Number() 函数来进行显式的转换

其他类型转换数字的规则：

值	转换后的值
`undefined`	`NaN`
`null`	`0`
`true` 和 `false`	`1` and `0`
`string`	去掉首尾空格后的纯数字字符中含有的数字。如果剩余字符串为空，则转换结果为`0`。否则，将会从剩余字符串中"读取"数字。当类型转换出现 `error` 时返回 `NaN`

3. 布尔类型 Boolean 的转换

布尔（boolean）类型转换是最简单的
- 它发生在逻辑运算中，但是也可以通过调用 Boolean(value) 显式地进行转换
- 也可以使用 !! 进行转化为 boolean，且同时不会改变其原来的布尔值
转换规则如下：
- 直观上为“空”的值（如 0、空字符串、null、undefined 和 NaN）将变为 false
- 其他值变成 true
- 空对象 {} 、空数组 [] 转换都是 Boolean 为 true
  值转化后
  0、null、undefined、NaN、"" false
  其他值 true

值	转化后
`0`、`null`、`undefined`、`NaN`、`""`	`false`
其他值	`true`

注意：
包含 0 的字符串，"0" 是 true
一些编程语言（比如 php）视 "0" 为 false，但在 js 中，非空的字符串总是 true

一. 认识 js 变量 ​

程序中变量的数据 ​

变化数据的记录 – 变量 ​

命名格式 ​

命名规范 ​

变量的练习 ​

变量的使用注意 ​

二. js 的数据类型 ​

1. Number 类型 ​

2. String 类型 ​

3. Boolean 类型 ​

4. Undefined 类型 ​

5. Object 类型 ​

6. Null 类型 ​

7. 数据类型总结 ​

三. typeof 操作符 ​

四. 数据类型转换 ​

1. 字符串 String 的转换 ​

2. 数字类型 Number 的转换 ​

3. 布尔类型 Boolean 的转换 ​

一. 认识 js 变量

程序中变量的数据

变化数据的记录 – 变量

命名格式

命名规范

变量的练习

变量的使用注意

二. js 的数据类型

1. Number 类型

2. String 类型

3. Boolean 类型

4. Undefined 类型

5. Object 类型

6. Null 类型

7. 数据类型总结

三. typeof 操作符

四. 数据类型转换

1. 字符串 String 的转换

2. 数字类型 Number 的转换

3. 布尔类型 Boolean 的转换