1.JS几个重要的操作符与变量值
可以使用 typeof 操作符来检测变量的数据类型。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>JS简单学习</title> </head> <body> <p> typeof 操作符返回变量或表达式的类型。</p> <p id="demo"></p> <script> var x=666; var s="redis"; var flag=true; var num=[1,2,3,4]; var person={name: "zhangsan",age: 25}; document.getElementById("demo").innerHTML= typeof x + "<br />" + typeof s + "<br />" + typeof flag + "<br />" + typeof num + "<br />" + //在JavaScript中，数组是一种特殊的对象类型。 因此 typeof num 返回 object。 typeof person; </script> </body> </html>
在 JavaScript 中null 表示"什么都没有"，null是一个只有一个值的特殊类型。表示一个空对象引用。
用 typeof 检测 null 返回 object。
在JavaScript 中，undefined 是一个没有设置值的变量。typeof 一个没有值的变量会返回undefined。
用 typeof 检测 undefined 返回 undefined。
可以设置为 null 来清空对象，也可以设置为 undefined 来清空对象。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <p>对象可以通过设置为 <b>null</b> 或 <b>undefined</b> 来清空。</p> <p id="demo1"></p> <script> var person={name: "zhangsan",age: 25}; var person=null; var num=[1,2,3,4]; var num=undefined; document.getElementById("demo1").innerHTML= "对象person的类型为：" + typeof person + "<br />" + "对象num的类型为：" + typeof num; </script> </body> </html>
null 和 undefined 的值相等，但类型不等。（只能说相等，但不是绝对相等）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <h2>undefined 和 null 的区别</h2> <p id="demo"></p> <script> document.getElementById("demo").innerHTML= "undefined的类型为：" + typeof undefined + "<br />" + "null的类型为：" + typeof null + "<br />" + "undefined与null是否绝对相等：" + (null === undefined) + "<br />" + "undefined与null是否相等：" + (null == undefined); </script> </body> </html>
2.JS类型转换
JavaScript 变量可以转换为新变量或其他数据类型：
· 通过使用 JavaScript 函数
· 通过 JavaScript 自身自动转换
在 JavaScript 中有 6 种不同的数据类型：
· string
· number
· boolean
· object
· function
· symbol
3 种对象类型：
· Object
· Date
· Array
2 个不包含任何值的数据类型：
· null
· undefined
Number() 转换为数字， String() 转换为字符串，Boolean() 转换为布尔值。
请注意：
· NaN 的数据类型是 number
· 数组(Array)的数据类型是 object
· 日期(Date)的数据类型为 object
· null 的数据类型是 object
· 未定义变量的数据类型为undefined
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
constructor 属性返回所有JavaScript 变量的构造函数。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <p> constructor 属性返回变量或对象的构造函数。</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "redis".constructor + "<br />" + (10.24).constructor + "<br />" + false.constructor + "<br />" + [1,2,3,4].constructor + "<br />" + {name:'zhangsan', age:25}.constructor + "<br />" + new Date().constructor + "<br />" + function() {}.constructor; </script> </body> </html>
全局方法String()可以将数字、布尔值、日期转换为字符串，该方法可用于任何类型的数字，字母，变量，表达式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <p>String() 或者 toString() 方法可以将数字转换为字符串。</p> <p id="demo1"></p> <script> var x=51; document.getElementById("demo1").innerHTML= //也可以写成 x.toString() String(x) + "<br />" + //也可以写成 (51).toString() String(51) + "<br />" + //也可以写成 (50 + 1).toString() String(50 + 1); </script> <hr /> <p>String() 或者 toString() 方法可以将布尔值转换为字符串。</p> <p id="demo2"></p> <script> document.getElementById("demo2").innerHTML= String(true) + "<br />" + String(false) + "<br />" + true.toString() + "<br />" + false.toString() + "<br />"; </script> <hr /> <p>String() 或者 toString() 方法可以将日期转换为字符串。</p> <p id="demo3"></p> <script> document.getElementById("demo3").innerHTML= new Date() + "<br />" + String(new Date()) + "<br />" + new Date().toString(); </script> </body> </html>
全局方法Number()可以将字符串、布尔值、日期转换为数字。
一元运算符 + 可用于将变量转换为数字，如果变量不能转换，它仍然会是一个数字，但值为NaN (不是一个数字)。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>JS简单学习</title> </head> <body> <p>全局方法 Number() 可以将字符串转换为数字。</p> <p id="demo1"></p> <script> document.getElementById("demo1").innerHTML= Number("10.24") + "<br />" + Number(" ") + "<br />" + Number("") + "<br />" + Number("55 66"); </script> <hr /> <p>一元运算符 + 可以将其他变量转换为数字。</p> <p id="demo2"></p> <script> var a="5"; //a是一个字符串 var x= + a; //x是一个数字 var b="redis"; //b是一个字符串 var y= + b; //y是一个数字(NaN) document.getElementById("demo2").innerHTML= typeof x + "<br />" + typeof y; </script> <hr /> <p>全局方法 Number() 可将布尔值转换为数字。</p> <p id="demo3"></p> <script> document.getElementById("demo3").innerHTML= Number(true) + "<br />" + Number(false); </script> <hr /> <p>全局方法 Number() 可将日期转换为数字、日期方法 getTime() 也有相同的效果。</p> <p id="demo4"></p> <script> document.getElementById("demo4").innerHTML= Number(new Date()) + "<br />" + new Date().getTime(); </script> </body> </html>
当 JavaScript 尝试操作一个 "错误"的数据类型时，会自动转换为 "正确" 的数据类型。
5 + null // 返回 5 null 转换为 0 "5" + null // 返回"5null" null 转换为 "null" "5" + 1 // 返回 "51" 1 转换为 "1" "5" - 1 // 返回 4 "5" 转换为 5
