JavaScript 教程

JS 教程 JS 简介 JS 如何使用 JS 输出 JS 语句 JS 语法 JS 注释 JS 变量 JS 运算符 JS 算法 JS 赋值 JS 数据类型 JS 函数 JS 对象 JS 事件 JS 字符串 JS 字符串方法 JS 数值 JS 数值方法 JS 数组 JS 数组方法 JS 数组排序 JS 数组迭代 JS 日期 JS 日期格式 JS 日期获取方法 JS 日期设置方法 JS 数学运算 JS 随机数 JS 布尔运算符 JS 比较运算符 JS 条件语句 JS Switch 语句 JS For 循环 JS While 循环 JS Break JS 类型转换 JS 位运算符 JS 正则表达式 JS 错误处理 JS 作用域 JS Hoisting JS 严格模式 JS this 关键词 JS Let 关键词 JS Const 关键词 JS 箭头函数 JS 类 JS 调试 JS 样式指南 JS 最佳实践 JS 常见错误 JS 性能优化 JS 保留关键词 JS 版本 JS ES5 JS ES6 JS JSON

JS 表单

JS Forms Forms API

JS 对象

Object 对象定义 Object 对象属性 Object 对象方法 Object Display Object 对象访问器 Object 对象构造器 Object 对象原型 Object ECMAScript 5

JS 函数

JS 函数定义 JS 函数参数 JS 函数调用 JS Call 函数 JS Apply 函数 JS 函数闭包

JS 类库

Class 类简介 Class 类继承 Class Static

JS 异步

JS 回调 JS 异步 JS Promises JS Async/Await

JS HTML DOM

DOM 简介 DOM 方法 DOM 文档 DOM 元素 DOM HTML DOM CSS DOM 动画 DOM 事件 DOM 事件监听 DOM 导航 DOM 节点 DOM 集合 DOM 节点列表

JS 浏览器 BOM

JS Window JS Screen JS Location JS History JS Navigator JS 弹出框 JS Timing JS Cookies

JS AJAX

AJAX 简介 AJAX XMLHttp AJAX 请求 AJAX 响应 AJAX XML 文件 AJAX PHP AJAX ASP AJAX 数据库 AJAX 应用程序 AJAX 实例

JS JSON

JSON 简介 JSON 语法 JSON vs XML JSON 数据类型 JSON 解析 JSON 字符串化 JSON 对象 JSON 数组 JSON PHP JSON HTML JSON JSONP

JS Web APIs

Web API 简介 Web History API Web Storage API Web Geolocation API

JS vs jQuery

jQuery 选择器 jQuery HTML jQuery CSS jQuery DOM

JS 实例

JS 实例 JS HTML DOM JS HTML 输入 JS HTML 对象 JS HTML 事件 JS Browser JS 编辑器 JS 练习 JS 测验

JS 参考手册

JS 对象 HTML DOM 对象



JavaScript 数据类型

JavaScript 数据类型

JavaScript 变量能够保存多种数据类型:数值、字符串值、数组、对象等等:

var length = 16;                               // Number
var lastName = "Johnson";                      // String
var x = {firstName:"John", lastName:"Doe"};    // Object

数据类型的概念

在编程过程中,数据类型是重要的概念。

为了能够操作变量,了解数据类型是很重要的。

如果没有数据类型,计算机就无法安全地解决这道题:

var x = 16 + "Volvo";

给 "Volvo" 加上 16 有意义吗?这么做会发生错误还是会产生一个结果?

JavaScript 会这样处理上面的例子:

var x = "16" + "Volvo";

当数值和字符串相加时,JavaScript 将把数值视作字符串。

实例

var x = 16 + "Volvo";
亲自试一试 »

实例

var x = "Volvo" + 16;
亲自试一试 »

JavaScript 从左向右计算表达式。不同的次序会产生不同的结果:

JavaScript:

var x = 16 + 4 + "Volvo";

结果:

20Volvo
亲自试一试 »

JavaScript:

var x = "Volvo" + 16 + 4;

结果:

Volvo164
亲自试一试 »

在第一个例子中,JavaScript 把 16 和 4 视作数值,直到遇见 "Volvo"。

在第二个例子中,由于第一个操作数是字符串,因此所有操作数都被视为字符串。



JavaScript 拥有动态类型

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

实例

var x;           // 现在 x 是 undefined
x = 5;           // 现在 x 是数值
x = "John";      // 现在 x 是字符串值
Try it yourself »

JavaScript 字符串值

字符串(或文本字符串)是一串字符(比如 "John Doe")。

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

实例

var carName1 = "Volvo XC60";   // 使用双引号
var carName2 = 'Volvo XC60';   // 使用单引号
Try it yourself »

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

实例

var answer1 = "It's alright";             // 双引号内的单引号
var answer2 = "He is called 'Johnny'";    // 双引号内的单引号
var answer3 = 'He is called "Johnny"';    // 单引号内的双引号
Try it yourself »

您将在本教程中学到更多有关字符串的知识。


JavaScript 数值

JavaScript 只有一种数值类型。

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

实例

var x1 = 34.00;     // 用小数写
var x2 = 34;        // 不带小数的写法
Try it yourself »

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

实例

var y = 123e5;      // 12300000
var z = 123e-5;     // 0.00123
Try it yourself »

您将在本教程中学到更多有关数值的知识。


JavaScript 布尔值

布尔值只有两个值:truefalse

实例

var x = 5;
var y = 5;
var z = 6;
(x == y)       // 返回 true
(x == z)       // 返回 false
亲自试一试 »

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

您将在本教程中学到更多有关条件测试的知识。


JavaScript 数组

JavaScript 数组用方括号书写。

数组的项目由逗号分隔。

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

实例

var cars = ["Saab", "Volvo", "BMW"];
亲自试一试 »

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

您将在本教程中学到更多有关数组的知识。


JavaScript 对象

JavaScript 对象用花括号 {} 来书写。

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

实例

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
亲自试一试 »

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

您将在本教程中学到更多有关对象的知识。


typeof 运算符

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

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

实例

typeof ""             // 返回 "string"
typeof "John"         // 返回 "string"
typeof "John Doe"     // 返回 "string"
亲自试一试 »

实例

typeof 0              // 返回 "number"
typeof 314            // 返回 "number"
typeof 3.14           // 返回 "number"
typeof (3)            // 返回 "number"
typeof (3 + 4)        // 返回 "number"
亲自试一试 »

Undefined

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

实例

var car;    // Value is undefined, type is undefined
亲自试一试 »

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

实例

car = undefined;    // 值未定义,类型未定义
亲自试一试 »

空值

空值与 undefined 不是一回事。

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

实例

var car = "";    // 值为 "",类型为 "string"
亲自试一试 »

Null

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

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

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

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

实例

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
person = null;    // 现在 value 为 null,但 type 仍然是一个 object
亲自试一试 »

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

实例

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
person = undefined;   // 现在值和类型都未定义
亲自试一试 »

Undefined 与 Null 的区别

Undefinednull 的值相等,但类型不相等:

typeof undefined           // undefined
typeof null                // object

null === undefined         // false
null == undefined          // true
亲自试一试 »

原始数据

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

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

  • string
  • number
  • boolean
  • undefined

实例

typeof "John"              // 返回 "string"
typeof 3.14                // 返回 "number"
typeof true                // 返回 "boolean"
typeof false               // 返回 "boolean"
typeof x                   // 返回 "undefined" (如果 x 没有值)
亲自试一试 »

复杂数据

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

  • function
  • object

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

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

实例

typeof {name:'John', age:34} // 返回 "object"
typeof [1,2,3,4]            // 返回 "object" (not "array", see note below)
typeof null                  // 返回 "object"
typeof function myFunc(){}   // 返回 "function"
亲自试一试 »

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


学习训练

练习题:

使用注释描述以下变量的正确数据类型:

var length = 16;            // 
var lastName = "Johnson";   // 
var x = {
  firstName: "John",
  lastName: "Doe"
};                          // 

开始练习