在 HTML 页面中插入 JavaScript，请使用 script 标签。外部文件通常包含被多个网页使用的代码，文件扩展名是 .js，请在 script 标签的 "src" 属性中设置该 .js 文件。可以在 HTML 文档中放入不限数量的脚本，脚本可位于 HTML 的 body 或 head 部分中，或者同时存在于两个部分中。通常的做法是把函数放入部分中，或者放在页面底部。

简介

直接写入 HTML 输出流：

document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");

注：只能在 HTML 输出中使用 document.write，如果在文档加载后使用该方法，会覆盖整个文档。
对事件的反应：

<button type="button" onclick="alert('欢迎!')">点我!</button>

注：alert() 函数对于代码测试非常方便，onclick 事件只是众多事件之一。

改变 HTML 内容：

x=document.getElementById("demo");  //查找元素
x.innerHTML="Hello JavaScript";    //改变内容

*注：**document.getElementById("some id")**这个方法是 HTML DOM 中定义的，**DOM (Document Object Model)（文档对象模型）*是用于访问 HTML 元素的正式 W3C 标准。

改变 HTML 图像：
动态地改变 HTML <image> 的来源（src）：

<script>
function changeImage()
{
    var s = document.getElementById('myimage');
    s.src = s.src.match('bulboff')?"/images/pic_bulbon.gif":"/images/pic_bulboff.gif";
}
</script>
<img loading="lazy" id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">

改变 HTML 样式：

x=document.getElementById("demo")  //找到元素 
x.style.color="#ff0000";           //改变样式

验证输入：

if isNaN(x) { alert("不是数字"); }

用法

标签：在 HTML 页面中插入 JavaScript，请使用 <script> 标签。
外部的 JavaScript：外部文件通常包含被多个网页使用的代码，文件扩展名是 .js，请在 <script> 标签的 "src" 属性中设置该 .js 文件。

可以在 HTML 文档中放入不限数量的脚本，脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。
通常的做法是把函数放入部分中，或者放在页面底部。

输出

JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

语法

JavaScript 是一个脚本语言，轻量级，但功能强大的编程语言。

字面量

在编程语言中，一般固定值称为字面量，如 3.14。

数字（Number）字面量 可以是整数或者是小数，或者是科学计数(e)，如 123e5 。
字符串（String）字面量 可以使用单引号或双引号：

"John Doe"
'John Doe'

表达式字面量 用于计算，如5 + 6 、5 * 10 。
数组（Array）字面量 定义一个数组：

[40, 100, 1, 5, 25, 10] 。

对象（Object）字面量 定义一个对象：

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函数（Function）字面量 定义一个函数：

function myFunction(a, b) { return a * b;}

变量

JavaScript 使用关键字 var 来定义变量，使用等号来为变量赋值：

var x, length;
x = 5;
length = 6;

注：变量是一个名称，字面量是一个值。变量通常是可变的，字面量是一个恒定的值。

操作符

JavaScript语言有多种类型的运算符：

类型	实例	描述
赋值，算术和位运算符	= + - * /	在 JS 运算符中描述
条件，比较及逻辑运算符	== != < >	在 JS 比较运算符中描述

语句

在 HTML 中，JavaScript 语句向浏览器发出的命令，语句是用分号分隔：

x = 5 + 6;
y = x * 10;

关键字

JavaScript 关键字用于标识要执行的操作，和其他任何编程语言一样，JavaScript 保留了一些关键字为自己所用。
注：基本上，编程通用的关键字尽量不要使用即可。

注释

不是所有的 JavaScript 语句都是"命令"，注释后的内容将会被浏览器忽略。
单行注释以 // 开头，多行注释以 /* 开始，以 */ 结尾。

数据类型

JavaScript 有多种数据类型：数字，字符串，数组，对象等等：

var length = 16;                                  // Number 通过数字字面量赋值
var points = x * 10;                              // Number 通过表达式字面量赋值
var lastName = "Johnson";                         // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"];              // Array  通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"};  // Object 通过对象字面量赋值

函数

JavaScript 语句可以写在函数内，函数可以重复引用，引用一个函数 = 调用函数(执行函数内的语句)：

function myFunction(a, b) {
    return a * b;                                // 返回 a 乘以 b 的结果
}

注：JavaScript 对大小写是敏感的，使用 Unicode 字符集。

函数表达式

JavaScript 函数可以通过一个表达式定义：

var x = function (a, b) {return a * b};
var z = x(4, 3);

以上函数实际上是一个 匿名函数 (函数没有名称)，函数存储在变量中，不需要函数名称，通常通过变量名来调用。

Function() 构造函数

函数可以通过内置的 JavaScript **函数构造器（Function()）**定义：

var myFunction = new Function("a", "b", "return a * b");
var x = myFunction(4, 3);

注：在 JavaScript 中，需要避免使用 new 关键字，建议使用函数表达式替换函数构造器（Function()）。

自调用函数

函数表达式可以 "自调用"，自调用表达式会自动调用，如果表达式后面紧跟 () ，则会自动调用：

(function () {
    var x = "Hello!!";      // 我将调用自己
})();

箭头函数

箭头函数表达式的语法比普通函数表达式更简洁：

(参数1, 参数2, …, 参数N) => { 函数声明 }

(参数1, 参数2, …, 参数N) => 表达式(单一)
// 相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

(单一参数) => {函数声明}
单一参数 => {函数声明}

() => {函数声明}

// ES5
var x = function(x, y) {
     return x * y;
}
 
// ES6
const x = (x, y) => x * y;

注：当使用箭头函数的时候，箭头函数会默认绑定外层 this 的值，所以在箭头函数中 this 的值和外层的 this 是一样的。

arguments 对象

JavaScript 函数有个内置的对象 arguments 对象，argument 对象包含了函数调用的参数数组。
创建一个函数用来统计所有数值的和：

x = sumAll(1, 123, 500, 115, 44, 88);
 
function sumAll() {
    var i, sum = 0;
    for (i = 0; i < arguments.length; i++) {
        sum += arguments[i];
    }
    return sum;
}

使用构造函数调用函数

如果函数调用前使用了 new 关键字, 则是调用了构造函数：

// 构造函数:
function myFunction(arg1, arg2) {
    this.firstName = arg1;
    this.lastName  = arg2;
}
 
// This    creates a new object
var x = new myFunction("John","Doe");
x.firstName;                             // 返回 "John"

注：构造函数中 this 关键字没有任何的值，this 的值在函数调用实例化对象(new object)时创建。

作为函数方法调用函数

在 JavaScript 中, 函数是对象，有它的属性和方法。

call() 和 apply() 是预定义的函数方法，两个方法可用于调用函数，两个方法的第一个参数必须是对象本身：

function myFunction(a, b) {
    return a * b;
}
myObject = myFunction.call(myObject, 10, 2);     // 返回 20

myArray = [10, 2];
myObject = myFunction.apply(myObject, myArray);  // 返回 20

call() 和 apply()两者的区别在于第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。

注：通过 call() 或 apply() 方法可以设置 this 的值, 且作为已存在对象的新方法调用。

闭包

参考函数自我调用：

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();
 
add();
add();
add();
 
// 计数器为 3

变量 add 指定了函数自我调用的返回字值，自我调用函数只执行一次，设置计数器为 0，并返回函数表达式。

add变量可以作为一个函数使用，它可以访问函数上一层作用域的计数器，这个叫作 JavaScript 闭包。

它使得函数拥有私有变量变成可能，计数器受匿名函数的作用域保护，只能通过 add 方法修改。

注：闭包是一种保护私有变量的机制，在函数执行时形成私有的作用域，保护里面的私有变量不受外界干扰，形成一个不销毁的栈环境。

对象

JavaScript 对象是拥有属性和方法的数据。

对象定义

定义和创建 JavaScript 对象:

var person = {
    //属性
    firstName: "John",
    lastName : "Doe",
    id : 5566,
    //方法
    fullName : function() 
	{
       return this.firstName + " " + this.lastName;
    }

对象属性

可以说 "JavaScript 对象是变量的容器"，或者说"JavaScript 对象是键值对的容器"。
键值对通常写法为 name : value (键与值以冒号分割)，键值对在 JavaScript 对象通常称为 对象属性。

可以通过两种方式访问对象属性:

//方法1
person.lastName;
//方法2
person["lastName"];

对象方法

对象的方法定义了一个函数，并作为对象的属性存储。
对象方法通过添加 () 调用 (作为一个函数)：

name = person.fullName();

如果把函数当成属性访问（不添加()），它将作为一个定义函数的字符串返回：

name = person.fullName;

作用域

在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。

局部作用域

变量在函数内声明，变量为局部作用域，只能在函数内部访问：

// 此处不能调用 carName 变量
function myFunction() {
    var carName = "Volvo";
    // 函数内可调用 carName 变量
}

不同的函数可以使用相同名称的变量，局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。
注：函数参数只在函数内起作用，是局部变量。

全局变量

变量在函数外定义，即为全局变量，全局变量有全局作用域—— 网页中所有脚本和函数均可使用：

var carName = " Volvo";
 
// 此处可调用 carName 变量
function myFunction() {
    // 函数内可调用 carName 变量
}

如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量：

// 此处可调用 carName 变量
 
function myFunction() {
    carName = "Volvo";
    // 此处可调用 carName 变量
}

变量生命周期

JavaScript 变量生命周期在它声明时初始化，局部变量在函数执行完毕后销毁，全局变量在页面关闭后销毁。

HTML 中的全局变量

在 HTML 中, 全局变量是 window 对象：所有数据变量都属于 window 对象。

//此处可使用 window.carName
 
function myFunction() {
    carName = "Volvo";
}

事件

HTML 事件是发生在 HTML 元素上的事情， JavaScript 可以触发这些事件。

HTML 事件

HTML 事件可以是浏览器行为，也可以是用户行为，以下是 HTML 事件的实例：

HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击

HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素：

<!-- 单引号 -->
<some-HTML-element some-event='JavaScript 代码'>

<!-- 双引号 -->
<some-HTML-element some-event="JavaScript 代码">

常见的HTML事件

下面是一些常见的HTML事件的列表:

事件	描述
onchange	HTML 元素改变
onclick	用户点击 HTML 元素
onmouseover	用户在一个HTML元素上移动鼠标
onmouseout	用户从一个HTML元素上移开鼠标
onkeydown	用户按下键盘按键
onload	浏览器已完成页面的加载

更多事件列表： JavaScript 参考手册 - HTML DOM 事件

typeof, null, 和 undefined

typeof 操作符

可以使用 typeof 操作符来检测变量的数据类型：

typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object

*注：在JavaScript中，数组是一种特殊的对象类型，因此 typeof [1,2,3,4] 返回 object。 *

null

null是一个只有一个值的特殊类型，表示一个空对象引用（用 typeof 检测 null 返回是object），可以设置为 null 来清空对象:

var person = null;           // 值为 null(空), 但类型为对象

也可以设置为 undefined 来清空对象:

var person = undefined;     // 值为 undefined, 类型为 undefined

undefined

在 JavaScript 中, undefined 是一个没有设置值的变量，typeof 一个没有值的变量会返回 undefined：

var person;                  // 值为 undefined(空), 类型是undefined

任何变量都可以通过设置值为 undefined 来清空，类型为 undefined：

person = undefined;          // 值为 undefined, 类型是undefined

undefined 和 null 的区别

null 和 undefined 的值相等，但类型不等：

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

类型转换

数据类型

在 JavaScript 中有 6 种不同的数据类型：

string
number
boolean
object
function
symbol

3 种对象类型：

Object
Date
Array

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 (如果 myCar 没有声明)
typeof null                   // 返回 object

constructor 属性

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

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

可以使用 constructor 属性来查看对象是否为数组 (包含字符串 "Array")、日期 (包含字符串 "Date")：

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

JavaScript 类型转换

全局方法 String()：可以将数字、字母、变量、表达式、布尔值、日期转换为字符串
Number 方法 toString()：可以将数字转换为字符串。
Boolean 方法 toString()：可以将布尔值转换为字符串，"false"、"true"。
Date 方法 toString()：可以将日期对象转换为字符串，返回 “Thu Jul 17 2014 15:38:19 GMT+0200 (W. Europe Daylight Time)”。
全局方法 Number()：可以将字符串、布尔值、日期转换为数字，空字符串转换为 0，其他的字符串会转换为 NaN (不是个数字)，布尔值对应0和1，日期返回 1404568027739（毫秒数）。
一元运算符 +：Operator + 可用于将变量转换为数字，如果变量不能转换，则值为 NaN (不是一个数字)。
**日期方法 getTime() **：可将日期转换为数字，返回 1404568027739（毫秒数）。

正则表达式

语法

/正则表达式主体/修饰符(可选)

其中修饰符是可选的:

var patt = /runoob/i

/runoob/i 是一个正则表达式。
runoob 是一个正则表达式主体 (用于检索)。
i 是一个修饰符 (搜索不区分大小写)。

使用字符串方法

在 JavaScript 中，正则表达式通常用于两个字符串方法 : search() 和 replace()。

search() 方法：用于检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串，并返回子串的起始位置。

var str = "Visit Runoob!"; 
var n = str.search(/Runoob/i); //不区分大小
var n = str.search("Runoob");

replace() 方法：用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。

var str = document.getElementById("demo").innerHTML; 
var txt = str.replace(/microsoft/i,"Runoob"); //不区分大小
var txt = str.replace("Microsoft","Runoob");

使用 RegExp 对象

在 JavaScript 中，RegExp 对象是一个预定义了属性和方法的正则表达式对象。

test() 方法：用于检测一个字符串是否匹配某个模式，如果字符串中含有匹配的文本，则返回 true，否则返回 false。

var patt = /e/;
patt.test("The best things in life are free!");

//以上两行代码可以合并为一行：
/e/.test("The best things in life are free!");

**exec() 方法：用于检索字符串中的正则表达式的匹配，该函数返回一个存放匹配结果的数组，未找到匹配则返回值为 null。

/e/.exec("The best things in life are free!");

参考 JavaScript RegExp 参考手册。

表单

表单验证

判断表单字段(fname)值是否存在，如果不存在，就弹出信息，阻止表单提交：

function validateForm() {
    var x = document.forms["myForm"]["fname"].value;
    if (x == null || x == "") {
        alert("需要输入名字。");
        return false;
    }
}

<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
名字: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

多表单使用同一验证函数可以使用以下方法：

function validateForm(form) {
    var x = form.name.value;
    if (x == null || x == "") {
        alert("输入不能为空！");
        return false;
    }
}

所有表单调用时都使用：

onsubmit="return validateForm(this)"

onsubmit="validateForm()" 能够调用 validateForm() 对表单进行验证，但是在验证不通过的情况下，并不能阻止表单提交。
onsubmit="return validateForm()" 当验证不通过时，返回 false，可以阻止表单提交。

onsubmit="return validateForm()" 相当于复写了 onsubmit 的默认方法（默认返回 true），根据 validateForm() 的结果返回 true 或 false，当验证不通过时，返回 false，onsubmit="return false;" 阻止表单提交。

this 的多种指向:

在对象方法中， this 指向调用它所在方法的对象。
单独使用 this，它指向全局(Global)对象。
函数使用中，this 指向函数的所属者。
严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。
在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素。
apply 和 call 允许切换函数执行的上下文环境（context），即 this 绑定的对象，可以将 this 引用到任何对象。

let 和 const

let关键字

块级作用域(Block Scope)

使用 var 关键字声明的变量不具备块级作用域的特性，它在 {} 外依然能被访问到：

{ 
    var x = 2; 
}
// 这里可以使用 x 变量

let 声明的变量只在 let 命令所在的代码块 {} 内有效，在 {} 之外不能访问：

{ 
    let x = 2;
}
// 这里不能使用 x 变量

重新定义变量

使用 var 关键字重新声明变量可能会带来问题，在块中重新声明变量也会重新声明块外的变量：

var x = 10;
// 这里输出 x 为 10
{ 
    var x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 2

let 关键字可以解决这个问题，它只在 let 命令所在的代码块 {} 内有效：

var x = 10;
// 这里输出 x 为 10
{ 
    let x = 2;
    // 这里输出 x 为 2
}
// 这里输出 x 为 10

使用全局变量

使用 var 关键字声明的全局作用域变量属于 window 对象：

var carName = "Volvo";
// 可以使用 window.carName 访问变量

使用 let 关键字声明的全局作用域变量不属于 window 对象：

let carName = "Volvo";
// 不能使用 window.carName 访问变量

重置变量

使用 var 关键字声明的变量在任何地方都可以修改
在相同的作用域或块级作用域中，不能使用 let 关键字来重置 var 关键字声明的变量
在相同的作用域或块级作用域中，不能使用 let 关键字来重置 let 关键字声明的变量
在相同的作用域或块级作用域中，不能使用 var 关键字来重置 let 关键字声明的变量
let 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的

const 关键字

const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改。
const定义常量与使用let 定义的变量相似：

二者都是块级作用域
都不能和它所在作用域内的其他变量或函数拥有相同的名称

两者还有以下两点区别：

const声明的常量必须初始化，而let声明的变量不用
const 定义常量的值不能通过再赋值修改，也不能再次声明。而 let 定义的变量值可以修改。

*注：const 定义的变量并非不可改变，比如使用const声明对象，可以改变对象值。可以使用**Object.freeze()*方法来冻结变量，被冻结后的对象只能进行读操作。

重置变量

使用 var 关键字声明的变量在任何地方都可以修改
在相同的作用域或块级作用域中，不能使用 const 关键字来重置 var 和 let关键字声明的变量
在相同的作用域或块级作用域中，不能使用 const 关键字来重置 const 关键字声明的变量
const 关键字在不同作用域，或不同块级作用域中是可以重新声明赋值的

JSON

JSON 是用于存储和传输数据的格式，通常用于服务端向网页传递数据。

语法规则

数据为键/值对
数据由逗号分隔
大括号保存对象
方括号保存数组

{"sites":[
    {"name":"Runoob", "url":"www.runoob.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]}

JSON 字符串和 JavaScript 对象互转

要实现从JSON字符串转换为JS对象，使用 JSON.parse() 方法：

var obj = JSON.parse('{"a": "Hello", "b": "World"}'); //结果是 {a: 'Hello', b: 'World'}  一个对象

要实现从JS对象转换为JSON字符串，使用 JSON.stringify() 方法：

var json = JSON.stringify({a: 'Hello', b: 'World'}); //结果是 '{"a": "Hello", "b": "World"}'  一个JSON格式的字符串

void(0) 含义

javascript:void(0) 中最关键的是 void 关键字， void 是 JavaScript 中非常重要的关键字，该操作符指定要计算一个表达式但是不返回值。

void(alert("Warnning!"))

href="#"与href="javascript:void(0)"的区别：

包含了一个位置信息，默认的锚是#top 也就是网页的上端。
javascript:void(0), 仅仅表示一个死链接。

在页面很长的时候会使用 # 来定位页面的具体位置，格式为：# + id，如果要定义一个死链接请使用 javascript:void(0)：

<a href="javascript:void(0);">点我没有反应的!</a>
<a href="#pos">点我定位到指定位置!</a>
<br>
...
<br>
<p id="pos">尾部定位点</p>

异步编程

异步的概念

**异步（Asynchronous, async）是与同步（Synchronous, sync）**相对的概念，同步按码顺序执行，异步不按照代码顺序执行，异步的执行效率更高。
通俗地解释一下异步：异步就是从主线程发射一个子线程来完成任务。

什么时候用异步编程

主线程作为一个线程，不能够同时接受多方面的请求。当一个事件没有结束时，界面将无法处理其他请求。

现在有一个按钮，如果设置它的 onclick 事件为一个死循环，那么当这个按钮按下，整个网页将失去响应。

子线程有一个局限：一旦发射了以后就会与主线程失去同步，无法确定它的结束。

为了解决这个问题，JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理。

回调函数

回调函数就是一个函数，在启动一个异步任务的时候就告诉它：等完成了这个任务之后要干什么。

function print() {
    document.getElementById("demo").innerHTML="RUNOOB!";
}
setTimeout(print, 3000);

这段程序中的 setTimeout 就是一个消耗时间较长（3 秒）的过程，它的第一个参数是个回调函数，第二个参数是毫秒数，这个函数执行之后会产生一个子线程，子线程会等待 3 秒，然后执行回调函数 "print"，在命令行输出 "Time out"。

不必单独定义一个函数 print ，常常将上面的程序写成：

setTimeout(function () {
    document.getElementById("demo").innerHTML="RUNOOB!";
}, 3000);

异步 AJAX

除了 setTimeout 函数以外，异步回调广泛应用于 AJAX 编程，参考：https://www.runoob.com/ajax/ajax-tutorial.html

XMLHttpRequest 常常用于请求来自远程服务器上的 XML 或 JSON 数据，一个标准的 XMLHttpRequest 对象往往包含多个回调：

var xhr = new XMLHttpRequest();
 
xhr.onload = function () {
    // 输出接收到的文字数据
    document.getElementById("demo").innerHTML=xhr.responseText;
}
 
xhr.onerror = function () {
    document.getElementById("demo").innerHTML="请求出错";
}
 
// 发送异步 GET 请求
xhr.open("GET", "https://www.runoob.com/try/ajax/ajax_info.txt", true);
xhr.send();

XMLHttpRequest 的 onload 和 onerror 属性都是函数，分别在它请求成功和请求失败时被调用。

如果使用完整的 jQuery 库，也可以更加优雅的使用异步 AJAX：

$.get("https://www.runoob.com/try/ajax/demo_test.php",function(data,status){
    alert("数据: " + data + "\n状态: " + status);
});

Promise

Promise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务。由于 Promise 是 ES6 新增加的，一些旧的浏览器并不支持。

构造 Promise

现在新建一个 Promise 对象：

new Promise(function (resolve, reject) {
    // 要做的事情...
});

用 Promise 来实现三次输出字符串，第一次间隔 1 秒，第二次间隔 4 秒，第三次间隔 3 秒：

new Promise(function (resolve, reject) {
    setTimeout(function () {
        console.log("First");
        resolve();
    }, 1000);
}).then(function () {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log("Second");
            resolve();
        }, 4000);
    });
}).then(function () {
    setTimeout(function () {
        console.log("Third");
    }, 3000);
});

Promise 的使用

下面通过剖析这段 Promise "计时器" 代码来讲述 Promise 的使用：

Promise 构造函数只有一个参数，是一个函数，这个函数在构造之后会直接被异步运行——称之为起始函数。

**起始函数包含两个参数 resolve 和 reject*8，当 Promise 被构造时起始函数会被异步执行：

new Promise(function (resolve, reject) {
    console.log("Run");
});

resolve 和 reject 都是函数，其中调用 resolve 代表一切正常，reject 是出现异常时所调用的：

new Promise(function (resolve, reject) {
    var a = 0;
    var b = 1;
    if (b == 0) reject("Divide zero");
    else resolve(a / b);
}).then(function (value) {
    console.log("a / b = " + value);
}).catch(function (err) {
    console.log(err);
}).finally(function () {
    console.log("End");
});

Promise 类有 .then()****.catch() 和 .finally() 三个方法，这三个方法的参数都是一个函数：

.then() 可以将参数中的函数添加到当前 Promise 的正常执行序列；
.catch() 则是设定 Promise 的异常处理序列；
.finally() 是在 Promise 执行的最后一定会执行的序列。

.then() 传入的函数会按顺序依次执行，有任何异常都会直接跳到 catch 序列：

new Promise(function (resolve, reject) {
    console.log(1111);
    resolve(2222);
}).then(function (value) {
    console.log(value);
    return 3333;
}).then(function (value) {
    console.log(value);
    throw "An error";
}).catch(function (err) {
    console.log(err);
});

执行结果：

1111
2222
3333
An error

resolve() 中可以放置一个参数用于向下一个 then 传递一个值，then 中的函数也可以返回一个值传递给 then。如果 then 中返回的是一个 Promise 对象，那么下一个 then 将相当于对这个返回的 Promise 进行操作。
reject() 参数中一般会传递一个异常给之后的 catch 函数用于处理异常。
**resolve 和 reject 的作用域只有起始函数，不包括 then 以及其他序列。
**resolve 和 reject 并不能够使起始函数停止运行，别忘了 return。

Promise 函数

可以将上面程序的核心部分写成一个 Promise 函数：

function print(delay, message) {
    return new Promise(function (resolve, reject) {
        setTimeout(function () {
            console.log(message);
            resolve();
        }, delay);
    });
}

然后实现程序功能：

print(1000, "First").then(function () {
    return print(4000, "Second");
}).then(function () {
    print(3000, "Third");
});

异步函数

异步函数（async function）是 ECMAScript 2017 (ECMA-262) 标准的规范，可以上面实现程序功能的代码变得更好看：

async function asyncFunc() {
    await print(1000, "First");
    await print(4000, "Second");
    await print(3000, "Third");
}
asyncFunc();

异步函数 async function 中可以使用 await 指令，await 指令后必须跟着一个 Promise，异步函数会在这个 Promise 运行中暂停，直到其运行结束再继续运行。

异步函数实际上原理与 Promise 原生 API 的机制是一模一样的，处理异常的机制将用 try-catch 块实现：

async function asyncFunc() {
    try {
        await new Promise(function (resolve, reject) {
            throw "Some error"; // 或者 reject("Some error")
        });
    } catch (err) {
        console.log(err);
        // 会输出 Some error
    }
}
asyncFunc();

如果 Promise 有一个正常的返回值，await 语句也会返回它：

async function asyncFunc() {
    let value = await new Promise(
        function (resolve, reject) {
            resolve("Return value");
        }
    );
    console.log(value);
}
asyncFunc();

输出:

Return value

Dreamweaver基础教程：学习JavaScript

简介

用法

输出

语法

字面量

变量

操作符

语句

关键字

注释

数据类型

函数

函数表达式

Function() 构造函数

自调用函数

箭头函数

arguments 对象

使用构造函数调用函数

作为函数方法调用函数

闭包

对象

对象定义

对象属性

对象方法

作用域

局部作用域

全局变量

变量生命周期

HTML 中的全局变量

事件

HTML 事件

常见的HTML事件

typeof, null, 和 undefined

typeof 操作符

null

undefined

undefined 和 null 的区别

类型转换

数据类型

typeof 操作符

constructor 属性

JavaScript 类型转换

正则表达式

语法

使用字符串方法

使用 RegExp 对象

表单

表单验证

this 的多种指向:

let 和 const

let关键字

块级作用域(Block Scope)

重新定义变量

使用全局变量

重置变量

const 关键字

重置变量

JSON

语法规则

JSON 字符串和 JavaScript 对象互转

void(0) 含义

包含了一个位置信息，默认的锚是#top 也就是网页的上端。

异步编程

异步的概念

什么时候用异步编程

回调函数

异步 AJAX

Promise

构造 Promise

Promise 的使用

Promise 函数

异步函数

相关文章

热门标签

最新文章

目录