Javascript笔记

JavaScript的学习

JavaScript 关键词

JavaScript 语句常常通过某个关键词来标识需要执行的 JavaScript 动作。

下面的表格列出了一部分将在教程中学到的关键词：

关键词	描述
break	终止 switch 或循环。
continue	跳出循环并在顶端开始。
debugger	停止执行 JavaScript，并调用调试函数（如果可用）。
do … while	执行语句块，并在条件为真时重复代码块。
for	标记需被执行的语句块，只要条件为真。
function	声明函数。
if … else	标记需被执行的语句块，根据某个条件。
return	退出函数。
switch	标记需被执行的语句块，根据不同的情况。
try … catch	对语句块实现错误处理。
var	声明变量。

**注释：**JavaScript 关键词指的是保留的单词。保留词无法用作变量名。

JavaScript *语法*是一套规则，它定义了 JavaScript 的语言结构。

var x, y;	// 如何声明变量
x = 7; y = 8;	// 如何赋值
z = x + y;	// 如何计算值

---

JavaScript 值

JavaScript 语句定义两种类型的值：混合值和变量值。

混合值被称为字面量（literal）。变量值被称为变量。

---

JavaScript 字面量

书写混合值最重要的规则是：

写数值有无小数点均可：

15.90
10011

字符串是文本，由双引号或单引号包围：

"Bill Gates"
'Bill Gates' 

JavaScript 变量

在编程语言中，变量用于存储数据值。

JavaScript 使用 var 关键词来声明变量。

= 号用于为变量赋值。

在本例中，x 被定义为变量。然后，x 被赋的值是 7：

var x;
x = 7;

JavaScript 运算符

JavaScript 使用算数运算符（+ - * /）来计算值：

(7 + 8) * 10

JavaScript 使用赋值运算符（=）向变量赋值：

var x, y;
var x = 7;
var y = 8;

JavaScript 表达式

表达式是值、变量和运算符的组合，计算结果是值。

6 * 10

表达式也可包含变量值：

x * 10

值可以是多种类型，比如数值和字符串。

例如，“Bill” + " " + “Gates”，计算为 “Bill Gates”：

"Bill" + " " + "Gates"

JavaScript 关键词

JavaScript 关键词用于标识被执行的动作。

var 关键词告知浏览器创建新的变量：

var x = 7 + 8;var y = x * 10; 

JavaScript 注释

并非所有 JavaScript 语句都被“执行”。

双斜杠 // 或 /* 与 */ 之间的代码被视为注释。

注释会被忽略，不会被执行：

var x = 7;   // 会执行// var x = 8;   不会执行

JavaScript 标识符

标识符是名称。

在 JavaScript 中，标识符用于命名变量（以及关键词、函数和标签）。

在大多数编程语言中，合法名称的规则大多相同。

在 JavaScript 中，首字符必须是字母、下划线（-）或美元符号（$）。

连串的字符可以是字母、数字、下划线或美元符号。

**提示：**数值不可以作为首字符。这样，JavaScript 就能轻松区分标识符和数值。

JavaScript 对大小写敏感

所有 JavaScript 标识符对大小写敏感。

变量 lastName 和 lastname，是两个不同的变量。

lastName = "Gates";lastname = "Jobs"; 

JavaScript 不会把 VAR 或 Var 译作关键词 var。

JavaScript 与驼峰式大小写

历史上，程序员曾使用三种把多个单词连接为一个变量名的方法：

连字符：

first-name, last-name, master-card, inter-city.

**注释：**JavaScript 中不能使用连字符。它是为减法预留的。

下划线：

first_name, last_name, master_card, inter_city.

驼峰式大小写（Camel Case）：

FirstName, LastName, MasterCard, InterCity.

JavaScript 程序员倾向于使用以小写字母开头的驼峰大小写：

firstName, lastName, masterCard, interCity

JavaScript 字符集

JavaScript 使用 Unicode 字符集。

Unicode 覆盖世界上几乎所有的字符、标点和符号。

JavaScript 注释

JavaScript 注释用于解释 JavaScript 代码，增强其可读性。

JavaScript 注释也可以用于在测试替代代码时阻止执行。

单行注释

单行注释以 // 开头。

任何位于 // 与行末之间的文本都会被 JavaScript 忽略（不会执行）。

本例在每条代码行之前使用单行注释：

实例

// 改变标题： document.getElementById("myH").innerHTML = "我的第一张页面";// 改变段落： document.getElementById("myP").innerHTML = "我的第一个段落。";

本例在每行结尾处使用了单行注释来解释代码：

实例

var x = 5;      // 声明 x，为其赋值 5var y = x + 2;  // 声明 y，为其赋值 x + 2

多行注释

多行注释以 /* 开头，以 */ 结尾。

任何位于 /* 和 */ 之间的文本都会被 JavaScript 忽略。

本例使用多行注释（注释块）来解释代码：

实例

/* 下面的代码会改变 网页中 id = "myH" 的标题 以及 id = "myP" 的段落：*/document.getElementById("myH").innerHTML = "我的第一张页面";document.getElementById("myP").innerHTML = "我的第一个段落。"; 

**注释：**使用单行注释最为常见。

**提示：**注释块常用于官方声明。

使用注释来阻止执行

使用注释来防止代码执行很适合代码测试。

在代码行之前添加 // 会把可执行的代码行更改为注释。

本例使用 // 来阻止代码行的执行：

实例

//document.getElementById("myH").innerHTML = "我的第一张页面";document.getElementById("myP").innerHTML = "我的第一个段落。"; 

本例使用注释块来阻止多行代码的执行：

实例

/*document.getElementById("myH").innerHTML = "我的第一张页面";document.getElementById("myP").innerHTML = "我的第一个段落。";*/

JavaScript 变量

JavaScript 变量

JavaScript 变量是存储数据值的容器。

在本例中，x、y 和 z 是变量：

实例

var x = 7;var y = 8;var z = x + y; 

从上例中，您可获得：

• x 存储值 7
• y 存储值 8
• z 存储值 15

类似代数

在本例中，price1、price2 以及 total 是变量：

实例

var price1 = 7;var price2 = 8;var price3 = 12;var total = price1 + price2 + price3;

在编程中，类似代数，我们使用变量（比如 price1）来存放值。

在编程中，类似代数，我们在表达式中使用变量（total = price1 + price2）。

从上例中，您可以算出 total 的值是 15。

**提示：**JavaScript 变量是存储数据值的容器。

JavaScript 标识符

所有 JavaScript 变量必须以唯一的名称的标识。

这些唯一的名称称为标识符。

标识符可以是短名称（比如 x 和 y），或者更具描述性的名称（age、sum、totalVolume）。

构造变量名称（唯一标识符）的通用规则是：

• 名称可包含字母、数字、下划线和美元符号
• 名称必须以字母开头
• 名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）
• 名称对大小写敏感（y 和 Y 是不同的变量）
• 保留字（比如 JavaScript 的关键词）无法用作变量名称

**提示：**JavaScript 标识符对大小写敏感。

赋值运算符

在 JavaScript 中，等号（=）是赋值运算符，而不是“等于”运算符。

这一点与代数不同。下面的代码在代数中是不合理的：

x = x + 5

然而在 JavaScript 中，它非常合理：把 x + 5 的值赋给 x。

（计算 x + 5 的值并把结果放入 x 中。x 的值递增 5。）

**注释：**JavaScript 中的“等于”运算符是 ==。

JavaScript 数据类型

JavaScript 变量可存放数值，比如 100，以及文本值，比如 “Bill Gates”。

在编程中，文本值被称为字符串。

JavaScript 可处理多种数据类型，但是现在，我们只关注数值和字符串值。

字符串被包围在双引号或单引号中。数值不用引号。

如果把数值放在引号中，会被视作文本字符串。

实例

var pi = 3.14;var person = "Bill Gates";var answer = 'How are you!';

声明（创建） JavaScript 变量

在 JavaScript 中创建变量被称为“声明”变量。

您可以通过 var 关键词来声明 JavaScript 变量：

var carName;

声明之后，变量是没有值的。（技术上，它的值是 undefined。）

如需赋值给变量，请使用等号：

carName = "porsche";

您可以在声明变量时向它赋值：

var carName = "porsche";

在上面的例子中，我们创建了名为 carName 的变量，并向其赋值 “porsche”。

然后，我们在 id=“demo” 的 HTML 段落中“输出”该值：

实例

<p id="demo"></p><script>var carName = "porsche";document.getElementById("demo").innerHTML = carName; </script>

**提示：**在脚本的开头声明所有变量是个好习惯！

一条语句，多个变量

您可以在一条语句中声明许多变量。

以 var 作为语句的开头，并以逗号分隔变量：

var person = "Bill Gates", carName = "porsche", price = 15000;

声明可横跨多行：

var person = "Bill Gates",carName = "porsche",price = 15000;

Value = undefined

在计算机程序中，被声明的变量经常是不带值的。值可以是需被计算的内容，或是之后被提供的数据，比如数据输入。

不带有值的变量，它的值将是 undefined。

变量 carName 在这条语句执行后的值是 undefined：

实例

var carName;

重复声明 JavaScript 变量

如果再次声明某个 JavaScript 变量，将不会丢它的值。

在这两条语句执行后，变量 carName 的值仍然是 “porsche”：

实例

var carName = "porsche";var carName; 

JavaScript 算术

与代数类似，您能够通过 JavaScript 变量进行算术运算，使用 = 和 + 之类的运算符：

实例

var x = 3 + 5 + 8;

字符串也可以使用加号，但是字符串将被级联：

实例

var x = "Bill" + " " + "Gates";

还可以试试这个：

实例

var x = "8" + 3 + 5;

**提示：**如果把要给数值放入引号中，其余数值会被视作字符串并被级联。

现在试试这个：

实例

var x = 3 + 5 + "8";

JavaScript Let

ECMAScript 2015

ES2015 引入了两个重要的 JavaScript 新关键词：let 和 const。

这两个关键字在 JavaScript 中提供了块作用域（Block Scope）变量（和常量）。

在 ES2015 之前，JavaScript 只有两种类型的作用域：全局作用域和函数作用域。

全局作用域

全局（在函数之外）声明的变量拥有全局作用域。

实例

var carName = "porsche";// 此处的代码可以使用 carNamefunction myFunction() {  // 此处的代码也可以使用 carName}

全局变量可以在 JavaScript 程序中的任何位置访问。

函数作用域

局部（函数内）声明的变量拥有函数作用域。

实例

// 此处的代码不可以使用 carNamefunction myFunction() {  var carName = "porsche";  // code here CAN use carName}// 此处的代码不可以使用 carName

局部变量只能在它们被声明的函数内访问。

JavaScript 块作用域

通过 var 关键词声明的变量没有块作用域。

在块 {} 内声明的变量可以从块之外进行访问。

实例

{   var x = 10; }// 此处可以使用 x

在 ES2015 之前，JavaScript 是没有块作用域的。

可以使用 let 关键词声明拥有块作用域的变量。

在块 {} 内声明的变量无法从块外访问：

实例

{   let x = 10;}// 此处不可以使用 x

重新声明变量

使用 var 关键字重新声明变量会带来问题。

在块中重新声明变量也将重新声明块外的变量：

实例

var x = 10;// 此处 x 为 10{   var x = 6;  // 此处 x 为 6}// 此处 x 为 6

使用 let 关键字重新声明变量可以解决这个问题。

在块中重新声明变量不会重新声明块外的变量：

实例

var x = 10;// 此处 x 为 10{   let x = 6;  // 此处 x 为 6}// 此处 x 为 10

浏览器支持

Internet Explorer 11 或更早的版本不完全支持 let 关键词。

下表定义了第一个完全支持 let 关键词的浏览器版本：

Chrome 49	IE / Edge 12	Firefox 44	Safari 11	Opera 36
2016 年 3 月	2015 年 7 月	2015 年 1 月	2017 年 9 月	2016 年 3 月

循环作用域

在循环中使用 var：

实例

var i = 7;for (var i = 0; i < 10; i++) {  // 一些语句}// 此处，i 为 10

在循环中使用 let：

实例

let i = 7;for (let i = 0; i < 10; i++) {  // 一些语句}// 此处 i 为 7

在第一个例子中，在循环中使用的变量使用 var 重新声明了循环之外的变量。

在第二个例子中，在循环中使用的变量使用 let 并没有重新声明循环外的变量。

如果在循环中用 let 声明了变量 i，那么只有在循环内，变量 i 才是可见的。

函数作用域

在函数内声明变量时，使用 var 和 let 很相似。

它们都有函数作用域：

function myFunction() {  var carName = "porsche";   // 函数作用域}function myFunction() {  let carName = "porsche";   // 函数作用域}

全局作用域

如果在块外声明声明，那么 var 和 let 也很相似。

它们都拥有全局作用域：

var x = 10;       // 全局作用域let y = 6;       // 全局作用域

HTML 中的全局变量

使用 JavaScript 的情况下，全局作用域是 JavaScript 环境。

在 HTML 中，全局作用域是 window 对象。

通过 var 关键词定义的全局变量属于 window 对象：

实例

var carName = "porsche";// 此处的代码可使用 window.carName

通过 let 关键词定义的全局变量不属于 window 对象：

实例

let carName = "porsche";// 此处的代码不可使用 window.carName

重新声明

允许在程序的任何位置使用 var 重新声明 JavaScript 变量：

实例

var x = 10;// 现在，x 为 10 var x = 6;// 现在，x 为 6

在相同的作用域，或在相同的块中，通过 let 重新声明一个 var 变量是不允许的：

实例

var x = 10;       // 允许let x = 6;       // 不允许{  var x = 10;   // 允许  let x = 6;   // 不允许}

在相同的作用域，或在相同的块中，通过 let 重新声明一个 let 变量是不允许的：

实例

let x = 10;       // 允许let x = 6;       // 不允许{  let x = 10;   // 允许  let x = 6;   // 不允许}

在不同的作用域或块中，通过 let 重新声明变量是允许的：

实例

let x = 6;       // 允许{  let x = 7;   // 允许}{  let x = 8;   // 允许}

提升

通过 var 声明的变量会提升到顶端。如果您不了解什么是提升（Hoisting），请学习我们的提升这一章。

您可以在声明变量之前就使用它：

实例

// 在此处，您可以使用 carNamevar carName;

通过 let 定义的变量不会被提升到顶端。

在声明 let 变量之前就使用它会导致 ReferenceError。

变量从块的开头一直处于“暂时死区”，直到声明为止：

实例

// 在此处，您不可以使用 carNamelet carName;

JavaScript Const

ECMAScript 2015

ES2015 引入了两个重要的 JavaScript 新关键词：let 和 const。

通过 const 定义的变量与 let 变量类似，但不能重新赋值：

实例

const PI = 3.141592653589793;PI = 3.14;      // 会出错PI = PI + 10;   // 也会出错

块作用域

在块作用域内使用 const 声明的变量与 let 变量相似。

在本例中，x 在块中声明，不同于在块之外声明的 x：

实例

var x = 10;// 此处，x 为 10{   const x = 6;  // 此处，x 为 6}// 此处，x 为 10

在声明时赋值

JavaScript const 变量必须在声明时赋值：

不正确

const PI;PI = 3.14159265359;

正确

const PI = 3.14159265359;

不是真正的常数

关键字 const 有一定的误导性。

它没有定义常量值。它定义了对值的常量引用。

因此，我们不能更改常量原始值，但我们可以更改常量对象的属性。

原始值

如果我们将一个原始值赋给常量，我们就不能改变原始值：

实例

const PI = 3.141592653589793;PI = 3.14;      // 会出错PI = PI + 10;   // 也会出错

常量对象可以更改

您可以更改常量对象的属性：

实例

// 您可以创建 const 对象：const car = {type:"porsche", model:"911", color:"Black"};// 您可以更改属性：car.color = "White";// 您可以添加属性：car.owner = "Bill";

但是您无法重新为常量对象赋值：

实例

const car = {type:"porsche", model:"911", color:"Black"};car = {type:"Volvo", model:"XC60", color:"White"};    // ERROR

常量数组可以更改

您可以更改常量数组的元素：

实例

// 您可以创建常量数组：const cars = ["Audi", "BMW", "porsche"];// 您可以更改元素：cars[0] = "Honda";// 您可以添加元素：cars.push("Volvo");

但是您无法重新为常量数组赋值：

实例

const cars = ["Audi", "BMW", "porsche"];cars = ["Honda", "Toyota", "Volvo"];    // ERROR

浏览器支持

Internet Explorer 10 或更早版本不支持 const 关键词。

下表定义了第一个完全支持 const 关键词的浏览器版本：

Chrome 49	IE / Edge 11	Firefox 36	Safari 10	Opera 36
2016 年 3 月	2013 年 10 月	2015 年 2 月	2016 年 9 月	2016 年 3 月

重新声明

在程序中的任何位置都允许重新声明 JavaScript var 变量：

实例

var x = 2;    //  允许var x = 3;    //  允许x = 4;        //  允许

在同一作用域或块中，不允许将已有的 var 或 let 变量重新声明或重新赋值给 const：

实例

var x = 2;         // 允许const x = 2;       // 不允许{  let x = 2;     // 允许  const x = 2;   // 不允许}

在同一作用域或块中，为已有的 const 变量重新声明声明或赋值是不允许的：

实例

const x = 2;       // 允许const x = 3;       // 不允许x = 3;             // 不允许var x = 3;         // 不允许let x = 3;         // 不允许{  const x = 2;   // 允许  const x = 3;   // 不允许  x = 3;         // 不允许  var x = 3;     // 不允许  let x = 3;     // 不允许}

在另外的作用域或块中重新声明 const 是允许的：

实例

const x = 2;       // 允许{  const x = 3;   // 允许}{  const x = 4;   // 允许}

提升

通过 var 定义的变量会被提升到顶端。如果您不了解什么是提升（Hoisting），请学习提升这一章。

您可以在声明 var 变量之前就使用它：

实例

carName = "Volvo";    // 您可以在此处使用 carNamevar carName;

通过 const 定义的变量不会被提升到顶端。

const 变量不能在声明之前使用：

实例

carName = "Volvo";    // 您不可以在此处使用 carNameconst carName = "Volvo";

JavaScript 运算符

JavaScript 运算符

实例

向变量赋值，并把它们相加：

var x = 7;		// 向 x 赋值 5var y = 8;		// 向 y 赋值 2var z = x + y;		// 向 z (x + y) 赋值 7

赋值运算符（=）把值赋给变量。

赋值

var x = 15;

加法运算符（+）对数字相加：

加法

var x = 7;var y = 8;var z = x + y;

乘法运算符（*）对数字相乘：

乘法

var x = 7;var y = 8;var z = x * y; 

JavaScript 算数运算符

算数运算符用于对数字执行算数运算：

运算符	描述
+	加法
-	减法
*	乘法
/	除法
%	取模（余数）
++	递加
–	递减

注释：JS 算数这一章对算数运算符进行了完整描述。

JavaScript 赋值运算符

赋值运算符向 JavaScript 变量赋值。

运算符	例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y

加法赋值运算符（+=）向变量添加一个值。

赋值

var x = 7;x += 8; 

注释：JS 赋值这一章中完整描述了赋值运算符。

JavaScript 字符串运算符

+ 运算符也可用于对字符串进行相加（concatenate，级联）。

实例

txt1 = "Bill";txt2 = "Gates";txt3 = txt1 + " " + txt2; 

txt3 的结果将是：

Bill Gates

+= 赋值运算符也可用于相加（级联）字符串：

实例

txt1 = "Hello ";txt1 += "Kitty!"; 

txt1 的结果将是：

Hello Kitty!

**提示：**在用于字符串时，+ 运算符被称为级联运算符。

字符串和数字的相加

相加两个数字，将返回和，但对一个数字和一个字符串相加将返回一个字符串：

实例

x = 7 + 8;y = "7" + 8;z = "Hello" + 7;

x、y 和 z 的结果将是：

1578Hello7

**提示：**如果您对数字和字符串相加，结果将是字符串！

JavaScript 比较运算符

运算符	描述
==	等于
===	等值等型
!=	不相等
!==	不等值或不等型
>	大于
<	小于
>=	大于或等于
<=	小于或等于
?	三元运算符

注释：JS 比较这一章中完整描述了比较运算符。

JavaScript 逻辑运算符

运算符	描述
&&	逻辑与
||	逻辑或
!	逻辑非

注释：JS 比较这一章中完整描述了逻辑运算符。

JavaScript 类型运算符

运算符	描述
typeof	返回变量的类型。
instanceof	返回 true，如果对象是对象类型的实例。

注释：JS 类型转换这一章完整描述了类型运算符。

JavaScript 位运算符

位运算符处理 32 位数。

该运算中的任何数值运算数都会被转换为 32 位的数。结果会被转换回 JavaScript 数。

运算符	描述	例子	等同于	结果	十进制
&	与	5 & 1	0101 & 0001	0001	1
|	或	5 | 1	0101 | 0001	0101	5
~	非	~ 5	~0101	1010	10
^	异或	5 ^ 1	0101 ^ 0001	0100	4
<<	零填充左位移	5 << 1	0101 << 1	1010	10
>>	有符号右位移	5 >> 1	0101 >> 1	0010	2
>>>	零填充右位移	5 >>> 1	0101 >>> 1	0010	2

上例使用 4 位无符号的例子。但是 JavaScript 使用 32 位有符号数。

因此，在 JavaScript 中，~ 5 不会返回 10，而是返回 -6。

~00000000000000000000000000000101 将返回 11111111111111111111111111111010。

**注释：**我们将在 JS 位运算这一章为您详解位运算符。

课外书

如需更多有关 JavaScript 运算符的知识，请阅读 JavaScript 高级教程中的相关内容：

• ECMAScript 一元运算符

  一元运算符只有一个参数，即要操作的对象或值。本节讲解 ECMAScript 中最简单的运算符 - 一元运算符。

• ECMAScript 位运算符

  位运算符是在数字底层进行操作的。本节深入讲解了有关整数的知识，并介绍了 ECMAScript 的各种位运算符。

• ECMAScript Boolean 运算符

  Boolean 运算符非常重要。本节深入讲解三种 Boolean 运算符：NOT、AND 和 OR。

• ECMAScript 乘性运算符

  本节讲解 ECMAScript 的乘性运算符：乘法、除法、取模运算符，以及它们的特殊行为。

• ECMAScript 加性运算符

  本节讲解 ECMAScript 的加性运算符：加法、减法运算符，以及它们的特殊行为。

• ECMAScript 关系运算符

  关系运算符执行的是比较运算。本节讲解关系运算符的常规比较方式，以及如何比较字符串与数字。

• ECMAScript 等性运算符

  等性运算符用于判断变量是否相等。ECMAScript 提供两套等性运算符：等号和非等号，以及全等号和非全等号。

• ECMAScript 条件运算符

  本节讲解 ECMAScript 中的条件运算符。

• ECMAScript 赋值运算符

  本节讲解 ECMAScript 中的赋值运算符。

• ECMAScript 逗号运算符符

  本节讲解 ECMAScript 中的逗号运算符。

JavaScript 算数

处理数值的典型情景是算数。

JavaScript 算数运算符

算术运算符对数值（文字或变量）执行算术运算。

运算符	描述
+	加法
-	减法
*	乘法
**	幂（ES2016）
/	除法
%	系数
++	递增
–	递减

算数运算符

典型的算术运算会操作两个数值。

这两个数可以是字面量：

实例

var x = 7 + 8;

或变量：

实例

var x = a + b;

或表达式：

实例

var x = (7 + 8) * a;

运算符和操作数

在算术运算中，数被称为操作数。

（两个操作数之间执行的）运算由运算符定义。

操作数	运算符	操作数
7	+	8

加法

加法运算符（+）加数：

var x = 7;var y = 8;var z = x + y; 

减法

减法运算符（-）减数。

var x = 7;var y = 8;var z = x - y; 

乘法

乘法运算符（*）乘数。

var x = 7;var y = 8;var z = x * y; 

除法

除法运算符（/）除数。

var x = 7;var y = 2;var z = x / y; 

系数

系数运算符（%）返回除法的余数。

var x = 7;var y = 2;var z = x % y; 

**注释：**在算术中，两个整数的除法产生商和余数。

**注释：**在数学中，模运算的结果是算术除法的余数。

递增

递增运算符（++）对数值进行递增。

var x = 7;x++;var z = x;

递减

递减运算符（–）对数值进行递减。

var x = 7;x--;var z = x; 

幂

取幂运算符（**）将第一个操作数提升到第二个操作数的幂。

实例

var x = 5;var z = x ** 2;          // 结果是 25

x ** y 产生的结果与 Math.pow(x,y) 相同:

实例

var x = 5;var z = Math.pow(x,2);   // 结果是 25

运算符优先级

运算符优先级（Operator precedence）描述了在算术表达式中所执行操作的顺序。

实例

var x = 200 + 50 * 2;

上例的结果是 250 * 2 还是 200 + 100 呢？

是加法还是乘法优先呢？

在传统的学校数学中，乘法是优先的。

乘法（）和除法（%）比加法（+）和减法（-）拥有更高的优先级*。

同时，（就像在学校的数学中那样）能够通过使用括号来改变优先级：

实例

var x = (200 + 50) * 2;

当使用括号时，括号中的运算符会首先被计算。

当多个运算拥有相同的优先级时（比如加法和减法），对它们的计算是从左向右的：

实例

var x = 200 + 50 - 2;

JavaScript 运算符优先级值

值	运算符	描述	实例
20	( )	表达式分组	(3 + 4)
19	.	成员	person.name
19	[]	成员	person[“name”]
19	()	函数调用	myFunction()
19	new	创建	new Date()
17	++	后缀递增	i++
17	–	后缀递减	i–
16	++	前缀递增	++i
16	–	前缀递减	–i
16	!	逻辑否	!(x==y)
16	typeof	类型	typeof x
15	******	求幂 (ES7)	10 ** 2
14	*	乘	10 * 5
14	/	除	10 / 5
14	%	模数除法	10 % 5
13	+	加	10 + 5
13	-	减	10 - 5
12	<<	左位移	x << 2
12	>>	右位移	x >> 2
12	>>>	右位移（无符号）	x >>> 2
11	<	小于	x < y
11	<=	小于或等于	x <= y
11	>	大于	x > y
11	>=	大于或等于	x >= y
11	in	对象中的属性	"PI" in Math
11	instanceof	对象的实例	instanceof Array
10	==	相等	x == y
10	===	严格相等	x === y
10	!=	不相等	x != y
10	!==	严格不相等	x !== y
9	&	按位与	x & y
8	^	按位 XOR	x ^ y
7	|	按位或	x | y
6	&&	逻辑与	x && y
5	||	逻辑否	x || y
4	? :	条件	? “Yes” : “No”
3	=	赋值	x = y
3	+=	赋值	x += y
3	-=	赋值	x -= y
3	*=	赋值	x *= y
3	%=	赋值	x %= y
3	<<=	赋值	x <<= y
3	>>=	赋值	x >>= y
3	>>>=	赋值	x >>>= y
3	&=	赋值	x &= y
3	^=	赋值	x ^= y
3	|=	赋值	x |= y
2	yield	暂停函数	yield x
1	,	逗号	7 , 8

**注意：**加粗指示实验性或建议性的技术（ECMASScript 2016 或 ES7）

**提示：**括号中的表达式会在值在表达式的其余部分中被使用之前进行完全计算。

JavaScript 赋值

JavaScript 赋值运算符

赋值运算符向 JavaScript 变量赋值。

运算符	例子	等同于
=	x = y	x = y
+=	x += y	x = x + y
-=	x -= y	x = x - y
*=	x *= y	x = x * y
/=	x /= y	x = x / y
%=	x %= y	x = x % y
<<=	x <<= y	x = x << y
>>=	x >>= y	x = x >> y
>>>=	x >>>= y	x = x >>> y
&=	x &= y	x = x & y
^=	x ^= y	x = x ^ y
|=	x |= y	x = x | y
**=	x **= y	x = x ** y

**提示：****= 运算符属于 ECMAScript 2016 proposal (ES7) 的实验部分。它的跨浏览器表现并不稳定。请勿使用。

赋值实例

= 赋值运算符向变量赋值。

赋值

var x = 7;

+= 赋值运算符向变量添加值。

赋值

var x = 7;x += 8; 

-= 赋值运算符从变量中减去一个值。

赋值

var x = 7;x -= 8; 

*= 赋值运算符相乘变量。

赋值

var x = 7;x *= 8; 

/= 赋值运算符对变量相除。

赋值

var x = 7;x /= 8; 

%= 赋值运算符把余数赋值给变量。

赋值

var x = 7;x %= 8; 

JavaScript 数据类型

字符串值，数值，布尔值，数组，对象。

JavaScript 数据类型

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

var length = 7;                             // 数字var lastName = "Gates";                      // 字符串var cars = ["Porsche", "Volvo", "BMW"];         // 数组var x = {firstName:"Bill", lastName:"Gates"};    // 对象

数据类型的概念

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

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

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

var x = 911 + "Porsche";

给 “Volvo” 加上 911 有意义吗？这么做会发生错误还是会产生一个结果？

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

var x = "911" + "Porsche";

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

实例

var x = 911 + "Porsche";

实例

var x = "Porsche" + 911;

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

JavaScript：

var x = 911 + 7 + "Porsche";

结果：

918Porsche

JavaScript：

var x = "Porsche" + 911 + 7;

结果：

Porsche9117

在第一个例子中，JavaScript 把 911 和 7 视作数值，直到遇见 “Porsche”。

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

JavaScript 拥有动态类型

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

实例

var x;               // 现在 x 是 undefinedvar x = 7;           // 现在 x 是数值var x = "Bill";      // 现在 x 是字符串值

JavaScript 字符串值

字符串（或文本字符串）是一串字符（比如 “Bill Gates”）。

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

实例

var carName = "Porsche 911";   // 使用双引号var carName = 'Porsche 911';   // 使用单引号

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

实例

var answer = "It's alright";             // 双引号内的单引号var answer = "He is called 'Bill'";    // 双引号内的单引号var answer = 'He is called "Bill"';    // 单引号内的双引号

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

JavaScript 数值

JavaScript 只有一种数值类型。

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

实例

var x1 = 34.00;     // 带小数点var x2 = 34;        // 不带小数点

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

实例

var y = 123e5;      // 12300000var z = 123e-5;     // 0.00123

JavaScript 布尔值

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

实例

var x = true;var y = false;

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

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

JavaScript 数组

JavaScript 数组用方括号书写。

数组的项目由逗号分隔。

下面的代码声明（创建）了名为 cars 的数组，包含三个项目（汽车品牌）：

实例

var cars = ["Porsche", "Volvo", "BMW"];

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

JavaScript 对象

JavaScript 对象用花括号来书写。

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

实例

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

上例中的对象（person）有四个属性：firstName、lastName、age 以及 eyeColor。

typeof 运算符

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

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

实例

typeof ""                  // 返回 "string"typeof "Bill"              // 返回 "string"typeof "Bill Gates"          // 返回 "string"

实例

typeof 0                   // 返回 "number"typeof 314                 // 返回 "number"typeof 3.14                // 返回 "number"typeof (7)                 // 返回 "number"typeof (7 + 8)             // 返回 "number"

typeof 运算符对数组返回 “object”，因为在 JavaScript 中数组属于对象。

Undefined

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

实例

var person;                  // 值是 undefined，类型是 undefined。

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

实例

person = undefined;          // 值是 undefined，类型是 undefined。

空值

空值与 undefined 不是一回事。

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

实例

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

Null

在 JavaScript 中，null 是 “nothing”。它被看做不存在的事物。

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

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

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

实例

var person = null;           // 值是 null，但是类型仍然是对象

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

实例

var person = undefined;           // 值是 undefined，类型是 undefined。

Undefined 与 Null 的区别

Undefined 与 null 的值相等，但类型不相等：

typeof undefined              // undefinedtypeof null                   // objectnull === undefined            // falsenull == undefined             // true

原始数据

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

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

• string
• number
• boolean
• undefined

实例

typeof "Bill"              // 返回 "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:'Bill', age:62} // 返回 "object"typeof [1,2,3,4]             // 返回 "object" (并非 "array"，参见下面的注释)typeof null                  // 返回 "object"typeof function myFunc(){}   // 返回 "function"

typeof 运算符把数组返回为 “object”，因为在 JavaScript 中数组即对象。

JavaScript 函数

JavaScript 函数是被设计为执行特定任务的代码块。

JavaScript 函数会在某代码调用它时被执行。

实例

function myFunction(p1, p2) {    return p1 * p2;              // 该函数返回 p1 和 p2 的乘积}

JavaScript 函数语法

JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。

函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。

圆括号可包括由逗号分隔的参数：

(参数 1, 参数 2, ...)

由函数执行的代码被放置在花括号中：{}

function name(参数 1, 参数 2, 参数 3) {    要执行的代码}

*函数参数（Function parameters）*是在函数定义中所列的名称。

函数参数（Function arguments）是当调用函数时由函数接收的真实的值。

在函数中，参数是局部变量。

在其他编程语言中，函数近似程序（Procedure）或子程序（Subroutine）。

函数调用

函数中的代码将在其他代码调用该函数时执行：

• 当事件发生时（当用户点击按钮时）
• 当 JavaScript 代码调用时
• 自动的（自调用）

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

函数返回

当 JavaScript 到达 return 语句，函数将停止执行。

如果函数被某条语句调用，JavaScript 将在调用语句之后“返回”执行代码。

函数通常会计算出返回值。这个返回值会返回给调用者：

实例

计算两个数的乘积，并返回结果：

var x = myFunction(7, 8);        // 调用函数，返回值被赋值给 xfunction myFunction(a, b) {    return a * b;                // 函数返回 a 和 b 的乘积}

x 的结果将是：

56

为何使用函数？

您能够对代码进行复用：只要定义一次代码，就可以多次使用它。

您能够多次向同一函数传递不同的参数，以产生不同的结果。

实例

把华氏度转换为摄氏度：

function toCelsius(fahrenheit) {    return (5/9) * (fahrenheit-32);}document.getElementById("demo").innerHTML = toCelsius(77);

() 运算符调用函数

使用上面的例子，toCelsius 引用的是函数对象，而 toCelsius() 引用的是函数结果。

实例

访问没有 () 的函数将返回函数定义：

function toCelsius(fahrenheit) {    return (5/9) * (fahrenheit-32);}document.getElementById("demo").innerHTML = toCelsius;

用作变量值的函数

函数的使用方法与变量一致，在所有类型的公式、赋值和计算中。

实例

使用变量来存储函数的值：

var x = toCelsius(77);var text = "The temperature is " + x + " Celsius";

您能够把函数当做变量值直接使用：

var text = "The temperature is " + toCelsius(77) + " Celsius";

局部变量

在 JavaScript 函数中声明的变量，会成为函数的局部变量。

局部变量只能在函数内访问。

实例

// 此处的代码不能使用 carNamefunction myFunction() {    var carName = "Volvo";    // code here CAN use carName}// 此处的代码可以使用 carName

由于局部变量只能被其函数识别，因此可以在不同函数中使用相同名称的变量。

局部变量在函数开始时创建，在函数完成时被删除。

JavaScript 对象

真实生活中的对象、属性和方法

在真实生活中，汽车是一个对象。

汽车有诸如车重和颜色等属性，也有诸如启动和停止的方法：

对象	属性	方法
车（car）	car.name = porschecar.model = 911car.length = 4499mmcar.color = white	car.start()car.drive()car.brake()car.stop()

所有汽车都拥有同样的属性，但属性值因车而异。

所有汽车都拥有相同的方法，但是方法会在不同时间被执行。

JavaScript 对象

您之前已经学到，JavaScript 变量是数据值的容器。

这段代码把一个单一值（porsche）赋给名为 car 的变量：

var car = "porsche";

对象也是变量。但是对象包含很多值。

这段代码把多个值（porsche, 911, white）赋给名为 car 的变量：

var car = {type:"porsche", model:"911", color:"white"};

值以名称:值对的方式来书写（名称和值由冒号分隔）。

JavaScript 对象是被命名值的容器。

对象属性

（JavaScript 对象中的）名称:值对被称为属性。

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

属性	属性值
firstName	Bill
lastName	Gates
age	62
eyeColor	blue

对象方法

对象也可以有方法。

方法是在对象上执行的动作。

方法以函数定义被存储在属性中。

属性	属性值
firstName	Bill
lastName	Gates
age	62
eyeColor	blue
fullName	function() {return this.firstName + " " + this.lastName;}

方法是作为属性来存储的函数。

实例

var person = {
  firstName: "Bill",
  lastName : "Gates",
  id       : 678,
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};

this 关键词

在函数定义中，this 引用该函数的“拥有者”。

在上面的例子中，this 指的是“拥有” fullName 函数的 person 对象。

换言之，this.firstName 的意思是 this 对象的 firstName 属性。

请在 JS this 关键词这一章学习更多有关 this 关键词的知识。

对象定义

我们定义（创建）了一个 JavaScript 对象：

实例

var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};

空格和折行都是允许的。对象定义可横跨多行：

实例

var person = {
    firstName:"Bill",
    lastName:"Gates",
    age:50,
    eyeColor:"blue"
};

访问对象属性

您能够以两种方式访问属性：

objectName.propertyName

或者

objectName["propertyName"]

例子 1

person.lastName;

例子 2

person["lastName"];

访问对象方法

您能够通过如下语法访问对象方法：

objectName.methodName()

实例

name = person.fullName();

如果您不使用 () 访问 fullName 方法，则将返回函数定义：

实例

name = person.fullName;

方法实际上是以属性值的形式存储的函数定义。

请不要把字符串、数值和布尔值声明为对象！

如果通过关键词 “new” 来声明 JavaScript 变量，则该变量会被创建为对象：

var x = new String();        // 把 x 声明为 String 对象var y = new Number();        // 把 y 声明为 Number 对象var z = new Boolean();       //	把 z 声明为 Boolean 对象

请避免字符串、数值或逻辑对象。他们会增加代码的复杂性并降低执行速度。

JavaScript 事件

HTML 事件是发生在 HTML 元素上的“事情”。

当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件。

HTML 事件

HTML 事件可以是浏览器或用户做的某些事情。

下面是 HTML 事件的一些例子：

• HTML 网页完成加载
• HTML 输入字段被修改
• HTML 按钮被点击

通常，当事件发生时，用户会希望做某件事。

JavaScript 允许您在事件被侦测到时执行代码。

通过 JavaScript 代码，HTML 允许您向 HTML 元素添加事件处理程序。

使用单引号：

<element event='一些 JavaScript'>

使用双引号：

<element event="一些 JavaScript">

在下面的例子中，onclick 属性（以及代码）被添加到 元素：

实例

<button onclick='document.getElementById("demo").innerHTML=Date()'>现在的时间是？</button>

在上面的例子中，JavaScript 代码改变了 id=“demo” 的元素的内容。

在接下来的例子中，代码（使用 this.innerHTML）改变了其自身元素的内容：

实例

<button onclick="this.innerHTML=Date()">现在的时间是？</button>

JavaScript 代码通常有很多行。事件属性调用函数更为常见：

实例

<button onclick="displayDate()">现在的时间是？</button>

常见的 HTML 事件

下面是一些常见的 HTML 事件：

事件	描述
onchange	HTML 元素已被改变
onclick	用户点击了 HTML 元素
onmouseover	用户把鼠标移动到 HTML 元素上
onmouseout	用户把鼠标移开 HTML 元素
onkeydown	用户按下键盘按键
onload	浏览器已经完成页面加载

JavaScript 能够做什么？

事件处理程序可用于处理、验证用户输入、用户动作和浏览器动作：

• 每当页面加载时应该做的事情
• 当页面被关闭时应该做的事情
• 当用户点击按钮时应该被执行的动作
• 当用户输入数据时应该被验证的内容
• 等等

让 JavaScript 处理事件的不同方法有很多：

• HTML 事件属性可执行 JavaScript 代码
• HTML 事件属性能够调用 JavaScript 函数
• 您能够向 HTML 元素分配自己的事件处理函数
• 您能够阻止事件被发送或被处理
• 等等

JavaScript 字符串

JavaScript 字符串用于存储和操作文本。

JavaScript 字符串

JavaScript 字符串是引号中的零个或多个字符。

实例

var x = "Bill Gates"

您能够使用单引号或双引号：

实例

var carname = "Porsche 911";
var carname = 'Porsche 911';

您可以在字符串中使用引号，只要不匹配围绕字符串的引号即可：

实例

var answer = "It's good to see you again!";
var answer = "He is called 'Bill'";
var answer = 'He is called "Bill"';

字符串长度

内建属性 length 可返回字符串的长度：

实例

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
var sln = txt.length;

特殊字符

由于字符串必须由引号包围，JavaScript 会误解这段字符串：

var y = "中国是瓷器的故乡，因此 china 与"China（中国）"同名。"

该字符串将被切为 “中国是瓷器的故乡，因此 china 与”。

避免此问题的解决方法是，使用 \ 转义字符。

反斜杠转义字符把特殊字符转换为字符串字符：

代码	结果	描述
’	’	单引号
"	"	双引号
\	\	反斜杠

实例

序列 " 在字符串中插入双引号：

实例

var x = "中国是瓷器的故乡，因此 china 与\"China（中国）\"同名。"

序列 ’ 在字符串中插入单引号：

实例

var x = 'It\'s good to see you again';

序列 \ 在字符串中插入反斜杠：

实例

var x = "字符 \\ 被称为反斜杠。";

转义字符（\）也可用于在字符串中插入其他特殊字符。

其他六个 JavaScript 中有效的转义序列：

代码	结果
\b	退格键
\f	换页
\n	新行
\r	回车
\t	水平制表符
\v	垂直制表符

这六个转义字符最初设计用于控制打字机、电传打字机和传真机。它们在 HTML 中没有任何意义。

长代码行换行

为了最佳可读性， 程序员们通常会避免每行代码超过 80 个字符串。

如果某条 JavaScript 语句不适合一整行，那么最佳换行位置是某个运算符之后：

实例

document.getElementById("demo").innerHTML ="Hello Kitty.";

您也可以在字符串中换行，通过一个反斜杠即可：

实例

document.getElementById("demo").innerHTML = "Hello \Kitty!";

\ 方法并不是 ECMAScript (JavaScript) 标准。

某些浏览器也不允许 \ 字符之后的空格。

对长字符串换行的最安全做法（但是有点慢）是使用字符串加法：

实例

document.getElementById("demo").innerHTML = "Hello" + "Kitty!";

您不能通过反斜杠对代码行进行换行：

实例

document.getElementById("demo").innerHTML = \ "Hello Kitty!";

字符串可以是对象

通常，JavaScript 字符串是原始值，通过字面方式创建：

var firstName = "Bill"

但是字符串也可通过关键词 new 定义为对象：

var firstName = new String("Bill")

实例

var x = "Bill";var y = new String("Bill");// typeof x 将返回 string// typeof y 将返回 object

请不要把字符串创建为对象。它会拖慢执行速度。

new 关键字使代码复杂化。也可能产生一些意想不到的结果：

当使用 == 相等运算符时，相等字符串是相等的：

实例

var x = "Bill";             var y = new String("Bill");// (x == y) 为 true，因为 x 和 y 的值相等

当使用 === 运算符时，相等字符串是不相等的，因为 === 运算符需要类型和值同时相等。

实例

var x = "Bill";             var y = new String("Bill");// (x === y) 为 false，因为 x 和 y 的类型不同（字符串与对象）

甚至更糟。对象无法比较：

实例

var x = new String("Bill");             var y = new String("Bill");class="code_comment">// (x == y) 为 false，因为 x 和 y 是不同的对象

实例

var x = new String("Bill");             var y = new String("Bill");class="code_comment">// (x === y) 为 false，因为 x 和 y 是不同的对象

请注意 (xy) 与 (x=y) 的区别。

JavaScript 对象无法进行对比，比较两个 JavaScript 将始终返回 false。

JavaScript 字符串方法

字符串方法帮助您处理字符串。

字符串方法和属性

原始值，比如“Bill Gates”，无法拥有属性和方法（因为它们不是对象）。

但是通过 JavaScript，方法和属性也可用于原始值，因为在执行方法和属性时 JavaScript 将原始值视为对象。

字符串长度

length 属性返回字符串的长度：

实例

var txt = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";var sln = txt.length;

查找字符串中的字符串

indexOf() 方法返回字符串中指定文本首次出现的索引（位置）：

实例

var str = "The full name of China is the People's Republic of China.";var pos = str.indexOf("China");

JavaScript 从零计算位置。

0 是字符串中的第一个位置，1 是第二个，2 是第三个 …

lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引：

实例

var str = "The full name of China is the People's Republic of China.";var pos = str.lastIndexOf("China");

如果未找到文本， indexOf() 和 lastIndexOf() 均返回 -1。

实例

var str = "The full name of China is the People's Republic of China.";var pos = str.indexOf("USA");

两种方法都接受作为检索起始位置的第二个参数。

实例

var str = "The full name of China is the People's Republic of China.";var pos = str.indexOf("China", 18);

lastIndexOf() 方法向后进行检索（从尾到头），这意味着：假如第二个参数是 50，则从位置 50 开始检索，直到字符串的起点。

实例

var str = "The full name of China is the People's Republic of China.";var pos = str.lastIndexOf("China", 50);

检索字符串中的字符串

search() 方法搜索特定值的字符串，并返回匹配的位置：

实例

var str = "The full name of China is the People's Republic of China.";var pos = str.search("locate");

您注意到了吗？

两种方法，indexOf() 与 search()，是相等的。

这两种方法是不相等的。区别在于：

• search() 方法无法设置第二个开始位置参数。
• indexOf() 方法无法设置更强大的搜索值（正则表达式）。

您将在正则表达式的章节学习到这些更强大的检索值。

提取部分字符串

有三种提取部分字符串的方法：

• slice(start, end)
• substring(start, end)
• substr(start, length)

slice() 方法

slice() 提取字符串的某个部分并在新字符串中返回被提取的部分。

该方法设置两个参数：起始索引（开始位置），终止索引（结束位置）。

这个例子裁剪字符串中位置 7 到位置 13 的片段：

实例

var str = "Apple, Banana, Mango";
var res = str.slice(7,13);

res 的结果是：

Banana

如果某个参数为负，则从字符串的结尾开始计数。

这个例子裁剪字符串中位置 -12 到位置 -6 的片段：

实例

var str = "Apple, Banana, Mango";
var res = str.slice(-13,-7);

res 的结果是：

Banana

如果省略第二个参数，则该方法将裁剪字符串的剩余部分：

实例

var res = str.slice(7);

或者从结尾计数：

实例

var res = str.slice(-13);

**提示：**负值位置不适用 Internet Explorer 8 及其更早版本。

substring() 方法

substring() 类似于 slice()。

不同之处在于 substring() 无法接受负的索引。

实例

var str = "Apple, Banana, Mango";var res = str.substring(7,13);

res 的结果是：

Banana

如果省略第二个参数，则该 substring() 将裁剪字符串的剩余部分。

substr() 方法

substr() 类似于 slice()。

不同之处在于第二个参数规定被提取部分的长度。

实例

var str = "Apple, Banana, Mango";var res = str.substr(7,6);

res 的结果是：

Banana

如果省略第二个参数，则该 substr() 将裁剪字符串的剩余部分。

实例

var str = "Apple, Banana, Mango";var res = str.substr(7);

res 的结果是：

Banana, Mango

如果首个参数为负，则从字符串的结尾计算位置。

实例

var str = "Apple, Banana, Mango";var res = str.substr(-5);

res 的结果是：

Mango

第二个参数不能为负，因为它定义的是长度。

替换字符串内容

replace() 方法用另一个值替换在字符串中指定的值：

实例

str = "Please visit Microsoft!";var n = str.replace("Microsoft", "W3School");

replace() 方法不会改变调用它的字符串。它返回的是新字符串。

默认地，replace() 只替换首个匹配：

实例

str = "Please visit Microsoft and Microsoft!";var n = str.replace("Microsoft", "W3School");

默认地，replace() 对大小写敏感。因此不对匹配 MICROSOFT：

实例

str = "Please visit Microsoft!";var n = str.replace("MICROSOFT", "W3School");

如需执行大小写不敏感的替换，请使用正则表达式 /i（大小写不敏感）：

实例

str = "Please visit Microsoft!";var n = str.replace(/MICROSOFT/i, "W3School");

转换为大写和小写

通过 toUpperCase() 把字符串转换为大写：

实例

var text1 = "Hello World!";       // 字符串var text2 = text1.toUpperCase();  // text2 是被转换为大写的 text1

通过 toLowerCase() 把字符串转换为小写：

实例

var text1 = "Hello World!";       // 字符串var text2 = text1.toLowerCase();  // text2 是被转换为小写的 text1

concat() 方法

concat() 连接两个或多个字符串：

实例

var text1 = "Hello";var text2 = "World";text3 = text1.concat(" ",text2);

concat() 方法可用于代替加运算符。下面两行是等效的：

实例

var text = "Hello" + " " + "World!";var text = "Hello".concat(" ","World!");

所有字符串方法都会返回新字符串。它们不会修改原始字符串。

正式地说：字符串是不可变的：字符串不能更改，只能替换。

String.trim()

trim() 方法删除字符串两端的空白符：

实例

var str = "       Hello World!        ";alert(str.trim());

**警告：**Internet Explorer 8 或更低版本不支持 trim() 方法。

如需支持 IE 8，您可搭配正则表达式使用 replace() 方法代替：

实例

var str = "       Hello World!        ";alert(str.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, ''));

您还可以使用上面的 replace 方案把 trim 函数添加到 JavaScript String.prototype：

实例

if (!String.prototype.trim) {  String.prototype.trim = function () {    return this.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g, '');};var str = "       Hello World!        ";alert(str.trim());

提取字符串字符

这是两个提取字符串字符的安全方法：

• charAt(position)
• charCodeAt(position)

charAt() 方法

charAt() 方法返回字符串中指定下标（位置）的字符串：

实例

var str = "HELLO WORLD";str.charAt(0);            // 返回 H

charCodeAt() 方法

charCodeAt() 方法返回字符串中指定索引的字符 unicode 编码：

实例

var str = "HELLO WORLD";str.charCodeAt(0);         // 返回 72

属性访问（Property Access）

ECMAScript 5 (2009) 允许对字符串的属性访问 [ ]：

实例

var str = "HELLO WORLD";str[0];                   // 返回 H

使用属性访问有点不太靠谱：

• 不适用 Internet Explorer 7 或更早的版本
• 它让字符串看起来像是数组（其实并不是）
• 如果找不到字符，[ ] 返回 undefined，而 charAt() 返回空字符串。
• 它是只读的。str[0] = “A” 不会产生错误（但也不会工作！）

实例

var str = "HELLO WORLD";
str[0] = "A";             // 不产生错误，但不会工作
str[0];                   // 返回 H

**提示：**如果您希望按照数组的方式处理字符串，可以先把它转换为数组。

把字符串转换为数组

可以通过 split() 将字符串转换为数组：

实例

var txt = "a,b,c,d,e";   // 字符串
txt.split(",");          // 用逗号分隔
txt.split(" ");          // 用空格分隔
txt.split("|");          // 用竖线分隔

如果省略分隔符，被返回的数组将包含 index [0] 中的整个字符串。

如果分隔符是 “”，被返回的数组将是间隔单个字符的数组：

实例

var txt = "Hello";       // 字符串
txt.split("");           // 分隔为字符

JavaScript 字符串搜索

用于搜索字符串的 JavaScript 方法：

• String.indexOf()
• String.lastIndexOf()
• String.startsWith()
• String.endsWith()

String.indexOf()

indexOf() 方法返回指定文本在字符串中第一次出现（的位置）的索引：

实例

let str = "Please locate where 'locate' occurs!";str.indexOf("locate")    // 返回 7

JavaScript 从零开始计算位置。

0 是字符串中的第一个位置，1 是第二个，2 是第三个 …

String.lastIndexOf()

lastIndexOf() 方法返回指定文本在字符串中最后一次出现的索引：

实例

let str = "Please locate where 'locate' occurs!";str.lastIndexOf("locate")    // 返回 21

如果未找到文本，indexOf() 和 lastIndexOf() 都返回 -1：

实例

let str = "Please locate where 'locate' occurs!";str.lastIndexOf("John")    // 返回 -1

这两种方法都接受第二个参数作为搜索的开始位置：

实例

let str = "Please locate where 'locate' occurs!";str.indexOf("locate", 15)    // 返回 21

lastIndexOf() 方法向后搜索（从末尾到开头），意思是：如果第二个参数是 15，则从位置 15 开始搜索，一直搜索到字符串的开头。

实例

let str = "Please locate where 'locate' occurs!";
str.lastIndexOf("locate", 15)    // 返回 7

String.search()

search() 方法在字符串中搜索指定值并返回匹配的位置：

实例

let str = "Please locate where 'locate' occurs!";
str.search("locate")     // 返回 7

您注意到了吗？

indexOf() 和 search() 这两个方法，相等吗？

它们接受相同的参数，并返回相同的值？

这两种方法并不相等。差别如下：

• search() 方法不能接受第二个起始位置参数。
• indexOf() 方法不能采用强大的搜索值（正则表达式）。

String.match()

match() 方法根据正则表达式在字符串中搜索匹配项，并将匹配项作为 Array 对象返回。

实例 1

在字符串中搜索 “ain”：

let text = "The rain in SPAIN stays mainly in the plain";
text.match(/ain/g)    // 返回数组 [ain,ain,ain]

请在 JS RegExp 一章中学习有关正则表达式的更多内容。

如果正则表达式不包含 g 修饰符（执行全局搜索），match() 方法将只返回字符串中的第一个匹配项。

语法

string.match(regexp)

regexp	必需。需要搜索的值，为正则表达式。
返回：	数组，包含匹配项，每个匹配项对应一个项目，若未找到匹配项，则为 null。

实例 2

对 “ain” 执行不区分大小写的全局搜索：

let text = "The rain in SPAIN stays mainly in the plain";text.match(/ain/gi)   // 返回数组 [ain,AIN,ain,ain]

String.includes()

如果字符串包含指定值，includes() 方法返回 true。

实例

let text = "Hello world, welcome to the universe.";text.includes("world")    // 返回 true

浏览器支持

Internet Explorer 不支持 String.includes()。

Chrome 41	Edge 12	Firefox 40	Safari 9	Opera 28
2015 年 3 月	2015 年 7 月	2015 年 8 月	2015 年 10 月	2015 年 3 月

语法

string.includes(searchvalue, start)

searchvalue	必需。需要搜索的字符串。
start	可选。默认为 0. 开始搜索的位置。
返回：	如果字符串包含该值则返回 true，否则返回 false。
JS 版本：	ES6 (2015)

检查字符串是否包含 “world”，从位置 12 开始搜索：

let text = "Hello world, welcome to the universe.";text.includes("world", 12)    // 返回 false

String.startsWith()

如果字符串以指定值开头，则 startsWith() 方法返回 true，否则返回 false：

实例

let text = "Hello world, welcome to the universe.";text.startsWith("Hello")   // 返回 true

语法

string.startsWith(searchvalue, start)

参数值

参数	描述
searchvalue	必需。需要搜索的值。
start	可选。默认为 0。开始搜索的位置。

let text = "Hello world, welcome to the universe.";text.startsWith("world")    // 返回 false

let text = "Hello world, welcome to the universe.";text.startsWith("world", 5)    // 返回 false

let text = "Hello world, welcome to the universe.";text.startsWith("world", 6)    // 返回 true

**注释：**startsWith() 方法区分大小写。

Internet Explorer 不支持 startsWith() 方法。

第一个完全支持的浏览器版本是：

Chrome 41	Edge 12	Firefox 17	Safari 9	Opera 28
2015 年 3 月	2015 年 7 月	2015 年 8 月	2015 年 10 月	2015 年 3 月

String.endsWith()

如果字符串以指定值结尾，则 endsWith() 方法返回 true，否则返回 false：

实例

检查字符串是否以 “Doe” 结尾：

var text = "John Doe";text.endsWith("Doe")    // 返回 true

语法

string.endswith(searchvalue, length)

参数值

参数	描述
searchvalue	必需。需要搜索的值。
length	可选。要搜索的长度。

检索以 “world” 结尾的字符串的前 11 个字符：

let text = "Hello world, welcome to the universe.";text.endsWith("world", 11)    // 返回 true

**注释：**endsWith() 方法区分大小写。

Internet Explorer 不支持 endsWith() 方法。

第一个完全支持该方法的浏览器版本是：

Chrome 51	Edge 15	Firefox 54	Safari 10	Opera 38
2016 年 5 月	2017 年 4 月	2017 年 6 月	2016 年 9 月	2016 年 6 月

JavaScript 字符串模板

同义词：

• Template Literals
• Template Strings
• String Templates
• Back-Tics 语法

Back-Tics 语法

模板字面量使用反引号 (``) 而不是引号 ("") 来定义字符串：

实例

let text = `Hello World!`;

字符串内的引号

通过使用模板字面量，您可以在字符串中同时使用单引号和双引号：

实例

let text = `He's often called "Johnny"`;

多行字符串

模板字面量允许多行字符串：

实例

let text =`The quickbrown foxjumps overthe lazy dog`;

插值

模板字面量提供了一种将变量和表达式插入字符串的简单方法。

该方法称为字符串插值（string interpolation）。

语法

${...}

变量替换

模板字面量允许字符串中的变量：

实例

let firstName = "John";let lastName = "Doe";let text = `Welcome ${firstName}, ${lastName}!`;

用真实值自动替换变量称为字符串插值。

表达式替换

模板字面量允许字符串中的表达式：

实例

let price = 10;let VAT = 0.25;let total = `Total: ${(price * (1 + VAT)).toFixed(2)}`;

用真实值自动替换表达式称为字符串插值。

HTML 模板

实例

let header = "Templates Literals";let tags = ["template literals", "javascript", "es6"];let html = `<h2>${header}</h2><ul>`;for (const x of tags) {  html += `<li>${x}</li>`;}html += `</ul>`;

浏览器支持

Internet Explorer 不支持模板字面量。

第一个完全支持模板字面量的浏览器版本是：

Chrome 41	Edge 13	Firefox 34	Safari 10	Opera 29
2015 年 3 月	2015 年 11 月	2014 年 12 月	2016 年 9 月	2015 年 4 月

JavaScript 数字

JavaScript 只有一种数值类型。

书写数值时带不带小数点均可。

JavaScript 数值

书写 JavaScript 数值既可以带小数点，也可以不带：

实例

var x = 3.14;    // 带小数点的数值var y = 3;       // 不带小数点的数值

超大或超小的数可通过科学计数法来写：

实例

var x = 123e5;    // 12300000var y = 123e-5;   // 0.00123

JavaScript 数值始终是 64 位的浮点数

与许多其他编程语言不同，JavaScript 不会定义不同类型的数，比如整数、短的、长的、浮点的等等。

JavaScript 数值始终以双精度浮点数来存储，根据国际 IEEE 754 标准。

此格式用 64 位存储数值，其中 0 到 51 存储数字（片段），52 到 62 存储指数，63 位存储符号：

值(aka Fraction/Mantissa)	指数	符号
52 bits(0 - 51)	11 bits (52 - 62)	1 bit (63)

精度

整数（不使用指数或科学计数法）会被精确到 15 位。

实例

var x = 999999999999999;   // x 将是 999999999999999var y = 9999999999999999;  // y 将是 10000000000000000

小数的最大数是 17 位，但是浮点的算数并不总是 100% 精准：

实例

var x = 0.2 + 0.1;         // x 将是 0.30000000000000004

使用乘除法有助于解决上面的问题：

实例

var x = (0.2 * 10 + 0.1 * 10) / 10;       // x 将是 0.3

数字和字符串相加

警告！！

JavaScript 的加法和级联（concatenation）都使用 + 运算符。

数字用加法。字符串用级联。

如果您对两个数相加，结果将是一个数：

实例

var x = 10;var y = 20;var z = x + y;           // z 将是 30（一个数）

如果对两个字符串相加，结果将是一个字符串的级联：

实例

var x = "10";var y = "20";var z = x + y;           // z 将是 1020（字符串）

如果您对一个数和一个字符串相加，结果也是字符串级联：

实例

var x = 10;var y = "20";var z = x + y;           // z 将是 1020（一个字符串）

如果您对一个字符串和一个数字相加，结果也是字符串级联：

实例

var x = "10";var y = 20;var z = x + y;           // z 将是 1020（字符串）

常见的错误是认为结果应该是 30：

实例

var x = 10;var y = 20;var z = "The result is: " + x + y;

常见的错误是认为结果应该是 102030：

实例

var x = 10;var y = 20;var z = "30";var result = x + y + z;

JavaScript 从左向右进行编译。

因为 x 和 y 都是数，10 + 20 将被相加。

因为 z 是字符串，30 + “30” 被级联。

数字字符串

JavaScript 字符串可以拥有数字内容：

var x = 100;         // x 是数字var y = "100";       // y 是字符串

在所有数字运算中，JavaScript 会尝试将字符串转换为数字：

该例如此运行：

var x = "100";var y = "10";var z = x / y;       // z 将是 10

该例也将如此运行：

var x = "100";var y = "10";var z = x * y;       // z 将是 1000

该例如此运行：

var x = "100";var y = "10";var z = x - y;      // z 将是 90

但是该例不会如上例般运行：

var x = "100";var y = "10";var z = x + y;       // z 不会是 110（而是 10010）

在最后一个例子中，JavaScript 用 + 运算符对字符串进行了级联。

NaN - 非数值

NaN 属于 JavaScript 保留词，指示某个数不是合法数。

尝试用一个非数字字符串进行除法会得到 NaN（Not a Number）：

实例

var x = 100 / "Apple";  // x 将是 NaN（Not a Number）

不过，假如字符串包含数值，则结果将是数：

实例

var x = 100 / "10";     // x 将是 10

您可使用全局 JavaScript 函数 isNaN() 来确定某个值是否是数：

实例

var x = 100 / "Apple";isNaN(x);               // 返回 true，因为 x 不是数

要小心 NaN。假如您在数学运算中使用了 NaN，则结果也将是 NaN：

实例

var x = NaN;var y = 5;var z = x + y;         // z 将是 NaN

结果也许是串连接：

实例

var x = NaN;var y = "5";var z = x + y;         // z 将是 NaN5

NaN 是数，typeof NaN 返回 number：

实例

typeof NaN;             // 返回 "number"

Infinity

Infinity （或 -Infinity）是 JavaScript 在计算数时超出最大可能数范围时返回的值。

实例

var myNumber = 2;while (myNumber != Infinity) {          // 执行直到 Infinity    myNumber = myNumber * myNumber;}

除以 0（零）也会生成 Infinity：

实例

var x =  2 / 0;          // x 将是 Infinityvar y = -2 / 0;          // y 将是 -Infinity

Infinity 是数：typeOf Infinity 返回 number。

实例

typeof Infinity;        // 返回 "number"

十六进制

JavaScript 会把前缀为 0x 的数值常量解释为十六进制。

实例

var x = 0xFF;             // x 将是 255。

绝不要用前导零写数字（比如 07）。

一些 JavaScript 版本会把带有前导零的数解释为八进制。

默认地，Javascript 把数显示为十进制小数。

但是您能够使用 toString() 方法把数输出为十六进制、八进制或二进制。

实例

var myNumber = 128;myNumber.toString(16);     // 返回 80myNumber.toString(8);      // 返回 200myNumber.toString(2);      // 返回 10000000

数值可以是对象

通常 JavaScript 数值是通过字面量创建的原始值：var x = 123

但是也可以通过关键词 new 定义为对象：var y = new Number(123)

实例

var x = 123;var y = new Number(123);// typeof x 返回 number// typeof y 返回 object

请不要创建数值对象。这样会拖慢执行速度。

new 关键词使代码复杂化，并产生某些无法预料的结果：

当使用 == 相等运算符时，相等的数看上去相等：

实例

var x = 500;             var y = new Number(500);// (x == y) 为 true，因为 x 和 y 有相等的值

当使用 === 相等运算符后，相等的数变为不相等，因为 === 运算符需要类型和值同时相等。

实例

var x = 500;             var y = new Number(500);// (x === y) 为 false，因为 x 和 y 的类型不同

甚至更糟。对象无法进行对比：

实例

var x = new Number(500);             var y = new Number(500);// (x == y) 为 false，因为对象无法比较

JavaScript 对象无法进行比较。

JavaScript 数字方法

Number 方法帮助您处理数值。

Number 方法和属性

原始值（比如 3.14 或 2016），无法拥有属性和方法（因为它们不是对象）。

但是通过 JavaScript，方法和属性也可用于原始值，因为 JavaScript 在执行方法和属性时将原始值视作对象。

toString() 方法

toString() 以字符串返回数值。

所有数字方法可用于任意类型的数字（字面量、变量或表达式）：

实例

var x = 123;x.toString();            // 从变量 x 返回 123(123).toString();        // 从文本 123 返回 123(100 + 23).toString();   // 从表达式 100 + 23 返回 123

toExponential() 方法

toExponential() 返回字符串值，它包含已被四舍五入并使用指数计数法的数字。

参数定义小数点后的字符数：

实例

var x = 9.656;x.toExponential(2);     // 返回 9.66e+0x.toExponential(4);     // 返回 9.6560e+0x.toExponential(6);     // 返回 9.656000e+0

该参数是可选的。如果您没有设置它，JavaScript 不会对数字进行舍入。

toFixed() 方法

toFixed() 返回字符串值，它包含了指定位数小数的数字：

实例

var x = 9.656;x.toFixed(0);           // 返回 10x.toFixed(2);           // 返回 9.66x.toFixed(4);           // 返回 9.6560x.toFixed(6);           // 返回 9.656000

toFixed(2) 非常适合处理金钱。

toPrecision() 方法

toPrecision() 返回字符串值，它包含了指定长度的数字：

实例

var x = 9.656;x.toPrecision();        // 返回 9.656x.toPrecision(2);       // 返回 9.7x.toPrecision(4);       // 返回 9.656x.toPrecision(6);       // 返回 9.65600

valueOf() 方法

valueOf() 以数值返回数值：

实例

var x = 123;x.valueOf();            // 从变量 x 返回 123(123).valueOf();        // 从文本 123 返回 123(100 + 23).valueOf();   // 从表达式 100 + 23 返回 123

在 JavaScript 中，数字可以是原始值（typeof = number）或对象（typeof = object）。

在 JavaScript 内部使用 valueOf() 方法可将 Number 对象转换为原始值。

没有理由在代码中使用它。

所有 JavaScript 数据类型都有 valueOf() 和 toString() 方法。

把变量转换为数值

这三种 JavaScript 方法可用于将变量转换为数字：

• Number() 方法
• parseInt() 方法
• parseFloat() 方法

这些方法并非数字方法，而是全局 JavaScript 方法。

全局方法

JavaScript 全局方法可用于所有 JavaScript 数据类型。

这些是在处理数字时最相关的方法：

方法	描述
Number()	返回数字，由其参数转换而来。
parseFloat()	解析其参数并返回浮点数。
parseInt()	解析其参数并返回整数。

Number() 方法

Number() 可用于把 JavaScript 变量转换为数值：

实例

x = true;Number(x);        // 返回 1x = false;     Number(x);        // 返回 0x = new Date();Number(x);        // 返回 1404568027739x = "10"Number(x);        // 返回 10x = "10 20"Number(x);        // 返回 NaN

如果无法转换数字，则返回 NaN。

用于日期的 Number() 方法

Number() 还可以把日期转换为数字：

实例

Number(new Date("2019-04-15"));    // 返回 1506729600000

上面的 Number() 方法返回 1970 年 1 月 1 日至今的毫秒数。

parseInt() 方法

parseInt() 解析一段字符串并返回数值。允许空格。只返回首个数字：

实例

parseInt("10");         // 返回 10parseInt("10.33");      // 返回 10parseInt("10 20 30");   // 返回 10parseInt("10 years");   // 返回 10parseInt("years 10");   // 返回 NaN

如果无法转换为数值，则返回 NaN (Not a Number)。

parseFloat() 方法

parseFloat() 解析一段字符串并返回数值。允许空格。只返回首个数字：

实例

parseFloat("10");        // 返回 10
parseFloat("10.33");     // 返回 10.33
parseFloat("10 20 30");  // 返回 10
parseFloat("10 years");  // 返回 10
parseFloat("years 10");  // 返回 NaN

如果无法转换为数值，则返回 NaN (Not a Number)。

数值属性

属性	描述
MAX_VALUE	返回 JavaScript 中可能的最大数。
MIN_VALUE	返回 JavaScript 中可能的最小数。
NEGATIVE_INFINITY	表示负的无穷大（溢出返回）。
NaN	表示非数字值（“Not-a-Number”）。
POSITIVE_INFINITY	表示无穷大（溢出返回）。

JavaScript MIN_VALUE 和 MAX_VALUE

MAX_VALUE 返回 JavaScript 中可能的最大数字。

实例

var x = Number.MAX_VALUE;

MIN_VALUE 返回 JavaScript 中可能的最小数字。

实例

var x = Number.MIN_VALUE;

JavaScript POSITIVE_INFINITY

实例

var x = Number.POSITIVE_INFINITY;

溢出时返回 POSITIVE_INFINITY：

实例

var x = 1 / 0;

JavaScript NEGATIVE_INFINITY

实例

var x = Number.NEGATIVE_INFINITY;

溢出时返回 NEGATIVE_INFINITY：

实例

var x = -1 / 0;

JavaScript NaN - 非数字

实例

var x = Number.NaN;

NaN 属于 JavaScript 保留字，指示数字并非合法的数字。

尝试使用非数字字符串进行算术运算将导致 NaN（非数字）：

实例

var x = 100 / "Apple";  // x 将是 NaN (Not a Number)

数字属性不可用于变量

数字属性属于名为 number 的 JavaScript 数字对象包装器。

这些属性只能作为 Number.MAX_VALUE 访问。

使用 myNumber.MAX_VALUE，其中 myNumber 是变量、表达式或值，将返回 undefined：

实例

var x = 6;var y = x.MAX_VALUE;    // y 成为 undefined

JavaScript 数组

JavaScript 数组用于在单一变量中存储多个值。

var cars = ["Saab", "Volvo", "BMW"];

什么是数组？

数组是一种特殊的变量，它能够一次存放一个以上的值。

如果您有一个项目清单（例如，汽车品牌列表），在单个变量中存储汽车品牌应该是这样的：

var car1 = "Saab";var car2 = "Volvo";var car3 = "BMW"; 

不过，假如您希望遍历所有汽车并找到一个特定的值？假如不是三个汽车品牌而是三百个呢？

解决方法就是数组！

数组可以用一个单一的名称存放很多值，并且还可以通过引用索引号来访问这些值。

创建数组

使用数组文本是创建 JavaScript 数组最简单的方法。

语法：

var array-name = [item1, item2, ...];

实例

var cars = ["Saab", "Volvo", "BMW"];

空格和折行并不重要。声明可横跨多行：

实例

var cars = [    "Saab",    "Volvo",    "BMW"];

请不要最后一个元素之后写逗号（比如 “BMW”,）。

可能存在跨浏览器兼容性问题。

使用 JavaScript 关键词 new

下面的例子也会创建数组，并为其赋值：

实例

var cars = new Array("Saab", "Volvo", "BMW");

以上两个例子效果完全一样。无需使用 new Array()。

出于简洁、可读性和执行速度的考虑，请使用第一种方法（数组文本方法）。

访问数组元素

我们通过引用*索引号（下标号）*来引用某个数组元素。

这条语句访问 cars 中的首个元素的值：

var name = cars[0];

这条语句修改 cars 中的首个元素：

cars[0] = "Opel";

实例

var cars = ["Saab", "Volvo", "BMW"];document.getElementById("demo").innerHTML = cars[0]; 

[0] 是数组中的第一个元素。[1] 是第二个。数组索引从 0 开始。

改变数组元素

这条语句修改了 cars 中第一个元素的值：

cars[0] = "Opel";

实例

var cars = ["Saab", "Volvo", "BMW"];cars[0] = "Opel";document.getElementById("demo").innerHTML = cars[0];

访问完整数组

通过 JavaScript，可通过引用数组名来访问完整数组：

实例

var cars = ["Saab", "Volvo", "BMW"];document.getElementById("demo").innerHTML = cars; 

数组是对象

数组是一种特殊类型的对象。在 JavaScript 中对数组使用 typeof 运算符会返回 “object”。

但是，JavaScript 数组最好以数组来描述。

数组使用数字来访问其“元素”。在本例中，person[0] 返回 Bill：

数组：

var person = ["Bill", "Gates", 62];

对象使用名称来访问其“成员”。在本例中，person.firstName 返回 Bill：

对象：

var person = {firstName:"John", lastName:"Doe", age:46};

数组元素可以是对象

JavaScript 变量可以是对象。数组是特殊类型的对象。

正因如此，您可以在相同数组中存放不同类型的变量。

您可以在数组保存对象。您可以在数组中保存函数。你甚至可以在数组中保存数组：

myArray[0] = Date.now;myArray[1] = myFunction;myArray[2] = myCars;

数组属性和方法

JavaScript 数组的真实力量隐藏在数组的属性和方法中：

实例

var x = cars.length;   // length 属性返回元素的数量var y = cars.sort();   // sort() 方法对数组进行排序

length 属性

length 属性返回数组的长度（数组元素的数目）。

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.length;                       // fruits 的长度是 4

length 属性始终大于最高数组索引（下标）。

访问第一个数组元素

实例

fruits = ["Banana", "Orange", "Apple", "Mango"];var first = fruits[0];

访问最后一个数组元素

实例

fruits = ["Banana", "Orange", "Apple", "Mango"];var last = fruits[fruits.length - 1];

遍历数组元素

遍历数组的最安全方法是使用 “for” 循环：

实例

var fruits, text, fLen, i;fruits = ["Banana", "Orange", "Apple", "Mango"];fLen = fruits.length;text = "<ul>";for (i = 0; i < fLen; i++) {     text += "<li>" + fruits[i] + "</li>";} 

您也可以使用 Array.foreach() 函数：

实例

var fruits, text;fruits = ["Banana", "Orange", "Apple", "Mango"];text = "<ul>";fruits.forEach(myFunction);text += "</ul>";function myFunction(value) {  text += "<li>" + value + "</li>";}

JavaScript 数组方法

JavaScript 数组的力量隐藏在数组方法中。

把数组转换为字符串

JavaScript 方法 toString() 把数组转换为数组值（逗号分隔）的字符串。

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];document.getElementById("demo").innerHTML = fruits.toString(); 

结果

Banana,Orange,Apple,Mango

join() 方法也可将所有数组元素结合为一个字符串。

它的行为类似 toString()，但是您还可以规定分隔符：

实例

var fruits = ["Banana", "Orange","Apple", "Mango"];document.getElementById("demo").innerHTML = fruits.join(" * "); 

结果

Banana * Orange * Apple * Mango

Popping 和 Pushing

在处理数组时，删除元素和添加新元素是很简单的。

Popping 和 Pushing 指的是：

从数组弹出项目，或向数组推入项目。

Popping

pop() 方法从数组中删除最后一个元素：

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.pop();              // 从 fruits 删除最后一个元素（"Mango"）

pop() 方法返回“被弹出”的值：

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];var x = fruits.pop();      // x 的值是 "Mango"

Pushing

push() 方法（在数组结尾处）向数组添加一个新的元素：

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.push("Kiwi");       //  向 fruits 添加一个新元素

push() 方法返回新数组的长度：

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];var x =  fruits.push("Kiwi");   //  x 的值是 5

位移元素

位移与弹出等同，但处理首个元素而不是最后一个。

shift() 方法会删除首个数组元素，并把所有其他元素“位移”到更低的索引。

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.shift();            // 从 fruits 删除第一个元素 "Banana"

shift() 方法返回被“位移出”的字符串：

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.shift();             // 返回 "Banana"

unshift() 方法（在开头）向数组添加新元素，并“反向位移”旧元素：

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.unshift("Lemon");    // 向 fruits 添加新元素 "Lemon"

unshift() 方法返回新数组的长度。

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.unshift("Lemon");    // 返回 5

更改元素

通过使用它们的索引号来访问数组元素：

数组*索引（下标）*以 0 开始。[0] 是第一个数组元素，[1] 是第二个，[2] 是第三个 …

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits[0] = "Kiwi";        // 把 fruits 的第一个元素改为 "Kiwi"

length 属性提供了向数组追加新元素的简易方法：

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits[fruits.length] = "Kiwi";          // 向 fruits 追加 "Kiwi"

删除元素

既然 JavaScript 数组属于对象，其中的元素就可以使用 JavaScript delete 运算符来删除：

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];delete fruits[0];           // 把 fruits 中的首个元素改为 undefined

使用 delete 会在数组留下未定义的空洞。请使用 pop() 或 shift() 取而代之。

拼接数组

splice() 方法可用于向数组添加新项：

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 0, "Lemon", "Kiwi");

第一个参数（2）定义了应添加新元素的位置（拼接）。

第二个参数（0）定义应删除多少元素。

其余参数（“Lemon”，“Kiwi”）定义要添加的新元素。

splice() 方法返回一个包含已删除项的数组：

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(2, 2, "Lemon", "Kiwi");

使用 splice() 来删除元素

通过聪明的参数设定，您能够使用 splice() 在数组中不留“空洞”的情况下移除元素：

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1);        // 删除 fruits 中的第一个元素

第一个参数（0）定义新元素应该被添加（接入）的位置。

第二个参数（1）定义应该删除多个元素。

其余参数被省略。没有新元素将被添加。

合并（连接）数组

concat() 方法通过合并（连接）现有数组来创建一个新数组：

实例（合并两个数组）

var myGirls = ["Cecilie", "Lone"];var myBoys = ["Emil", "Tobias", "Linus"];var myChildren = myGirls.concat(myBoys);   // 连接 myGirls 和 myBoys

concat() 方法不会更改现有数组。它总是返回一个新数组。

concat() 方法可以使用任意数量的数组参数：

实例（合并三个数组）

var arr1 = ["Cecilie", "Lone"];var arr2 = ["Emil", "Tobias", "Linus"];var arr3 = ["Robin", "Morgan"];var myChildren = arr1.concat(arr2, arr3);   // 将arr1、arr2 与 arr3 连接在一起

concat() 方法也可以将值作为参数：

实例（将数组与值合并）

var arr1 = ["Cecilie", "Lone"];var myChildren = arr1.concat(["Emil", "Tobias", "Linus"]); 

裁剪数组

slice() 方法用数组的某个片段切出新数组。

本例从数组元素 1 （“Orange”）开始切出一段数组：

实例

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];var citrus = fruits.slice(1); 

slice() 方法创建新数组。它不会从源数组中删除任何元素。

本例从数组元素 3 （“Apple”）开始切出一段数组：

实例

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];var citrus = fruits.slice(3); 

slice() 可接受两个参数，比如 (1, 3)。

该方法会从开始参数选取元素，直到结束参数（不包括）为止。

实例

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];var citrus = fruits.slice(1, 3); 

如果结束参数被省略，比如第一个例子，则 slice() 会切出数组的剩余部分。

实例

var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];var citrus = fruits.slice(2); 

自动 toString()

如果需要原始值，则 JavaScript 会自动把数组转换为字符串。下面两个例子将产生相同的结果：

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];document.getElementById("demo").innerHTML = fruits.toString(); 

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];document.getElementById("demo").innerHTML = fruits; 

所有 JavaScript 对象都拥有 toString() 方法。

查找数组中的最大和最小值

没有在 JavaScript 数组中查找最高和最低值的内建函数。

JavaScript 数组排序

sort() 方法是最强大的数组方法之一。

数组排序

sort() 方法以字母顺序对数组进行排序：

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.sort();            // 对 fruits 中的元素进行排序

反转数组

reverse() 方法反转数组中的元素。

您可以使用它以降序对数组进行排序：

实例

var fruits = ["Banana", "Orange", "Apple", "Mango"];fruits.sort();            // 对 fruits 中的元素进行排序fruits.reverse();         // 反转元素顺序

数字排序

默认地，sort() 函数按照字符串顺序对值进行排序。

该函数很适合字符串（“Apple” 会排在 “Banana” 之前）。

不过，如果数字按照字符串来排序，则 “25” 大于 “100”，因为 “2” 大于 “1”。

正因如此，sort() 方法在对数值排序时会产生不正确的结果。

我们通过一个比值函数来修正此问题：

实例

var points = [40, 100, 1, 5, 25, 10];points.sort(function(a, b){return a - b}); 

使用相同的技巧对数组进行降序排序：

实例

var points = [40, 100, 1, 5, 25, 10];points.sort(function(a, b){return b - a}); 

比值函数

比较函数的目的是定义另一种排序顺序。

比较函数应该返回一个负，零或正值，这取决于参数：

function(a, b){return a-b}

当 sort() 函数比较两个值时，会将值发送到比较函数，并根据所返回的值（负、零或正值）对这些值进行排序。

实例：

当比较 40 和 100 时，sort() 方法会调用比较函数 function(40,100)。

该函数计算 40-100，然后返回 -60（负值）。

排序函数将把 40 排序为比 100 更低的值。

您可以使用下面的代码片段来测试数值和字母排序：

<button onclick="myFunction1()">以字母顺序排序</button><button onclick="myFunction2()">以数字顺序排序</button><p id="demo"></p><script>var points = [40, 100, 1, 5, 25, 10];document.getElementById("demo").innerHTML = points;function myFunction1() {		points.sort();		document.getElementById("demo").innerHTML  = points;}function myFunction2() {		points.sort(function(a, b){return  a - b});		document.getElementById("demo").innerHTML = points;}</script>

以随机顺序排序数组

实例

var points = [40, 100, 1, 5, 25, 10];points.sort(function(a, b){return 0.5 - Math.random()}); 

查找最高（或最低）的数组值

JavaScript 不提供查找数组中最大或最小数组值的内建函数。

不过，在对数组进行排序之后，您能够使用索引来获得最高或最低值。

升序排序：

实例

var points = [40, 100, 1, 5, 25, 10];points.sort(function(a, b){return a - b});// 现在 points[0] 包含最低值// 而 points[points.length-1] 包含最高值

降序排序：

实例

var points = [40, 100, 1, 5, 25, 10];points.sort(function(a, b){return b - a});// 现在 points[0] 包含最高值// 而 points[points.length-1] 包含最低值

如果您仅仅需要找到最高或最低值，对整个数组进行排序是效率极低的方法。

对数组使用 Math.max()

您可以使用 Math.max.apply 来查找数组中的最高值：

实例

function myArrayMax(arr) {    return Math.max.apply(null, arr);}

Math.max.apply([1, 2, 3]) 等于 Math.max(1, 2, 3)。

对数组使用 Math.min()

您可以使用 Math.min.apply 来查找数组中的最低值：

实例

function myArrayMin(arr) {    return Math.min.apply(null, arr);}

Math.min.apply([1, 2, 3]) 等于 Math.min(1, 2, 3)。

我的 Min / Max JavaScript 方法

最快的解决方法是使用“自制”方法。

此函数遍历数组，用找到的最高值与每个值进行比较：

实例（查找 Max）

function myArrayMax(arr) {    var len = arr.length    var max = -Infinity;    while (len--) {        if (arr[len] > max) {            max = arr[len];        }    }    return max;}

此函数遍历数组，用找到的最低值与每个值进行比较：

实例（查找 Min）

function myArrayMin(arr) {    var len = arr.length    var min = Infinity;    while (len--) {        if (arr[len] < min) {            min = arr[len];        }    }    return min;}

排序对象数组

JavaScript 数组经常会包含对象：

实例

var cars = [
{type:"Volvo", year:2016},
{type:"Saab", year:2001},
{type:"BMW", year:2010}];

即使对象拥有不同数据类型的属性，sort() 方法仍可用于对数组进行排序。

解决方法是通过比较函数来对比属性值：

实例

cars.sort(function(a, b){return a.year - b.year});

比较字符串属性会稍复杂：

实例

cars.sort(function(a, b){
	  var x = a.type.toLowerCase();
	  var y = b.type.toLowerCase();
	  if (x < y) {return -1;}
	  if (x > y) {return 1;}
	  return 0;
});

JavaScript 数组迭代

数组迭代方法对每个数组项进行操作。

Array.forEach()

forEach() 方法为每个数组元素调用一次函数（回调函数）。

实例

var txt = "";
var numbers = [45, 4, 9, 16, 25];
numbers.forEach(myFunction);

function myFunction(value, index, array) {
  txt = txt + value + "<br>"; 
}

**注释：**该函数接受 3 个参数：

• 项目值
• 项目索引
• 数组本身

上面的例子只用了 value 参数。这个例子可以重新写为：

实例

var txt = "";var numbers = [45, 4, 9, 16, 25];numbers.forEach(myFunction);function myFunction(value) {  txt = txt + value + "<br>"; }

Array.map()

map() 方法通过对每个数组元素执行函数来创建新数组。

map() 方法不会对没有值的数组元素执行函数。

map() 方法不会更改原始数组。

这个例子将每个数组值乘以2：

实例

var numbers1 = [45, 4, 9, 16, 25];var numbers2 = numbers1.map(myFunction);function myFunction(value, index, array) {  return value * 2;}

请注意，该函数有 3 个参数：

• 项目值
• 项目索引
• 数组本身

当回调函数仅使用 value 参数时，可以省略索引和数组参数：

实例

var numbers1 = [45, 4, 9, 16, 25];var numbers2 = numbers1.map(myFunction);function myFunction(value) {  return value * 2;}

Array.filter()

filter() 方法创建一个包含通过测试的数组元素的新数组。

这个例子用值大于 18 的元素创建一个新数组：

实例

var numbers = [45, 4, 9, 16, 25];var over18 = numbers.filter(myFunction);function myFunction(value, index, array) {  return value > 18;}

请注意此函数接受 3 个参数：

• 项目值
• 项目索引
• 数组本身

在上面的例子中，回调函数不使用 index 和 array 参数，因此可以省略它们：

实例

var numbers = [45, 4, 9, 16, 25];var over18 = numbers.filter(myFunction);function myFunction(value) {  return value > 18;}

Array.reduce()

reduce() 方法在每个数组元素上运行函数，以生成（减少它）单个值。

reduce() 方法在数组中从左到右工作。另请参阅 reduceRight()。

reduce() 方法不会减少原始数组。

这个例子确定数组中所有数字的总和：

实例

var numbers1 = [45, 4, 9, 16, 25];var sum = numbers1.reduce(myFunction);function myFunction(total, value, index, array) {  return total + value;}

请注意此函数接受 4 个参数：

• 总数（初始值/先前返回的值）
• 项目值
• 项目索引
• 数组本身

上例并未使用 index 和 array 参数。可以将它改写为：

实例

var numbers1 = [45, 4, 9, 16, 25];var sum = numbers1.reduce(myFunction);function myFunction(total, value) {  return total + value;}

reduce() 方法能够接受一个初始值：

实例

var numbers1 = [45, 4, 9, 16, 25];var sum = numbers1.reduce(myFunction, 100);function myFunction(total, value) {  return total + value;}

Array.reduceRight()

reduceRight() 方法在每个数组元素上运行函数，以生成（减少它）单个值。

reduceRight() 方法在数组中从右到左工作。另请参阅 reduce()。

reduceRight() 方法不会减少原始数组。

这个例子确定数组中所有数字的总和：

实例

var numbers1 = [45, 4, 9, 16, 25];var sum = numbers1.reduceRight(myFunction);function myFunction(total, value, index, array) {  return total + value;}

请注意此函数接受 4 个参数：

• 总数（初始值/先前返回的值）
• 项目值
• 项目索引
• 数组本身

上例并未使用 index 和 array 参数。可以将它改写为：

实例

var numbers1 = [45, 4, 9, 16, 25];var sum = numbers1.reduceRight(myFunction);function myFunction(total, value) {  return total + value;}

Array.every()

every() 方法检查所有数组值是否通过测试。

这个例子检查所有数组值是否大于 18：

实例

var numbers = [45, 4, 9, 16, 25];var allOver18 = numbers.every(myFunction);function myFunction(value, index, array) {  return value > 18;}

请注意此函数接受 3 个参数：

• 项目值
• 项目索引
• 数组本身

如果回调函数仅使用第一个参数（值）时，可以省略其他参数：

实例

var numbers = [45, 4, 9, 16, 25];var allOver18 = numbers.every(myFunction);function myFunction(value) {  return value > 18;}

Array.some()

some() 方法检查某些数组值是否通过了测试。

这个例子检查某些数组值是否大于 18：

实例

var numbers = [45, 4, 9, 16, 25];var someOver18 = numbers.some(myFunction);function myFunction(value, index, array) {  return value > 18;}

请注意此函数接受 3 个参数：

• 项目值
• 项目索引
• 数组本身

Array.indexOf()

indexOf() 方法在数组中搜索元素值并返回其位置。

**注释：**第一个项目的位置是 0，第二个项目的位置是 1，以此类推。

实例

检索数组中的项目 “Apple”：

var fruits = ["Apple", "Orange", "Apple", "Mango"];var a = fruits.indexOf("Apple");

语法

array.indexOf(item, start)

item	必需。要检索的项目。
start	可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到结尾。

如果未找到项目，Array.indexOf() 返回 -1。

如果项目多次出现，则返回第一次出现的位置。

Array.lastIndexOf()

Array.lastIndexOf() 与 Array.indexOf() 类似，但是从数组结尾开始搜索。

实例

检索数组中的项目 “Apple”：

var fruits = ["Apple", "Orange", "Apple", "Mango"];var a = fruits.lastIndexOf("Apple");

语法

array.lastIndexOf(item, start)

item	必需。要检索的项目。
start	可选。从哪里开始搜索。负值将从结尾开始的给定位置开始，并搜索到开头。

Array.find()

find() 方法返回通过测试函数的第一个数组元素的值。

这个例子查找（返回）大于 18 的第一个元素的值：

实例

var numbers = [4, 9, 16, 25, 29];
var first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

请注意此函数接受 3 个参数：

• 项目值
• 项目索引
• 数组本身

Array.findIndex()

findIndex() 方法返回通过测试函数的第一个数组元素的索引。

这个例子查找大于 18 的第一个元素的索引：

实例

var numbers = [4, 9, 16, 25, 29];
var first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

请注意此函数接受 3 个参数：

• 项目值
• 项目索引
• 数组本身

JavaScript 数组 Const

ECMAScript 2015 (ES6)

2015 年，JavaScript 引入了一个重要的新关键字：const。

使用 const 声明数组已成为一种常见做法：

实例

const cars = ["Saab", "Volvo", "BMW"];

无法重新赋值

用 const 声明的数组不能重新赋值：

实例

const cars = ["Saab", "Volvo", "BMW"];cars = ["Toyota", "Volvo", "Audi"];    // ERROR

数组不是常量

关键字 const 有一定误导性。

它不定义常量数组。它定义的是对数组的常量引用。

因此，我们仍然可以更改常量数组的元素。

元素可以重新赋值

您可以更改常量数组的元素：

实例

// 您可以创建常量数组：const cars = ["Saab", "Volvo", "BMW"];// 您可以更改元素：cars[0] = "Toyota";// 您可以添加元素：cars.push("Audi");

浏览器支持

Internet Explorer 10 或更早的版本不支持 const 关键字。

下表注明了完全支持 const 关键字的首个浏览器版本：

Chrome 49	IE 11 / Edge	Firefox 36	Safari 10	Opera 36
2016 年 3 月	2013 年 10 月	2015 年 2 月	2016 年 9 月	2016 年 3 月

声明时赋值

JavaScript const 变量在声明时必须赋值：

意思是：用 const 声明的数组必须在声明时进行初始化。

使用 const 而不初始化数组是一个语法错误：

实例

不起作用：

const cars;cars = ["Saab", "Volvo", "BMW"];

用 var 声明的数组可以随时初始化。

您甚至可以在声明之前使用该数组：

实例

没问题：

cars = ["Saab", "Volvo", "BMW"];var cars;

const 块作用域

用 const 声明的数组具有块作用域。

在块中声明的数组与在块外声明的数组不同：

实例

const cars = ["Saab", "Volvo", "BMW"];// 此处 cars[0] 为 "Saab"{  const cars = ["Toyota", "Volvo", "BMW"];  // 此处 cars[0] 为 "Toyota"}// 此处 cars[0] 为 "Saab"

用 var 声明的数组没有块作用域：

实例

var cars = ["Saab", "Volvo", "BMW"];// 此处 cars[0] 为 "Saab"{  var cars = ["Toyota", "Volvo", "BMW"];  // 此处 cars[0] 为 "Toyota"}// 此处 cars[0] 为 "Toyota"

重新声明数组

在程序中的任何位置都允许用 var 重新声明数组：

实例

var cars = ["Volvo", "BMW"];   // 允许var cars = ["Toyota", "BMW"];  // 允许cars = ["Volvo", "Saab"];      // 允许

不允许在同一作用域或同一块中将数组重新声明或重新赋值给 const：

实例

var cars = ["Volvo", "BMW"];         // 允许const cars = ["Volvo", "BMW"];       // 不允许{  var cars = ["Volvo", "BMW"];         // 允许  const cars = ["Volvo", "BMW"];       // 不允许}

不允许在同一作用域或同一块中重新声明或重新赋值现有的 const 数组：

实例

const cars = ["Volvo", "BMW"];       // 允许const cars = ["Volvo", "BMW"];       // 不允许var cars = ["Volvo", "BMW"];         // 不允许cars = ["Volvo", "BMW"];             // 不允许{  const cars = ["Volvo", "BMW"];     // 允许  const cars = ["Volvo", "BMW"];     // 不允许  var cars = ["Volvo", "BMW"];       // 不允许  cars = ["Volvo", "BMW"];           // 不允许}

允许在另一个作用域或另一个块中使用 const 重新声明数组：

实例

const cars = ["Volvo", "BMW"];       // 允许{  const cars = ["Volvo", "BMW"];     // 允许}{  const cars = ["Volvo", "BMW"];     // 允许}

JavaScript 日期

实例

var d = new Date();

JavaScript 日期输出

默认情况下，JavaScript 将使用浏览器的时区并将日期显示为全文本字符串：

Tue Apr 02 2019 09:01:19 GMT+0800 (中国标准时间)

创建 Date 对象

Date 对象由新的 Date() 构造函数创建。

有 4 种方法创建新的日期对象：

• new Date()
• new Date(year, month, day, hours, minutes, seconds, milliseconds)
• new Date(milliseconds)
• new Date(date string)

new Date()

new Date() 用当前日期和时间创建新的日期对象：

实例

var d = new Date();

日期对象是静态的。计算机时间正在滴答作响，但日期对象不会。

new Date(year, month, …)

new Date(year, month, …) 用指定日期和时间创建新的日期对象。

7个数字分别指定年、月、日、小时、分钟、秒和毫秒（按此顺序）：

实例

var d = new Date(2018, 11, 24, 10, 33, 30, 0);

注释：JavaScript 从 0 到 11 计算月份。

一月是 0。十二月是11。

6个数字指定年、月、日、小时、分钟、秒：

实例

var d = new Date(2018, 11, 24, 10, 33, 30);

5个数字指定年、月、日、小时和分钟：

实例

var d = new Date(2018, 11, 24, 10, 33);

4个数字指定年、月、日和小时：

实例

var d = new Date(2018, 11, 24, 10);

3 个数字指定年、月和日：

实例

var d = new Date(2018, 11, 24);

2个数字指定年份和月份：

实例

var d = new Date(2018, 11);

您不能省略月份。如果只提供一个参数，则将其视为毫秒。

实例

var d = new Date(2018);

上个世纪

一位和两位数年份将被解释为 19xx 年：

实例

var d = new Date(99, 11, 24);

实例

var d = new Date(9, 11, 24);

new Date(dateString)

new Date(dateString) 从日期字符串创建一个新的日期对象：

实例

var d = new Date("October 13, 2014 11:13:00");

JavaScript 将日期存储为毫秒

JavaScript 将日期存储为自 1970 年 1 月 1 日 00:00:00 UTC（协调世界时）以来的毫秒数。

零时间是 1970 年 1 月 1 日 00:00:00 UTC。

现在的时间是：1970 年 1 月 1 日之后的 1554166879383 毫秒。

new Date(milliseconds)

new Date(milliseconds) 创建一个零时加毫秒的新日期对象：

实例

var d = new Date(0);

1970年 1 月 1 日加上100 000 000 000毫秒，大约是 1973 年 3 月 3 日：

实例

var d = new Date(100000000000);

1970 年 1 月 1 日减去 100 000 000 000 毫秒大约是 1966 年 10 月 31 日：

实例

var d = new Date(-100000000000);

实例

var d = new Date(86400000);

一天（24 小时）是 86 400 000 毫秒。

日期方法

创建 Date 对象时，可以使用许多方法对其进行操作。

日期方法允许您使用本地时间或 UTC（通用或 GMT）时间来获取和设置日期对象的年、月、日、小时、分钟、秒和毫秒。

显示日期

JavaScript（默认情况下）将以全文本字符串格式输出日期：

Wed Mar 25 2015 08:00:00 GMT+0800 (中国标准时间)

在 HTML 中显示日期对象时，会使用 toString() 方法自动转换为字符串。

实例

d = new Date();document.getElementById("demo").innerHTML = d;

等同于：

d = new Date();document.getElementById("demo").innerHTML = d.toString();

toUTCString() 方法将日期转换为 UTC 字符串（一种日期显示标准）。

实例

var d = new Date();document.getElementById("demo").innerHTML = d.toUTCString();

toDateString() 方法将日期转换为更易读的格式：

实例

var d = new Date();document.getElementById("demo").innerHTML = d.toDateString();

JavaScript 日期格式

有四种 JavaScript 日期输入格式：

类型	实例
ISO 日期	“2018-02-19” （国际标准）
短日期	“02/19/2018” 或者 “2018/02/19”
长日期	“Feb 19 2018” 或者 “19 Feb 2019”
完整日期	“Monday February 25 2015”

ISO 格式遵守 JavaScript 中的严格标准。

其他格式不太明确，可能是浏览器特定的。

JavaScript 日期输出

无论输入格式如何，JavaScript 默认将输出全文本字符串格式：

Mon Feb 19 2018 06:00:00 GMT+0800 (中国标准时间)

JavaScript ISO 日期

ISO 8601 是表现日期和时间的国际标准。

ISO 8601 语法 (YYYY-MM-DD) 也是首选的 JavaScript 日期格式：

实例（完整日期）

var d = new Date("2018-02-19");

计算的日期相对于您的时区。

根据您的时区，上面的结果将在 2 月 18 日至 2 月 19 日之间变化。

ISO 日期（年和月）

写日期也可以不规定具体某日 (YYYY-MM)：

var d = new Date("2015-03");

时区会对结果在 2 月 28 日至 3 月 1 日之间产生变化。

ISO 日期（只有年）

写日期也可以不规定具体的月和日 (YYYY)：

var d = new Date("2018");

时区会对结果在 2017 年 12 月 31 日至 2018 年 1 月 1 日之间产生变化。

ISO 日期（完整的日期加时、分和秒）

写日期也可以添加时、分和秒 (YYYY-MM-DDTHH:MM:SS)：

var d = new Date("2018-02-19T12:00:00");

日期和时间通过大写字母 T 来分隔。

UTC 时间通过大写字母 Z 来定义。

如果您希望修改相对于 UTC 的时间，请删除 Z 并用 +HH:MM 或 -HH:MM 代替：

实例

var d = new Date("2018-02-19T12:00:00-08:30");

UTC（Universal Time Coordinated）等同于 GMT（格林威治时间）。

**注释：**UTC，协调世界时，又称世界统一时间，世界标准时间，国际协调时间。

在日期-时间字符串中省略 T 或 Z，在不同浏览器中会产生不同结果。

时区

在设置日期时，如果不规定时区，则 JavaScript 会使用浏览器的时区。

当获取日期时，如果不规定时区，则结果会被转换为浏览器时区。

换句话说，假如日期/时间以 GMT（格林威治标准时间）创建，该日期/时间将被转换为 CST（中国标准时间），如果用户从中国进行浏览。

JavaScript 短日期

短日期通常使用 “MM/DD/YYYY” 这样的语法：

实例

var d = new Date("02/19/2018");

警告

在某些浏览器中，不带前导零的月或其会产生错误：

var d = new Date("2018-2-19");

“YYYY / MM / DD”的行为未定义。

有些浏览器会尝试猜测格式。有些会返回 NaN。

var d = new Date("2018/02/19");

“DD-MM-YYYY”的行为也是未定义的。

有些浏览器会尝试猜测格式。有些会返回 NaN。

var d = new Date("19-02-2018");

JavaScript 长日期

长日期通常以 “MMM DD YYYY” 这样的语法来写：

实例

var d = new Date("Feb 19 2018");

月和天能够以任意顺序出现：

实例

var d = new Date("19 Feb 2018");

并且，月能够以全称 (January) 或缩写 (Jan) 来写：

实例

var d = new Date("February 19 2018");

实例

var d = new Date("Feb 19 2018");

逗号会被忽略，且对大小写不敏感：

实例

var d = new Date("FEBRUARY, 25, 2015");

JavaScript 完整日期

JavaScript 接受“完整 JavaScript 格式”的日期字符串：

实例

var d = new Date("Mon Feb 19 2018 06:55:23 GMT+0100 (W. Europe Standard Time)");

JavaScript 会忽略日期名称和时间括号中的错误：

实例

var d = new Date("Fri Mar 26 2018 09:56:24 GMT+0100 (Tokyo Time)");

JavaScript 日期获取方法

日期方法允许您获取并设置日期值（年、月、日、时、分、秒、毫秒）

日期获取方法

获取方法用于获取日期的某个部分（来自日期对象的信息）。下面是最常用的方法（以字母顺序排序）：

方法	描述
getDate()	以数值返回天（1-31）
getDay()	以数值获取周名（0-6）
getFullYear()	获取四位的年（yyyy）
getHours()	获取小时（0-23）
getMilliseconds()	获取毫秒（0-999）
getMinutes()	获取分（0-59）
getMonth()	获取月（0-11）
getSeconds()	获取秒（0-59）
getTime()	获取时间（从 1970 年 1 月 1 日至今）

getTime() 方法

getTime() 方法返回自 1970 年 1 月 1 日以来的毫秒数：

实例

var d = new Date();document.getElementById("demo").innerHTML = d.getTime();

getFullYear() 方法

getFullYear() 方法以四位数字形式返回日期年份：

实例

var d = new Date();document.getElementById("demo").innerHTML = d.getFullYear();

getMonth() 方法

getMonth() 以数字（0-11）返回日期的月份：

实例

var d = new Date();document.getElementById("demo").innerHTML = d.getMonth();

在 JavaScript 中，第一个月（1 月）是月号 0，因此 12 月返回月号 11。

您可以使用名称数组，并使用 getMonth() 将月份作为名称返回：

实例

var d = new Date();var months =             [            "January", "February", "March", "April", "May", "June",             "July", "August", "September", "October", "November", "December"            ];document.getElementById("demo").innerHTML = months[d.getMonth()];

getDate() 方法

getDate() 方法以数字（1-31）返回日期的日：

实例

var d = new Date();document.getElementById("demo").innerHTML = d.getDate();

getHours() 方法

getHours() 方法以数字（0-23）返回日期的小时数：

实例

var d = new Date();document.getElementById("demo").innerHTML = d.getHours();

getMinutes() 方法

getMinutes() 方法以数字（0-59）返回日期的分钟数：

实例

var d = new Date();document.getElementById("demo").innerHTML = d.getMinutes();

getSeconds() 方法

getSeconds() 方法以数字（0-59）返回日期的秒数：

实例

var d = new Date();document.getElementById("demo").innerHTML = d.getSeconds();

getMilliseconds() 方法

getMilliseconds() 方法以数字（0-999）返回日期的毫秒数：

实例

var d = new Date();document.getElementById("demo").innerHTML = d.getMilliseconds();

getDay() 方法

getDay() 方法以数字（0-6）返回日期的星期名（weekday）：

实例

var d = new Date();document.getElementById("demo").innerHTML = d.getDay();

在 JavaScript 中，一周的第一天（0）表示“星期日”，即使世界上的一些国家认为周的第一天是“星期一”。

您可以使用名称数组，并使用 getDay() 将星期名作为名称返回：

实例

var d = new Date();var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];document.getElementById("demo").innerHTML = days[d.getDay()];

UTC 日期方法

UTC 日期方法用于处理 UTC 日期（通用时区日期，Univeral Time Zone dates）：

方法	描述
getUTCDate()	等于 getDate()，但返回 UTC 日期
getUTCDay()	等于 getDay()，但返回 UTC 日
getUTCFullYear()	等于 getFullYear()，但返回 UTC 年
getUTCHours()	等于 getHours()，但返回 UTC 小时
getUTCMilliseconds()	等于 getMilliseconds()，但返回 UTC 毫秒
getUTCMinutes()	等于 getMinutes()，但返回 UTC 分
getUTCMonth()	等于 getMonth()，但返回 UTC 月
getUTCSeconds()	等于 getSeconds()，但返回 UTC 秒

JavaScript 日期设置方法

使用“设置日期”方法可以设置日期对象的日期值（年、月、日、小时、分钟、秒、毫秒）。

日期设置方法

设置方法用于设置日期的某个部分。下面是最常用的方法（按照字母顺序排序）：

方法	描述
setDate()	以数值（1-31）设置日
setFullYear()	设置年（可选月和日）
setHours()	设置小时（0-23）
setMilliseconds()	设置毫秒（0-999）
setMinutes()	设置分（0-59）
setMonth()	设置月（0-11）
setSeconds()	设置秒（0-59）
setTime()	设置时间（从 1970 年 1 月 1 日至今的毫秒数）

setFullYear() 方法

setFullYear() 方法设置日期对象的年份。这个例子设置为 2020 年：

实例

<script>var d = new Date();d.setFullYear(2020);document.getElementById("demo").innerHTML = d;</script>

setFullYear() 方法可以选择设置月和日：

实例

<script>var d = new Date();d.setFullYear(2020, 11, 3);document.getElementById("demo").innerHTML = d;</script>

setMonth() 方法

setMonth() 方法设置日期对象的月份（0-11）：

实例

<script>var d = new Date();d.setMonth(11);document.getElementById("demo").innerHTML = d;</script>

setDate() 方法

setDate() 方法设置日期对象的日（1-31）：

实例

<script>var d = new Date();d.setDate(15);document.getElementById("demo").innerHTML = d;</script>

setDate() 方法也可用于将天数添加到日期：

实例

<script>var d = new Date();d.setDate(d.getDate() + 50);document.getElementById("demo").innerHTML = d;</script>

如果添加天数，切换月份或年份，则更改将由 Date 对象自动处理。

setHours() 方法

setHours() 方法设置日期对象的小时（0-23）：

实例

<script>var d = new Date();d.setHours(22);document.getElementById("demo").innerHTML = d;</script>

setMinutes() 方法

setMinutes() 方法设置日期对象的分钟（0-59）：

实例

<script>var d = new Date();d.setMinutes(30);document.getElementById("demo").innerHTML = d;</script>

setSeconds() 方法

setSeconds() 方法设置日期对象的秒数（0-59）：

实例

<script>var d = new Date();d.setSeconds(30);document.getElementById("demo").innerHTML = d;</script>

比较日期

日期可以很容易地进行比较。

下面的例子把今日与 2049 年 1 月 16 日进行比较：

实例

var today, someday, text;today = new Date();someday = new Date();someday.setFullYear(2049, 0, 16);if (someday > today) {  text = "今天在 2049 年 1 月 16 日之前";} else {  text = "今天在 2049 年 1 月 16 日之后";}document.getElementById("demo").innerHTML = text;

JavaScript 从 0 到 11 计数月份。1 月是 0。12 月是 11。JavaScript 从 0 到 11 计数月份。1 月是 0。12 月是 11。

JavaScript 数学

JavaScript Math 对象允许您对数字执行数学任务。

实例

Math.PI;           // 返回 3.141592653589793

Math.round()

Math.round(x) 的返回值是 x 四舍五入为最接近的整数：

实例

Math.round(6.8);    // 返回 7Math.round(2.3);    // 返回 2

Math.pow()

Math.pow(x, y) 的返回值是 x 的 y 次幂：

实例

Math.pow(8, 2);      // 返回 64

Math.sqrt()

Math.sqrt(x) 返回 x 的平方根：

实例

Math.sqrt(64);      // 返回 8

Math.abs()

Math.abs(x) 返回 x 的绝对（正）值：

实例

Math.abs(-4.7);     // 返回 4.7

Math.ceil()

Math.ceil(x) 的返回值是 x 上舍入最接近的整数：

实例

Math.ceil(6.4);     // 返回 7

Math.floor()

Math.floor(x) 的返回值是 x 下舍入最接近的整数：

实例

Math.floor(2.7);    // 返回 2

Math.sin()

Math.sin(x) 返回角 x（以弧度计）的正弦（介于 -1 与 1 之间的值）。

如果您希望使用角度替代弧度，则需要将角度转换为弧度：

Angle in radians = Angle in degrees x PI / 180.

实例

Math.sin(90 * Math.PI / 180);     // 返回 1（90 度的正弦）

Math.cos()

Math.cos(x) 返回角 x（以弧度计）的余弦（介于 -1 与 1 之间的值）。

如果您希望使用角度替代弧度，则需要将角度转换为弧度：

Angle in radians = Angle in degrees x PI / 180.

实例

Math.cos(0 * Math.PI / 180);     // 返回 1（0 度的余弦）

Math.min() 和 Math.max()

Math.min() 和 Math.max() 可用于查找参数列表中的最低或最高值：

实例

Math.min(0, 450, 35, 10, -8, -300, -78);  // 返回 -300

实例

Math.max(0, 450, 35, 10, -8, -300, -78);  // 返回 450

Math.random()

Math.random() 返回介于 0（包括） 与 1（不包括） 之间的随机数：

实例

Math.random();     // 返回随机数

Math 属性（常量）

JavaScript 提供了可由 Math 对象访问的 8 个数学常量：

实例

Math.E          // 返回欧拉指数（Euler's number）Math.PI         // 返回圆周率（PI）Math.SQRT2      // 返回 2 的平方根Math.SQRT1_2    // 返回 1/2 的平方根Math.LN2        // 返回 2 的自然对数Math.LN10       // 返回 10 的自然对数Math.LOG2E      // 返回以 2 为底的 e 的对数（约等于 1.414）Math.LOG10E     // 返回以 10 为底的 e 的对数（约等于 0.434）

Math 构造器

与其他全局对象不同，Math对象没有构造函数。方法和属性是静态的。

可以在不首先创建Math对象的情况下使用所有方法和属性（常量）。

Math 对象方法

方法	描述
abs(x)	返回 x 的绝对值
acos(x)	返回 x 的反余弦值，以弧度计
asin(x)	返回 x 的反正弦值，以弧度计
atan(x)	以介于 -PI/2 与 PI/2 弧度之间的数值来返回 x 的反正切值。
atan2(y,x)	返回从 x 轴到点 (x,y) 的角度
ceil(x)	对 x 进行上舍入
cos(x)	返回 x 的余弦
exp(x)	返回 Ex 的值
floor(x)	对 x 进行下舍入
log(x)	返回 x 的自然对数（底为e）
max(x,y,z,…,n)	返回最高值
min(x,y,z,…,n)	返回最低值
pow(x,y)	返回 x 的 y 次幂
random()	返回 0 ~ 1 之间的随机数
round(x)	把 x 四舍五入为最接近的整数
sin(x)	返回 x（x 以角度计）的正弦
sqrt(x)	返回 x 的平方根
tan(x)	返回角的正切

Math.random()

Math.random() 返回 0（包括） 至 1（不包括） 之间的随机数：

实例

Math.random();				// 返回随机数

Math.random() 总是返回小于 1 的数。

JavaScript 随机整数

Math.random() 与 Math.floor() 一起使用用于返回随机整数。

实例

Math.floor(Math.random() * 10);		// 返回 0 至 9 之间的数

实例

Math.floor(Math.random() * 11);		// 返回 0 至 10 之间的数

实例

Math.floor(Math.random() * 100);	// 返回 0 至 99 之间的数

实例

Math.floor(Math.random() * 101);	// 返回 0 至 100 之间的数

实例

Math.floor(Math.random() * 10) + 1;	// 返回 1 至 10 之间的数

实例

Math.floor(Math.random() * 100) + 1;	// 返回 1 至 100 之间的数

一个适当的随机函数

正如你从上面的例子看到的，创建一个随机函数用于生成所有随机整数是一个好主意。

这个 JavaScript 函数始终返回介于 min（包括）和 max（不包括）之间的随机数：

实例

function getRndInteger(min, max) {    return Math.floor(Math.random() * (max - min) ) + min;}

这个 JavaScript 函数始终返回介于 min 和 max（都包括）之间的随机数：

实例

function getRndInteger(min, max) {    return Math.floor(Math.random() * (max - min + 1) ) + min;}

JavaScript 逻辑

JavaScript 布尔（逻辑）代表两个值之一：true 或 false。

布尔值

通常，在编程中，您会需要只能有两个值之一的数据类型，比如

• YES / NO
• ON / OFF
• TRUE / FALSE

鉴于此，JavaScript 提供一种布尔数据类型。它只接受值 true 或 false。

Boolean() 函数

您可以使用 Boolean() 函数来确定表达式（或变量）是否为真：

实例

Boolean(10 > 9)        // 返回 true

或者甚至更简单：

实例

(10 > 9)              // 也返回 true10 > 9                // 也返回 true

比较和条件

JS 比较这一章列出了完整的比较运算符。

JS 条件这一章列出了完整的条件语句。

下面是一些例子：

运算符	描述	实例
==	等于	if (day == “Monday”)
>	大于	if (salary > 9000)
<	小于	if (age < 18)

表达式的布尔值是 JavaScript 比较和条件的基础。

所有具有“真实”值的即为 True

实例

1003.14-15"Hello""false"7 + 1 + 3.145 < 6 

所有不具有“真实”值的即为 False

*0（零）*的布尔值为 false：

var x = 0;Boolean(x);       // 返回 false

*-0 （负零）*的布尔值为 false：

var x = -0;Boolean(x);       // 返回 false

*""（空值）*的布尔值为 false：

var x = "";Boolean(x);       // 返回 false

undefined 的布尔值是 false：

var x;Boolean(x);       // 返回 false

null 的布尔值是 false：

var x = null;Boolean(x);       // 返回 false

false 的布尔值（正如您猜到的）是 false：

var x = false;Boolean(x);       // 返回 false

NaN 的布尔值是 false：

var x = 10 / "H";Boolean(x);       // 返回 false

布尔可以是对象

通常 JavaScript 布尔是由字面量创建的原始值：

var x = false

但是布尔也可以通过关键词 new 作为对象来定义：

var y = new Boolean(false)

实例

var x = false;var y = new Boolean(false);// typeof x 返回 boolean// typeof y 返回 object

不要创建布尔对象。它会拖慢执行速度。

new 关键词会使代码复杂化，并产生某些意想不到的结果：

当使用 == 运算符时，相等的布尔是相等的：

实例

var x = false;             var y = new Boolean(false);// (x == y) 为 true，因为 x 和 y 拥有相等的值

当使用 === 运算符时，相等的布尔是不相等的，因为 === 运算符需要在类型和值两方面同时相等。

实例

var x = false;             var y = new Boolean(false);// (x === y) 为 false，因为 x 和 y 的类型不同

或者甚至更糟。对象无法进行比较：

实例

var x = new Boolean(false);             var y = new Boolean(false);// (x == y) 为 false，因为对象无法比较

比较两个 JavaScript 对象将始终返回 false。

JavaScript 比较

比较和逻辑运算符用于测试 true 或 false。

比较运算符

比较运算符在逻辑语句中使用，以判定变量或值是否相等。

我们给定 x = 5，下表中解释了比较运算符：

运算符	描述	比较	返回
==	等于	x == 8	false
		x == 5	true
		x == “5”	true
===	值相等并且类型相等	x === 5	true
		x === “5”	false
!=	不相等	x != 8	true
!==	值不相等或类型不相等	x !== 5	false
		x !== “5”	true
		x !== 8	true
>	大于	x > 8	false
<	小于	x < 8	true
>=	大于或等于	x >= 8	false
<=	小于或等于	x <= 8	true

如何使用

比较运算符可用在条件语句中对值进行比较，并根据结果采取动作：

if (age < 18) text = "太年轻";

逻辑运算符

逻辑运算符用于判定变量或值之间的逻辑。

我们给定 x = 6 且 y = 3，下表解释了逻辑运算符：

运算符	描述	例子
&&	与	(x < 10 && y > 1) 为 true
||	或	(x == 5 || y == 5) 为 false
!	非	!(x == y) 为 true

条件（三元）运算符

JavaScript 也包含了可基于某些条件向变量赋值的条件运算符。

语法

variablename = (condition) ? value1:value2

实例

var voteable = (age < 18) ? "太年轻":"足够成熟";

如果变量 age 的值小于 18，变量 voteable 的值将是 “太年轻”，否则变量 voteable 的值将是 “足够成熟”。

比较不同的类型

比较不同类型的数据也许会出现不可预料的结果。

如果将字符串与数字进行比较，那么在做比较时 JavaScript 会把字符串转换为数值。空字符串将被转换为 0。非数值字符串将被转换为始终为 false 的 NaN。

案例	值
2 < 12	true
2 < “12”	true
2 < “Bill”	false
2 > “Bill”	false
2 == “Bill”	false
“2” < “12”	false
“2” > “12”	true
“2” == “12”	false

当比较两个字符串时，“2” 大于 “12”，因为（按照字母排序）1 小于 2。

为了确保正确的结果，在比较值前应该把变量转换为合适的类型：

age = Number(age);if (isNaN(age)) {    voteable = "输入错误";} else {    voteable = (age < 18) ? "太年轻" : "足够成熟";} 

JavaScript 条件

条件语句用于基于不同条件执行不同的动作。

条件语句

在您写代码时，经常会需要基于不同判断执行不同的动作。

您可以在代码中使用条件语句来实现这一点。

在 JavaScript 中，我们可使用如下条件语句：

• 使用 if 来规定要执行的代码块，如果指定条件为 true
• 使用 else 来规定要执行的代码块，如果相同的条件为 false
• 使用 else if 来规定要测试的新条件，如果第一个条件为 false
• 使用 switch 来规定多个被执行的备选代码块

if 语句

请使用 if 语句来规定假如条件为 true 时被执行的 JavaScript 代码块。

语法

if (条件) {    如果条件为 true 时执行的代码} 

**注释：**if 使用小写字母。大写字母（IF 或 If）会产生 JavaScript 错误。

实例

如果时间早于 18:00，则发出 “Good day” 的问候：

if (hour < 18) {    greeting = "Good day";}

如果时间早于 18 点，则 greeting 的结果将是：

Good day

else 语句

请使用 else 语句来规定假如条件为 false 时的代码块。

if (条件) {    条件为 true 时执行的代码块} else {     条件为 false 时执行的代码块}

实例

如果 hour 小于 18，创建 “Good day” 问候，否则 “Good evening”：

if (hour < 18) {    greeting = "Good day"; } else {    greeting = "Good evening"; } 

greeting 的结果：

Good day

else if 语句

请使用 else if 来规定当首个条件为 false 时的新条件。

语法

if (条件 1) {    条件 1 为 true 时执行的代码块} else if (条件 2) {    条件 1 为 false 而条件 2 为 true 时执行的代码块 } else {    条件 1 和条件 2 同时为 false 时执行的代码块}

实例

如果时间早于 10:00，则创建 “Good morning” 问候，如果不是，但时间早于 18:00，则创建 “Good day” 问候，否则创建 “Good evening”：

if (time < 10) {    greeting = "Good morning"; } else if (time < 18) {    greeting = "Good day"; } else {    greeting = "Good evening"; } 

greeting 的结果：

Good day

JavaScript Switch 语句

switch 语句用于基于不同条件执行不同动作。

JavaScript Switch 语句

请使用 switch 语句来选择多个需被执行的代码块之一。

语法

switch(表达式) {     case n:        代码块        break;     case n:        代码块        break;     default:        默认代码块} 

代码解释：

• 计算一次 switch 表达式
• 把表达式的值与每个 case 的值进行对比
• 如果存在匹配，则执行关联代码

实例

getDay() 方法返回 0 至 6 之间的周名数字（weekday number）。

(Sunday=0, Monday=1, Tuesday=2 …)

本例使用周名数字来计算周的名称：

switch (new Date().getDay()) {    case 0:        day = "星期天";        break;    case 1:        day = "星期一";         break;    case 2:        day = "星期二";         break;    case 3:        day = "星期三";         break;    case 4:        day = "星期四";         break;    case 5:        day = "星期五";         break;    case 6:        day = "星期六";} 

结果将是：

今天是星期三

break 关键词

如果 JavaScript 遇到 break 关键词，它会跳出 switch 代码块。

此举将停止代码块中更多代码的执行以及 case 测试。

如果找到匹配，并完成任务，则随机中断执行（break）。无需更多测试。

break 能够节省大量执行时间，因为它会“忽略” switch 代码块中的其他代码的执行。

不必中断 switch 代码块中的最后一个 case。代码块在此处会自然结束。

default 关键词

default 关键词规定不存在 case 匹配时所运行的代码：

实例

getDay() 方法返回 0 至 6 的数字周名。

如果今日既不是周六（6）也不是周日（0），则输出一段默认消息：

switch (new Date().getDay()) {    case 6:        text = "今天是周六";        break;     case 0:        text = "今天是周日";        break;     default:         text = "期待周末~";} 

text 的结果是：

期待周末~

默认的 case 不必是 switch 代码块中最后一个 case：

实例

switch (new Date().getDay()) {    default:         text = "期待周末！";         break;    case 6:        text = "今天是周六";        break;     case 0:        text = "今天是周日";} 

如果 default 不是 switch 代码块中最后一个 case，请记得用 break 结束默认 case。

常见的代码块

有时您会需要不同的 case 来使用相同的代码。

在本例中，case 4 和 5 分享相同的代码块，而 0 和 6 分享另一段代码块：

实例

switch (new Date().getDay()) {    case 4:    case 5:        text = "周末快到了：）";        break;     case 0:    case 6:        text = "今天是周末~";         break;    default:         text = "期待周末！";} 

Switching 的细节

如果多种 case 匹配一个 case 值，则选择第一个 case。

如果未找到匹配的 case，程序将继续使用默认 label。

如果未找到默认 label，程序将继续 switch 后的语句。

严格的比较

Switch case 使用严格比较（===）。

值必须与要匹配的类型相同。

只有操作数属于同一类型时，严格比较才能为 true。

在这个例子中，x 将不匹配：

实例

var x = "0";switch (x) {  case 0:    text = "Off";    break;  case 1:    text = "On";    break;  default:    text = "No value found";}

JavaScript For 循环

循环可多次执行代码块。

JavaScript 循环

假如您需要运行代码多次，且每次使用不同的值，那么循环（loop）相当方便使用。

通常我们会遇到使用数组的例子：

不需要这样写：

text += cars[0] + "<br>"; text += cars[1] + "<br>"; text += cars[2] + "<br>"; text += cars[3] + "<br>"; text += cars[4] + "<br>"; text += cars[5] + "<br>"; 

您能够这样写：

for (i = 0; i < cars.length; i++) {     text += cars[i] + "<br>"; }

不同类型的循环

JavaScript 支持不同类型的循环：

• for - 多次遍历代码块
• for/in - 遍历对象属性
• while - 当指定条件为 true 时循环一段代码块
• do/while - 当指定条件为 true 时循环一段代码块

For 循环

for 循环是在您希望创建循环时经常使用的工具。

for 循环的语法如下：

for (语句 1; 语句 2; 语句 3) {     要执行的代码块}

语句 1 在循环（代码块）开始之前执行。

语句 2 定义运行循环（代码块）的条件。

语句 3 会在循环（代码块）每次被执行后执行。

实例

for (i = 0; i < 5; i++) {     text += "数字是 " + i + "<br>";}

从上面的代码中，您可以了解到：

语句 1 在循环开始之前设置了一个变量（var i = 0）。

语句 2 定义运行循环的条件（i 必须小于 5）。

语句 3 会在代码块每次执行之后对值进行递增（i++）。

语句 1

通常，您会使用语句 1 来初始化循环中所使用的的变量（i = 0）。

但情况并不总是这样，JavaScript 不会在意。语句 1 是可选的。

您可以在语句 1 中初始化多个值（由逗号分隔）：

实例

for (i = 0, len = cars.length, text = ""; i < len; i++) {     text += cars[i] + "<br>";}

而且您还可以省略语句 1（比如在循环开始前设置好值）：

实例

var i = 2;var len = cars.length;var text = "";for (; i < len; i++) {     text += cars[i] + "<br>";}

语句 2

通常语句 2 用于计算初始变量的条件。

但情况并不总是这样，JavaScript 不会在意。语句 2 也是可选的。

如果语句 2 返回 true，那么循环会重新开始，如果返回 false，则循环将结束。

语句 3

通常语句 3 会递增初始变量的值。

但情况并不总是这样，JavaScript 不会在意。语句 3 也是可选的。

语句 3 可做任何事情，比如负递增（i–），正递增（i = i + 15），或者任何其他事情。

语句 3 也可被省略（比如当您在循环内递增值时）：

实例

var i = 0;var len = cars.length;for (; i < len; ) {     text += cars[i] + "<br>";      i++;}

For/In 循环

JavaScript for/in 语句遍历对象的属性：

实例

var person = {fname:"Bill", lname:"Gates", age:62}; var text = "";var x;for (x in person) {    text += person[x];}

JavaScript For In

For In 循环

JavaScript for in 语句循环遍历对象的属性：

语法

for (key in object) {  // code block to be executed}

实例

const person = {fname:"John", lname:"Doe", age:25};let text = "";for (let x in person) {  text += person[x];}

例子解释

• for in 循环遍历 person 对象
• 每次迭代返回一个键 (x)
• 键用于访问键的值
• 键的值为 person[x]

For In 遍历数组

JavaScript for in 语句也可以遍历数组的属性：

语法

for (variable in array) {  code}

实例

const numbers = [45, 4, 9, 16, 25];let txt = "";for (let x in numbers) {  txt += numbers[x];}

如果索引顺序很重要，请不要在数组上使用 for in。

索引顺序依赖于实现，可能不会按照您期望的顺序访问数组值。

当顺序很重要时，最好使用 for 循环、for of 循环或 Array.forEach()。

Array.forEach()

forEach() 方法为每个数组元素调用一次函数（回调函数）。

实例

const numbers = [45, 4, 9, 16, 25];let txt = "";numbers.forEach(myFunction);function myFunction(value, index, array) {  txt += value;}

请注意，该函数采用 3 个参数：

• 项目值
• 项目索引
• 数组本身

上面的例子仅使用 value 参数。可以改写为：

实例

const numbers = [45, 4, 9, 16, 25];let txt = "";numbers.forEach(myFunction);function myFunction(value) {  txt += value;}

JavaScript For Of

For Of 循环

JavaScript for of 语句循环遍历可迭代对象的值。

它允许您循环遍历可迭代的数据结构，例如数组、字符串、映射、节点列表等：

语法

for (variable of iterable) {  // code block to be executed}

variable - 对于每次迭代，下一个属性的值都会分配给变量。变量可以用 const、let 或 var 声明。

iterable - 具有可迭代属性的对象。

浏览器支持

For/of 在 2015 年被添加到 JavaScript (ES6)

Safari 7 是第一个支持 for of 的浏览器：

Chrome 38	Edge 12	Firefox 51	Safari 7	Opera 25
2014 年 10 月	2015 年 7 月	2016 年 10 月	2013 年 10 月	2014 年 10 月

Internet Explorer 不支持 For/of。

遍历数组

实例

const cars = ["BMW", "Volvo", "Mini"];let text = "";for (let x of cars) {  text += x;}

遍历字符串

实例

let language = "JavaScript";let text = "";for (let x of language) {text += x;}

JavaScript While 循环

只要条件为 true，循环能够一直执行代码块。

While 循环

while 循环会一直循环代码块，只要指定的条件为 true。

语法

while (条件) {    要执行的代码块}

实例

在下面的例子中，循环中的代码将运行，一遍又一遍，只要变量（i）小于 10：

while (i < 10) {    text += "数字是 " + i;    i++;}

如果您忘了对条件中使用的变量进行递增，那么循环永不会结束。这会导致浏览器崩溃。

Do/While 循环

do/while 循环是 while 循环的变体。在检查条件是否为真之前，这种循环会执行一次代码块，然后只要条件为真就会重复循环。

语法

do {    要执行的代码块}while (条件);

实例

下面的例子使用了 do/while 循环。该循环会执行至少一次，即使条件为 false，因为代码块会在条件测试之前执行：

do {    text += "The number is " + i;    i++; }while (i < 10);

不要忘记对条件中所用变量进行递增，否则循环永不会结束！

比较 For 与 While

如果您已经阅读了之前关于循环的章节，您会发现 while 循环与 for 循环相当类似，其中的语句 1 和 语句 2 都可以省略。

本例中的循环使用 for 循环来提取 cars 数组中的汽车品牌：

实例

var cars = ["BMW", "Volvo", "Saab", "Ford"];var i = 0;var text = "";for (;cars[i];) {    text += cars[i] + "<br>";    i++;} 

本例中的循环使用 while 循环来提取 cars 数组中的汽车品牌：

实例

var cars = ["BMW", "Volvo", "Saab", "Ford"];var i = 0;var text = ""; while (cars[i]) {    text += cars[i] + "<br>";    i++;} 

JavaScript Break 和 Continue

break 语句“跳出”循环。

continue 语句“跳过”循环中的一个迭代。

Break 语句

在本教程稍早的章节中，您已见到了 break 语句。它被用于“跳出” switch 语句。

break 语句也可用于跳出循环。

break 语句会中断循环，并继续执行循环之后的代码（如果有）：

实例

for (i = 0; i < 10; i++) {    if (i === 3) { break; }    text += "数字是 " + i + "<br>";}

Continue 语句

continue 语句中断（循环中）的一个迭代，如果发生指定的条件。然后继续循环中的下一个迭代。

本例跳过值 3 ：

实例

for (i = 0; i < 10; i++) {    if (i === 3) { continue; }    text += "数字是 " + i + "<br>";} 

JavaScript 标签

如需标记 JavaScript 语句，请将标签名和冒号置于语句之前：

label:statements

break 和 continue 语句是仅有的可“跳出”代码块的 JavaScript 语句。

语法：

break labelname;continue labelname;

continue 语句（不论有无标签引用）只能用于跳过一个迭代。

break 语句，如果没有标签引用，只能用于跳出一个循环或一个 switch。

如果有标签引用，则 break 语句可用于跳出任意代码块：

实例

var  cars = ["BMW", "Volvo", "Saab", "Ford"];list: {    text += cars[0] + "<br>";     text += cars[1] + "<br>";     text += cars[2] + "<br>";     break list;    text += cars[3] + "<br>";     text += cars[4] + "<br>";     text += cars[5] + "<br>"; }

代码块指的是 { 与 } 直接的代码片段。

JavaScript typeof

JavaScript typeof

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

• string
• number
• boolean
• object
• function

有 6 种类型的对象：

• Object
• Date
• Array
• String
• Number
• Boolean

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

• null
• undefined

typeof 运算符

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

实例

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

请注意：

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

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

原始日期

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

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

• string
• number
• boolean
• undefined

实例

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

复杂数据

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"

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]}

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

Example

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

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

实例

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

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

实例

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

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

实例

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

Undefined

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

实例

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

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

实例

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

空值

空值与 undefined 无关。

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

实例

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

Null

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

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

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

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

实例

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

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

实例

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

undefined 与 null 的区别

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

typeof undefined           // undefinedtypeof null                // objectnull === undefined         // falsenull == undefined          // true

JavaScript 类型转换

Number() 转换数值，String() 转换字符串，Boolean() 转换布尔值。

JavaScript 数据类型

JavaScript 中有五种可包含值的数据类型：

• 字符串（string）
• 数字（number）
• 布尔（boolean）
• 对象（object）
• 函数（function）

有三种对象类型：

• 对象（Object）
• 日期（Date）
• 数组（Array）

同时有两种不能包含值的数据类型：

• 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:62}  // 返回 "object"typeof new Date()             // 返回 "object"typeof function () {}         // 返回 "function"typeof myCar                  // 返回 "undefined" *typeof null                   // 返回 "object"

请注意：

• NaN 的数据类型是数值
• 数组的数据类型是对象
• 日期的数据类型是对象
• null 的数据类型是对象
• 未定义变量的数据类型是 undefined
• 尚未赋值的变量的数据类型也是 undefined

您无法使用 typeof 去判断 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:62}.constructor  // 返回" function Object()  { [native code] }"new Date().constructor             // 返回 "function Date()    { [native code] }"function () {}.constructor         // 返回 "function Function(){ [native code] }"

您可以通过检查 constructor 属性来确定某个对象是否为数组（包含单词 “Array”）：

实例

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

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

实例

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

您可以通过检查 constructor 属性来确定某个对象是否为日期（包含单词 “Date”）：

实例

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

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

实例

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

JavaScript 类型转换

JavaScript 变量能够被转换为新变量以及另一种数据类型：

• 通过使用 JavaScript 函数
• 通过 JavaScript 本身自动转换

把数值转换为字符串

全局方法 String() 能够把数字转换为字符串。

它可用于任意类型的数字、文字、变量或表达式：

实例

String(x)         // 从数值变量 x 返回字符串String(123)       // 从数值文本 123 返回字符串String(100 + 23)  // 从表达式中的数值返回字符串

数字方法 toString() 同理。

实例

x.toString()(123).toString()(100 + 23).toString()

在数字方法这一章，您将学到更多可用于将数值转换为字符串的方法：

方法	描述
toExponential()	返回字符串，对数字进行舍入，并使用指数计数法来写。
toFixed()	返回字符串，对数字进行舍入，并使用指定位数的小数来写。
toPrecision()	返回字符串，把数字写为指定的长度。

把布尔转换为字符串

全局方法 String() 能够将布尔转换为字符串。

String(false)        // 返回 "false"String(true)         // 返回 "true"

布尔方法 toString() 同理。

false.toString()     // 返回 "false"true.toString()      // 返回 "true"

把日期转换为字符串

全局方法 String() 可将日期转换为字符串。

String(Date())      // 返回 "Wed Feb 23 2022 14:25:46 GMT+0800 (中国标准时间)"

日期方法 toString() 同理。

实例

Date().toString()   // 返回 "Wed Feb 23 2022 14:25:46 GMT+0800 (中国标准时间)"

在日期方法这一章，您能够找到更多可用于把日期转换为字符串的方法：

方法	描述
getDate()	获得以数值计（1-31）的日
getDay()	或者以数值计（0-6）的周
getFullYear()	获得四位的年（yyyy）
getHours()	获得时（0-23）
getMilliseconds()	获得毫秒（0-999）
getMinutes()	获得分钟（0-59）
getMonth()	获得月（0-11）
getSeconds()	获得秒（0-59）
getTime()	获得时间（1970 年 1 月 1 日以来的毫秒）

把字符串转换为数值

全局方法 Number() 可把字符串转换为数字。

包含数字的字符串（比如 “3.14”）转换为数字（比如 3.14）。

空的字符串转换为 0。

其他字符串将转换为 NaN（Not a number，不是数字）。

Number("3.14")    // 返回 3.14Number(" ")       // 返回 0Number("")        // 返回 0Number("99 88")   // 返回 NaN

在数字方法这一章中，您将找到更多可用于把字符串转换为数字的方法：

方法	描述
parseFloat()	解析字符串并返回浮点数。
parseInt()	解析字符串并返回整数。

一元 + 运算符

一元的 + 运算符可用于把变量转换为数字：

实例

var y = "5";      // y 是字符串var x = + y;      // x 是数字

如果无法转换变量，则仍会成为数字，但是值为 NaN（Not a number）：

实例

var y = "Bill";   // y 是字符串var x = + y;      // x 是数字 (NaN)

把布尔转换数值

全局方法 Number() 也可把布尔转换为数字。

Number(false)     // 返回 0Number(true)      // 返回 1

把日期转换为数字

全局方法 Number() 可用于把日期转换为数字。

d = new Date();Number(d)          // 返回 1645597546150

日期方法 getTime() 同理。

d = new Date();d.getTime()        // 返回 1645597546150

自动类型转换

如果 JavaScript 尝试操作一种“错误”的数据类型，它会试图将该值转换为“正确”的类型。

结果并不总是你所期望的：

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

自动字符串转换

JavaScript 自动调用变量的 toString() 函数，当您试图“输出”对象或变量时：

document.getElementById("demo").innerHTML = myVar;// 如果 myVar = {name:"Fjohn"}  // toString 转换为 "[object Object]"// 如果 myVar = [1,2,3,4]       // toString 转换为 "1,2,3,4"// 如果 myVar = new Date()      // toString 转换为 "Wed Feb 23 2022 14:25:46 GMT+0800 (中国标准时间)"

数字和布尔也会被转换，但并不明显：

// 如果 myVar = 123             // toString 转换为 "123"// 如果 myVar = true            // toString 转换为 "true"// 如果 myVar = false           // toString 转换为 "false"

JavaScript 类型转换表

下表中列出了将不同 JavaScript 值转换为数字、字符串和布尔的结果：

原始值	转换为数字	转换为字符串	转换为逻辑
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	“”	false
“20”	20	“20”	true
“twenty”	NaN	“twenty”	true
[ ]	0	“”	true
[20]	20	“20”	true
[10,20]	NaN	“10,20”	true
[“twenty”]	NaN	“twenty”	true
[“ten”,“twenty”]	NaN	“ten,twenty”	true
function(){}	NaN	“function(){}”	true
{ }	NaN	“[object Object]”	true
null	0	“null”	false
undefined	NaN	“undefined”	false

引号中的值指示字符串值。

加粗的值指示了（某些）程序员也许不希望的值。

JavaScript 位运算符

JavaScript 位运算符

运算符	名称	描述
&	AND	如果两位都是 1 则设置每位为 1
|	OR	如果两位之一为 1 则设置每位为 1
^	XOR	如果两位只有一位为 1 则设置每位为 1
~	NOT	反转所有位
<<	零填充左位移	通过从右推入零向左位移，并使最左边的位脱落。
>>	有符号右位移	通过从左推入最左位的拷贝来向右位移，并使最右边的位脱落。
>>>	零填充右位移	通过从左推入零来向右位移，并使最右边的位脱落。

实例

操作	结果	等同于	结果
5 & 1	1	0101 & 0001	0001
5 | 1	5	0101 | 0001	0101
5 ^ 1	4	0101 ^ 0001	0100
~ 5	10	~0101	1010
5 << 1	10	0101 << 1	1010
5 >> 1	2	0101 >> 1	0010
5 >>> 1	2	0101 >>> 1	0010

JavaScript 使用 32 位按位运算数

JavaScript 将数字存储为 64 位浮点数，但所有按位运算都以 32 位二进制数执行。

在执行位运算之前，JavaScript 将数字转换为 32 位有符号整数。

执行按位操作后，结果将转换回 64 位 JavaScript 数。

上面的例子使用 4 位无符号二进制数。所以 ~ 5 返回 10。

由于 JavaScript 使用 32 位有符号整数，JavaScript 将返回 -6。

00000000000000000000000000000101 (5)

11111111111111111111111111111010 (~5 = -6)

有符号整数使用最左边的位作为减号。

位运算 AND

当对一对数位执行位运算 AND 时，如果数位均为 1 则返回 1。

单位示例：

运算	结果
0 & 0	0
0 & 1	0
1 & 0	0
1 & 1	1

四位示例：

运算	结果
1111 & 0000	0000
1111 & 0001	0001
1111 & 0010	0010
1111 & 0100	0100

位运算 OR

当对一对数位执行位运算 OR 时，如果其中一位是 1 则返回 1：

单位示例

运算	结果
0 | 0	0
0 | 1	1
1 | 0	1
1 | 1	1

四位运算：

操作	结果
1111 | 0000	1111
1111 | 0001	1111
1111 | 0010	1111
1111 | 0100	1111

位运算 XOR

当对一对数位进行位运算 XOR 时，如果数位是不同的则返回 1：

单位示例：

运算	结果
0 ^ 0	0
0 ^ 1	1
1 ^ 0	1
1 ^ 1	0

四位示例：

运算	结果
1111 ^ 0000	1111
1111 ^ 0001	1110
1111 ^ 0010	1101
1111 ^ 0100	1011

JavaScript 位运算 AND (&)

如果位数都是 1，则位运算 AND 返回 1：

十进制	二进制
5	00000000000000000000000000000101
1	00000000000000000000000000000001
5 & 1	00000000000000000000000000000001 (1)

实例

var x = 5 & 1;

JavaScript 位运算 OR (|)

如果数位之一是 1，则位运算 OR 返回 1：

十进制	二进制
5	00000000000000000000000000000101
1	00000000000000000000000000000001
5 | 1	00000000000000000000000000000101 (5)

实例

var x = 5 | 1;

JavaScript 位运算 XOR (^)

如果数位是不同的，则 XOR 返回 1：

十进制	二进制
5	00000000000000000000000000000101
1	00000000000000000000000000000001
5 ^ 1	00000000000000000000000000000100 (4)

实例

var x = 5 ^ 1;

JavaScript 位运算 NOT (~)

十进制	二进制
5	00000000000000000000000000000101
~5	11111111111111111111111111111010 (-6)

实例

var x = ~5;

JavaScript（零填充）位运算左移（<<）

这是零填充的左移。一个或多个零数位从右被推入，最左侧的数位被移除：

十进制	二进制
5	00000000000000000000000000000101
5 << 1	00000000000000000000000000001010 (10)

实例

var x = 5 << 1;

JavaScript（有符号）位运算右移（>>）

这是保留符号的右移。最左侧的数位被从左侧推入，最右侧的数位被移出：

十进制	二进制
-5	11111111111111111111111111111011
-5 >> 1	11111111111111111111111111111101 (-3)

实例

var x = -5 >> 1;

JavaScript（零填充）右移（>>>）

这是零填充的右移。一个或多个零数位从左侧被推入，最右侧的数位被移出：

十进制	二进制
5	00000000000000000000000000000101
5 >>> 1	00000000000000000000000000000010 (2)

实例

var x = 5 >>> 1;

32-bit 有符号整数（二进制数）

仅设置一位的 32 位整数很好理解：

二进制表示	十进制值
00000000000000000000000000000001	1
00000000000000000000000000000010	2
00000000000000000000000000000100	4
00000000000000000000000000001000	8
00000000000000000000000000010000	16
00000000000000000000000000100000	32
00000000000000000000000001000000	64

多设置一些数位揭示了二进制的模式：

二进制表示	十进制值
00000000000000000000000000000101	5 (4 + 1)
00000000000000000000000000101000	40 (32 + 8)
00000000000000000000000000101101	45 (32 + 8 + 4 + 1)

负数是正数的二进制补码加 1：

二进制表示	十进制值
00000000000000000000000000000101	5
11111111111111111111111111111011	-5
00000000000000000000000000101000	40
11111111111111111111111111011000	-40
11111111111111111111111111011001	-41

把十进制转换为二进制

实例

function dec2bin(dec){    return (dec >>> 0).toString(2);}

把二进制转换为十进制

实例

function bin2dec(bin){    return parseInt(bin, 2).toString(10);}

JavaScript 正则表达式

正则表达式是构成搜索模式的字符序列。

该搜索模式可用于文本搜索和文本替换操作。

什么是正则表达式？

正则表达式是构成*搜索模式（search pattern）*的字符序列。

当您搜索文本中的数据时，您可使用搜索模式来描述您搜索的内容。

正则表达式可以是单字符，或者更复杂的模式。

正则表达式可用于执行所有类型的文本搜索和文本替换操作。

语法

/pattern/modifiers;

var patt = /w3school/i;

例子解释：

/w3school/i 是一个正则表达式。

w3school 是模式（pattern）（在搜索中使用）。

i 是修饰符（把搜索修改为大小写不敏感）。

使用字符串方法

在 JavaScript 中，正则表达式常用于两个字符串方法：search() 和 replace()。

search() 方法使用表达式来搜索匹配，然后返回匹配的位置。

replace() 方法返回模式被替换处修改后的字符串。

使用字符串方法 search() 来处理字符串

search() 方法也接受字符串作为搜索参数。字符串参数将被转换为正则表达式：

实例

使用字符串来执行对 “W3school” 的搜索：

var str = "Visit W3School!";var n = str.search("W3School"); 

在字符串方法 search() 中使用正则表达式

实例

使用正则表达式执行搜索字符串中 “w3school” 的大小写不敏感的搜索：

var str = "Visit W3School";var n = str.search(/w3school/i); 

n 中的结果将是：

6

使用字符串方法 replace() 处理字符串

replace() 也接受字符串作为搜索参数：

var str = "Visit Microsoft!";var res = str.replace("Microsoft", "W3School"); 

在字符串方法 replace() 中使用正则表达式

实例

使用大小写不明的正则表达式以 W3school 来替换字符串中的 Microsoft：

var str = "Visit Microsoft!";var res = str.replace(/microsoft/i, "W3School"); 

res 的结果将是：

Visit W3School!

您注意到了吗？

正则表达式参数（而不是字符串参数）可以在上面的方法中使用。

正则表达式可以使您的搜索更强大（例如，不区分大小写）。

正则表达式修饰符

修饰符可用于大小写不敏感的更全局的搜素：

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

正则表达式模式

括号用于查找一定范围的字符串：

表达式	描述
[abc]	查找方括号之间的任何字符。
[0-9]	查找任何从 0 至 9 的数字。
(x|y)	查找由 | 分隔的任何选项。

*元字符（Metacharacter）*是拥有特殊含义的字符：

元字符	描述
\d	查找数字。
\s	查找空白字符。
\b	匹配单词边界。
\uxxxx	查找以十六进制数 xxxx 规定的 Unicode 字符。

Quantifiers 定义量词：

量词	描述
n+	匹配任何包含至少一个 n 的字符串。
n*	匹配任何包含零个或多个 n 的字符串。
n?	匹配任何包含零个或一个 n 的字符串。

使用 RegExp 对象

在 JavaScript 中，RegExp 对象是带有预定义属性和方法的正则表达式对象。

使用 test()

test() 是一个正则表达式方法。

它通过模式来搜索字符串，然后根据结果返回 true 或 false。

下面的例子搜索字符串中的字符 “e”：

实例

var patt = /e/;patt.test("The best things in life are free!"); 

由于字符串中有一个 “e”，以上代码的输出将是：

true

您不必首先把正则表达式放入变量中。上面的两行可缩短为一行：

/e/.test("The best things in life are free!");

使用 exec()

exec() 方法是一个正则表达式方法。

它通过指定的模式（pattern）搜索字符串，并返回已找到的文本。

如果未找到匹配，则返回 null。

下面的例子搜索字符串中的字符 “e”：

实例

/e/.exec("The best things in life are free!");

由于字符串中有一个 “e”，以上代码的输出将是：

e

JavaScript 错误 - Throw 和 Try to Catch

try 语句使您能够测试代码块中的错误。

catch 语句允许您处理错误。

throw 语句允许您创建自定义错误。

finally 使您能够执行代码，在 try 和 catch 之后，无论结果如何。

错误总会发生！

当执行 JavaScript 代码时，会发生各种错误。

错误可能是程序员的编码错误，由错误输入引起的错误，或者由于其他不可预见的问题。

实例

在本例中，我们通过 adddlert 编写警告代码来故意制造了一个错误：

<p id="demo"></p><script>try {    adddlert("欢迎访问！");}catch(err) {    document.getElementById("demo").innerHTML = err.message;}</script>

JavaScript 将 adddlert 捕获为一个错误，然后执行代码来处理该错误。

JavaScript try 和 catch

try 语句允许您定义一个代码块，以便在执行时检测错误。

catch 语句允许你定义一个要执行的代码块，如果 try 代码块中发生错误。

JavaScript 语句 try 和 catch 成对出现：

try {     供测试的代码块} catch(err) {     处理错误的代码块} 

JavaScript 抛出错误

当发生错误时，JavaScript 通常会停止并产生错误消息。

技术术语是这样描述的：JavaScript 将抛出异常（抛出错误）。

JavaScript 实际上会创建带有两个属性的 Error 对象：name 和 message。

throw 语句

throw 语句允许您创建自定义错误。

从技术上讲您能够抛出异常（抛出错误）。

异常可以是 JavaScript 字符串、数字、布尔或对象：

throw "Too big";    // 抛出文本throw 500;          //抛出数字

如果把 throw 与 try 和 catch 一同使用，就可以控制程序流并生成自定义错误消息。

输入验证案例

本例会检查输入。如果值是错误的，将抛出异常（err）。

该异常（err）被 catch 语句捕获并显示一条自定义的错误消息：

<!DOCTYPE html><html><body><p>请输入 5 - 10 之间的数字：</p><input id="demo" type="text"><button type="button" onclick="myFunction()">测试输入</button><p id="message"></p><script>function myFunction() {    var message, x;    message = document.getElementById("message");    message.innerHTML = "";    x = document.getElementById("demo").value;    try {         if(x == "") throw "空的";         if(isNaN(x)) throw "不是数字";         x = Number(x);        if(x < 5) throw  "太小";        if(x > 10) throw "太大";    }    catch(err) {        message.innerHTML = "输入是 " + err;    }}</script></body></html> 

HTML 验证

以上代码仅仅是一个例子。

现代浏览器通常会结合 JavaScript 与内置的 HTML 验证，通过使用在 HTML 属性中定义的预定义的验证规则：

<input id="demo" type="number" min="5" max="10" step="1">

finally 语句

finally 语句允许您在 try 和 catch 之后执行代码，无论结果：

try {     // 供测试的代码块} catch(err) {     // 处理错误的代码块} finally {     // 无论结果如何都执行的代码块}

实例

function myFunction() {    var message, x;    message = document.getElementById("message");    message.innerHTML = "";    x = document.getElementById("demo").value;    try {         if(x == "") throw "是空的";        if(isNaN(x)) throw "不是数字";         x = Number(x);        if(x >  10) throw "太大";        if(x <  5) throw "太小";    }    catch(err) {        message.innerHTML = "错误：" + err + ".";    }    finally {        document.getElementById("demo").value = "";    }}

Error 对象

JavaScript 拥有当错误发生时提供错误信息的内置 error 对象。

error 对象提供两个有用的属性：name 和 message。

Error 对象属性

属性	描述
name	设置或返回错误名
message	设置或返回错误消息（一条字符串）

Error Name Values

error 的 name 属性可返回六个不同的值：

错误名	描述
EvalError	已在 eval() 函数中发生的错误
RangeError	已发生超出数字范围的错误
ReferenceError	已发生非法引用
SyntaxError	已发生语法错误
TypeError	已发生类型错误
URIError	在 encodeURI() 中已发生的错误

下面为您详解这六个不同的值。

Eval 错误

EvalError 指示 eval() 函数中的错误。

更新版本的 JavaScript 不会抛出任何 EvalError。请使用 SyntaxError 代替。

范围错误

RangeError 会在您使用了合法值的范围之外的数字时抛出。

例如：您不能将数字的有效位数设置为 500。

实例

var num = 1;try {    num.toPrecision(500);   // 数无法拥有 500 个有效数 }catch(err) {    document.getElementById("demo").innerHTML = err.name;} 

引用错误

假如您使用（引用）了尚未声明的变量，则 ReferenceError 会被抛出：

实例

var x;try {    x = y + 1;   // y 无法被引用（使用） }catch(err) {    document.getElementById("demo").innerHTML = err.name;} 

语法错误

假如您计算带语法错误的代码，会 SyntaxError 被抛出：

实例

try {    eval("alert('Hello)");   // 缺少 ' 会产生错误}catch(err) {     document.getElementById("demo").innerHTML = err.name;} 

类型错误

假如您使用的值不在期望值的范围之内，则 TypeError 被抛出：

实例

var num = 1;try {    num.toUpperCase();   // 您无法将数字转换为大写 }catch(err) {    document.getElementById("demo").innerHTML = err.name;} 

URI 错误

假如您在 URI 函数中使用非法字符，则 URIError 被抛出：

实例

try {    decodeURI("%%%");   // 您无法对这些百分号进行 URI 编码 }catch(err) {    document.getElementById("demo").innerHTML = err.name;} 

非标准的 Error 对象属性

Mozilla 和 Microsoft 定义了非标准的 error 对象属性：

• fileName (Mozilla)
• lineNumber (Mozilla)
• columnNumber (Mozilla)
• stack (Mozilla)
• description (Microsoft)
• number (Microsoft)

请勿在公共网站使用这些属性。它们并不会在所有浏览器中工作。

JavaScript 作用域

作用域指的是您有权访问的变量集合。

JavaScript 函数作用域

在 JavaScript 中有两种作用域类型：

• 局部作用域
• 全局作用域

JavaScript 拥有函数作用域：每个函数创建一个新的作用域。

作用域决定了这些变量的可访问性（可见性）。

函数内部定义的变量从函数外部是不可访问的（不可见的）。

局部 JavaScript 变量

在 JavaScript 函数中声明的变量，会成为函数的局部变量。

局部变量的作用域是局部的：只能在函数内部访问它们。

实例

// 此处的代码不能使用 carName 变量function myFunction() {    var carName = "porsche";    // 此处的代码能使用 carName 变量}

由于只能在函数内部识别局部变量，因此能够在不同函数中使用同名变量。

在函数开始时会创建局部变量，在函数完成时会删除它们。

全局 JavaScript 变量

函数之外声明的变量，会成为全局变量。

全局变量的作用域是全局的：网页的所有脚本和函数都能够访问它。

实例

var carName = " porsche";// 此处的代码能够使用 carName 变量function myFunction() {    // 此处的代码也能够使用 carName 变量}

JavaScript 变量

在 JavaScript 中，对象和函数也是变量。

作用域决定了从代码不同部分对变量、对象和函数的可访问性。

自动全局

如果您为尚未声明的变量赋值，此变量会自动成为全局变量。

这段代码将声明一个全局变量 carName，即使在函数内进行了赋值。

实例

myFunction();// 此处的代码能够使用 carName 变量function myFunction() {    carName = "porsche";}

严格模式

所有现代浏览器都支持以“严格模式”运行 JavaScript。

您将在本教程稍后的章节学习更多如何使用严格模式的知识。

在“严格模式”中不会自动创建全局变量。

HTML 中的全局变量

通过 JavaScript，全局作用域形成了完整的 JavaScript 环境。

在 HTML 中，全局作用域是 window。所有全局变量均属于 window 对象。

实例

var carName = "porsche";// 此处的代码能够使用 window.carName

警告

除非有意为之，否则请勿创建全局变量。

您的全局变量（或函数）能够覆盖 window 变量（或函数）。

任何函数，包括 window 对象，能够覆盖您的全局变量和函数。

JavaScript 变量的有效期

JavaScript 变量的有效期始于其被创建时。

局部变量会在函数完成时被删除。

全局变量会在您关闭页面是被删除。

函数参数

函数参数也是函数内的局部变量。

JavaScript Hoisting

提升（Hoisting）是 JavaScript 将声明移至顶部的默认行为。

JavaScript 声明会被提升

在 JavaScript 中，可以在使用变量之后对其进行声明。

换句话说，可以在声明变量之前使用它。

例子 1 与例子 2 的结果相同：

例子 1

x = 5; // 把 5 赋值给 x elem = document.getElementById("demo"); // 查找元素elem.innerHTML = x;                     // 在元素中显示 xvar x; // 声明 x

例子 2

var x; // 声明 xx = 5; // 把 5 赋值给 xelem = document.getElementById("demo"); // 查找元素elem.innerHTML = x;                     // 在元素中显示 x

为了理解这一点，您必须理解术语 “hoisting”。

Hoisting 是 JavaScript 将所有声明提升到当前作用域顶部的默认行为（提升到当前脚本或当前函数的顶部）。

let 和 const 关键字

用 let 或 const 声明的变量和常量不会被提升！

请在 JS Let / Const 中阅读更多关于 let 和 const 的内容。

JavaScript 初始化不会被提升

JavaScript 只提升声明，而非初始化。

例子 1 与例子 2 的结果不相同：

例子 1

var x = 5; // 初始化 xvar y = 7; // 初始化 yelem = document.getElementById("demo"); // 查找元素elem.innerHTML = x + " " + y;           // 显示 x 和 y

例子 2

var x = 5; // 初始化 x elem = document.getElementById("demo"); // 查找元素elem.innerHTML = x + " " + y;           // 显示 x 和 y var y = 7; // 初始化 y 

最后一个例子中的 y 仍然是未定义能说得通吗？

这是因为只有声明（var y）而不是初始化（=7）被提升到顶部。

由于 hoisting，y 在其被使用前已经被声明，但是由于未对初始化进行提升，y 的值仍是未定义。

例子 2 也一样：

实例

var x = 5; // 初始化 xvar y;     // 声明 y elem = document.getElementById("demo"); // 查找元素elem.innerHTML = x + " " + y;           // 显示 x 和 y y = 7;    // 把 7 赋值给 y

在顶部声明您的变量！

Hoisting（对很多开发者来说）是 JavaScript 的一种未知的或被忽视的行为。

如果开发者不理解 hoisting，程序也许会包含 bug（错误）。

为了避免 bug，请始终在每个作用域的开头声明所有变量。

由于这就是 JavaScript 解释代码的方式，请保持这个好习惯。

严格模式中的 JavaScript 不允许在未被声明的情况下使用变量。

JavaScript 严格模式

"use strict"; 定义 JavaScript 代码应该以“严格模式”执行。

“use strict” 指令

“use strict” 是 JavaScript 1.8.5 中的新指令（ECMAScript version 5）。

它不算一条语句，而是一段文字表达式，更早版本的 JavaScript 会忽略它。

“use strict”; 的作用是指示 JavaScript 代码应该以“严格模式”执行。

在严格模式中，您无法，例如，使用未声明的变量。

以下版本的浏览器支持严格模式：

• 版本 10 以后的 IE
• 版本 4 以后的 Firefox
• 版本 13 以后的 Chrome
• 版本 5.1 以后的 Safari
• 版本 12 以后的 Opera

声明严格模式

通过在脚本或函数的开头添加 “use strict”; 来声明严格模式。

在脚本开头进行声明，拥有全局作用域（脚本中的所有代码均以严格模式来执行）：

实例

"use strict";x = 3.14;       // 这会引发错误，因为 x 尚未声明

实例

"use strict";myFunction();function myFunction() {     y = 3.14;   // 这会引发错误，因为 y 尚未声明}

在函数中声明严格模式，拥有局部作用域（只有函数中的代码以严格模式执行）：

x = 3.14;       // 这不会引发错误myFunction();function  myFunction() {	"use strict";	 y = 3.14;   // 这会引发错误}

“use strict”; 语法

声明严格模式的语法被设计为兼容更早版本的 JavaScript。

编译 JavaScript 程序中的数值文字（比如 4+5）或字符串文字（“Bill Gates”）不会有负面效果。它只会编译为不存在的变量然后消失。

所有 “use strict”; 只会对“理解”其含义的新编译器产生影响。

为什么使用严格模式？

严格模式使我们更容易编写“安全的” JavaScript。

严格模式把之前可接受的“坏语法”转变为真实的错误。

举例来说，在普通的 JavaScript 中，错打变量名会创建新的全局变量。在严格模式中，此举将抛出错误，这样就不可能意外创建全局变量。

在普通 JavaScript 中，如果向不可写属性赋值，开发者不会得到任何错误反馈。

在严格模式中，向不可写的、只能读取的、不存在的属性赋值，或者向不存在的变量或对象赋值，将抛出错误。

严格模式中不允许的事项

在不声明变量的情况下使用变量，是不允许的：

"use strict";x = 3.14;                // 这将引发错误

对象也是变量

在不声明对象的情况下使用对象也是不允许的：

"use strict";x = {p1:10, p2:20};      // 这将引发错误

删除变量（或对象）是不允许的：

"use strict";var x = 3.14;delete x;                // 这将引发错误

删除函数是不允许的：

"use strict";function x(p1, p2) {}; delete x;                 // 这将引发错误

重复参数名是不允许的：

"use strict";function x(p1, p1) {};   // 这将引发错误

八进制数值文本是不允许的：

"use strict";var x = 010;             // 这将引发错误

转义字符是不允许的：

"use strict";var x = \010;            // 这将引发错误

写入只读属性是不允许的：

"use strict";var obj = {};Object.defineProperty(obj, "x", {value:0, writable:false});obj.x = 3.14;            // 这将引发错误

写入只能获取的属性是不允许的：

"use strict";var obj = {get x() {return 0} };obj.x = 3.14;            // 这将引发错误

删除不可删除的属性是不允许的：

"use strict";delete Object.prototype; // 这将引发错误

字符串 “eval” 不可用作变量：

"use strict";var eval = 3.14;         // 这将引发错误

字符串 “arguments” 不可用作变量：

"use strict";var arguments = 3.14;    // 这将引发错误

with 语句是不允许的：

"use strict";with (Math){x = cos(2)}; // 这将引发错误

处于安全考虑，不允许 eval() 在其被调用的作用域中创建变量：

"use strict";eval ("var x = 2");alert (x);               // 这将引发错误

在类似 f() 的函数调用中，this 的值是全局对象。在严格模式中，现在它成为了 undefined。

对未来的保障

严格模式中不允许使用为未来预留的关键词。它们是：

• implements
• interface
• let
• package
• private
• protected
• public
• static
• yield

"use strict";var public = 1500;      // 这将引发错误

警告

“use strict” 指令只能在脚本或函数的开头被识别。

JavaScript this 关键词

实例

var person = {  firstName: "Bill",  lastName : "Gates",  id       : 678,  fullName : function() {    return this.firstName + " " + this.lastName;  }};

this 是什么？

JavaScript this 关键词指的是它所属的对象。

它拥有不同的值，具体取决于它的使用位置：

• 在方法中，this 指的是所有者对象。
• 单独的情况下，this 指的是全局对象。
• 在函数中，this 指的是全局对象。
• 在函数中，严格模式下，this 是 undefined。
• 在事件中，this 指的是接收事件的元素。

像 call() 和 apply() 这样的方法可以将 this 引用到任何对象。

方法中的 this

在对象方法中，this 指的是此方法的“拥有者”。

在本页最上面的例子中，this 指的是 person 对象。

person 对象是 fullName 方法的拥有者。

fullName : function() {  return this.firstName + " " + this.lastName;}

单独的 this

在单独使用时，拥有者是全局对象，因此 this 指的是全局对象。

在浏览器窗口中，全局对象是 [object Window]：

实例

var x = this;

在严格模式中，如果单独使用，那么 this 指的是全局对象 [object Window]：

实例

"use strict";var x = this;

函数中的 this（默认）

在 JavaScript 函数中，函数的拥有者默认绑定 this。

因此，在函数中，this 指的是全局对象 [object Window]。

实例

function myFunction() {  return this;}

函数中的 this（严格模式）

JavaScript 严格模式不允许默认绑定。

因此，在函数中使用时，在严格模式下，this 是未定义的（undefined）。

实例

"use strict";function myFunction() {  return this;}

事件处理程序中的 this

在 HTML 事件处理程序中，this 指的是接收此事件的 HTML 元素：

实例

<button onclick="this.style.display='none'">  点击来删除我！</button>

对象方法绑定

在此例中，this 是 person 对象（person 对象是该函数的“拥有者”）：

实例

var person = {  firstName  : "Bill",  lastName   : "Gates",  id         : 678,  myFunction : function() {    return this;  }};

实例

var person = {  firstName: "Bill",  lastName : "Gates",  id       : 678,  fullName : function() {    return this.firstName + " " + this.lastName;  }};

换句话说，this.firstName 意味着 this（person）对象的 firstName 属性。

显式函数绑定

call() 和 apply() 方法是预定义的 JavaScript 方法。

它们都可以用于将另一个对象作为参数调用对象方法。

您可以在本教程后面阅读有关 call() 和 apply() 的更多内容。

在下面的例子中，当使用 person2 作为参数调用 person1.fullName 时，this 将引用 person2，即使它是 person1 的方法：

实例

var person1 = {  fullName: function() {    return this.firstName + " " + this.lastName;  }}var person2 = {  firstName:"Bill",  lastName: "Gates",}person1.fullName.call(person2);  // 会返回 "Bill Gates"

JavaScript 箭头函数

ES6 中引入了箭头函数。

箭头函数允许我们编写更短的函数

语法

：

之前：

hello = function() {  return "Hello World!";}

用了箭头函数之后：

hello = () => {  return "Hello World!";}

确实变短了！如果函数只有一个语句，并且该语句返回一个值，则可以去掉括号和 return 关键字：

箭头函数默认返回值：

hello = () => "Hello World!";

**注释：**这仅在函数只有一条语句时才有效。

如果您有参数，则将它们传递到括号内：

带参数的箭头函数：

hello = (val) => "Hello " + val;

事实上，如果只有一个参数，您也可以略过括号：

不带括号的箭头函数：

hello = val => "Hello " + val;

this 怎么办？

与常规函数相比，箭头函数对 this 的处理也有所不同。

简而言之，使用箭头函数没有对 this 的绑定。

在常规函数中，关键字 this 表示调用该函数的对象，可以是窗口、文档、按钮或其他任何东西。

对于箭头函数，this 关键字始终表示定义箭头函数的对象。

让我们看两个例子来理解其中的差异。

这两个例子都调用了两次方法，第一次是在页面加载时，第二次是在用户单击按钮时。

第一个例子使用常规函数，第二个例子使用箭头函数。

结果显示第一个例子返回两个不同的对象（window 和 button），第二个例子返回两次 window 对象，因为 window 对象是函数的“所有者”。

实例

对于常规函数，this 表示调用该函数的对象：

// 常规函数：hello = function() {  document.getElementById("demo").innerHTML += this;}// window 对象调用该函数：window.addEventListener("load", hello);// button 对象调用该函数：document.getElementById("btn").addEventListener("click", hello);

实例

用了箭头函数，则 this 表示函数的拥有者：

// 箭头函数：hello = () => {  document.getElementById("demo").innerHTML += this;}// window 对象调用该函数：window.addEventListener("load", hello);// button 对象调用该函数：document.getElementById("btn").addEventListener("click", hello);

使用函数时请记住这些差异。有时，常规函数的行为正是您想要的，如果不是，请使用箭头函数。

Chrome 45	Edge 12	Firefox 22	Safari 10	Opera 32
2015 年 9 月	2015 年 7 月	2013 年 5 月	2016 年 9 月	2015 年 9 月

JavaScript 类

ECMAScript 2015，也称 ES6，引入了 JavaScript 类。

JavaScript 类是 JavaScript 对象的模板。

JavaScript 类的

语法

请使用关键字 class 创建类。

请始终添加名为 constructor() 的方法：

语法

class ClassName {  constructor() { ... }}

实例

class Car {  constructor(name, year) {    this.name = name;    this.year = year;  }}

上面的例子创建了一个名为 “Car” 的类。

该类有两个初始属性：“name” 和 “year”。

JavaScript 类不是对象。

它只是 JavaScript 对象的模板。

使用类

如果您有一个类，那么您可以使用该类来创建对象：

实例

let myCar1 = new Car("Ford", 2014);let myCar2 = new Car("Audi", 2019);

上面的例子使用 Car 类创建了两个 Car 对象。

在创建新对象时会自动调用 constructor 方法。

Constructor 方法

构造方法是一种特殊的方法：

• 它必须拥有确切名称的“构造函数”
• 创建新对象时自动执行
• 用于初始化对象属性
• 如果未定义构造函数方法，JavaScript 会添加空的构造函数方法。

Class 方法

类方法的创建

语法

与对象方法相同。

请使用关键字 class 创建类。

请始终添加 constructor() 方法。

然后添加任意数量的方法。

语法

class ClassName {  constructor() { ... }  method_1() { ... }  method_2() { ... }  method_3() { ... }}

创建名为 “age” 的类方法，它返回车龄：

实例

class Car {  constructor(name, year) {    this.name = name;    this.year = year;  }  age() {    let date = new Date();    return date.getFullYear() - this.year;  }}let myCar = new Car("Ford", 2014);document.getElementById("demo").innerHTML = "My car is " + myCar.age() + " years old.";

您可以向类方法发送参数：

实例

class Car {  constructor(name, year) {    this.name = name;    this.year = year;  }  age(x) {    return x - this.year;  }}let date = new Date();let year = date.getFullYear();let myCar = new Car("Ford", 2014);document.getElementById("demo").innerHTML = "My car is " + myCar.age(year) + " years old.";

Chrome 49	Edge 12	Firefox 45	Safari 9	Opera 36
2016 年 3 月	2015 年 7 月	2016 年 3 月	2015 年 10 月	2016 年 3 月

JavaScript JSON

JSON 是存储和传输数据的格式。

JSON 经常在数据从服务器发送到网页时使用。

什么是 JSON？

• JSON 指的是 JavaScript Object Notation
• JSON 是轻量级的数据交换格式
• JSON 独立于语言 *****
• JSON 是“自描述的”且易于理解

* JSON 的语法是来自 JavaScript 对象符号的语法，但 JSON 格式是纯文本。读取和生成 JSON 数据的代码可以在任何编程语言编写的。

JSON 实例

JSON 语法定义了一个雇员对象：包含三条员工记录的数组（对象）：

JSON 实例

{"employees":[    {"firstName":"Bill", "lastName":"Gates"},     {"firstName":"Steve", "lastName":"Jobs"},    {"firstName":"Alan", "lastName":"Turing"}]}

JSON 格式评估为 JavaScript 对象

JSON 格式在语法上与创建 JavaScript 对象的代码相同。

由于这种相似性，JavaScript 程序可以很容易地将 JSON 数据转换成本地的 JavaScript 对象。

JSON 语法规则

• 数据是名称/值对
• 数据由逗号分隔
• 花括号保存对象
• 方括号保存数组

JSON 数据 - 名称和值

JSON 数据的书写方式是名称/值对，类似 JavaScript 对象属性。

名称/值对由（双引号中的）字段名构成，其后是冒号，再其后是值：

"firstName":"Bill"

JSON 名称需要双引号。JavaScript 名称不需要。

JSON 对象

JSON 对象是在花括号内书写的。

类似 JavaScript，对象能够包含多个名称/值对：

{"firstName":"Bill", "lastName":"Gates"} 

JSON 数组

JSON 数组在方括号中书写。

类似 JavaScript，数组能够包含对象：

"employees":[    {"firstName":"Bill", "lastName":"Gates"},     {"firstName":"Steve", "lastName":"Jobs"},     {"firstName":"Alan", "lastName":"Turing"}]

在上面的例子中，对象 “employees” 是一个数组。它包含了三个对象。

每个对象代表一个人的一条记录（带有名和姓）。

把 JSON 文本转换为 JavaScript 对象

JSON 的通常用法是从 web 服务器读取数据，然后在网页中显示数据。

为了简单起见，可以使用字符串作为输入演示。

首先，创建包含 JSON 语法的 JavaScript 字符串：

var text = '{ "employees" : [' +'{ "firstName":"Bill" , "lastName":"Gates" },' +'{ "firstName":"Steve" , "lastName":"Jobs" },' +'{ "firstName":"Alan" , "lastName":"Turing" } ]}';

然后，使用 JavaScript 的内建函数 JSON.parse() 来把这个字符串转换为 JavaScript 对象：

var obj = JSON.parse(text);

最后，请在您的页面中使用这个新的 JavaScript 对象：

实例

<p id="demo"></p><script>document.getElementById("demo").innerHTML =obj.employees[1].firstName + " " + obj.employees[1].lastName;</script> 

JavaScript 调试

错误总会发生，每当您写一些新的计算机代码时。

JavaScript 调试

在没有调试器的情况下写 JavaScript 是有难度的。

您的代码中也许包含了语法错误，或者逻辑错误，这些都难以诊断。

通常，如果 JavaScript 代码包含错误，也不会发生任何事情。不会有错误消息，并且不会有任何可供查找错误的指示信息。

通常，每当你尝试编写新的 JavaScript 代码，就可能发生错误。

JavaScript 调试器

查找编程代码中的错误被称为代码调试。

调试并不简单。但幸运地是，所有现代浏览器都有内置的调试器。

内置的调试器可打开或关闭，强制将错误报告给用户。

通过调试器，您也可以设置断点（代码执行被中断的位置），并在代码执行时检查变量。

通常通过 F12 键启动浏览器中的调试器，然后在调试器菜单中选择“控制台”。

console.log() 方法

如果您的浏览器支持调试，那么您可以使用 console.log() 在调试窗口中显示 JavaScript 的值：

实例

<!DOCTYPE html><html><body><h1>My First Web Page</h1><script>a = 5;b = 6;c = a + b;console.log(c);</script></body></html>

设置断点

在调试窗口中，您可在 JavaScript 代码中设置断点。

在每个断点中，JavaScript 将停止执行，以使您能够检查 JavaScript 的值。

在检查值之后，您可以恢复代码执行。

debugger 关键词

debugger 关键词会停止 JavaScript 的执行，并调用（如果有）调试函数。

这与在调试器中设置断点的功能是一样的。

如果调试器不可用，debugger 语句没有效果。

如果调试器已打开，此代码会在执行第三行之前停止运行。

实例

var x = 15 * 5;debugger;document.getElementbyId("demo").innerHTML = x; 

主流浏览器的调试工具

通常，您在浏览器中通过 F12 键启用调试，并在调试器菜单中选择“控制台”。

否则请按照以下步骤：

Chrome

• 打开浏览器
• 从菜单中选择工具
• 从工具中选择开发者工具
• 最后，选择控制台

Firefox Firebug

• 打开浏览器
• 前往网页：http://www.getfirebug.com
• 根据如下指令：如何安装 Firebug

Internet Explorer

• 打开浏览器
• 从菜单选择工具
• 从工具选择开发者工具
• 最后，选择控制台

Opera

• 打开浏览器
• 请前往网页：http://dev.opera.com
• 根据如下指令：如何安装 Firebug Lite

Safari Develop Menu

• 点击 Safari 菜单，偏好设置，高级
• 选中“在菜单栏中启用开发菜单”
• 当菜单中出现新选项“开发”时，选择“显示错误控制台”

您知道吗？

调试是测试、找到并减少计算机程序中 bug（错误）的过程。

历史上首个已知的计算机 bug 是一只卡在电子器件中的真实的虫子（一种昆虫）。

JavaScript 样式指南

请始终为您所有的 JavaScript 项目使用相同的代码约定。

JavaScript 代码约定

代码约定(Coding conventions)指的是编程的样式指导方针。这些原则大体上包括：

• 变量和函数的命名和声明规则
• 使用空格、缩进和注释的规则
• 编程习惯和准则

代码约定确保质量：

• 改善代码可读性
• 提升代码可维护性

代码约定可以是团队遵守的成文规则，也可以是您个人的编码习惯。

本页介绍 W3School 使用的通用 JavaScript 代码约定。

您应该继续阅读下一章“最佳实践”，学习如何避免编码陷阱。

变量名

在 W3School，我们对标识符名称（变量和函数）使用了驼峰式大小写。

所有名称以字母开头。

在本页的底部，我们会更广泛地讨论命名规则。

firstName = "Bill";lastName = "Gates";price = 19.90;tax = 0.20;fullPrice = price + (price * tax);

运算符周围的空格

请始终在运算符（ = + - * / ）周围以及逗号之后添加空格：

实例

var x = y + z;var values = ["Volvo", "Saab",  "Fiat"];

代码缩进

请始终使用对代码块缩进使用 4 个空格：

函数

function toCelsius(fahrenheit) {    return (5 / 9) * (fahrenheit - 32);}

请不要对缩进使用制表符。不同的编辑器对 tab 的解释也不尽相同。

语句规则

简单语句的通用规则：

请始终以分号结束单条语句：

实例

var values = ["Volvo", "Saab",  "Fiat"];var person = {    firstName: "Bill",     lastName: "Gates",    age: 50,    eyeColor:  "blue"};

针对复杂语句（compound）的通用规则：

• 请在第一行的结尾处写开括号
• 请在开括号前使用一个空格
• 请在新行上写闭括号，不带前导空格
• 请不要以分号来结束复杂语句

函数：

function toCelsius(fahrenheit) {    return (5 / 9) * (fahrenheit - 32);}

循环：

for (i = 0; i < 5; i++) {    x += i;}

条件：

if (time < 20) {    greeting = "Good day";} else {     greeting = "Good evening";}

对象规则

针对对象定义的通用规则：

• 把开括号与对象名放在同一行
• 在每个属性与其值之间使用冒号加一个空格
• 不要在最后一个属性值对后面写逗号
• 请在新行上写闭括号，不带前导空格
• 请始终以分号结束对象定义

实例

var person = {    firstName: "Bill",    lastName: "Gates",    age: 19,    eyeColor:  "blue"};

可以对短对象在一行中进行压缩，只在属性之间使用空格，就像这样：

var person = {firstName:"Bill", lastName:"Gates", age:50, eyeColor:"blue"};

行长度小于 80

为了提高可读性，请避免每行的长度超过 80 个字符。

如果 JavaScript 语句超过一行的长度，换行的最佳位置是运算符或逗号之后。

实例

document.getElementById("demo").innerHTML =    "Hello Kitty."; 

命名约定

请始终对您所有的代码使用相同的命名约定。例如：

• 变量和函数名以驼峰大小写来写
• 全局变量使用大写（我们不这样做，但是相当普遍）
• 常量（比如 PI）使用大写

我们是否应在变量名中使用连字符、驼峰大小写或下划线吗？

这是程序员们经常讨论的问题。答案取决于这个问题是谁回答的：

HTML 和 CSS 中的连字符：

HTML5 属性能够以 data- 开头（data-quantity, data-price）。

CSS 在 property-names 中使用连字符（font-size）。

Hyphens 可被错误地视为减法运算符。JavaScript 命名不允许使用连字符。

下划线：

许多程序员喜欢使用下划线（date_of_birth），特别是在 SQL 数据库中。

下划线经常被用在 PHP 参考资料中。

帕斯卡命名法（PascalCase）：

C 语言程序员经常使用帕斯卡命名法。

驼峰大小写（camelCase）：

JavaScript 本身、jQuery 以及其他 JavaScript 库使用驼峰大小写。

JavaScript 命名请不要以 $ 符号开头。此举会引起 JavaScript 库名称冲突。

在 HTML 中加载 JavaScript

使用简单的语法来加载外部脚本（type 属性不是必需的）：

<script src="myscript.js"></script>

访问 HTML 元素

使用“不整洁的” HTML 样式的后果，也许是导致 JavaScript 错误。

这两条 JavaScript 语句会产生不同的结果：

var obj = getElementById("Demo")var obj = getElementById("demo") 

如果可能，请在 HTML 中使用相同的命名约定（就像 JavaScript 那样）。

文件扩展名

HTML 文件应该使用 .html 扩展名（而非 .htm）。

CSS 文件应该使用 .css 扩展名。

JavaScript 文件应该使用 .js 扩展名。

使用小写文件名

大多数 web 服务器（Apache、Unix）对文件名的大小写敏感：

london.jpg 无法视作 London.jpg 进行访问。

其他 web 服务器（微软的 IIS）对大小写不敏感：

london.jpg 能够以 London.jpg 或 london.jpg 来访问。

如果您混合使用大小写，则必须严格保持连续和一致。

如果您将站点从大小写不敏感的服务器转移至对大小写敏感的服务器，即使这种小错误也可能破坏您的网站。

为了避免这些问题，请始终使用小写文件名（如果可能）。

性能

计算机不会使用代码约定。大部分规则对程序的执行影响很小。

缩进和额外的空格对小段脚本并不重要。

对于开发中的脚本，应该优先考虑可读性。应该缩小更大型的生产脚本。

JavaScript 最佳实践

请避免全局变量、new、===、eval()

避免全局变量

请尽量少地使用全局变量。

它包括所有的数据类型、对象和函数。

全局变量和函数可被其他脚本覆盖。

请使用局部变量替代，并学习如何使用闭包。

始终声明局部变量

所有在函数中使用的变量应该被声明为局部变量。

局部变量必须通过 var 关键词来声明，否则它们将变成全局变量。

严格模式不允许未声明的变量。

在顶部声明

一项好的编码习惯是把所有声明放在每段脚本或函数的顶部。

这么做的好处是：

• 获得更整洁的代码
• 提供了查找局部变量的好位置
• 更容易避免不需要的全局变量
• 减少不需要的重新声明的可能性

// 在顶部声明var firstName, lastName, price, discount, fullPrice;// 稍后使用firstName = "Bill";lastName = "Gates";price = 19.90;discount = 0.10;fullPrice = price * 100 / discount;

也可以用于循环变量：

// 在顶部声明var i;// 稍后使用for (i = 0; i < 5; i++)  {

默认地，JavaScript 会将所有声明移至顶部（JavaScript hoisting）。

初始化变量

在您声明变量时对其进行初始化是个好习惯。

这么做的好处是：

• 更整洁的代码
• 在单独的位置来初始化变量
• 避免未定义值

// 在开头进行声明和初始化var firstName = "",    lastName  = "",    price = 0,    discount = 0,    fullPrice  = 0,    myArray = [],    myObject = {};

变量初始化使我们能够了解预期用途和预期的数据类型。

请不要声明数值、字符串或布尔对象

请始终将数值、字符串或布尔值视作原始值。而非对象。

如果把这些类型声明为对象，会拖慢执行速度，并产生讨厌的副作用：

实例

var x = "Bill";             var y = new String("Bill");(x === y) // 结果为 false，因为 x 是字符串，而 y 是对象。

或者甚至更糟：

实例

var x = new String("Bill");             var y = new String("Bill");(x == y) // 结果是 false，因为你无法比较对象。

请勿使用 new Object()

• 请使用 {} 来代替 new Object()
• 请使用 “” 来代替 new String()
• 请使用 0 来代替 new Number()
• 请使用 false 来代替 new Boolean()
• 请使用 [] 来代替 new Array()
• 请使用 /()/ 来代替 new RegExp()
• 请使用 function (){}来代替 new Function()

实例

var x1 = {};           // 新对象var x2 = "";           // 新的原始字符串值var x3 = 0;            // 新的原始数值var x4 = false;        // 新的原始布尔值var x5 = [];           // 新的数组对象var x6 = /()/;         // 新的正则表达式var x7 = function(){}; // 新的函数对象

意识到自动类型转换

请意识到数值会被意外转换为字符串或 NaN（Not a Number）。

JavaScript 属于松散类型。变量可包含不同的数据类型，并且变量能够改变其数据类型：

实例

var x = "Hello";     // typeof x 为字符串x = 5;               // 把 typeof x 更改为数值

如果进行数学运算，JavaScript 能够将数值转换为字符串：

实例

var x = 5 + 7;       // x.valueOf() 是 12,  typeof x 是数值var x = 5 + "7";     // x.valueOf() 是 57,  typeof x 是字符串var x = "5" + 7;     // x.valueOf() 是 57,  typeof x 是字符串var x = 5 - 7;       // x.valueOf() 是 -2,  typeof x 是数值var x = 5 - "7";     // x.valueOf() 是 -2,  typeof x 是数值var x = "5" - 7;     // x.valueOf() 是 -2,  typeof x 是数值var x = 5 - "x";     // x.valueOf() 是 NaN, typeof x 是数值

用字符串减去字符串，不会产生错误而是返回 NaN（Not a Number）：

实例

"Hello" - "Dolly"    // 返回 NaN

使用 === 比较

== 比较运算符总是在比较之前进行类型转换（以匹配类型）。

=== 运算符会强制对值和类型进行比较：

实例

0 == "";        // true1 == "1";       // true1 == true;      // true0 === "";       // false1 === "1";      // false1 === true;     // false

使用 Parameter Defaults

如果调用函数时缺少一个参数，那么这个缺失参数的值会被设置为 undefined。

undefined 值会破坏您的代码。为参数设置默认值是一个好习惯。

实例

function myFunction(x, y) {    if (y === undefined) {        y = 0;    }}

用 default 来结束 switch

请使用使用 default 来结束您的 switch 语句。即使您认为没有这个必要。

实例

switch (new Date().getDay()) {    case 0:        day = "Sunday";        break;    case 1:        day = "Monday";         break;    case 2:        day = "Tuesday";         break;    case 3:        day = "Wednesday";         break;    case 4:        day = "Thursday";         break;    case 5:        day = "Friday";         break;    case 6:        day = "Saturday";         break;    default:        day =  "Unknown";} 

避免使用 eval()

eval() 函数用于将文本作为代码来允许。在几乎所有情况下，都没有必要使用它。

因为允许任意代码运行，它同时也意味着安全问题。

JavaScript 常见错误

本章指出一些常见的 JavaScript 错误。

意外使用赋值运算符

如果程序员在 if 语句中意外使用赋值运算符（=）而不是比较运算符（===），JavaScript 程序可能会产生一些无法预料的结果。

这条 if 语句返回 false（正如预期），因为 x 不等于 10：

var x = 0;if (x == 10) 

这条 if 语句返回 true（也许不像预期），因为 10 为 true：

var x = 0;if (x = 10) 

这条 if 语句返回 false（也许不像预期），因为 0 为 false：

var x = 0;if (x = 0) 

赋值总是返回赋值的值。

期望松散的比较

在常规比较中，数据类型不重要。这条 if 语句返回 true：

var x = 10;var y = "10";if (x == y) 

在严格比较中，数据类型确实重要。这条 if 语句返回 false：

var x = 10;var y = "10";if (x === y) 

有一个常见的错误是忘记在 switch 语句中使用严格比较：

这条 switch 语句会显示提示框：

var x = 10;switch(x) {    case 10: alert("Hello");}

这条 switch 语句不会显示提示框：

var x = 10;switch(x) {    case "10": alert("Hello");}

令人困惑的加法和级联

加法用于加数值。

级联（Concatenation）用于加字符串。

在 JavaScript 中，这两种运算均使用相同的 + 运算符。

正因如此，将数字作为数值相加，与将数字作为字符串相加，将产生不同的结果：

var x = 10 + 5;          // x 中的结果是 15var x = 10 + "5";         // x 中的结果是　"105"

如果是两个变量相加，很难预测结果：

var x = 10;var y = 5;var z = x + y;            // z 中的结果是 15var x = 10;var y = "5";var z =  x + y;            // z 中的结果是 "105"

令人误解的浮点

JavaScript 中的数字均保存为 64 位的浮点数（Floats）。

所有编程语言，包括 JavaScript，都存在处理浮点值的困难：

var x = 0.1;var y = 0.2;var z = x + y             // z 中的结果并不是 0.3

为了解决上面的问题，请使用乘除运算：

实例

var z = (x * 10 + y * 10) / 10;       // z 中的结果将是 0.3

对 JavaScript 字符串换行

JavaScript 允许您把一条语句换行为两行：

例子 1

var x ="Hello World!";

但是，在字符串中间来换行是不对的：

例子 2

var x = "HelloWorld!";

如果必须在字符串中换行，则必须使用反斜杠：

例子 3

var x = "Hello \World!";

错位的分号

因为一个错误的分号，此代码块无论 x 的值如何都会执行：

if (x == 19);{     class="code_comment">// code block}

对 return 语句进行换行

在一行的结尾自动关闭语句是默认的 JavaScript 行为。

正因如此，下面两个例子返回相同的结果：

例子 1

function myFunction(a) {    var power = 10      return a * power}

例子 2

function myFunction(a) {    var power = 10;    return a * power;}

JavaScript 也允许您将一条语句换行为两行。

正因如此，例子 3 也将返回相同的结果：

例子 3

function myFunction(a) {    var    power = 10;      return a * power;}

但是，如果把 return 语句换行为两行会发生什么呢：

例子 4

function myFunction(a) {    var    power = 10;      return    a * power;}

此函数将返回 undefined！

为什么呢？因为 JavaScript 认为你的意思是：

例子 5

function myFunction(a) {     var    power = 10;      return;    a * power;}

解释

如果某条语句是不完整的：

var

JavaScript 将通过读取下一行来完成这条语句：

power = 10;

但是由于这条语句是完整的：

return

JavaScript 会自动关闭该语句：

return;

发生这种情况是因为，在 JavaScript 中，用分号来关闭（结束）语句是可选的。

JavaScript 会在行末关闭 return 语句，因为它本身就是一条完整的语句。

所以，绝不要对 return 语句进行换行。

通过命名索引来访问数组

很多编程语言支持带有命名索引的数组。

带有命名索引的数组被称为关联数组（或散列）。

JavaScript 不支持带有命名索引的数组。

在 JavaScript 中，数组使用数字索引：

实例

var person = [];
person[0] = "Bill";
person[1] = "Gates";
person[2] = 46;
var x = person.length;          // person.length 将返回 3
var y = person[0];              // person[0] 将返回 "John"

在 JavaScript 中，对象使用命名索引。

如果您使用命名索引，那么在访问数组时，JavaScript 会将数组重新定义为标准对象。

在自动重定义之后，数组方法或属性将产生未定义或非正确的结果：

实例

var person = [];
person["firstName"] = "Bill";
person["lastName"] = "Gates";
person["age"] = 46;
var x = person.length;         // person.length 将返回 0
var y = person[0];              // person[0] 将返回 undefined

用逗号来结束定义

对象和数组定义中的尾随逗号在 ECMAScript 5 中是合法的。

对象实例：

person = {firstName:"Bill", lastName:"Gates", age:62,}

数组实例：

points = [35, 450, 2, 7, 30, 16,];

警告！！

Internet Explorer 8 会崩溃。

JSON 不允许尾随逗号。

JSON:

person = {firstName:"Bill", lastName:"Gates", age:62}

JSON:

points = [35, 450, 2, 7, 30, 16];

Undefined 不是 Null

JavaScript 对象、变量、属性和方法可以是未定义的。

此外，空的 JavaScript 对象的值可以为 null。

这可能会使测试对象是否为空变得有点困难。

您可以通过测试类型是否为 undefined，来测试对象是否存在：

实例

if (typeof myObj === "undefined")

但是您无法测试对象是否为 null，因为如果对象未定义，将抛出错误：

不正确的：

if (myObj === null)

要解决此问题，必须测试对象是否为 null，而不是未定义。

但这仍然会引发错误：

不正确的：

if (myObj !== null && typeof myObj !== "undefined")

因此，在测试非 null 之前，必须先测试未定义：

正确的：

if (typeof myObj !== "undefined" && myObj !== null)

期望块级范围

JavaScript 不会为每个代码块创建新的作用域。

很多编程语言都是如此，但是 JavaScript 并非如此。

认为这段代码会返回 undefined，是新的 JavaScript 开发者的常见错误：

实例

for (var i = 0; i < 10; i++) {
  // 代码块
}
return i;

JavaScript 性能

如何加速您的 JavaScript 代码。

减少循环中的活动

编程经常会用到循环。

循环每迭代一次，循环中的每条语句，包括 for 语句，都会被执行。

能够放在循环之外的语句或赋值会使循环运行得更快。

差的代码：

var i;
for (i = 0; i < arr.length; i++) {

更好的代码：

var i;
var l = arr.length;
for (i = 0; i < l; i++) {

循环每次迭代时，坏代码就会访问数组的 length 属性。

好代码在循环之外访问 length 属性，使循环更快。

减少 DOM 访问

与其他 JavaScript 相比，访问 HTML DOM 非常缓慢。

假如您期望访问某个 DOM 元素若干次，那么只访问一次，并把它作为本地变量来使用：

实例

var obj;
obj = document.getElementById("demo");
obj.innerHTML = "Hello"; 

缩减 DOM 规模

请尽量保持 HTML DOM 中较少的元素数量。

这么做总是会提高页面加载，并加快渲染（页面显示），尤其是在较小的设备上。

每一次试图搜索 DOM（比如 getElementsByTagName）都将受益于一个较小的 DOM。

避免不必要的变量

请不要创建不打算存储值的新变量。

通常您可以替换代码：

var fullName = firstName + " " + lastName;
document.getElementById("demo").innerHTML = fullName; 

用这段代码：

document.getElementById("demo").innerHTML = firstName + " " + lastName

延迟 JavaScript 加载

请把脚本放在页面底部，使浏览器首先加载页面。

脚本在下载时，浏览器不会启动任何其他的下载。此外所有解析和渲染活动都可能会被阻塞。

HTTP 规范定义浏览器不应该并行下载超过两种要素。

一个选项是在 script 标签中使用 defer=“true”。defer 属性规定了脚本应该在页面完成解析后执行，但它只适用于外部脚本。

如果可能，您可以在页面完成加载后，通过代码向页面添加脚本：

实例

<script>
window.onload = downScripts;

function downScripts() {
    var element = document.createElement("script");
    element.src = "myScript.js";
    document.body.appendChild(element);
}
</script>

避免使用 with

请避免使用 with 关键词。它对速度有负面影响。它也将混淆 JavaScript 作用域。

严格模式中不允许 with 关键词。

JavaScript 保留词

JavaScript 保留词

在 JavaScript 中，您不能把这些保留词作为变量、标记或函数名来使用：

abstract	arguments	await*	boolean
break	byte	case	catch
char	class*	const	continue
debugger	default	delete	do
double	else	enum*	eval
export*	extends*	false	final
finally	float	for	function
goto	if	implements	import*
in	instanceof	int	interface
let*	long	native	new
null	package	private	protected
public	return	short	static
super*	switch	synchronized	this
throw	throws	transient	true
try	typeof	var	void
volatile	while	with	yield

用星号标记的关键词是 ECMAScript 5 和 6 中的新词。

您可以在 JS 版本中阅读更多有关不同 JavaScript 版本的内容。

被删除的保留词

以下保留词已被从 ECMAScript 5/6 标准中删除：

abstract	boolean	byte	char
double	final	float	goto
int	long	native	short
synchronized	throws	transient	volatile

请不要将这些保留词用作变量。并非所有浏览器都完全支持 ECMAScript 5/6。

JavaScript 对象、属性和方法

您还应该避免使用 JavaScript 内建对象的名称、属性和方法：

Array	Date	eval	function
hasOwnProperty	Infinity	isFinite	isNaN
isPrototypeOf	length	Math	NaN
name	Number	Object	prototype
String	toString	undefined	valueOf

Java 保留词

JavaScript 常与 Java 一起使用。您应该避免把某些 Java 对象和属性用作 JavaScript 标识符：

getClass	java	JavaArray	javaClass
JavaObject	JavaPackage

其他保留词

JavaScript 能够在很多应用程序中被用作编程语言。

您还应该避免使用 HTML 和 Window 对象和属性的名称：

alert	all	anchor	anchors
area	assign	blur	button
checkbox	clearInterval	clearTimeout	clientInformation
close	closed	confirm	constructor
crypto	decodeURI	decodeURIComponent	defaultStatus
document	element	elements	embed
embeds	encodeURI	encodeURIComponent	escape
event	fileUpload	focus	form
forms	frame	innerHeight	innerWidth
layer	layers	link	location
mimeTypes	navigate	navigator	frames
frameRate	hidden	history	image
images	offscreenBuffering	open	opener
option	outerHeight	outerWidth	packages
pageXOffset	pageYOffset	parent	parseFloat
parseInt	password	pkcs11	plugin
prompt	propertyIsEnum	radio	reset
screenX	screenY	scroll	secure
select	self	setInterval	setTimeout
status	submit	taint	text
textarea	top	unescape	untaint
window

HTML 事件处理程序

此外您应该避免使用所有 HTML 事件处理程序的名称。

例如：

onblur	onclick	onerror	onfocus
onkeydown	onkeypress	onkeyup	onmouseover
onload	onmouseup	onmousedown	onsubmit