JavaScript初级篇—基本数据类型、typeof、类型转换

JavaScript基本数据类型

• 数据类型
  • string、number、Boolean、object、function、symbol
• 对象类型
  • object、date、array
• 不包含任何值的数据类型
  • null、undefined

typeof操作符

typeof的作用就是用来查看js变量的数据类型,返回值为String类型
在此之前，你需要了解JavaScript的基本数据类型并且记住一下几点:

• NaN属于Number类型
• Array、Date、NULL属于object类型
• 未定义变量属于undefined类型

因此我们在使用typeof来判断类型时，其中array和date无法使用typeof来判断，因为他们都是返回对象类型，即object类型。

// 实例
<script type="text/javascript">
	typeof "John"                 // 返回 string
	typeof 3.14                   // 返回 number
	typeof NaN                    // 返回 number
	typeof false                  // 返回 boolean
	typeof [1,2,3,4]              // 返回 object
	typeof {name:'John', age:34}  // 返回 object
	typeof new Date()             // 返回 object
	typeof function () {}         // 返回 function
	typeof myCar                  // 返回 undefined (如果 myCar 没有声明)
	typeof null                   // 返回 object
	typeof undefined;				//返回"undefined"
</script>

类型转换

显式类型转换

1. Number(mix)
2. parseInt(string,radix(基底))
3. parseFloat(string)
4. toString(radix)
5. String(mix)
6. Boolean()

Number()

被转换的值	转换规则
Boolean	true转换为1，false转换为0
Number	简单的传入和传出
NULL	返回为0
undefined	返回NaN
string

示例:

Number(false)//0
Number(12)//12
Number(null)//0
Number(undefined)//NaN
Number('')//0
Number('0011')//11
Number('1.22.2')//NaN
Number('1.22')//1.22
Number('0xff')//255
Number('Hello')//NaN
Number({a:0,b:1})//NaN
Number('100%')//NaN
Number(-123abc)//NaN

parseInt()

此方法可以根据给定的进制数把一个字符串解析成整数,以当前radix转换为10进制。

• parseInt()在转换字符串时：
  • 它会忽略字符串前面的空格，直到找到第一个非空格字符。
  • 如果第一个非空格字符不是数字字符或符号，就会返回NaN。
  • 如果第一个非空格字符是数字字符，它会继续解析第二个字符，直到解析完所有后续字符或者遇到了一个非数字字符。
• 在没有指定基数，或者基数为 0 的情况下，JavaScript 作如下处理：
  • 如果字符串 string 以"0x"或者"0X"开头, 则基数是16 (16进制).
  • 如果字符串 string 以"0"开头, 基数是8（八进制）或者10（十进制），具体是哪个基数由实现环境决定。ECMAScript 5 规定使用10，但是并不是所有的浏览器都遵循这个规定。故永远都要明确给出radix参数的值。
  • 如果字符串 string 以其它任何值开头，则基数是10 (十进制)。

parseFloat()

parseFloat() 函数解析一个字符串参数并返回一个浮点数。

• pareFloat()在解析字符串时：

• 与paresInt()类似，parseFloat()也是从第一个字符开始解析，一直遇到第一个无效的浮点数字符为止。
• 如果在解析过程中遇到了除了正负号(+或-),数字(0-9),小数点,或者科学记数法中的指数(e或E)以外的字符,则它会忽略该字符以及之后的所有字符,返回当前已经解析到的浮点数。
• 字符串中的第一个小数点是有效的，第二个小数点就是无效的了。
• 如果字符串包含的是一个可解析为整数的数，即没有小数点或小数点后面为0,则会得到整数。

toString(radix)

转换以radix为目标进制的数。（NULL和undefined不能使用该方法）
示例

var a = 123;
typeof(a.toString());

隐式类型转换

隐式类型转换底层都是调用的显式类型转换

1. isNaN()$⟶$Number()
2. ++/-- +/-（一元正负）$⟶$Number()
3. +$⟶$toString()
4. -*/%$⟶$Number()
5. && || ！
6. < > <= >=
7. == !=

隐式类型转换特殊：undefined == null(结果为true)

isNaN()

底层原理是将()中的元素先放入Number()进行转化，将转化的结果与NaN进行比对再返回布尔值。

不发生类型转换

=== 绝对等于

!== 绝对不等于

---

**干货系列！(带你防坑)**

坑1：字符串连接符和算术运算符隐式转换规则混淆
实例：

console.log(1 + "true");//1true
console.log(1 + true);//2
console.log(1 + undefined);//NaN
console.log(1 + null);//1

原理分析:

1. 字符串连接符（只要+号两边有一边式字符串）：调用String()方法转换成字符串进行拼接
2. 算术运算符（两边都是数字）：调用Number()方法转换成数字再进行加法计算

坑2：关系运算符：会把其他数据类型转换成number之后再比较关系
实例:

console.log("2" > 10);//false
console.log("2" > "10");//true
console.log("abc">"b");//false
console.log("abc">"aad");//true
console.log(NaN == NaN);//false
console.log(undefined == null);//true

原理分析：

1. 当关系运算符两边有一边是字符串时，会将其他数据类型使用Number()转换，然后比较关系。
2. 当关系运算符两边都是字符串时，会同时使用Number()转换，然后比较关系。但要注意的是比较的是Unicode码(可以使用charCodeAt()方法来查看unicode)
3. NaN == NaN、undefined == null无视规则为特殊情况！

---

**三连博主，每天分享一个小技巧！！！**

阅读更多