JavaScript 数据类型
1、JavaScript中有五种可包含值的数据类型:
字符串(string)
数字(number)
布尔(boolean)
对象(object)
函数(function)
2、有三种对象类型:
对象(Object)
日期(Date)
数组(Array)
3、同时有两种不能包含值的数据类型:
null
undefined
4、可以使用typeof运算符来确定JavaScript变量的数据类型
例1:
<!DOCTYPE html> <html> <body> <h2>JavaScript typeof 运算符</h2> <p>typeof 运算符返回变量、对象、函数或表达式的类型。</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = typeof "john" + "<br>" + typeof 3.14 + "<br>" + typeof NaN + "<br>" + typeof false + "<br>" + typeof [1,2,3,4] + "<br>" + typeof {name:'john', age:34} + "<br>" + typeof new Date() + "<br>" + typeof function () {} + "<br>" + typeof myCar + "<br>" + typeof null; </script> </body> </html>
注:
1、NaN的数据类型是数值
2、数组的数据类型是对象
3、日期的数据类型是对象
4、null的数据类型是对象
5、未定义变量的数据类型是undefined
6、尚未赋值的变量的数据类型也是undefined
7、无法使用typeof去判断JavaScript对象是否是数组(或日期)
NaN属性
1、NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值,来指示其不是数字值
2、NaN,即非数值(Not a Number)是一个特殊的值,这个数值表示本来要返回数值的操作数未返回数值的情况(这样就不会抛出错误了)
3、使用isNaN()来判断一个值是否是数字。原因是NaN与所有值都不相等,包括它自己
定义和用法
isNaN()函数用于检查其参数是否是非数字值
语法
isNaN(x)
参数描述
x:必需。要检测的值
返回值
如果x是特殊的非数字值NaN(或者能被转换为这样的值),返回的值就是true。如果x是其他值,则返回false。
例2:
<html> <body> <script type="text/javascript"> document.write(isNaN(123)+ "<br />") document.write(isNaN(-1.23)+ "<br />") document.write(isNaN(5-2)+ "<br />") document.write(isNaN(0)+ "<br />") document.write(isNaN("Hello")+ "<br />") document.write(isNaN("2005/12/12")+ "<br />") </script> </body> </html>
typeof的数据类型
typeof运算符不是变量。它属于运算符。运算符(比如 + - * /)没有数据类型但是,typeof始终会返回字符串(包含运算数的类型)
constructor属性
constructor属性返回所有JavaScript变量的构造器函数,可以通过检查constructor属性来确定某个对象是否为数组
例3:
<!DOCTYPE html> <html> <body> <h2>JavaScript constructor 属性</h2> <p>constructor 属性返回变量或对象的构造器函数。</p> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = "john".constructor + "<br>" + (3.14).constructor + "<br>" + false.constructor + "<br>" + [1,2,3,4].constructor + "<br>" + {name:'john', age:34}.constructor + "<br>" + new Date().constructor + "<br>" + function () {}.constructor; </script> </body> </html>
例3_1:是否包含单词"Array"
<!DOCTYPE html> <html> <body> <h2>JavaScript 数组</h2> <p>这个“自制的” isArray() 函数在数组上使用时返回 true:</p> <p id="demo"></p> <script> var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.getElementById("demo").innerHTML = isArray(fruits);//调用函数 function isArray(myArray) { return myArray.constructor.toString().indexOf("Array") > -1; }//定义一个函数来判断返回值中是否包含单词 "Array" </script> </body> </html>
例3_2:
<!DOCTYPE html> <html> <body> <h2>JavaScript 数组对象</h2> <p>这个“自制的” isArray() 函数在数组上使用时返回 true:</p> <p id="demo"></p> <script> var fruits = ["Banana", "Orange", "Apple", "Mango"]; document.getElementById("demo").innerHTML = isArray(fruits); function isArray(myArray) { return myArray.constructor === Array; } </script> </body> </html>
例3_3:
<!DOCTYPE html> <html> <body> <h2>JavaScript 日期对象</h2> <p>这个“自制的” isDate() 函数在日期上使用时返回 true:</p> <p id="demo"></p> <script> var myDate = new Date(); document.getElementById("demo").innerHTML = isDate(myDate); function isDate(myDate) { return myDate.constructor === Date; } </script> </body> </html>
JavaScript类型转换
JavaScript变量能够被转换为新变量以及另一种数据类型:
⑴通过使用JavaScript函数
⑵通过JavaScript本身自动转换
把数值转换为字符串
1、全局方法String()能够把数字转换为字符串,与数字方法toString()类似
2、可用于任意类型的数字、文字、变量或表达式
例4:
<!DOCTYPE html> <html> <body> <h2>JavaScript String() 方法</h2> <p>String() 方法把数字转换为字符串。</p> <p id="demo"></p> <script> var x = 123; document.getElementById("demo").innerHTML = String(x) + "<br>" + String(123) + "<br>" + String(100 + 23)+ "<br>" + (100 + 23).toString(); </script> </body> </html>
把布尔转换为字符串
全局方法String()能够将布尔转换为字符串,布尔方法toString()同理
例5:
<!DOCTYPE html> <html> <body> <h2>JavaScript类型转换</h2> <p id="demo"></p> <script> var x = true; var y = false; document.getElementById("demo").innerHTML = String(x) + "<br>" + y.toString() </script> </body> </html>
把日期转换为字符串
全局方法String()可将日期转换为字符串,日期方法toString()同理
例6:
<!DOCTYPE html> <html> <body> <h2>JavaScript类型转换</h2> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = String(Date()) + "<br>" + Date().toString(); </script> </body> </html>
注:在python中time或datetime模块返回的是一个时间对象,其对象有自己的方法或属性,方法或属性返回的为整形会浮点型
例6_1:
import datetime today = datetime.datetime.today() print(today) print(type(today)) print(today.year) print(type(today.year)) """ 2019-09-18 14:06:51.189761 <class 'datetime.datetime'> 2019 <class 'int'> """
把字符串转换为数值
全局方法Number()可把字符串转换为数字
1、包含数字的字符串(比如 "3.14")转换为数字(比如 3.14)
2、空的字符串转换为 0
3、其他字符串将转换为NaN(Not a number,不是数字)python中就没有这个功能,不能把非数字字符串转为数字类型
例7:
<!DOCTYPE html> <html> <body> <h2>JavaScript类型转换</h2> <p id="demo"></p> <script> document.getElementById("demo").innerHTML = Number("3.14") + "<br>" + // 返回 3.14 Number(" ") + "<br>" + // 返回 0 Number("") + "<br>" + // 返回 0 Number("99 88"); // 返回 NaN </script> </body> </html>
一元+运算符
1、一元的+运算符可用于把变量转换为数字
2、如果无法转换变量,则仍会成为数字,但是值为NaN(Not a number)
例8:
<!DOCTYPE html> <html> <body> <h2>JavaScript类型转换</h2> <p id="demo"></p> <p id="demo_1"></p> <script> var y = "5"; // y 是字符串 var x = + y; // x 是数字; var a = "Bill"; // a 是字符串 var b = + a; // b 是数字 (NaN) document.getElementById("demo").innerHTML = x + "<br>" + typeof x document.getElementById("demo_1").innerHTML = b + "<br>" + typeof b </script> </body> </html>
把布尔转换数值
全局方法Number()也可把布尔转换为数字
例9:
<!DOCTYPE html> <html> <body> <h2>JavaScript类型转换</h2> <p id="demo"></p> <p id="demo_1"></p> <script> document.getElementById("demo").innerHTML = Number(false) // 返回 0 document.getElementById("demo_1").innerHTML =Number(true) // 返回 1 </script> </body> </html>
把日期转换为数字
全局方法Number()可用于把日期转换为数字,日期方法getTime()同理
例10:
<!DOCTYPE html> <html> <body> <h2>JavaScript类型转换</h2> <p id="demo"></p> <p id="demo_1"></p> <script> var a = new Date() document.getElementById("demo").innerHTML = Number(a) + "<br>" + a.constructor document.getElementById("demo_1").innerHTML =a.getTime() + "<br>" + a.constructor </script> </body> </html>
自动类型转换
如果JavaScript尝试操作一种“错误”的数据类型,它会试图将该值转换为“正确”的类型
例11:
5 + null // 返回 5 因为 null 被转换为 0
"5" + null // 返回 "5null" 因为 null 被转换为 "null"
"5" + 2 // 返回 52 因为 2 被转换为 "2"
"5" - 2 // 返回 3 因为 "5" 被转换为 5
"5" * "2" // 返回 10 因为 "5" 和 "2" 被转换为 5 和 2