此系列体验视频教程
点击观看:哔哩哔哩
类型转换
JavaScript 是一种动态类型语言,变量没有类型限制,可以随时赋予任意值。在很多情况下会根据实际的表达式需要进行自动类型转换,自动转换的规则还是比较复杂的,在讲解自动转换的规则之前,先讲解如何手动强制转换数据类型。
强制转换
强制转换主要指使用Number()、String()和Boolean()三个函数,手动将各种类型的值,分别转换成数字、字符串或者布尔值。
Number()
使用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
parseInt逐个解析字符,而Number函数整体转换字符串的类型。 另外,parseInt和Number函数都会自动过滤一个字符串前导和后缀的空格。
String()
String函数可以将任意类型的值转化成字符串,转换规则如下 原始类型值
// 数值:转为相应的字符串。
String(123) // "123"
// 字符串:转换后还是原来的值。
String('abc') // "abc"
// 布尔值:true转为字符串"true",false转为字符串"false"。
String(true) // "true"
// undefined:转为字符串"undefined"。
String(undefined) // "undefined"
// null:转为字符串"null"。
String(null) // "null"
Boolean()
Boolean()函数可以将任意类型的值转为布尔值。
它的转换规则相对简单:除了以下六个值的转换结果为false,其他的值全部为true。
Boolean(false) // false
Boolean(undefined) // false
Boolean(null) // false
Boolean(0) // false
Boolean(NaN) // false
Boolean('') // false
自动转换
自动转换,它是以强制转换为基础的
自动转换的规则是这样的:预期什么类型的值,就调用该类型的转换函数。比如,某个位置预期为字符串,就调用String()函数进行转换。
由于自动转换具有不确定性,而且不易除错,建议在预期为布尔值、数值、字符串的地方,全部使用Boolean()、Number()和String()函数进行显式转换。
- 自动转换为布尔值
console.log(!!'a');
console.log(!!123);
console.log(!![123]);
console.log(!!{name: 'xiaoming'});
- 自动转换为字符串 字符串的自动转换,主要发生在字符串的加法运算时。当一个值为字符串,另一个值为非字符串,则后者转为字符串。
console.log('6' + 1) // '61'
console.log('6' + true) // "6true"
console.log('6' + []) // "6"
console.log('6' + undefined) // "6undefined"
console.log('6' + null) // "6null"
- 自动转换为数值 除了加法运算符(+)有可能把运算子转为字符串,其他运算符都会把运算子自动转成数值
console.log('5' - '2') // 3
console.log('5' * '2') // 10
console.log(true - 1) // 0
console.log(false - 1) // -1
console.log('1' - 1) // 0
console.log('5' * []) // 0
console.log(false / '5') // 0
console.log('abc' - 1) // NaN
console.log(null + 1) // 1
console.log(undefined + 1) // NaN
注意:null转为数值时为0,而undefined转为数值时为NaN。
+'abc' // NaN
-'abc' // NaN
+true // 1
-false // 0
一元运算符也会把运算子转成数值。
运算符1
算术运算符
JavaScript 共提供10个算术运算符,用来完成基本的算术运算。
- 加法运算符:x + y
- 减法运算符: x - y
- 乘法运算符: x * y
- 除法运算符:x / y
- 指数运算符:x ** y
- 余数运算符:x % y
- 自增运算符:++x 或者 x++
- 自减运算符:--x 或者 x--
- 数值运算符: +x
- 负数值运算符:-x
减法、乘法、除法运算法比较单纯,就是执行相应的数学运算。下面介绍其他几个算术运算符,重点是加法运算符。
特殊的“+”
术语
-
运算元(也叫运算子) 运算式中的数值。比如:运算式
6 * 5
,有两个运算元:左运算元6
和 右运算元5
。 -
一元运算符 如果一个运算式中,只有一个运算元,那么这个运算符就是一元运算符,比如:运算式
+600
中的正+
运算符就是一元运算符。 -
二元运算符 同理,有两个运算元中的运算符就是二元运算符。这个就比较多了,特别注意:运算式
1 + 2
,中的加号+
就是二元运算符
作为加法运算符使用
1 + 1 // 2
js允许非数值的相加。
true + true // 2
1 + true // 2
两个字符串相加时,作为连接符。
'a' + 'bc' // "abc"
即使只有一个运算元为字符串
1 + 'a' // "1a"
true + 'a' // "truea"
更复杂的情况
'3' + 4 + 5 // "345"
3 + 4 + '5' // "75"
其他算术运算符的规则很简单:所有运算子一律转为数值
1 - '2' // -1
1 * '2' // 2
1 / '2' // 0.5
余数运算符
余数运算符(%)返回前一个运算子被后一个运算子除,所得的余数。
12 % 5 // 2
需要注意的是,运算结果的正负号由第一个运算子的正负号决定。
-1 % 2 // -1
1 % -2 // 1
自增和自减运算符
自增和自减运算符,是一元运算符,只需要一个运算元。加1或加1之后赋值给自身 前置与后置 在和=一起使用的时候需要注意,前置的自增(自减)是先自增(自减)再赋值,,后置的自增(自减)是先赋值再自增(自减),
var a = 1
var b = a++
console.log(a, b); // 2 1
var x = 1
var y = ++x
console.log(x, y); // 2 2
赋值运算符
赋值是所以计算的最后一步,也就是先进行指定的运算,然后才把得到的值返回给左边的变量
原地修改 运算元一和运算元二,进行运算,结果赋值给运算元一
// 等同于 x = x + y
x += y
// 等同于 x = x - y
x -= y
// 等同于 x = x * y
x *= y
// 等同于 x = x / y
x /= y
// 等同于 x = x % y
x %= y
// 等同于 x = x ** y
x **= y
逗号运算符
逗号隔开的多条语句都会被执行,但只返回最后一条语句执行的结果赋值给等号左侧的变量。
举个例子:
var a = (1 + 2, 3 + 6);
console.log( a ); // 9
练习
- 判断所有打印输出的结果
console.log(1 + null + '2');
console.log(1 + 2 + true);
console.log(1 + '2' + true);
console.log('1' + null + '2');
console.log(true + 1);
console.log(true + '1');
console.log(null + 1);
console.log(undefined + 1);
console.log(null + '1');
console.log(undefined + '1');
console.log(undefined + true + '1');
console.log(null + true + 1);
console.log(null + 'true' + 1);
console.log(null + 'true' - 1);
console.log(null - true + 1);
console.log(null - true + '1');
console.log(null * true);
console.log(null * true + 6);
console.log(null * true + '6');
console.log(true * '6');
console.log(true * '6' + 9);
console.log(true * '6' + '9');
console.log(true * '6' - '9');
- 判断所有打印输出的结果
console.log(parseInt(0b111));
console.log(parseInt(0b111, 10));
console.log(parseInt('0b111'));
console.log(parseInt('0b111', undefined));
console.log(parseInt('0b111', 8));
console.log(parseInt('0b111', 2));
console.log(parseInt('111abc', 2));
console.log(Number(0b111));
console.log(Number('0b111'));
console.log(Number('0o101'));
console.log(Number(0o101));
console.log(Number('0x100'));
console.log(Number(0x100));
console.log(Number(1.23));
console.log(Number('1.23'));
console.log(Number(+123.1));
console.log(Number(-123.1));
console.log(Number(null + 1));
console.log(Number(null + undefined));
console.log(Number('1' + null));
console.log(parseInt('1' + null));
console.log(Number('1' - null));
- 判断所有打印输出的结果
var a = 1;
var b = 2;
var c = true - '0'
c += ++a + b-- * 2 + ++b + a++;
console.log(c);
console.log(a);
console.log(b);