JavaScript - typeof、类型转换(五)

JS typeof

  • typeof 操作符用来检测变量的数据类型
typeof "John";					// 返回 string
typeof 3.14;					// 返回 number
typeof false;					// 返回 boolean
typeof [1,2,,3,4];				// 返回 object
typeof {name:'John',age:23};	// 返回 object
typeof null;					// 返回 object (是个 bug)

JS null

  • JS 中的 null 表示 “什么都没有”
  • null 是一个只有一个值的特殊类型,表示一个空对象引用
  • 用typeof 检测 null 返回的是 object
  • 可以使用 null 来清空对象,此时对象的值为 null,但其类型仍为 object
var person = null;	//值为 null ,但类型为 object

JS undefined

  • 在 JS 中,undefined 是一个没有设置值的变量
  • 使用 typeof 来检测一个没有值的变量会返回 undefined
  • 任何变量都能通过 undefined 来清空
var person;		//值为 undefined,类型为 undefined
var str = "jasner";		//值为 "jasner",类型为 string
str = undefined;		//值为 undefined,类型为 undefined

null 和 undefined 的区别

  • null 和 undefined 的值相等,但类型不等
typeof undefined;		// undefined
typeof null;			// object
null === undefined;		// false
null == undefined;		// true

JS 类型转换

JS 数据类型

  • 在 JS 中有6 种不同的数据类型
    • string
    • number
    • boolean
    • object
    • function
    • symbol
  • 3 种对象类型
    • Object
    • Date
    • Array
  • 2 种不包含任何值的数据类型
    • null
    • undefined

请注意:

  • NaN 的数据类型是 number
  • 数组(Array)的数据类型是 object
  • 日期(Date)的数据类型是 object
  • null 的数据类型是 object
  • 未定义变量的数据类型为 undefined
  • 如果对象是 Array 或者 Date,我们就无法通过 typeof 来判断它们的具体类型,因为都是返回 object

JS constructor 属性

  • constructor 属性返回所有 JS 变量的构造函数
"jasner".constructor;               // 返回函数 String()  { [native code] }
(3.14).constructor;                 // 返回函数 Number()  { [native code] }
false.constructor;                  // 返回函数 Boolean() { [native code] }
[1,2,3,4].constructor;              // 返回函数 Array()   { [native code] }
{name:'John', age:34}.constructor;  // 返回函数 Object()  { [native code] }
new Date().constructor;             // 返回函数 Date()    { [native code] }
function () {}.constructor;         // 返回函数 Function(){ [native code] }
  • 可以使用 constructor 属性来查看对象是否为日期(包含字符串"Date")
function isDate (myDate) {
    return myDate.constructor.toString().indexOf("Date") > -1;
}
  • 可以使用 constructor 属性来查看对象是否为数组(包含字符串"Array")
function isArray (myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}

JS 类型转换

  • JS 变量可以转换为新变量或其他数据类型
    • 通过使用 JS 函数
    • 通过 JS 自身自动转换

将 number 转换为 string

  • 全局方法 String() 可以将数字转换为字符串
  • 该方法用于任何数字、字母、变量、表达式
var x = 123;
String(x)			// 将变量 x 转换为字符串并返回 123
String(123)			// 将数字 123 转换为字符串并返回 123
String(100 + 23)	// 将数字表达式转换为字符串并返回 123
  • number 使用toString() 方法也有同样的效果
var x = 123;
x.toString()
(123).toString
(100 + 23).toString
  • 更多将 number 转换为 string 的方法
方法 描述
toExponential() 把对象的值转换为指数计数法
toFixed() 把数字转换为字符串,结果的小数点后有指定 位数的数字
toPrecision() 把数字格式化为指定的长度

将 boolean 转换为 string

  • 全局方法 String() 可以将布尔值转换为字符串
String(false)		// 返回"false"
String(true)		//返回"true"
  • 使用 toString() 也可以
false.toString()		//返回"false"
true.toString()			//返回"true"

将 Date 转换为 string

  • Date() 返回字符串
Date()		// 返回一长串日期字符串
  • 全局方法 String() 可以将日期转换为字符串
String(new Date())	// 返回一长串日期字符串
  • Date 方法 toString() 也有相同的效果
obj = new Date();
obj.toString();		// 返回一长串日期字符串
  • 更多将 Date 转换为 string 的方法
方法 描述
getDate() 从 Date 对象返回一个月中的某一天(1~31)
getDay() 从 Date 对象返回一周中的某一天(0~6)
getFullYear() 从 Date 对象以四位数字返回年份
getHours() 返回 Date 对象的小时(0~23)
getMilliseconds() 返回 Date 对象的毫秒(0~999)
getMinutes() 返回 Date 对象的分钟(0~59)
getMonth() 返回 Date 对象的月份(0~11)
getSeconds() 返回 Date 对象的秒数(0~59)
getTime() 返回 1970 年 1 月 1 日至今的毫秒数

将 string 转换为 number

  • 全局方法 Number() 可以将 string 转换为 number
  • 字符串包含数字(如 "3.14")转换为数字(如 3.14)
  • 空字符串转换为 0
  • 其他字符串会转换为 NaN (不是个数字)
Number("3.14")		// 返回 3.14
Number(" ")			// 返回 0
Number("")			// 返回 0
Number("12 56")		// 返回 NaN (不是一个数字:Not a Number)

一元运算符 +

  • Operator + 可用于将变量转换为 number
var y = "5";	// y 是一个字符串
var x = + y;	// x 是一个数字
  • 如果变量不能转换,他仍然会是一个数字,但值为 NaN(不是一个数字:Not a Number)
var y = "John";		// y 是一个字符串
var x = + y;		// x 是一个数字(NaN)

将 boolean 转换为 number

  • 全局方法 Number() 可将布尔值转换为数字
Number(false)		// 返回 0
Number(true)		// 返回 1

将 Date 转换为 number

  • 全局方法 Number() 可将日期转换为数字
d = new Date();
Number(d);		// 返回一串毫秒值
  • 日期方法 getTime() 也有同样的效果
d = new Date();
d.getTime();		// 返回一串毫秒值

自动转换类型

  • 当 JS 尝试操作一个“错误”的数据类型时,会自动转换成为“正确”的数据类型
5 + null		// 返回 5 ,null 转换为 0
"5" + null		// 返回 "5null", null 转换为 "null"
"5" + 1			// 返回 "51", 1 转换为 "1"
"5" - 1			// 返回 4 , "5" 转换为 5

自动转换为字符串

  • 当你尝试输出一个对象或一个变量时,JS 会自动调用变量的 toString() 方法
document.getElementById("demo").innerHTML = myVar;
myVar = {name:"jasner"};// toString() 转换为 "[object Object]"
myVar = [1,2,3,4];	// toString() 转换为 "1,2,3,4"	
myVar = new Date();	// toString() 转换为 "Fri Jul 18 2020 09:49:23 GMT+0800"
  • 数字和布尔值也经常转换为字符串
myVar = 123;	// toString() 转换为 "123"
myVar = true;	// toString() 转换为 "true"
myVar = false;	// toString() 转换为 "false"
  • 下面展示了使用不同的数值转换为数字(Number),字符串(string),布尔值(boolean)
原始值 转换为数字 转化为字符串 转换为布尔值
false 0 "false" false
true 1 "true" true
0 0 "0" false
1 1 "1" true
"0" 0 "0" true
"000" 0 "000" true
"1" 1 "1" true
NaN NaN "NaN" false
Infinity(正无穷) Infinity "Infinity" true
-Infinity(负无穷) -Infinity "-Infinity" true
"" 0 "" fasle
"20" 20 "20" true
"jasner" NaN "jasner" true
[ ] 0 "" true
[20] 20 "20" true
[10,20] NaN "10,20" true
["jasner"] NaN "jasner" true
["jasner","jasmyn"] NaN "jasner,jasmyn" true
function(){} NaN "function(){}" true
NaN "[object Object]" true
null 0 "null" false
undefined NaN "undefined" false
posted @ 2020-08-27 08:09  示四羽  阅读(357)  评论(0编辑  收藏  举报