JavaScript 数据类型与运算符（上）

一、数据类型

JavaScript 语言的每一个值，都属于某一种数据类型。JavaScript 的数据类型，共有六种。

数值（number）：整数和小数（比如1和3.14）> 字符串（string）：文本（比如Hello World）。> 布尔值（boolean）：表示真伪的两个特殊值，即true（真）和false（假）> undefined：表示“未定义”或不存在，即由于目前没有定义，所以此处暂时没有任何值> null：表示空值，即此处的值为空。> 对象（object）：各种值组成的集合。

通常，数值、字符串、布尔值这三种类型，合称为原始类型（primitive type）的值，即它们是最基本的数据类型，不能再细分了。对象则称为合成类型（complex type）的值，因为一个对象往往是多个原始类型的值的合成，可以看作是一个存放各种值的容器。至于undefined和null，一般将它们看成两个特殊值。

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

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

二、typeof运算符

JavaScript 有三种方法，可以确定一个值到底是什么类型。而我们现在需要接触到的就是typeof

数值、字符串、布尔值分别返回number、string、boolean。

typeof 123 // "number"
typeof '123' // "string"
typeof false // "boolean" 
1
2
3

函数返回function

function f() {}
typeof f
// "function" 
1
2
3

undefined返回undefined。

typeof undefined
// "undefined" 
1
2

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

v
// ReferenceError: v is not defined

typeof v
// "undefined" 
1
2
3
4
5

对象返回object。

typeof window // "object"
typeof {} // "object"
typeof [] // "object" 
1
2
3

null返回object。

typeof null // "object" 
1

null 和 undefined 的区别 null与undefined都可以表示“没有”，含义非常相似。将一个变量赋值为undefined或null，老实说，语法效果几乎没区别。

三、加法运算符

加法运算符（+）是最常见的运算符，用来求两个数值的和。

var num1 = 10;
var num2 = 20;
num1 + num2; // 30 
1
2
3

JavaScript 允许非数值的相加。

true + true // 2
1 + true // 2 
1
2

上面代码中，第一行是两个布尔值相加，第二行是数值与布尔值相加。这两种情况，布尔值都会自动转成数值，然后再相加。

比较特殊的是，如果是两个字符串相加，这时加法运算符会变成连接运算符，返回一个新的字符串，将两个原字符串连接在一起。

'a' + 'bc' // "abc" 
1

如果一个运算子是字符串，另一个运算子是非字符串，这时非字符串会转成字符串，再连接在一起。

1 + 'a' // "1a"
false + 'a' // "falsea" 
1
2

加法运算符是在运行时决定，到底是执行相加，还是执行连接。也就是说，运算子的不同，导致了不同的语法行为，这种现象称为“重载”（overload）。由于加法运算符存在重载，可能执行两种运算，使用的时候必须很小心。

'3' + 4 + 5 // "345"
3 + 4 + '5' // "75" 
1
2

除了加法运算符，其他算术运算符（比如减法、除法和乘法）都不会发生重载。它们的规则是：所有运算子一律转为数值，再进行相应的数学运算。

1 - '2' // -1
1 * '2' // 2
1 / '2' // 0.5 
1
2
3

四、算术运算符

包括加法运算符在内，JavaScript 共提供10个算术运算符，用来完成基本的算术运算。

加法运算符：x + y> 减法运算符： x - y> 乘法运算符： x * y> 除法运算符：x / y> 指数运算符：x ** y> 余数运算符：x % y> 自增运算符：++x 或者 x++> 自减运算符：–x 或者 x–> 数值运算符： +x> 负数值运算符：-x> 减法、乘法、除法运算法比较单纯，就是执行相应的数学运算。

余数运算符

12 % 5 // 2 
1

需要注意的是，运算结果的正负号由第一个运算子的正负号决定。

-1 % 2 // -1
1 % -2 // 1 
1
2

自增和自减运算符

自增和自减运算符，是一元运算符，只需要一个运算子。它们的作用是将运算子首先转为数值，然后加上1或者减去1。它们会修改原始变量。

var x = 1;
++x // 2
x // 2

--x // 1
x // 1 
1
2
3
4
5
6

自增和自减运算符有一个需要注意的地方，就是放在变量之后，会先返回变量操作前的值，再进行自增/自减操作；放在变量之前，会先进行自增/自减操作，再返回变量操作后的值。

var x = 1;
var y = 1;

x++ // 1
++y // 2 
1
2
3
4
5

上面代码中，x是先返回当前值，然后自增，所以得到1；y是先自增，然后返回新的值，所以得到2。

指数运算符（**）

指数运算符（**）完成指数运算，前一个运算子是底数，后一个运算子是指数。

2 ** 4 // 16 
1

最后

最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。

有需要的小伙伴，可以点击下方卡片领取，无偿分享