变量和数据类型

一、认识 JavaScript 变量

开发中使用最多的不是固定的数据，而是会变换的数据；例如购物车的商品数量、价格。

希望记录一个之后会变的数据，在 JavaScript 中可以定义一个变量。

一个变量，就是一个用于存放数值的容器。

这个数值可能是一个用于计算的数字，或者是字符串或者是任意数据。

变量的独特之处在于它存放的数值是可以改变的。

例：变量 message 是一个标有 message 的盒子，值为 hello，并且这个盒子的值，可以改变多次。

var message = 'hello'
message = 123
message = true

二、变量的定义、规则、规范

定义

在 JavaScript 声明变量使用 var 关键字（variable 单词缩写），使用 = 给变量进行赋值。

写法一： 声明并赋值 （推荐）

var currentTime = '17:59'

写法二： 先声明后赋值

var currentTime
currentTime = '18:00'

写法三： 同时声明多个变量后赋值

var myname, myage, myheight
myname = 'mocha'
myage = 18
myheight = 1.88

写法四： 同时声明多个变量并赋值

var myname = 'mocha',
	myage = 18,
	myheight = 1.88

规则

1. 第一个字符必须是字母、下划线、美元符号
2. 其他字符可以是字母、下划线、美元符号或数字
3. 不能用关键字和保留字
4. 严格区分大小写

规范

1. 多个单词，使用小驼峰
2. 赋值（=）两边各加一个空格
3. 语句结束可不加分号
4. 变量名要见名如意

注意

1. 如果一个变量未声明就直接使用，那么就会报错

   console.log(myname)
   // Uncaught ReferenceError: myname is not defined

2. 如果一个变量有声明，但是没有赋值，那么默认值就是 undefined

   var myname
   console.log(myname)
   // undefined

3. 如果没有使用 var 声明变量也是可以的，但是不推荐（实际上会被添加到 window 对象上

   myname = 'mocha'
   console.log(myname)
   // mocha

练习

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

方法一： 借助第三个变量

var num1 = 10
var num2 = 20

console.log('交换前', num1, num2)
var temp = num1
num1 = num2
num2 = temp
console.log('交换后', num1, num2)

方法二： 不借助第三个变量

var num1 = 10
var num2 = 20

console.log('交换前', num1, num2)
num1 = num1 + num2
num2 = num1 - num2
num1 = num1 - num2
console.log('交换后', num1, num2)

三、数据类型和 typeof

JavaScript 中的值都是有特定的类型，例如字符串或数字。

可以将值赋值给一个变量，那么这个变量就具备了特定的类型。

一个变量可以在前一刻是字符串，下一刻就存储数字，允许这种操作的编程语言， 被称为动态类型的编程语言。

数据类型

（7 种原始类型和 1 种复杂类型）

1. Number
2. String
3. Boolean
4. Undefined
5. Null
6. Object
7. BigInt
8. Symbol

typeof 操作符

ECMAScript 的类型系统是松散的，需要一种手段来确定任意变量的数据类型。

对一个值使用typeof 操作符会返回以下字符串之一：

1. undefined： 表示值未定义
2. boolean： 表示值为布尔值
3. string： 表示值为字符串
4. number： 表示值为数值
5. object： 表示值为对象或 null
6. function： 表示为值函数
7. symbol： 表示值为符号

四、常见的数据类型

Number 类型

（用于任何类型的数字，整数或者浮点数）

基本使用

var myage = 18
console.log(myage) // 18

特殊数值-Infinity： 无穷

var num1 = Infinity
var num2 = 1 / 0
console.log(num1, num2) // Infinity Infinity

特殊数值-NaN： 非数值

var result = 3 * 'abc'
console.log(result) // NaN

进制的表示

var num1 = 100 // 十进制 -> 100
var num2 = 0x100 // 十六进制 -> 256
var num3 = 0o100 // 八进制 -> 64
var num4 = 0b100 // 二进制 -> 4

isNaN()：用于判断某个数值是否为 NaN

var result = 3 * 'abc'
console.log(isNaN(result)) // true

String 类型

（用于字符串）

基本使用

var myname = 'mocha'
console.log(myname) // mocha

使用单引号

var message = 'hello message'
console.log(message) // hello message

使用反引号

var name = 'mocha'
var message = `hello ${name}`
console.log(message) // hello mocha

字符串本身包含引号

var message = "my name is 'mocha'"
console.log(message) // my name is 'mocha'

转义字符

var message = `my name \'\' is \"\" \n \t 'mocha'`
console.log(message) // my name '' is ""
//	'mocha'

字符串操作一： 字符串拼接

var nickname = 'mocha'
var info = 'my name is '
var infoStr1 = `${info}${nickname}`
var infoStr2 = info + nickname
console.log(infoStr1) // my name is mocha
console.log(infoStr2) // my name is mocha

字符串操作二： 获取字符串长度

var message = 'hello message'
console.log(message.length) // 13

Boolean 类型

(用于 true 和 false)

基本使用

var isLogin = false
var isAdmin = true

console.log(isLogin) // false
console.log(isAdmin) // true

Undefined 类型

(用于初始化的值，只有一个 undefined 值的独立类型)

基本使用

var myname
console.log(myname) // undefined

注意：

• 最好在变量定义时进行初始化，而不是只声明一个变量
• 不要显式的将变量赋值为 undefined，变量初始化没有值时可以为 0、空字符串、null

Object 类型

(用于复杂的数据结构)

基本使用

var info = {
	name: 'mocha',
	age: 18,
	height: 1.88,
	'my-hobby': 'eating',
}

// 获取对象里的某一个属性
console.log(info.name) // mocha
console.log(info.age) // 18
console.log(info.height) // 1.88
console.log(info['my-hobby']) // eating

注意：

// 其他类型的初始化
var num = 0
var str = ''
var isBoolean = false

// 对象类型进行初始化时用null;而不是用{}，因为在判断时{}会被转换成true
var book = null

Null 类型

(用于未知的值，只有一个 null 值的独立类型)

基本使用

var book = null

五、数据类型转换

转换为 String 类型

隐式转换： 字符串和字符串 + 操作时，如果一边是字符串，另一边也会转换为字符串类型再进行拼接。

var num1 = 123
console.log(typeof num1) // number
console.log(typeof (num1 + '')) // string

显示转换： String()

var num = 456
console.log(typeof num) // number
console.log(typeof String(num)) // string

转换为 Number 类型

隐式转换

var num1 = '8'
var num2 = '4'
console.log(num1 + num2, typeof (num1 + num2)) // 84, string
console.log(num1 * num2, typeof (num1 * num2)) // 32, number
console.log(num1 / num2, typeof (num1 / num2)) // 2, number

显示转换： Number()

var num = '32'
console.log(Number(num), typeof Number(num)) // 32, number

其他类型转换为数字类型

console.log(Number(undefined)) // NaN
console.log(Number(true)) // 1
console.log(Number(false)) // 0
console.log(Number(null)) // 0
console.log(Number('abc123')) // NaN
console.log(Number('123abc')) // NaN
console.log(Number('  123  ')) // 123
console.log(Number('')) // 0

/*
  string类型转为number类型，去掉首尾空格后的纯数字字符串中含有的数字，
  剩余字符串为空则为0 ，反之从剩余字符串中读取数字，其余情况返回NaN
*/

转换为 Boolean 类型

直观上为空的值则为 false：0、""、undefined、null、NaN

隐式转换

var num = 0 // false
var flag = true // true

显示转换： Boolean()

console.log(Boolean(123)) // true
console.log(Boolean(undefined)) // false

注意： 包含 0 的字符串”0“为 true

console.log(Boolean('0')) // true