JavaScript 教程

小付-小付

已于 2024-02-22 17:07:57 修改

阅读量1k

点赞数

文章标签： javascript 前端 html 开发语言

于 2023-02-17 15:34:15 首次发布

本文链接：https://blog.csdn.net/weixin_58431406/article/details/129066797

版权

JavaScript 简介 | 菜鸟教程

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备

JavaScript 用法:

HTML 中的 Javascript 脚本代码必须位于 <script> 与 </script> 标签之间。

Javascript 脚本代码可被放置在 HTML 页面的 <body> 和 <head> 部分中

引用：

页面内嵌<script> </script>

外部引入<script src="location"> </script>

基本语法：

变量声明 var

命名规则.必须以（英文字母_$）开头，包括（英文字母_$数字）不可以使用系统关键字保留字

JavaScript 数据类型:

基本类型：字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。

引用数据类型（对象类型）：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）

常见的HTML事件:

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

JavaScript 显示数据：

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

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

JavaScript：直接写入 HTML 输出流：

<script>
  document.write("<h1>这是一个标题</h1>");
</script>

JavaScript：对事件的反应：

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

JavaScript 函数:

//语法
function functionname()
{
    
}
//调用带参数的函数
<p>点击这个按钮，来调用带参数的函数。</p>
<button onclick="csFunction('Harry Potter','Wizard')">点击这里</button>
<script>
    function csFunction(name, job) {
      alert("Welcome " + name + ", the " + job);
    }
</script>
//带有返回值的函数,通过使用 return 语句就可以实现。
//在使用 return 语句时，函数会停止执行，并返回指定的值。
 <script>
        function fhFunction() {
            var x = 5;
            return x;
        }
        var myVar = fhFunction();
        console.log(myVar, "myVar"); //5
 </script>
 <button onclick="fhFunction()">带有返回值的函数</button>
//计算两个数字的乘积，并返回结果
<script>
        function myFunction(a, b) {
            return a * b;
        }
        console.log(myFunction(4, 3));//12
</script>

JavaScript：改变 HTML 内容：

 <script>
        function btn() {
            document.getElementById("dome").innerHTML = "我是改变之后的内容"
        }
 </script>
<h5 id="dome">我是原内容</h5>
<button type="button" onclick="btn()">改变 HTML 内容</button>

JavaScript：改变 HTML 图像：

 function changeImage() {
            imgs = document.getElementById("myimage")
            if (imgs.src.match("216286277")) {//match() 方法可在字符串内检索指定的值
                imgs.src =
"https://img1.baidu.com/it/u=1571271284,1009852393&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1676739600&t=933cc411cb534b9134ceb27d9a473b4d"
            } else {
                imgs.src =
"https://img0.baidu.com/it/u=216286277,1414740285&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1676739600&t=330574da6fc428ca0fe50000b7f4187a"
                   
            }
        }
<img decoding="async" loading="lazy" id="myimage" onclick="changeImage()"
src="https://img1.baidu.com/it/u=1571271284,1009852393&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1676739600&t=933cc411cb534b9134ceb27d9a473b4d"
width="100" height="180">

JavaScript：改变 HTML 样式

<body>
        <p id="demo">
            JavaScript 能改变 HTML 元素的样式。
        </p>
        <script>
            function myFunction() {
                x = document.getElementById("demo")
                x.style.color = "#ff0000";
            }
        </script>
        <button type="button" onclick="myFunction()">点击这里</button>
  </body>

JavaScript：验证输入

<input id="tydemo" type="text">
    <script>
        function myyanzheng() {
            var x = document.getElementById("tydemo").value;
            if (x == "" || isNaN(x)) {//isNaN() 函数用于检查其参数是否是非数字值
                alert("不是数字");
            }
        }
    </script>
<button type="button" onclick="myyanzheng()">验证输入</button>

JavaScript：获取一个实时的时间:Date()

 <button onclick="displayDate()">点这里</button>
    <script>
        function displayDate() {
            document.getElementById("damo").innerHTML = Date();
        }
    </script>
<p id="damo"></p>

对象:

<script>
       <!-- 对象定义 -->
        var person = {
            firstName: "John",
            lastName: "Doe",
            age: 50,
            eyeColor: "blue",
            fullName: function () {
                return this.firstName + " " + this.lastName;
            }
        };
        //访问对象属性
        console.log(person.lastName);
        console.log(person["eyeColor"]);
        //访问对象方法
        name = person.fullName();
        console.log(name);
 </script>

JavaScript 字符串:

字符串比较是按照字符串的 Unicode 码点（即字符编码）进行比较的，

例var a = "你好">"你不好"; // true

转义字符:

代码	输出
\'	单引号
\"	双引号
\\	反斜杠
\n	换行
\r	回车
\t	tab(制表符)
\b	退格符
\f	换页符

<script>
        var name = "mali";
        var age = 24;
        var zyzf = name + '\'' + age + '\\' + name
        console.log(zyzf); //mali'24\mali
</script>

常用的属性和方法：

length

返回字符串的长度

concat()

连接两个或多个字符串，返回连接后的字符串

slice()	提取字符串的片断，并在新的字符串中返回被提取的部分
split()	把字符串分割为子字符串数组

match()

在字符串内检索指定的值

JavaScript 算术运算符：

y=5

运算符	描述	例子	x 运算结果	y 运算结果
+	加法	x=y+2	7	5
-	减法	x=y-2	3	5
*	乘法	x=y*2	10	5
/	除法	x=y/2	2.5	5
%	取模（余数）	x=y%2	1	5
++	自增	x=++y	6	6
++	自增	x=y++	5	6
--	自减	x=--y	4	4
--	自减	x=y--	5	4

JavaScript 赋值运算符：

x=10 和 y=5

运算符	例子	等同于	运算结果
=	x=y		x=5
+=	x+=y	x=x+y	x=15
-=	x-=y	x=x-y	x=5
*=	x*=y	x=x*y	x=50
/=	x/=y	x=x/y	x=2
%=	x%=y	x=x%y	x=0

逻辑运算符：&& || !

给定 x=6 以及 y=3，下表解释了逻辑运算符：

运算符	描述	例子
&&	and 两个条件都满足	(x < 10 && y > 1) 为 true
\|\|	or 只需满足一个	(x==5 \|\| y==5) 为 false
!	not	!(x==y) 为 true

三元运算符

var num = 16;
var num2 = (num < 18) ? "年龄太小" : "年龄已达到";
console.log(num2)//年龄太小

条件语句：

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行

JavaScript 循环：

for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块

//for - 循环代码块一定的次数
    <button onclick="forFunction()">For 循环</button>
    <script>
        function forFunction() {
            var x = "";
            for (var i = 0; i < 5; i++) {
                x = x + "该数字为 " + i + '\n';
            }
            console.log(x);
            //该数字为 0
            //该数字为 1
            //该数字为 2
            //该数字为 3
            //该数字为 4
        }
    </script>
//For/In 循环
<button onclick="fiFunction()">For/In 循环</button>
    <script>
        function fiFunction() {
            var x;
            var txt = "";
            var person = {
                fname: "Bill",
                lname: "Gates",
                age: 56
            };
            for (x in person) {
                txt = txt + person[x];
            }
            console.log(txt);//BillGates56
        }
    </script>

JavaScript 类型转换:

任何数据类型加字符串都等与字符串

String() 将数字、布尔值、日期对象转换为字符串

toString() 将数字、布尔值、日期对象转换为字符串

Number() 将字符串、布尔值、日期转换为数字

+ 将变量转换为数字

正则表达式：

正则表达式是由一个字符序列形成的搜索模式。

当你在文本中搜索数据时，你可以用搜索模式来描述你要查询的内容。

正则表达式可以是一个简单的字符，或一个更复杂的模式。

正则表达式可用于所有文本搜索和文本替换的操作。

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

使用字符串方法:

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

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

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

//search() 方法使用正则表达式
//使用正则表达式搜索 "Runoob" 字符串，且不区分大小写
 <script>
        var str = "Visit Runoob!";
        var n = str.search(/Runoob/i);
        console.log(n);//6
 </script>

//replace() 方法使用正则表达式
//使用正则表达式且不区分大小写将字符串中的 Microsoft 替换为 Runoob 
 <script>
        var str = "Visit Microsoft!";
        var mic = str.replace(/microsoft/i, "Runoob");
        console.log(mic); //Visit Runoob!
 </script>

JavaScript 表单:

document.forms	表示获取当前页面的所有表单
document.forms[0]	表示获取当前页面的第一个表单
document.forms[‘exportServlet’]	表示获取当前页面的name="exportServlet"的表单
document.forms[‘exportServlet’].username.value	获取表单为exportServlet，name为exportServlet的值
document.forms[0].submit	表示提交第一个form表单

//表单验证:判断字段fname值是否存在,不存在就阻止表单提交
//必填（或必选）
<script>
        function validateForm() {
            var x = document.forms["myForm"]["fname"].value;
            if (x == null || x == "") {
                alert("需要输入名字。");
                return false;
            }
        }
</script>
<form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post">
        名字: <input type="text" name="fname">
        <input type="submit" value="提交">
 </form>

//验证输入的是否为1-10之间的数字
    <input id="numb">
    <button type="button" onclick="tjFunction()">验证数字</button>
    <script>
        function tjFunction() {
            var x, text;
            x = document.getElementById("numb").value;
            //isNaN() 函数用于检查是否为数字
            if (isNaN(x) || x < 1 || x > 10) {
                text = "输入错误";
            } else {
                text = "输入正确";
            }
            console.log(text);
        }
    </script>

//HTML 表单自动验证
 <form action="demo_form.php" method="post">
        <input type="text" name="fname" required="required">
        <input type="submit" value="自动验证">
 </form>

HTML 约束验证：

HTML5 新增了 HTML 表单的验证方式：约束验证（constraint validation）。

约束验证是表单被提交时浏览器用来实现验证的一种算法

约束验证 HTML 输入属性：

属性	描述
disabled	规定输入的元素不可用
max	规定输入元素的最大值
min	规定输入元素的最小值
pattern	规定输入元素值的模式
required	规定输入元素字段是必需的
type	规定输入元素的类型

约束验证 CSS 伪类选择器：

选择器	描述
:disabled	选取属性为 "disabled" 属性的 input 元素
:invalid	选取无效的 input 元素
:optional	选择没有"optional"属性的 input 元素
:required	选择有"required"属性的 input 元素
:valid	选取有效值的 input 元素

对表单内输入数据进行验证：

// E-mail 验证
     <script>
        function emvalidateForm() {
            var x = document.forms["myFormem"]["email"].value;
            var atpos = x.indexOf("@");
            var dotpos = x.lastIndexOf(".");
            if (atpos < 1 || dotpos < atpos + 2 || dotpos + 2 >= x.length) {
                alert("不是一个有效的 e-mail 地址");
                return false;
            }
        }
    </script>
    <form name="myFormem" action="demo-form.php" onsubmit="return emvalidateForm();" method="post">
        <input type="text" name="email">
        <input type="submit" value="E-mail 验证">
    </form>

约束验证 DOM 方法:

Property	Description
checkValidity()	如果 input 元素中的数据是合法的返回 true，否则返回 false。
setCustomValidity()	设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成 true，checkValidity 总是会返回 false。如果要重新判断需要取消自定义提示，方式如下： setCustomValidity('') setCustomValidity(null) setCustomValidity(undefined)

Property

Description

checkValidity()

如果 input 元素中的数据是合法的返回 true，否则返回 false。

setCustomValidity()

设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。

使用 setCustomValidity 设置了自定义提示后，validity.customError 就会变成 true，checkValidity 总是会返回 false。如果要重新判断需要取消自定义提示，方式如下：

setCustomValidity('') 
setCustomValidity(null) 
setCustomValidity(undefined)

  //checkValidity() 方法
  //输入的数字小于 100 或大于300，会提示错误信息
  //required必填
    <input id="id1" type="number" min="100" max="300" required>
    <button onclick="cvFunction()">checkValidity验证</button>
    <script>
        function cvFunction() {
            var inpObj = document.getElementById("id1");
            if (inpObj.checkValidity() == false) {
                console.log(inpObj.validationMessage);
            }
        }
    </script>

约束验证 DOM 属性：

validity	布尔属性值，返回 input 输入值是否合法
validationMessage	浏览器错误提示信息
willValidate	指定 input 是否需要验证

Validity 属性：

input 元素的 validity 属性包含一系列关于 validity 数据属性:

属性	描述
customError	设置为 true, 如果设置了自定义的 validity 信息。
patternMismatch	设置为 true, 如果元素的值不匹配它的模式属性。
rangeOverflow	设置为 true, 如果元素的值大于设置的最大值。
rangeUnderflow	设置为 true, 如果元素的值小于它的最小值。
stepMismatch	设置为 true, 如果元素的值不是按照规定的 step 属性设置。
tooLong	设置为 true, 如果元素的值超过了 maxLength 属性设置的长度。
typeMismatch	设置为 true, 如果元素的值不是预期相匹配的类型。
valueMissing	设置为 true，如果元素 (required 属性) 没有值。
valid	设置为 true，如果元素的值是合法的。

//rangeOverflow 属性
    <input id="id2" type="number" max="100">
    <button onclick="rofFunction()">rangeOverflow验证</button>
    <script>
        function rofFunction() {
            var rantxt = "";
            if (document.getElementById("id2").validity.rangeOverflow) {
                rantxt = "输入的值太大了";
            }
            console.log(rantxt);
        }
    </script>
// rangeUnderflow 属性
    <input id="id3" type="number" min="100" required>
    <button onclick="rufFunction()">rangeUnderflow验证</button>
    <script>
        function rufFunction() {
            var txt = "";
            var inpObj = document.getElementById("id3");
            if (!isNumeric(inpObj.value)) {
                txt = "你输入的不是数字";
            } else if (inpObj.validity.rangeUnderflow) {
                txt = "输入的值太小了";
            } else {
                txt = "输入正确";
            }
            console.log(txt, "txt");
        }
        // 判断输入是否为数字
        function isNumeric(n) {
            return !isNaN(parseFloat(n)) && isFinite(n);
        }
    </script>

JavaScript this 关键字:

面向对象语言中 this 表示当前对象的一个引用。

但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

在方法中，this 表示该方法所属的对象。
如果单独使用，this 表示全局对象。
在函数中，this 表示全局对象。
在函数中，在严格模式下，this 是未定义的(undefined)。
在事件中，this 表示接收事件的元素。
类似 call() 和 apply() 方法可以将 this 引用到任何对象。

//方法中的 this
<script>
        var person = {
            firstName: "John",
            lastName: "Doe",
            id: 5566,
            //fullName 方法所属的对象就是 person
            fullName: function () {
                return this.firstName + " " + this.lastName;
            }
        };
        console.log(person.fullName());//John Doe
</script>

//单独使用 this,指向全局Global对象，在浏览器中window就是全局对象
var x = this;
console.log(x);

//函数中使用 this（默认）
function myFunction() {
  return this;
//Window {window: Window, self: Window, document: document, name: 'mali', location: Location, …}
}

显式函数绑定:

在 JavaScript 中函数也是对象，对象则有方法，apply 和 call 就是函数对象的方法。这两个方法异常强大，他们允许切换函数执行的上下文环境（context），即 this 绑定的对象。

//call()
<script>
        var person1 = {
            fullName: function () {
                return this.firstName + " " + this.lastName;
            }
        }
        var person2 = {
            firstName: "John person2",
            lastName: "Doe person2",
        }
        console.log(person1.fullName.call(person2)); // 返回John person2 Doe person2
  </script>

JavaScript - JSON：

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

JSON 是一种轻量级的数据交换格式。
JSON是独立的语言
JSON 易于理解

//JSON 对象
{"name":"Runoob", "url":"www.runoob.com"}
//JSON 数组
{"sites":[
    {"name":"Runoob", "url":"www.runoob.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]}

函数	描述
JSON.parse()	用于将一个 JSON 字符串转换为 JavaScript 对象。
JSON.stringify()	用于将 JavaScript 值转换为 JSON 字符串。

案例：JSON 字符串转换为 JavaScript 对象

<script>
        var text = '{ "sites" : [' +
            '{ "name":"Runoob" , "url":"www.runoob.com" },' +
            '{ "name":"Google" , "url":"www.google.com" },' +
            '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';
        var obj = JSON.parse(text);
        console.log(obj.sites[1].url);//www.google.com
</script>

javascript:void(0)

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

//语法格式
void func()
javascript:void func()
//或者
void(func())
javascript:void(func())

案例： <a href="javascript:void(0)">单击此处什么也不会发生</a>

JavaScript 异步编程：

同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效率更高

JavaScript 中的异步操作函数往往通过回调函数来实现异步任务，回调函数就是一个函数，它是在我们启动一个异步任务的时候就告诉它：等你完成了这个任务之后要干什么。这样一来主线程几乎不用关心异步任务的状态了，他自己会善始善终。

<script>
        function print() {
           alert('RUNOOB');
        }
        setTimeout(print, 3000);//第一个参数print是个回调函数
</script>

        setTimeout(function () {
            console.log("RUNOOB-1!");
        }, 3000);
        console.log("RUNOOB-22!");
        //RUNOOB-22!
        //RUNOOB-1!

异步加载：

例：defer

<script type="text/javascript" src="tools.js" defer="defer"></script>

例：async

<script type="text/javascript" src="tools.js" async="async"></script>

例：创建scripl，插入到DOM中，加载完毕后callBack

   <script type="text/javascript">
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'tools.js';
        document.body.appendChild(script); //这个时候才会执行tools.js
    </script>

封装：实现动态加载 JavaScript 脚本异步按需加载脚本，条件加载，兼容性处理，延迟执行

<script type="text/javascript">
        //callback回调函数，等待url加载完成以后执行
        function loadScript(url, callback) {
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = url;

            // 判断demo.js是否加载完成
            if (script.readyState) {
                script.onreadystatechange = function() {
                    if (script.readyState == 'complete' || script.readyState == 'loaded') {
                        callback() // 等待demo.js加载完成后执行--ie
                    }
                }
            } else {
                script.onload = function() {
                    callback() // 等待demo.js加载完成后执行---Safari chrome firefoxopera
                }
            }
            document.body.appendChild(script);

        }
        loadScript('demo.js', function() {
            test()
        })
    </script>

异步 AJAX:

            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function() {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        console.log(xmlhttp.responseText, "请求过来的数据")
                    }
             }
            //open(method,url,async)规定请求的类型、URL 以及是否异步处理请求
            xmlhttp.open("GET", "https://xxx.xxxxxx.cn/api/user/info", true);
            //setRequestHeader(header,value)向请求添加 HTTP 头
            xmlhttp.setRequestHeader(
                "token", "xxxxxxxxxxxxxxxx"
            );
            //send()将请求发送到服务器
            xmlhttp.send();

使用jQuery发送异步 AJAX :

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $.get("https://www.runoob.com/try/ajax/ajax_info.txt", function (data, status) {
                    alert("数据: " + data + "\n状态: " + status);
                });
            });
        });
    </script>
    <button>发送一个 HTTP GET 请求并获取返回结果</button>

js加载时间线-执行顺序

JavaScript --- Promise:

Promise 是一个 ECMAScript 6 提供的类，目的是更加优雅地书写复杂的异步任务。 Promise 是 ES6 新增加的，所以一些旧的浏览器并不支持，苹果的 Safari 10 和 Windows 的 Edge 14 版本以上浏览器才开始支持 ES6 特性。

//新建一个 Promise 对象
new Promise(function (resolve, reject) {
    // 要做的事情...
});

利用Promise 来多次调用异步函数：

<script>
          //调用resolve代表一切正常,reject 是出现异常时所调用的
        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);
        });
 </script>

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

.then() 可以将参数中的函数添加到当前 Promise 的正常执行序列，有异常会直接跳到 catch 序列

.catch() 则是设定 Promise 的异常处理序列，

.finally() 是在 Promise 执行的最后一定会执行的序列。

   <script>
        new Promise(function (resolve, reject) {
            console.log(1111);
            //resolve() 中可以放置一个参数用于向下一个 then 传递一个值
            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);
        });
    </script>

执行结果：
1111
2222
3333
An error 

Promise 函数:

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

Promise 关键点：

1、Promise 对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）、rejected（已失败）
2、Promise构造函数接收一个函数作为参数，该函数的两个参数分别是 resolve 和 reject
3、一个promise对象只能改变一次状态，成功或者失败后都会返回结果数据。
4、then 方法可以接收两个回调函数作为参数，第一个回调函数是Promise对象的状态改变为 resoved 是调用，第二个回调函数是 Promise 对象的状态变为 rejected 时调用。其中第二个参数可以省略。
5、catch 方法，该方法相当于最近的 then 方法的第二个参数，指向 reject 的回调函数，另一个作用是，在执行resolve回调函数时，如果出错，抛出异常，不会停止陨星，而是进入catch 方法中。

<script>
        var promise = new Promise(function (resolve, reject) {
            //To Do 要异步执行的事情，这个异步执行的事情有可能成功执行完毕，那么Promise将是fulfilled状态，如果执行失败则是rejected;
            //下面测试代码，人为设置为rejected状态;
            reject("将当前构建的Promise对象的状态由pending（进行中）设置为rejected（已拒绝）"); //当然此处也可以设置为fulfilled(已完成)状态
        })
        promise.then( //调用第一个then()
            success => {
                console.log("异步执行成功，状态为：fulfilled，成功后返回的结果是：" + success);
                return (" 当前 success ");
            },
            error => {
                console.log("异步执行失败，状态为rejected，失败后返回的结果是：" + error);
                //error:将当前构建的Promise对象的状态由pending（进行中）设置为rejected（已拒绝）
                return (" 当前 error ");
            }
        ).then(
            //调用第二个then() 因为调用第一个then()方法返回的是一个新的promise对象，此对象的状态由上面的success或者error两个回调函数的执行情况决定的：
            //如果回调函数能正常执行完毕，则新的promise对象的状态为fulfilled，下面执行success2,如果回调函数无法正常执行，则promise状态为rejected;下面执行error2
            success2 => {
                console.log("第一个then的回调函数执行成功 成功返回结果：" + success2);
                throw (" 当前 success2 "); //自定义异常抛出
            },
            error2 => {
                console.log("第一个then的回调函数执行失败 失败返回结果：" + error2); //error2:当前 error 
                return (" 当前 error2 ");
            }
        ).catch(err => {
            //当success2或者error2执行报错时，catch会捕获异常;
            console.log("捕获异常：" + err); //err:当前 success2 
        });
</script>