html js 添加数据类型,js数据类型判断和转换
8種機械鍵盤軸體對比
本人程序員，要買一個寫代碼的鍵盤，請問紅軸和茶軸怎么選？
前言
無論筆試還是面試，總會問到數據類型和隱式轉換。今天徹底整理一下這塊的知識，希望對大家有幫助。
看到下面的題，是不是已經蒙了，讀完這篇文章，就能順利通關了1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23console.log([] == 0) //true
console.log(![] == 0) //true
console.log([] == ![]) //true
console.log([] == []) //false
console.log({} == {}) //false
console.log({} == !{}) //false
console.log([] == false) //true
console.log({} == false) //false
if([]) {console.log(3)} //3
if([1] == [1]){console.log(4)} //沒有輸出
console.log('2' > 10) //false
console.log('2' > '10') //true
數據類型判斷
數據類型
js數據類型一共有7種，undefined、 null、 boolean 、string、 number、 object、 Symbol
類型判斷
typeof1
2
3
4
5
6
7
8
9
10
11
12
13typeof undefined //undefined
typeof true //boolean
typeof 42 //number
typeof '42' //string
typeof { life: 42 } //object
let s = Symbol();
typeof s //symbol
//特殊情況
typeof [1,2,3,4]// object
typeof null //object
typeof new Date() //object
typeof function () {} //function
由此可以看出，typeof不能區分數組， null和對象
Object.prototype.toString.call1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17let getType=Object.prototype.toString;
getType.call(undefined) //[object Undefined]
console.log(getType.call(true)) //[object Boolean]
console.log(getType.call(42)) //[object Number]
console.log(getType.call(Symbol()))//[object Symbol]
console.log(getType.call([1,2,3,4])) //[object Array]
console.log(getType.call(null))//[object Null]
console.log(getType.call(new Date())) //[object Date]
console.log(getType.call(function () {} )) //[object Function]
instanceof
instanceof運算符返回一個布爾值，表示對象是否為某個構造函數的實例。
instanceof運算符的左邊是實例對象，右邊是構造函數。它會檢查右邊構建函數的原型對象(prototype)，是否在左邊對象的原型鏈上。1
2new Date instanceof Date //true
[1,2,3] instanceof Array //true
instanceof運算符只能用于對象，不適用原始類型的值。
constructor 屬性
prototype對象有一個constructor屬性，默認指向prototype對象所在的構造函數。1
2function P() {}
P.prototype.constructor === P // true1
2[1,2].constructor === Array //true
'123'.constructor === String //true
面試常問
怎么判斷是不是數組
instanceof、constructor、Object.prototype.toString.call、Array.isArray1
2
3
4[1,2] instanceof Array //true
[1,2].constructor === Array //true
Object.prototype.toString.call([1,2]) === '[object Array]' //true
Array.isArray([1,2]) //true
如何判斷一個對象是不是空對象
轉換成json字符串判斷1JSON.stringify({}) == "{}"
for in 循環判斷1
2
3
4
5
6
7let isEmptyObject = function(obj) {
for (let key in obj) {
return false;
}
return true;
}
console.log(isEmptyObject(obj));//true
使用ES6的Object.keys()1Object.keys({}).length === 0
類似的數組轉化成數組
類數組和數組都可以讀寫，獲取長度，遍歷，但是類數組不能調用數組的方法，比如push等1Array.prototype.slice.call(arguments)
或者Array.from(arguments)
字符串翻轉
‘abc’.split(‘’).reverse().join(‘’)
字符串和數組轉換
['a', 'b', 'c'].join('') //'abc'1'abc'.split('') //['a', 'b', 'c']
類型轉換
顯示類型轉換
轉成數字，Number()、parseInt()、parseFloat()1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30// 數值：轉換后還是原來的值
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({a: 1}) // NaN
Number({}) //NaN
//數組
Number([1, 2, 3]) // NaN
Number([5]) // 5
Number([]) //0
Number方法參數是對象時轉換規則
第一步，調用對象自身的valueOf方法。如果返回原始類型的值，則直接對該值使用Number函數，不再進行后續步驟。
第二步，如果valueOf方法返回的還是對象，則改為調用對象自身的toString方法。如果toString方法返回原始類型的值，則對該值使用Number函數，不再進行后續步驟。
第三步，如果toString方法返回的是對象，就報錯。
轉換規則示例：1
2
3
4
5
6
7
8
9var obj = {x: 1};
Number(obj) // NaN
// 等同于
if (typeof obj.valueOf() === 'object') {
Number(obj.toString());
} else {
Number(obj.valueOf());
}
先使用valueOf返回了對象本身，再代用toString()返回了”[object Object]”
注意：
任何涉及NaN的操作都返回NaN，NaN和任何值不相等
Boolean
除了以下值的轉換結果為false，其他的值全部為true。
false, '', 0, NaN, null, undefined
String函數可以將任意類型的值轉化成字符串
(1)原始類型值1
2
3
4
5
6
7
8
9
10
11
12
13
14
15//數值：轉為相應的字符串。
String(123) // "123"
//字符串：轉換后還是原來的值。
String('abc') // "abc"
//布爾值：true轉為字符串"true"，false轉為字符串"false"。
String(true) // "true"
//undefined：轉為字符串"undefined"。
String(undefined) // "undefined"
//null：轉為字符串"null"。
String(null) // "null"
(2)對象1
2
3
4
5
6//String方法的參數如果是對象，返回一個類型字符串
String({a: 1}) // "[object Object]"
//如果是數組，返回該數組的字符串形式。
String([1, 2, 3]) // "1,2,3"
String方法背后的轉換規則，與Number方法基本相同，只是互換了valueOf方法和toString方法的執行順序。
隱式類型轉換
自動轉化為布爾值
if條件，while,
自動轉換為字符串
主要發生在字符串加法，一個值為字符串，另一個非字符串，則后者直接轉為字符串1
2
3'5' + 1 // '51'
'5' + true // "5true"
'5' + {} // "5[object Object]"
自動轉化為數值
除了加法運算符(+)有可能把運算子轉為字符串，其他運算符都會把運算子自動轉成數值。1
2
3
4
5++/--(自增自減運算符)
+ - * / %(算術運算符)
+ > < >= <= == != === !=== (關系運算符)1
2
3
4
5
6
7
8
9
10
11
12
13'5' - '2' // 3
'5' * '2' // 10
true - 1 // 0
false / '5' // 0
//'abc'轉為數值為NaN,NaN任何運算都是NaN
'abc' - 1 // NaN
//null進行Number運算轉成0
null + 1 // 1
//undefined轉為數值時為NaN
undefined + 1 // NaN
== 運算符
(1)原始類型的數據會轉換成數值類型再進行比較。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
281 == true // true
// 等同于 1 === Number(true)
0 == false // true
// 等同于 0 === Number(false)
2 == true // false
// 等同于 2 === Number(true)
'true' == true // false
// 等同于 Number('true') === Number(true)
// 等同于 NaN === 1
'' == 0 // true
// 等同于 Number('') === 0
// 等同于 0 === 0
'' == false // true
// 等同于 Number('') === Number(false)
// 等同于 0 === 0
'1' == true // true
// 等同于 Number('1') === Number(true)
// 等同于 1 === 1
'n 123 t' == 123 // true
// 因為字符串轉為數字時，省略前置和后置的空格
(2)對象與原始類型值比較
對象(這里指廣義的對象，包括數組和函數)與原始類型的值比較時，對象轉化成原始類型的值，再進行比較。1
2
3
4
5
6
7
8[1] == 1 // true
// 等同于 Number([1]) == 1
[1] == '1' // true
// 等同于 Number([1]) == Number('1')
[1] == true // true
// 等同于 Number([1]) == Number(true)
實戰練習1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40//true,空數組valueOf還是空數組，toString()轉成得到空字符串，空字符串調用Number轉成0
console.log([] == 0) //true
//true，非的運算級別高，空數組轉為布爾值為true,所以![]得到的false，Number轉換為0， 最后結果還是true
console.log(![] == 0) //true
//true,前面是調用valueOf()后調用toString()轉成false，后邊是非轉成false
console.log([] == ![])
//false，2個數組放在堆里面，棧中存儲的是地址
console.log([] == [])
//引用類型存儲在堆中，棧中的是地址，所以是false
console.log({} == {})
//{}.valueOf().toString()得到的是[object, Object], !{}得到的是false，Number轉換后不相等
console.log({} == !{})
//數組的valueOf().toString()后為空，所以是真
console.log([] == false) //true
//因為對象調用valueOf后為{}, toString后轉為[object, Object]，Number后是NaN,
//任何涉及NaN的操作都返回NaN，NaN和任何值不相等
console.log({} == false) //false
//空數組的boolean值為true
if([]) {console.log(3)} //3
//2個數組的棧地址不同
if([1] == [1]){console.log(4)} //沒有輸出
//false,轉成2>10
console.log('2' > 10)
//都是字符串，按照字符串的unicode轉換，'2'.charCodeAt() > '10'.charCodeAt = 50 > 49
console.log('2' > '10')
//都是字符串，按照字符串的unicode轉換
console.log('abc' > 'b') //false
總結
以上是生活随笔為你收集整理的html js 添加数据类型,js数据类型判断和转换的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Html做网络硬盘系统交互,教你做网络硬
- 下一篇： 360导入html没有,IE无法加载到外