当前位置:

首页 > temp > JavaScript教程 >

Dreamweaver基础教程：学习JavaScript

简介#

直接写入 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

来源：https://www.cnblogs.com/timefiles/p/JavaScriptNote.html

栏目列表

首页 > temp > JavaScript教程 >

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 函数#

异步函数#