首页 > JS > JavaScript基础

JavaScript typeof 运算符

JavaScript基础 2022-04-25 01:34:03小码哥的IT人生shichen

JavaScript typeof

在 JavaScript 中有 5 种不同的可以包含值的数据类型：

string
number
boolean
object
function

有 6 种类型的对象：

Object
Date
Array
String
Number
Boolean

以及 2 种不能包含值的数据类型：

null
undefined

typeof 运算符

您可以使用 typeof 运算符来确定 JavaScript 变量的数据类型。

示例代码：

typeof "Bill"                 // 返回 "string"
typeof 3.14                   // 返回 "number"
typeof NaN                    // 返回 "number"
typeof false                  // 返回 "boolean"
typeof [1,2,3,4]              // 返回 "object"
typeof {name:'Bill', age:19}  // 返回 "object"
typeof new Date()             // 返回 "object"
typeof function () {}         // 返回 "function"
typeof myCar                  // 返回 "undefined" *
typeof null                   // 返回 "object"

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript typeof 运算符</h1>
<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>

运行结果：

Javascript typeof 运算符

typeof 运算符返回变量、对象、函数或表达式的类型。

string
number
number
boolean
object
object
object
function
undefined
object

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

请注意：

NaN 的数据类型是数字
数组的数据类型是对象
日期的数据类型是对象
null 的数据类型是 object
未定义变量的数据类型为 undefined *
未赋值的变量的数据类型也是 undefined *

您无法使用 typeof 来确定 JavaScript 对象是否是数组（或日期）。

原始日期

原始数据值指的是没有附加属性和方法的单个简单数据值。

typeof 运算符可以返回以下原始类型之一：

string
number
boolean
undefined

示例代码：

typeof "Bill"              // 返回 "string"
typeof 3.14                // 返回 "number"
typeof true                // 返回 "boolean"
typeof false               // 返回 "boolean"
typeof x                   // 返回 "undefined" (if x has no value)

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript typeof</h1>
<p>typeof 运算符返回变量或表达式的类型。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 
typeof "john" + "<br>" + 
typeof 3.14 + "<br>" +
typeof true + "<br>" +
typeof false + "<br>" +
typeof x;
</script>
</body>
</html>

运行结果：

Javascript typeof

typeof 运算符返回变量或表达式的类型。

string
number
boolean
boolean
undefined

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

复杂数据

typeof 运算符可以返回两种复杂类型之一：

function
object

typeof 运算符会为对象、数组和 null 返回 "object"。

typeof 运算符不会为函数返回 "object"。

示例代码：

typeof {name:'Bill', age:19} // 返回 "object"
typeof [1,2,3,4]             // 返回 "object"（非 "array"，请注意下面的例子）
typeof null                  // 返回 "object"
typeof function myFunc(){}   // 返回 "function"

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript typeof</h1>
<p>typeof 运算符为对象、数组和 null 返回 object。</p>
<p>typeof 运算符不对函数返回 object。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 
typeof {name:'john', age:34} + "<br>" +
typeof [1,2,3,4] + "<br>" +
typeof null + "<br>" +
typeof function myFunc(){};
</script>
</body>
</html>

运行结果：

Javascript typeof

typeof 运算符为对象、数组和 null 返回 object。

typeof 运算符不对函数返回 object。

object
object
object
function

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

typeof 运算符会为数组返回 "object"，因为在 JavaScript 中数组是对象。

typeof 的数据类型

typeof 运算符并不是变量。它只是一个运算符。运算符 (+ - * /) 没有任何数据类型。

但是，typeof 运算符总是返回字符串（包含操作数的类型）。

constructor 属性

constructor 属性返回所有 JavaScript 变量的构造函数。

示例代码：

"Bill".constructor                // 返回 function String()  {[native code]}
(3.14).constructor                // 返回 function Number()  {[native code]}
false.constructor                 // 返回 function Boolean() {[native code]}
[1,2,3,4].constructor             // 返回 function Array()   {[native code]}
{name:'Bill',age:19}.constructor  // 返回 function Object()  {[native code]}
new Date().constructor            // 返回 function Date()    {[native code]}
function () {}.constructor        // 返回 function Function(){[native code]}

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript constructor 属性</h1>
<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>

运行结果：

Javascript constructor 属性

constructor 属性返回变量或对象的构造函数。

function String() { [native code] }
function Number() { [native code] }
function Boolean() { [native code] }
function Array() { [native code] }
function Object() { [native code] }
function Date() { [native code] }
function Function() { [native code] }

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

您可以检查 constructor 属性以确定对象是否为数组（包含 "Array" 一词）：

示例代码：

function isArray(myArray) {
  return myArray.constructor.toString().indexOf("Array") > -1;
}

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 数组</h1>
<p>这个“自制的” isArray () 函数在数组上使用时返回 true：</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple"];
document.getElementById("demo").innerHTML = isArray(fruits);
function isArray(myArray) {
  return myArray.constructor.toString().indexOf("Array") > -1;
}
</script>
</body>
</html>

运行结果：

Javascript 数组

这个“自制的” isArray () 函数在数组上使用时返回 true：

true

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

或者更简单，您可以检查对象是否为数组函数：

示例代码：

function isArray(myArray) {
  return myArray.constructor === Array;
}

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Array 对象</h1>
<p>这个“自制的” isArray () 函数在数组上使用时返回 true：</p>
<p id="demo"></p>
<script>
const fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = isArray(fruits);
function isArray(myArray) {
  return myArray.constructor === Array;
}
</script>
</body>
</html>

运行结果：

Javascript Array 对象

这个“自制的” isArray () 函数在数组上使用时返回 true：

true

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

您可以检查 constructor 属性以确定对象是否为日期（包含 "Date" 一词）：

示例代码：

function isDate(myDate) {
  return myDate.constructor.toString().indexOf("Date") > -1;
}

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Date 对象</h1>
<p>这个“自制的” isDate () 函数在日期上使用时返回 true：</p>
<p id="demo"></p>
<script>
const myDate = new Date();
document.getElementById("demo").innerHTML = isDate(myDate);
function isDate(myDate) {
  return myDate.constructor.toString().indexOf("Date") > -1;
}
</script>
</body>
</html>

运行结果：

Javascript Date 对象

这个“自制的” isDate () 函数在日期上使用时返回 true：

true

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

或者更简单，您可以检查对象是否为日期函数：

示例代码：

function isDate(myDate) {
  return myDate.constructor === Date;
}

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Date 对象</h1>
<p>这个“自制的” isDate () 函数在日期上使用时返回 true：</p>
<p id="demo"></p>
<script>
const myDate = new Date();
document.getElementById("demo").innerHTML = isDate(myDate);
function isDate(myDate) {
  return myDate.constructor === Date;
}
</script>
</body>
</html>

运行结果：

Javascript Date 对象

这个“自制的” isDate () 函数在日期上使用时返回 true：

true

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

Undefined

在 JavaScript 中，没有值的变量的值是 undefined。类型也是 undefined。

示例代码：

let car;    // 值是 undefined，类型也是 undefined。

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript</h1>
<p>没有值的变量的值（和数据类型）是 <b>undefined</b>。</p>
<p id="demo"></p>
<script>
let car;
document.getElementById("demo").innerHTML =
car + "<br>" + typeof car;
</script>
</body>
</html>

运行结果：

Javascript

没有值的变量的值（和数据类型）是 undefined。

undefined
undefined

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

通过将其值设置为 undefined，可以清空任何变量。类型也将是 undefined。

示例代码：

car = undefined;    // 值是 undefined，类型也是 undefined。

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript</h1>
<p>如果将值设置为 <b>undefined</b>，则可以清空变量。</p>
<p id="demo"></p>
<script>
let car = "Volvo";
car = undefined;
document.getElementById("demo").innerHTML = car + "<br>" + typeof car;
</script>
</body>
</html>

运行结果：

Javascript

如果将值设置为 undefined，则可以清空变量。

undefined
undefined

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

空值

空值与 undefined 无关。

空字符串既有合法值又有类型。

示例代码：

let car = "";    // 值是 ""，类型是 "string"

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript</h1>
<p>空字符串既有合法值又有类型：</p>
<p id="demo"></p>
<script>
let car = "";
document.getElementById("demo").innerHTML =
"The value is: " +
car + "<br>" +
"The type is: " + typeof car;
</script>
</body>
</html>

运行结果：

Javascript

空字符串既有合法值又有类型：

The value is:
The type is: string

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

Null

在 JavaScript 中 null 即是“无”。它应该是不存在的东西。

不幸的是，在 JavaScript 中，null 的数据类型是一个对象。

你可以认为它是 JavaScript 中的一个 bug，typeof null 是一个对象。类型应为 null。

您可以通过将对象设置为 null 来清空对象：

示例代码：

let person = {firstName:"Bill", lastName:"Gates", age:19, eyeColor:"blue"};
person = null;    // 现在值为 null，但类型仍然是对象

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript</h1>
<p>可以通过将值设置为 <b>null</b> 来清空对象。</p>
<p id="demo"></p>
<script>
let person = {firstName:"Bill", lastName:"Gates", age:19, eyeColor:"blue"};
person = null;
document.getElementById("demo").innerHTML = typeof person;
</script>
</body>
</html>

运行结果：

Javascript

可以通过将值设置为 null 来清空对象。

object

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

您还可以通过将对象设置为 undefined 来清空对象：

示例代码：

let person = {firstName:"Bill", lastName:"Gates", age:19, eyeColor:"blue"};
person = undefined;   // 现在值和类型都是未定义

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript</h1>
<p>可以通过将值设置为 <b>undefined</b> 来清空对象。</p>
<p id="demo"></p>
<script>
let person = {firstName:"Bill", lastName:"Gates", age:19, eyeColor:"blue"};
person = undefined;
document.getElementById("demo").innerHTML = person;
</script>
</body>
</html>

运行结果：

Javascript

可以通过将值设置为 undefined 来清空对象。

undefined

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

undefined 与 null 的区别

undefined 和 null 值相等但类型不同：

typeof undefined           // undefined
typeof null                // object
null === undefined         // false
null == undefined          // true

完整实例：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript</h1>
<p>undefined 和 null 值相等但类型不同：</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
typeof undefined + "<br>" +
typeof null + "<br><br>" +
(null === undefined) + "<br>" +
(null == undefined);
</script>
</body>
</html>

运行结果：

Javascript

undefined 和 null 值相等但类型不同：

undefined
object

false
true

可以使用本站在线JavaScript测试工具测试上述代码运行效果：http://www.phpcodeweb.com/runjs.html

上一篇JavaScript Break 和 Continue 语句下一篇JavaScript 类型转换

JavaScript typeof 运算符

JavaScript typeof