JavaScript的变量和数据类型

一、变量

1.变化数据的记录 – 变量

如果我们希望记录某一个之后会变量的数据，在JavaScript中我们可以定义一个 变量：

• 一个变量，就是一个用于存放数值的容器；
• 这个数值可能是一个用于计算的数字，或者是一个句子中的字符串，或者其他任意的数据；
• 变量的独特之处在于它存放的数值是可以改变的；

我们可以把变量想象成一个盒子，盒子里面装着我们的数据，我们需要给盒子进行一个特性的名称。

• 例如，变量 message 可以被想象成一个标有 “message” 的盒子，盒子里面的值为 “Hello!”；
• 并且，这个盒子的值，我们想改变多少次，就可以改变多少次；

var message = 'Hello!';

2.变量的命名格式

在JavaScript中如何命名一个变量呢？包含两部分：

• 变量的声明：在JavaScript中声明一个变量使用var关键字（variable单词的缩写）（后续学习ES6还有let、const声明方式）
• 变量的赋值：使用 = 给变量进行赋值；

这个过程也可以分开操作：

var name;
name = 'zhgangsan';

同时声明多个变量：

var a,b,c;
a = 1;
b = 2;
c = 3;
var name = 'zhangsan', age = 18, height = 1.9;

3.变量的命名规范

变量命名规则：必须遵守

1. 第一个字符必须是一个Unicode字母(包括英文字母和其他语言的字母)、下划线（ _ ）或一个美元符号（ $ ）
2. 其他字符可以是Unicode字母、下划线、美元符号或数字
3. 不能使用关键字和保留字命名：
   1. 什么是关键字，什么是保留字？
   2. https://developer.mozilla.org/zh-CN/docs/web/javascript/reference/lexical_grammar
4. 变量严格区分大小写

变量命名规范：建议遵守

• 多个单词使用驼峰标识；
• 赋值 = 两边都加上一个空格；
• 一条语句结束后加上分号; 也有很多人的习惯是不加；
• 变量应该做到见名知意；

var userName = '张三';

合法变量名示例

arg0
_tmp
$elem
π

非法变量名示例

1a  // 第一个字符不能是数字
23  // 同上
***  // 标识符不能包含星号
a+b  // 标识符不能包含加号
-d  // 标识符不能包含减号或连词线

4.变量的使用注意

注意一：如果一个变量未声明（declaration）就直接使用，那么会报错；

<script>
console.log(message);// 会报错
</script>

注意二：如果一个变量有声明，但是没有赋值，那么默认值是undefined

var info;
console.log(info);//undefined

注意三：如果没有使用var声明变量也可以，但是不推荐（事实上会被添加到window对象上）

admin = 'zhangsan';
console.log(admin);
console.log(window);

注意四：JavaScript 是一种动态类型语言，也就是说，变量的类型没有限制，变量可以随时更改类型。

var a = 123;
a = '李四';

注意五：如果使用var重新声明一个已经存在的变量，是无效的。但是，如果第二次声明的时候还进行了赋值，则会覆盖掉前面的值。

var x = 1;
var x;
console.log(x);// 1
var x = 2;
console.log(x);// 2

5.变量提升

JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升（hoisting）。

console.log(a);
var a = 1;

上述代码并不会报错，由于变量提升的关系，var a会被提升到头部执行，所以真正运行的是下面的代码

var a;
console.log(a);//undefined
a = 1;

二、数据类型和typeof

1.JavaScript的数据类型

JavaScript 中的值都具有特定的类型。

• 例如，字符串或数字。
• 我们可以将值赋值给一个变量，那么这个变量就具备了特定的类型；
• 一个变量可以在前一刻是个字符串，下一刻就存储一个数字；
• 允许这种操作的编程语言，例如 JavaScript，被称为“动态类型”（dynamically typed）的编程语言；

在 JavaScript 中有 8 种基本的数据类型（7 种原始类型和 1 种复杂类型）

• 数值（Number）
• 字符串（String）
• 布尔值（Boolean）
• Undefined
• Null
• 对象（Object）
• BigInt（ES6新增，后续了解）
• Symbol（ES6新增，后续了解）

对象是最复杂的数据类型，又可以分成三个子类型。

• 狭义的对象（object）
• 数组（array）
• 函数（function）

2.typeof操作符

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

JavaScript 有三种方法，可以确定一个值到底是什么类型。

• typeof运算符
• instanceof运算符
• Object.prototype.toString方法

这里介绍typeof运算符，instanceof运算符和Object.prototype.toString方法，将在后文介绍。

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

• "undefined"表示值未定义;
• "boolean"表示值为布尔值;
• "string"表示值为字符串;
• "number"表示值为数值;
• "object"表示值为对象(而不是函数)或 null;
• "function"表示值为函数;
• “symbol”表示值为符号；

2.1 typeof()的用法：

• 你可能还会遇到另一种语法：typeof(x)，它与 typeof x 相同；
• typeof是一个操作符，并非是一个函数，()只是将后续的内容当做一个整体而已；

2.2 typeof 应用

typeof可以用来检查一个没有声明的变量，而不报错。

typeof undefined
// "undefined"

应用示例

// 判断v是否定义
if (typeof v === 'undefined') {
    // ...
}

2.3 拓展

typeof [];// "object"

上面代码中，空数组（[]）的类型也是object，这表示在 JavaScript 内部，数组本质上只是一种特殊的对象。

如果要区分数组和对象，可以使用instanceof 来区分。

var o = {};
var a = [];

o instanceof Array // false
a instanceof Array // true

null返回object。

typeof null // "object"

null的类型是object，这是由于历史原因造成的。1995年的 JavaScript 语言第一版，只设计了五种数据类型（对象、整数、浮点数、字符串和布尔值），没考虑null，只把它当作object的一种特殊值。后来null独立出来，作为一种单独的数据类型，为了兼容以前的代码，typeof null返回object就没法改变了。

三、Number类型

1.概述

number 类型代表整数和浮点数。

数字number可以有很多操作，比如，乘法 *、除法 /、加法 +、减法 - 等等。

数字表示的范围：

• 最小正数值：Number.MIN_VALUE，小于这个的数字会被转化为0
• 最大正数值：Number.MAX_VALUE，大于这个值会变成Infinity

number的数值范围为(2^-1023, 2^1024)

2.整数和浮点数

JavaScript 内部，所有数字都是以64位浮点数形式储存，即使整数也是如此。

1 === 1.0; // true
0.1 + 0.2 === 0.3;
// false

由于浮点数不是精确的值，所以涉及小数的比较和运算要特别小心。

数值精度

JavaScript 浮点数的64个二进制位，从最左边开始，是这样组成的。

• 第1位：符号位，0表示正数，1表示负数
• 第2位到第12位（共11位）：指数部分
• 第13位到第64位（共52位）：小数部分（即有效数字）

精度最多只能到53个二进制位，这意味着，绝对值小于2的53次方的整数，即-253到253，都可以精确表示， 转换为十进制则是JavaScript 对15位的十进制数都可以精确处理

Math.pow(2, 53)
// 9007199254740992

// 多出的三个有效数字，将无法保存
9007199254740992111
// 9007199254740992000

3.数值表示方法

在之前我们学习过进制的概念，数字类型也有其他的进制表示方法：

• 十进制（掌握）、十六进制、二进制、八进制（了解）

// 二进制
0b10
// 八进制
0o10
// 十六进制
0x10

以下两种情况，JavaScript 会自动将数值转为科学计数法表示

// 1.小数点前的数字多于21位
1234567890123456789012
// 1.2345678901234568e+21


// 2. 小数点后的零多于5个
// 小数点后紧跟5个以上的零，
// 就自动转为科学计数法
0.0000003 // 3e-7

八进制比较特殊，可以直接使用前导0表示，例如：077 表示为八进制，但处理时很容易造成混乱。ES5 的严格模式和 ES6，已经废除了这种表示法，但是浏览器为了兼容以前的代码，目前还继续支持这种表示法。

4.特殊数值

除了常规的数字，还包括所谓的“特殊数值（“special numeric values”）”也属于Number类型（了解）

• Infinity：代表数学概念中的 无穷大 ∞，也可以表示-Infinity；

  • 比如 1/0 得到的就是无穷大；

• NaN：（Not a Number）NaN 代表一个计算错误，它是一个错误的操作所得到的结果；

  • 比如 字符串和一个数字相乘；

  • 0 除以 0 也会得到NaN；

  • 一些数学函数的运算结果会出现NaN

    • Math.sqrt(-1) // NaN
      

  注意: NaN不是独立的数据类型，而是一个特殊数值，它的数据类型依然属于Number

  //NaN与任何数（包括它自己）的运算，得到的都是NaN。
  NaN + 32 // NaN
  NaN - 32 // NaN
  NaN * 32 // NaN
  NaN / 32 // NaN
  //NaN不等于任何值，包括它本身
  NaN === NaN; // false
  

• +0和-0：正零和负零都会被当作正常的0，但+0或-0当作分母，返回的值是不相等的

  • (1 / +0) === (1 / -0) // false
    

  • 上述代码因为除以正零得到+Infinity，除以负零得到-Infinity，这两者是不相等的

5.与数值相关的全局方法

5.1 parseInt()

parseInt方法用于将字符串转为整数

parseInt('123')// 123

如果字符串头部有空格，空格会被自动去除。

parseInt('   34')// 34

如果字符串的第一个字符不能转化为数字（后面跟着数字的正负号除外），返回NaN。

parseInt('abc') // NaN
parseInt('.3') // NaN
parseInt('') // NaN
parseInt('+') // NaN
parseInt('+1') // 1

所以，parseInt的返回值只有两种可能，要么是一个十进制整数，要么是NaN。

如果字符串以0x或0X开头，parseInt会将其按照十六进制数解析。

parseInt('0x11'); // 17

parseInt方法还可以接受第二个参数（2到36之间），表示被解析的值的进制，返回该值对应的十进制数。

parseInt('1000', 2) // 8
parseInt('1000', 6) // 216
parseInt('1000', 8) // 512

5.2 parseFloat()

parseFloat方法用于将一个字符串转为浮点数。

parseFloat('3.14') // 3.14

如果字符串包含不能转为浮点数的字符，则不再进行往后转换，返回已经转好的部分。

parseFloat('3.14more non-digit characters') // 3.14

5.3 isNaN()

isNaN方法可以用来判断一个值是否为NaN， 如果传入其他值，会被先转成数值。

isNaN(NaN) // true
isNaN(123) // false
isNaN('Hello') // true
// 相当于
isNaN(Number('Hello')) // true

但是，对于空数组和只有一个数值成员的数组，isNaN返回false。

isNaN([]) // false
isNaN([123]) // false
isNaN(['123']) // false

因为这些数组能被Number函数转成数值。

判断NaN更可靠的方法是，利用NaN为唯一不等于自身的值的这个特点，进行判断。

function myIsNaN(value) {
  return value !== value;
}

5.4 isFinite()

isFinite方法返回一个布尔值，表示某个值是否为正常的数值。

isFinite(Infinity) // false
isFinite(-Infinity) // false
isFinite(NaN) // false
isFinite(undefined) // false
isFinite(null) // true
isFinite(-1) // true

除了Infinity、-Infinity、NaN和undefined这几个值会返回false，isFinite对于其他的数值都会返回true。

四、String类型

1.概述

在开发中我们经常会有一些文本需要表示，这个时候我们会使用字符串String：

• 比如人的姓名：zhangsan。简介：认真是一种可怕的力量；

var name = "zhangsan";
var desc = "认真是一种可怕的力量";

JavaScript 中的字符串必须被括在引号里，有三种包含字符串的方式。

• 双引号：“Hello”
• 单引号：'Hello’
• 反引号：`Hello`（ES6之后学习）

前后的引号类型必须一致：

• 如果在字符串里面本身包括单引号，可以使用双引号；
• 如果在字符串里面本身包括双引号，可以使用单引号；

var message = "我是'zhangsan'"

如果长字符串必须分成多行，可以在每一行的尾部使用反斜杠。

var longString = 'Long \
long \
long \
string';

longString
// "Long long long string"

如果想输出多行字符串，有一种利用多行注释的变通方法。

(function () { /*
line 1
line 2
line 3
*/}).toString().split('\n').slice(1, -1).join('\n')
// "line 1
// line 2
// line 3"

2.转义

反斜杠（\）在字符串内有特殊含义，用来表示一些特殊字符，所以又称为转义符。

• \0 ：null（\u0000）
• \b ：后退键（\u0008）
• \f ：换页符（\u000C）
• \n ：换行符（\u000A）
• \r ：回车键（\u000D）
• \t ：制表符（\u0009）
• \v ：垂直制表符（\u000B）
• \' ：单引号（\u0027）
• \" ：双引号（\u0022）
• \\ ：反斜杠（\u005C）

反斜杠还有三种特殊用法

1）\HHH

反斜杠后面紧跟三个八进制数（000到377），代表一个字符。HHH对应该字符的 Unicode 码点，比如\251表示版权符号。显然，这种方法只能输出256种字符。

2）\xHH

\x后跟2个16进制数，代表一个字符，比如\xA9表示版权符号。

3）\uXXXX

\u后面紧跟四个十六进制数（0000到FFFF），代表一个字符。

'\251' // "©"
'\xA9' // "©"
'\u00A9' // "©"

'\172' === 'z' // true
'\x7A' === 'z' // true
'\u007A' === 'z' // true

3.字符串与数组

字符串可以被视为字符数组，因此可以使用数组的方括号运算符，用来返回某个位置的字符（位置编号从0开始）

var s = 'hello';
s[0] // "h"
s[1] // "e"
s[4] // "o"

// 直接对字符串使用方括号运算符
'hello'[1] // "e"

但是，字符串与数组的相似性仅此而已。实际上，无法改变字符串之中的单个字符。

4.length属性

length属性返回字符串的长度，该属性也是无法改变的。

var s = 'hello';
s.length // 5

5.字符集

JavaScript 使用 Unicode 字符集。JavaScript 引擎内部，所有字符都用 Unicode 表示。

JavaScript 不仅以 Unicode 储存字符，还允许直接在程序中使用 Unicode 码点表示字符，即将字符写成\uxxxx的形式，其中xxxx代表该字符的 Unicode 码点。比如，\u00A9代表版权符号。

var s = '\u00A9';
s // "©"
var f\u006F\u006F = 'abc';
foo // "abc"

解析代码的时候，JavaScript 会自动识别一个字符是字面形式表示，还是 Unicode 形式表示。输出给用户的时候，所有字符都会转成字面形式。

我们还需要知道，每个字符在 JavaScript 内部都是以16位（即2个字节）的 UTF-16 格式储存，即2个字节。但 UTF-16 有两种长度：对于码点在U+0000到U+FFFF之间的字符，长度为16位（即2个字节）；对于码点在U+10000到U+10FFFF之间的字符，长度为32位（即4个字节）。

JavaScript 对 UTF-16 的支持是不完整的，由于历史原因，只支持两字节的字符，不支持四字节的字符。

' '.length // 2

所以JavaScript 返回的字符串长度可能是不正确的。

6.Base64转码

使用场景：

• 打印不可见字符，比如ASCII码0~31的符号都是无法打印的
• 以文本格式传递二进制数据

所谓 Base64 就是一种编码方法，可以将任意值转成 0～9、A～Z、a-z、+和/这64个字符组成的可打印字符。

JavaScript 原生提供两个 Base64 相关的方法

• btoa()：任意值转为 Base64 编码
• atob()：Base64 编码转为原来的值

var string = 'Hello World!';
btoa(string) // "SGVsbG8gV29ybGQh"
atob('SGVsbG8gV29ybGQh') // "Hello World!"

注意，这两个方法不适合非 ASCII 码的字符，要将非 ASCII 码字符转为 Base64 编码，必须中间插入一个转码环节

function b64Encode(str) {
  return btoa(encodeURIComponent(str));
}

function b64Decode(str) {
  return decodeURIComponent(atob(str));
}

b64Encode('你好') // "JUU0JUJEJUEwJUU1JUE1JUJE"
b64Decode('JUU0JUJEJUEwJUU1JUE1JUJE') // "你好"

五、null、undefined、Boolean类型

1.布尔类型

Boolean（布尔）类型用于表示真假：

• 比如是否毕业. 是否有身份证. 是否购买车票. 是否成年人；
• 比如开发中，我们会判断一个账号是否登录、是否是管理员、是否具备某个权限、是否拥有某个英雄、皮肤等；

布尔（英语：Boolean）是计算机科学中的逻辑数据类型，以发明布尔代数的数学家乔治·布尔为名。

Boolean 类型仅包含两个值：true 和 false。

如果 JavaScript 预期某个位置应该是布尔值，会将该位置上现有的值自动转为布尔值。转换规则是除了下面六个值被转为false，其他值都视为true。

• undefined
• null
• false
• 0
• NaN
• ""或''（空字符串）

注意，空数组（[]）和空对象（{}）对应的布尔值，都是true。

2.Undefined类型

Undefined 类型只有一个值，就是特殊值 undefined。

• 如果我们声明一个变量，但是没有对其进行初始化时，它默认就是undefined；

下面的代码是一样的

var info;
var info = undefined;

这里有两个注意事项：

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

3.Null类型

Null 类型同样只有一个值，即特殊值 null。

• null类型通常用来表示一个对象为空，所以通常我们在给一个对象进行初始化时，会赋值为null；

var obj = null;
obj = {
    name: "zhangsan",
    age: 18,
    height: 1.88
}

null和undefined的关系：

• undefined通常只有在一个变量声明但是未初始化时，它的默认值是undefined才会用到；
• 并且我们不推荐直接给一个变量赋值为undefined，所以很少主动来使用；
• null 值非常常用，当一个变量准备保存一个对象，但是这个对象不确定时，我们可以先赋值为null；

null和undefined的区别：

Number(undefined) // NaN
5 + undefined // NaN
Number(null) // 0
5 + null // 5

null转为数字时，自动变成0; undefined是一个表示"此处无定义"的原始值，转为数值时为NaN

六、Object类型

Object 类型是一个特殊的类型，我们通常把它称为引用类型或者复杂类型；

• 其他的数据类型我们通常称之为 原始类型，因为它们的值只包含一个单独的内容（字符串、数字或者其他）；
• Object往往可以表示一组数据，是其他数据的一个集合；
• 在JavaScript中我们可以使用 花括号{} 的方式来表示一个对象；

Object是对象的意思，是 JavaScript 语言的核心概念，也是最重要的数据类型。

后面我会专门写一个章节进行讲解，这里暂时了解下就行。

七、数据类型总结

JavaScript 中有八种基本的数据类型（前七种为基本数据类型，也称为原始类型，而 object 为复杂数据类型，也称为引用类 型）。

• number 用于任何类型的数字：整数或浮点数。
• string 用于字符串：一个字符串可以包含 0 个或多个字符，所以没有单独的单字符类型。
• boolean 用于 true 和 false。
• undefined 用于未定义的值 —— 只有一个 undefined 值的独立类型。
• object 用于更复杂的数据结构。
• null 用于未知的值 —— 只有一个 null 值的独立类型。

后续学习的类型：

• symbol 用于唯一的标识符。
• bigint 用于任意长度的整数。

八、数据类型的转换

在开发中，我们可能会在不同的数据类型之间进行某些操作

• 比如把一个String类型的数字和另外一个Number类型的数字进行运算；
• 比如把一个String类型的文本和另外一个Number类型的数字进行相加；
• 比如把一个String类型或者Number类型的内容，当做一个Boolean类型来进行判断；

也就是在开发中，我们会经常需要对数据类型进行转换：

• 大多数情况下，运算符和函数会自动将赋予它们的值转换为正确的类型，这是一种隐式转换；
• 我们也可以，通过显示的方式来对数据类型进行转换；

接下来我们来看一下数据类型之间的转换：

• String、Number、Boolean类型；

1.字符串String的转换

其他类型经常需要转换成字符串类型，比如和字符串拼接在一起或者使用字符串中的方法。

转换方式一：隐式转换

• 一个字符串和另一个字符串进行+操作；
  • 如果+运算符左右两边有一个是字符串，那么另一边会自动转换成字符串类型进行拼接；
• 某些函数的执行也会自动将参数转为字符串类型；
  • 比如console.log函数；

转换方式二：显式转换

• 调用 String() 函数；
• 调用 toString() 方法（后续面向对象再学习）；

方法和函数的区别，我们后续在讲解面向对象时会讲到；

var num1 = 123
var age = 18
var isAdmin = true

// 1.转换方式一: 隐式转换(用的非常多)
var num1Str = num1 + ""
var ageStr = age + ""
var isAdminStr = isAdmin + ""
console.log(typeof num1Str, typeof ageStr, typeof isAdminStr)

// 2.转换方式一: 显示转换
var num1Str2 = String(num1)
console.log(typeof num1Str2)

2.数字类型Number的转换

其他类型也可能会转成数字类型。

转换方式一：隐式转换

• 在算数运算中，通常会将其他类型转换成数字类型来进行运算；
  • 比如 “6” / “2”；
  • 但是如果是+运算，并且其中一边有字符串，那么还是按照字符串来连接的；

转换方式二：显式转换

• 我们也可以使用Number()函数来进行显式的转换；

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

// 数值：转换后还是原来的值
Number(324) // 324

// 字符串：如果可以被解析为数值，则转换为相应的数值
Number('324') // 324

// 字符串：如果不可以被解析为数值，返回 NaN
Number('324abc') // NaN

// 空字符串转为0
Number('') // 0

// 布尔值：true 转成 1，false 转成 0
Number(true) // 1
Number(false) // 0

// undefined：转成 NaN
Number(undefined) // NaN

// null：转成0
Number(null) // 0

Number函数将字符串转为数值，要比parseInt函数严格很多。基本上，只要有一个字符无法转成数值，整个字符串就会被转为NaN。

parseInt('42 cats') // 42
Number('42 cats') // NaN

上面代码中，parseInt逐个解析字符，而Number函数整体转换字符串的类型。

3.布尔类型Boolean的转换

布尔（boolean）类型转换是最简单的。

它发生在逻辑运算中，但是也可以通过调用 Boolean(value) 显式地进行转换。

转换规则如下：

• 直观上为“空”的值（如 0、空字符串、null、undefined 和 NaN）将变为 false。
• 其他值变成 true。

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

• 一些编程语言（比如 PHP）视 “0” 为 false。但在 JavaScript 中，非空的字符串总是 true。

 // 方式一: 隐式转换
// 分支语句
var isAdmin = true
var num1 = 123 // true

// 方式二: 显示转换
console.log(Boolean(num1), Boolean(undefined))

// 转换有如下的规则: 
// 直观上为空的值, 转成Boolean类型都是false
// 直观上为空的值: 0/""/undefined/null/NaN -> false

// 注意事项
console.log(Boolean("")) // false
console.log(Boolean("0")) // true