JavaScript 数据类型

JavaScript 是一种弱类型语言,在定义变量时不需要指定类型,一个变量可以存储任何类型的值。不过这并不等于 JavaScript 不区分数据类型,只不过在运算时,JavaScript 能自动转换数据类型。但是在特定条件下,还是需要用户了解它的数据类型,以及掌握显示转换数据类型的基本方法。


JavaScript 数据类型

JavaScript 变量能够保存多种数据类型:

  • 基本型:数值、字符串、布尔型。
  • 复杂型:数组、对象、函数。
  1. var length = 7; // 数字
  2. var lastName = "盖茨"; // 字符串
  3. var married = true; // 布尔型
  4. var cars = ["保时捷", "沃尔沃", "宝马"]; // 数组
  5. var x = {firstName:"Bill", lastName:"Gates"}; // 对象

JavaScript 拥有动态类型

JavaScript 拥有动态类型。这意味着相同变量可用作不同类型:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript 数据类型</h2>
  5. <p>JavaScript 拥有动态类型。这意味着相同变量可用于保存不同类型:</p>
  6. <p id="demo">
  7. <script>
  8. var x; // 现在 x 是 undefined
  9. var x = 7; // 现在 x 是数值
  10. var x = "比尔"; // 现在 x 是字符串值
  11. document.getElementById("demo").innerHTML = x;
  12. </script>
  13. </body>
  14. </html>

JavaScript 字符串值

字符串(或文本字符串)是一串字符(比如 "Bill Gates")。

字符串被引号包围。您可使用单引号或双引号:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript 字符串</h2>
  5. <p>字符串被引号包围。您可使用单引号或双引号:</p>
  6. <p id="demo">
  7. <script>
  8. var carName1 = "保时捷 911"; // 使用双引号
  9. var carName2 = '保时捷 911'; // 使用单引号
  10. document.getElementById("demo").innerHTML =
  11. carName1 + "<br>" +
  12. carName2;
  13. </script>
  14. </body>
  15. </html>

您可以在字符串内使用引号,只要这些引号与包围字符串的引号不匹配:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript 字符串</h2>
  5. <p>您可以在字符串内使用引号,只要这些引号与包围字符串的引号不匹配:</p>
  6. <p id="demo">
  7. <script>
  8. var answer1 = "这是对的"; // 双引号内的单引号
  9. var answer2 = "他叫比尔'"; // 双引号内的单引号
  10. var answer3 = '他叫比尔'; // 单引号内的双引号
  11. document.getElementById("demo").innerHTML =
  12. answer1 + "<br>" +
  13. answer2 + "<br>" +
  14. answer3;
  15. </script>
  16. </body>
  17. </html>

JavaScript 数值

JavaScript 只有一种数值类型。

写数值时用不用小数点均可:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript 数值</h2>
  5. <p>写数值时用不用小数点均可:</p>
  6. <p id="demo">
  7. <script>
  8. var x1 = 34.00;
  9. var x2 = 34;
  10. var x3 = 3.14;
  11. document.getElementById("demo").innerHTML =
  12. x1 + "<br>" + x2 + "<br>" + x3;
  13. </script>
  14. </body>
  15. </html>

超大或超小的数值可以用科学计数法来写:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript 数值</h2>
  5. <p>超大或超小的数值可以用科学计数法来写:</p>
  6. <p id="demo">
  7. <script>
  8. var y = 123e5;
  9. var z = 123e-5;
  10. document.getElementById("demo").innerHTML =
  11. y + "<br>" + z;
  12. </script>
  13. </body>
  14. </html>

JavaScript 布尔值

布尔值只有两个值:true 或 false。

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript Booleans</h2>
  5. <p>布尔值只有两个值:true 或 false。</p>
  6. <p id="demo">
  7. <script>
  8. var x = 7;
  9. var y = 7;
  10. var z = 8;
  11. document.getElementById("demo").innerHTML =
  12. (x == y) + "<br>" + (x == z);
  13. </script>
  14. </body>
  15. </html>

布尔值经常用在条件测试中。


JavaScript 数组

JavaScript 数组用方括号书写。

数组的项目由逗号分隔。

下面的代码声明(创建)了名为 cars 的数组,包含三个项目(汽车品牌):

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript 数组</h2>
  5. <p>数组索引基于零,这意味着第一个项目是 [0],第二个项目是 [1],以此类推。</p>
  6. <p id="demo">
  7. <script>
  8. var cars = ["保时捷", "沃尔沃", "宝马"];
  9. document.getElementById("demo").innerHTML = cars[0];
  10. </script>
  11. </body>
  12. </html>

数组索引基于零,这意味着第一个项目是 [0],第二个项目是 [1],以此类推。


JavaScript 对象

JavaScript 对象用花括号来书写。

对象属性是 name:value 对,由逗号分隔。

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript 对象</h2>
  5. <p id="demo">
  6. <script>
  7. var person = {
  8. firstName : "比尔",
  9. lastName : "盖茨",
  10. age : 62,
  11. eyeColor : "蓝色"
  12. };
  13. document.getElementById("demo").innerHTML =
  14. person.firstName + " 是 " + person.age + " 岁。";
  15. </script>
  16. </body>
  17. </html>

上例中的对象(person)有四个属性:firstName、lastName、age 以及 eyeColor。


typeof 运算符

您可使用 JavaScript 的 typeof 来确定 JavaScript 变量的类型:

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

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript typeof</h2>
  5. <p>typeof 运算符返回变量或表达式的类型:</p>
  6. <p id="demo">
  7. <script>
  8. document.getElementById("demo").innerHTML =
  9. typeof "" + "<br>" +
  10. typeof "比尔" + "<br>" +
  11. typeof "比尔盖茨";
  12. </script>
  13. </body>
  14. </html>

typeof 运算符对数组返回 "object",因为在 JavaScript 中数组属于对象。

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript typeof</h2>
  5. <p>typeof 运算符返回变量或表达式的类型:</p>
  6. <p id="demo">
  7. <script>
  8. document.getElementById("demo").innerHTML =
  9. typeof 0 + "<br>" +
  10. typeof 314 + "<br>" +
  11. typeof 3.14 + "<br>" +
  12. typeof (3) + "<br>" +
  13. typeof (3 + 4);
  14. </script>
  15. </body>
  16. </html>

Undefined

在 JavaScript 中,没有值的变量,其值是 undefined。typeof 也返回 undefined。

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript 数据类型</h2>
  5. <p>无值变量的值和数据类型是 <b>undefined</b></p>
  6. <p id="demo">
  7. <script>
  8. var car;
  9. document.getElementById("demo").innerHTML =
  10. car + "<br>" + typeof car;
  11. </script>
  12. </body>
  13. </html>

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

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript 数据类型</h2>
  5. <p>任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined。</p>
  6. <p id="demo">
  7. <script>
  8. var car = "保时捷";
  9. car = undefined;
  10. document.getElementById("demo").innerHTML =
  11. car + "<br>" + typeof car;
  12. </script>
  13. </body>
  14. </html>

空值

空值与 undefined 不是一回事。

空的字符串变量既有值也有类型。

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript 数据类型</h2>
  5. <p>空的字符串变量既有值也有类型。</p>
  6. <p id="demo">
  7. <script>
  8. var car = "";
  9. document.getElementById("demo").innerHTML =
  10. "其值是:" +
  11. car + "<br>" +
  12. "类型是:" + typeof car;
  13. </script>
  14. </body>
  15. </html>

Null

在 JavaScript 中,null 是 "nothing"。它被看做不存在的事物。

不幸的是,在 JavaScript 中,null 的数据类型是对象。

您可以把 null 在 JavaScript 中是对象理解为一个 bug。它本应是 null。

您可以通过设置值为 null 清空对象:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript 数据类型</h2>
  5. <p>您可以通过设置值为 null 来清空对象:</p>
  6. <p id="demo">
  7. <script>
  8. var person = {firstName:"比尔", lastName:"盖茨", age:62, eyeColor:"蓝色"};
  9. person = null;
  10. document.getElementById("demo").innerHTML = typeof person;
  11. </script>
  12. </body>
  13. </html>

您也可以通过设置值为 undefined 清空对象:

实例
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript 数据类型</h2>
  5. <p>任何变量均可通过设置值为 undefined 进行清空。其类型也将是 undefined。</p>
  6. <p id="demo">
  7. <script>
  8. var person = {firstName:"比尔", lastName:"盖茨", age:62, eyeColor:"蓝色"};
  9. person = undefined;
  10. document.getElementById("demo").innerHTML = person;
  11. </script>
  12. </body>
  13. </html>

Undefined 与 Null 的区别

Undefined 与 null 的值相等,但类型不相等:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript 数据类型</h2>
  5. <p>Undefined 与 null 的值相等,但类型不相等:</p>
  6. <p id="demo">
  7. <script>
  8. document.getElementById("demo").innerHTML =
  9. typeof undefined + "<br>" +
  10. typeof null + "<br><br>" +
  11. (null === undefined) + "<br>" +
  12. (null == undefined);
  13. </script>
  14. </body>
  15. </html>

原始数据

原始数据值是一种没有额外属性和方法的单一简单数据值。

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

  • string
  • number
  • boolean
  • undefined
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript typeof</h2>
  5. <p>typeof 运算符返回变量或表达式的类型:</p>
  6. <p id="demo">
  7. <script>
  8. document.getElementById("demo").innerHTML =
  9. typeof "比尔" + "<br>" +
  10. typeof 3.14 + "<br>" +
  11. typeof true + "<br>" +
  12. typeof false + "<br>" +
  13. typeof x;
  14. </script>
  15. </body>
  16. </html>

复杂数据

typeof 运算符可返回以下两种类型之一:

  • function
  • object

typeof 运算符把对象、数组或 null 返回 object。

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

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript typeof</h2>
  5. <p>typeof 运算符把对象、数组或 null 返回 object。</p>
  6. <p>typeof 运算符不会把函数返回 object。</p>
  7. <p id="demo">
  8. <script>
  9. document.getElementById("demo").innerHTML =
  10. typeof {name:'比尔', age:62} + "<br>" +
  11. typeof [1,2,3,4] + "<br>" +
  12. typeof null + "<br>" +
  13. typeof function myFunc(){};
  14. </script>
  15. </body>
  16. </html>

typeof 运算符把数组返回为 "object",因为在 JavaScript 中数组即对象。