JavaScript 知识点回顾

JavaScript

一元运算符 +

自动转换类型

变量提升

一元运算符 +

Operator + 可用于将变量转换为数字：

实例:

var y = "5";      // y 是一个字符串  
var x = + y;      // x 是一个数字  

如果变量不能转换，它仍然会是一个数字，但值为 NaN (不是一个数字):

实例:

var y = "John";   // y 是一个字符串  
var x = + y;      // x 是一个数字 (NaN)  

自动转换类型

当 JavaScript 尝试操作一个 "错误" 的数据类型时，会自动转换为 "正确" 的数据类型。

以下输出结果不是你所期望的：

> 5 + null    // 返回 5         null 转换为 0  
> "5" + null  // 返回"5null"   null 转换为 "null"  
> "5" + 1     // 返回 "51"      1 转换为 "1"  
> "5" - 1     // 返回 4         "5" 转换为 5  

下表展示了使用不同的数值转换为数字(Number), 字符串(String), 布尔值(Boolean):

原始值	转换为数字	转换为字符串	转换为布尔值
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
"Runoob"	NaN	"Runoob"	true
[ ]	0	""	true
[20]	20	"20"	true
[10,20]	NaN	"10,20"	true
["Runoob"]	NaN	"Runoob"	true
["Runoob","Google"]	NaN	"Runoob,Google"	true
function(){}	NaN	"function(){}"	true
{ }	NaN	"[object Object]"	true
null	0	"null"	false
undefined	NaN	"undefined"	false

变量提升

JavaScript 只有声明的 变量 会提升，初始化的不会。
使用表达式定义 函数 时无法提升。

x = 5; // 变量 x 设置为 5

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x;                     // 在元素中显示 x

var x; // 声明 x

var x = 5; // 初始化 x

elem = document.getElementById("demo"); // 查找元素
elem.innerHTML = x + " " + y;           // 显示 x 和 y(显示'5 undefined')

var y = 7; // 初始化 y

JavaScript this 关键字

面向对象语言中 this 表示当前对象的一个引用。
但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

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

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

单独使用 this

单独使用 this，则它指向全局(Global)对象。
在浏览器中，window 就是该全局对象为 [object Window]:

var x = this;

严格模式下，如果单独使用，this 也是指向全局(Global)对象。

"use strict";
var x = this;

函数中使用 this（默认）

在函数中，函数的所属者默认绑定到 this 上。
在浏览器中，window 就是该全局对象为 [object Window]:

function myFunction() {
  return this;
}

严格模式下函数是没有绑定到 this 上，这时候 this 是 undefined。

"use strict";
function myFunction() {
  return this;
}

事件中的 this

在 HTML 事件句柄中，this 指向了接收事件的 HTML 元素：

<button onclick="this.style.display='none'">
点我后我就消失了
</button>

显式函数绑定

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

在下面实例中，当我们使用 person2 作为参数来调用 person1.fullName 方法时, this 将指向 person2, 即便它是 person1 的方法：

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

promise

promise函数异步编程

函数

函数提升（Hoisting）

使用表达式定义函数时无法提升。

自调用函数

函数表达式可以 "自调用"。自调用表达式会自动调用。如果表达式后面紧跟 () ，则会自动调用。
不能自调用声明的函数。

通过添加括号，来说明它是一个函数表达式：

(function () {
    document.getElementById("demo").innerHTML = "Hello! 我是自己调用的";
})();

函数方法调用函数

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

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

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

两个方法都使用了对象本身作为第一个参数。 两者的区别在于第二个参数： apply传入的是一个参数数组，也就是将多个参数组合成为一个数组传入，而call则作为call的参数传入（从第二个参数开始）。
Call()和Apply()的区别
Function.apply(obj,args)方法能接收两个参数

• obj：这个对象将代替Function类里this对象
• args：这个是数组，它将作为参数传给Function（args-->arguments）

Function.call(obj,[param1[,param2[,…[,paramN]]]])

• obj：这个对象将代替Function类里this对象
• params：这个是一个参数列表

JavaScript 闭包

在 JavaScript 中，所有函数都能访问它们上一层的作用域。
JavaScript 支持嵌套函数。嵌套函数可以访问上一层的函数变量。

var add = (function () {
    var counter = 0;
    return function () {return counter += 1;}
})();

add();
add();
add();

// 计数器为 3

变量 add 指定了函数自我调用的返回字值。
自我调用函数只执行一次。设置计数器为 0。并返回函数表达式。
add变量可以作为一个函数使用。非常棒的部分是它可以访问函数上一层作用域的计数器。
这个叫作 JavaScript 闭包。它使得函数拥有私有变量变成可能。
计数器受匿名函数的作用域保护，只能通过 add 方法修改。

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

HTML DOM

查找 HTML 元素

• 通过 id 找到 HTML 元素

本例查找 id="intro" 元素：

var x=document.getElementById("intro");

• 通过标签名找到 HTML 元素

本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素：

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

• 通过类名找到 HTML 元素

本例通过 getElementsByClassName 函数来查找 class="intro" 的元素：

var x=document.getElementsByClassName("intro");

使用 HTML DOM 来分配事件

向 button 元素分配 onclick 事件：

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

onload 和 onunload 事件

• onload 和 onunload 事件会在用户进入或离开页面时被触发。
• onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
• onload 和 onunload 事件可用于处理 cookie。

addEventListener() 方法

在用户点击按钮时触发监听事件：
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。
使用 removeEventListener() 方法来移除事件的监听。

语法:

element.addEventListener(event, function, useCapture);
element.removeEventListener(event, function, useCapture);

element.attachEvent(event, function); // 老版本
element.detachEvent(event, function); // 老版本

第一个参数是事件的类型 (如 "click" 或 "mousedown").
第二个参数是事件触发后调用的函数。
第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。
注意 :不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。

document.getElementById("myBtn").addEventListener("click", displayDate);

向 Window 对象添加事件句柄

addEventListener() 方法允许你在 HTML DOM 对象添加事件监听， HTML DOM 对象如： HTML 元素, HTML 文档, window 对象。或者其他支出的事件对象如: xmlHttpRequest 对象。
当用户重置窗口大小时添加事件监听：

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;
});

事件冒泡或事件捕获

事件传递有两种方式：冒泡与捕获。
事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？
在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。
在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。
addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

JavaScript HTML DOM 元素 (节点)

创建新的 HTML 元素 (节点)

• appendChild()方法，它用于添加新元素到尾部
• insertBefore()方法，用于添加到开始位置
• removeChild()方法，移除已存在的元素
• replaceChild()方法，替换 HTML 元素

1. 以下代码是用于创建 <p> 元素:

var para = document.createElement("p");

2. 为 <p> 元素创建一个新的文本节点：

var node = document.createTextNode("这是一个新的段落。");

3. 将文本节点添加到 <p> 元素中：

para.appendChild(node);

4. 最后，在一个已存在的元素中添加 p 元素。

查找已存在的元素：

var element = document.getElementById("div1");

添加到已存在的元素中:

element.appendChild(para);

将新元素添加到开始位置：

var element = document.getElementById("div1");
var child = document.getElementById("p1");
element.insertBefore(para, child);

移除已存在的元素:

var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.removeChild(child);

// 删除节点必须知道父节点
var child = document.getElementById("p1");
child.parentNode.removeChild(child);

替换 HTML 元素:

var para = document.createElement("p");
var node = document.createTextNode("这是一个新的段落。");
para.appendChild(node);

var parent = document.getElementById("div1");
var child = document.getElementById("p1");
parent.replaceChild(para, child);

JavaScript HTML DOM 集合(Collection)

getElementsByTagName() 方法返回 HTMLCollection 对象。

var x = document.getElementsByTagName("p");

HTMLCollection 不是一个数组！你可以像数组一样，使用索引来获取元素。
HTMLCollection 无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。

JavaScript HTML DOM 节点列表

一些旧版本浏览器中的方法（如：getElementsByClassName()）返回的是 NodeList 对象，而不是 HTMLCollection 对象。
所有浏览器的 childNodes 属性返回的是 NodeList 对象。
大部分浏览器的 querySelectorAll() 返回 NodeList 对象。

var myNodeList = document.querySelectorAll("p");

HTMLCollection 与 NodeList 的区别

• HTMLCollection 是 HTML 元素的集合。
• NodeList 是一个文档节点的集合。
• HTMLCollection 元素可以通过 name，id 或索引来获取。
• NodeList 只能通过索引来获取。
• 只有 NodeList 对象有包含属性节点和文本节点。
• NodeList 与 HTMLCollection 都与数组对象有点类似，可以使用索引 (0, 1, 2, 3, 4, ...) 来获取元素。
• NodeList 与 HTMLCollection 都有 length 属性。

节点列表不是一个数组！
节点列表看起来可能是一个数组，但其实不是。
你可以像数组一样，使用索引来获取元素。
节点列表无法使用数组的方法： valueOf(), pop(), push(), 或 join() 。

JavaScript 对象

JavaScript 对象类型

JavaScript 对象类型对比的是typeof

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

(x === y) // 为 false，因为 x 是一个数字，y 是一个对象

JavaScript 的对象是可变的

如果修改来 x ，person 的属性也会改变：

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

var x = person;
x.age = 10;           //  x.age 和 person.age 都会改变

JavaScript prototype（原型对象）

所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法。
在一个已存在的对象构造器中是不能添加新的属性的：

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}

var myFather = new Person("John", "Doe", 50, "blue");
var myMother = new Person("Sally", "Rally", 48, "green");

Person.nationality = "English"; // 报错

// 一、
function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
  this.nationality = "English";
}

// 二、
Person.prototype.nationality = "English";

// 三、
myFather.nationality = "English";

JavaScript 对象继承

JS对象继承方式

JS 面向对象 ~ 继承的7种方式

JavaScript RegExp 对象

语法:

var patt=new RegExp(pattern,modifiers);

// 或更简单的方法
var patt=/pattern/modifiers;

• 模式描述了一个表达式模型。
• 修饰符(modifiers)描述了检索是否是全局，区分大小写等。

注意 ：当使用构造函数创造正则对象时，需要常规的字符转义规则（在前面加反斜杠 ）。比如，以下是等价的：

var re = new RegExp("\w+");
var re = /w+/;

RegExp 修饰符
修饰符用于执行不区分大小写和全文的搜索。
i - 修饰符是用来执行不区分大小写的匹配。
g - 修饰符是用于执行全文的搜索（而不是在找到第一个就停止查找,而是找到所有的匹配）。

RegExp test()

test()方法搜索字符串指定的值，根据结果并返回真或假。
下面的示例是从字符串中搜索字符 "e" ：

var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free")); // true

RegExp exec()

exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配，则返回 null。
下面的示例是从字符串中搜索字符 "e" ：

var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free")); // e

JavaScript HTML BOM

Window 尺寸

有三种方法能够确定浏览器窗口的尺寸。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

• window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
• window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)

对于 Internet Explorer 8、7、6、5：

• document.documentElement.clientHeight
• document.documentElement.clientWidth

或者

• document.body.clientHeight
• document.body.clientWidth

实用的 JavaScript 方案（涵盖所有浏览器）：

var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

Window Screen

window.screen对象在编写时可以不使用 window 这个前缀。

一些属性：

• screen.availWidth - 可用的屏幕宽度
• screen.availHeight - 可用的屏幕高度

Window Location

window.location 对象在编写时可不使用 window 这个前缀。 一些例子：

一些实例:

• location.hostname 返回 web 主机的域名
• location.pathname 返回当前页面的路径和文件名
• location.port 返回 web 主机的端口 （80 或 443）
• location.protocol 返回所使用的 web 协议（http: 或 https:）

JavaScript Window Navigator

window.navigator 对象包含有关访问者浏览器的信息。

<div id="example"></div>
<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

警告
来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：

• navigator 数据可被浏览器使用者更改
• 一些浏览器对测试站点会识别错误
• 浏览器无法报告晚于浏览器发布的新操作系统

JavaScript 弹窗

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

警告框

window.alert("sometext");

确认框

window.confirm("sometext");

提示框

window.prompt("sometext");

JavaScript 计时事件

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

• setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
• setTimeout() - 在指定的毫秒数后执行指定代码。
  注意: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。
  clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
  clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。

setTimeout(function(){alert("Hello")},3000);

var myVar=setInterval(function(){myTimer()},1000);
function myTimer()
{
    var d=new Date();
    var t=d.toLocaleTimeString();
    document.getElementById("demo").innerHTML=t;
}

var myVar;
function myFunction()
{
    myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction()
{
    clearTimeout(myVar);
}

<p id="demo"></p>
<button onclick="myStopFunction()">停止</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){
    var d=new Date();
    var t=d.toLocaleTimeString();
    document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){
    clearInterval(myVar);
}
</script>

JavaScript Cookie

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

Cookie 的作用就是用于解决 "如何记录客户端的用户信息":

• 当用户访问 web 页面时，他的名字可以记录在 cookie 中。
• 在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

Cookie 以名/值对形式存储，如下所示:

username=John Doe

使用 JavaScript 创建Cookie

JavaScript 可以使用 document.cookie 属性来创建 、读取、及删除 cookie。

JavaScript 中，创建 cookie 如下所示：

document.cookie="username=John Doe";

您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT";

您可以使用 path 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

document.cookie="username=John Doe; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

使用 JavaScript 读取 Cookie

在 JavaScript 中, 可以使用以下代码来读取 cookie：
document.cookie 将以字符串的方式返回所有的 cookie，类型格式： cookie1=value; cookie2=value; cookie3=value;

var x = document.cookie;

使用 JavaScript 修改 Cookie

在 JavaScript 中，修改 cookie 类似于创建 cookie，如下所示：

document.cookie="username=John Smith; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

使用 JavaScript 删除 Cookie

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1970 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";

Cookie 字符串

document.cookie 属性看起来像一个普通的文本字符串，其实它不是。

即使您在 document.cookie 中写入一个完整的 cookie 字符串, 当您重新读取该 cookie 信息时，cookie 信息是以名/值对的形式展示的。

如果您设置了新的 cookie，旧的 cookie 不会被覆盖。 新 cookie 将添加到 document.cookie 中，所以如果您重新读取document.cookie，您将获得如下所示的数据：
cookie1=value; cookie2=value;

如果您需要查找一个指定 cookie 值，您必须创建一个JavaScript 函数在 cookie 字符串中查找 cookie 值。

JavaScript Cookie 实例

1. 设置 cookie 值的函数
2. 获取 cookie 值的函数
3. 检测 cookie 值的函数

function setCookie(cname,cvalue,exdays){
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname){
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
    }
    return "";
}
function checkCookie(){
    var user=getCookie("username");
    if (user!=""){
        alert("欢迎 " + user + " 再次访问");
    }
    else {
        user = prompt("请输入你的名字:","");
          if (user!="" && user!=null){
            setCookie("username",user,30);
        }
    }
}

JavaScript自定义扩展

JavaScript扩展一般通过属性扩展，如下：

// 清除两边的空格  
String.prototype.trim = function() {  
    return this.replace(/(^s*)|(s*$)/g, '');  
};  
// 合并多个空白为一个空白  
String.prototype.ResetBlank = function() {  
    var regEx = /s+/g;  
    return this.replace(regEx, ' ');  
};  
  
// 保留数字  
String.prototype.GetNum = function() {  
    var regEx = /[^d]/g;  
    return this.replace(regEx, '');  
};  
  
// 保留中文  
String.prototype.GetCN = function() {  
    var regEx = /[^u4e00-u9fa5uf900-ufa2d]/g;  
    return this.replace(regEx, '');  
};  
  
// String转化为Number  
String.prototype.ToInt = function() {  
    return isNaN(parseInt(this)) ? this.toString() : parseInt(this);  
};  
  
// 得到字节长度  
String.prototype.GetLen = function() {  
    var regEx = /^[u4e00-u9fa5uf900-ufa2d]+$/;  
    if (regEx.test(this)) {  
        return this.length * 2;  
    } else {  
        var oMatches = this.match(/[x00-xff]/g);  
        var oLength = this.length * 2 - oMatches.length;  
        return oLength;  
    }  
};  
  
// 获取文件全名  
String.prototype.GetFileName = function() {  
    var regEx = /^.*/([^/?]*).*$/;  
    return this.replace(regEx, '$1');  
};  
  
// 获取文件扩展名  
String.prototype.GetExtensionName = function() {  
    var regEx = /^.*/[^/]*(.[^.?]*).*$/;  
    return this.replace(regEx, '$1');  
};  
  
//替换所有
String.prototype.replaceAll = function(reallyDo, replaceWith, ignoreCase) {  
    if (!RegExp.prototype.isPrototypeOf(reallyDo)) {  
        return this.replace(new RegExp(reallyDo, (ignoreCase ? "gi" : "g")), replaceWith);  
    } else {  
        return this.replace(reallyDo, replaceWith);  
    }  
};  
//格式化字符串 add By 刘景宁 2010-12-09   
String.Format = function() {  
    if (arguments.length == 0) {  
        return '';  
    }  
  
    if (arguments.length == 1) {  
        return arguments[0];  
    }  
  
    var reg = /{(d+)?}/g;  
    var args = arguments;  
    var result = arguments[0].replace(reg, function($0, $1) {  
        return args[parseInt($1) + 1];  
    });  
    return result;  
};  
  
// 数字补零  
Number.prototype.LenWithZero = function(oCount) {  
    var strText = this.toString();  
    while (strText.length < oCount) {  
        strText = '0' + strText;  
    }  
    return strText;  
};  
  
// Unicode还原  
Number.prototype.ChrW = function() {  
    return String.fromCharCode(this);  
};  
  
// 数字数组由小到大排序  
Array.prototype.Min2Max = function() {  
    var oValue;  
    for (var i = 0; i < this.length; i++) {  
        for (var j = 0; j <= i; j++) {  
            if (this[i] < this[j]) {  
                oValue = this[i];  
                this[i] = this[j];  
                this[j] = oValue;  
            }  
        }  
    }  
    return this;  
};  
  
// 数字数组由大到小排序  
Array.prototype.Max2Min = function() {  
    var oValue;  
    for (var i = 0; i < this.length; i++) {  
        for (var j = 0; j <= i; j++) {  
            if (this[i] > this[j]) {  
                oValue = this[i];  
                this[i] = this[j];  
                this[j] = oValue;  
            }  
        }  
    }  
    return this;  
};  
  
// 获得数字数组中最大项  
Array.prototype.GetMax = function() {  
    var oValue = 0;  
    for (var i = 0; i < this.length; i++) {  
        if (this[i] > oValue) {  
            oValue = this[i];  
        }  
    }  
    return oValue;  
};  
  
// 获得数字数组中最小项  
Array.prototype.GetMin = function() {  
    var oValue = 0;  
    for (var i = 0; i < this.length; i++) {  
        if (this[i] < oValue) {  
            oValue = this[i];  
        }  
    }  
    return oValue;  
};  
  
// 获取当前时间的中文形式  
Date.prototype.GetCNDate = function() {  
    var oDateText = '';  
    oDateText += this.getFullYear().LenWithZero(4) + new Number(24180).ChrW();  
    oDateText += this.getMonth().LenWithZero(2) + new Number(26376).ChrW();  
    oDateText += this.getDate().LenWithZero(2) + new Number(26085).ChrW();  
    oDateText += this.getHours().LenWithZero(2) + new Number(26102).ChrW();  
    oDateText += this.getMinutes().LenWithZero(2) + new Number(20998).ChrW();  
    oDateText += this.getSeconds().LenWithZero(2) + new Number(31186).ChrW();  
    oDateText += new Number(32).ChrW() + new Number(32).ChrW() + new Number(26143).ChrW() + new Number(26399).ChrW() + new String('26085199682010819977222352011620845').substr(this.getDay() * 5, 5).ToInt().ChrW();  
    return oDateText;  
};  
//扩展Date格式化  
Date.prototype.Format = function(format) {  
    var o = {  
        "M+": this.getMonth() + 1, //月份
        "d+": this.getDate(), //日
        "h+": this.getHours() % 12 == 0 ? 12 : this.getHours() % 12, //小时
        "H+": this.getHours(), //小时
        "m+": this.getMinutes(), //分
        "s+": this.getSeconds(), //秒
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度
        "S": this.getMilliseconds() //毫秒
    };  
    var week = {  
        "0": "u65e5",  
        "1": "u4e00",  
        "2": "u4e8c",  
        "3": "u4e09",  
        "4": "u56db",  
        "5": "u4e94",  
        "6": "u516d"  
    };  
    if (/(y+)/.test(format)) {  
        format = format.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));  
    }  
    if (/(E+)/.test(format)) {  
        format = format.replace(RegExp.$1, ((RegExp.$1.length > 1) ? (RegExp.$1.length > 2 ? "u661fu671f" : "u5468") : "") + week[this.getDay() + ""]);  
    }  
    for (var k in o) {  
        if (new RegExp("(" + k + ")").test(format)) {  
            format = format.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));  
        }  
    }  
    return format;  
}  
Date.prototype.Diff = function(interval, objDate) {  
    //若参数不足或 objDate 不是日期类型則回传 undefined  
    if (arguments.length < 2 || objDate.constructor != Date) { return undefined; }  
    switch (interval) {  
        //计算秒差
        case 's': return parseInt((objDate - this) / 1000);  
            //计算分差  
        case 'n': return parseInt((objDate - this) / 60000);  
            //计算時差  
        case 'h': return parseInt((objDate - this) / 3600000);  
            //计算日差  
        case 'd': return parseInt((objDate - this) / 86400000);  
            //计算周差  
        case 'w': return parseInt((objDate - this) / (86400000 * 7));  
            //计算月差  
        case 'm': return (objDate.getMonth() + 1) + ((objDate.getFullYear() - this.getFullYear()) * 12) - (this.getMonth() + 1);  
            //计算年差  
        case 'y': return objDate.getFullYear() - this.getFullYear();  
            //输入有误  
        default: return undefined;  
    }  
};  
  
//检测是否为空  
Object.prototype.IsNullOrEmpty = function() {  
    var obj = this;  
    var flag = false;  
    if (obj == null || obj == undefined || typeof (obj) == 'undefined' || obj == '') {  
        flag = true;  
    } else if (typeof (obj) == 'string') {  
        obj = obj.trim();  
        if (obj == '') {//为空  
            flag = true;  
        } else {//不为空  
            obj = obj.toUpperCase();  
            if (obj == 'NULL' || obj == 'UNDEFINED' || obj == '{}') {  
                flag = true;  
            }  
        }  
    }  
    else {  
        flag = false;  
    }  
    return flag;

JavaScript 库

JavaScript 库常被称为 JavaScript 框架。

• jQuery
• Prototype
• MooTools

CDN -内容分发网络

您总是希望网页可以尽可能地快。您希望页面的容量尽可能地小，同时您希望浏览器尽可能多地进行缓存。

如果许多不同的网站使用相同的 JavaScript 框架，那么把框架库存放在一个通用的位置供每个网页分享就变得很有意义了。

CDN (Content Delivery Network) 解决了这个问题。CDN 是包含可分享代码库的服务器网络。

如需在您的网页中使用 JavaScript 框架库，只需在 <script> 标签中引用该库即可：

<script src="https://cdn.staticfile.org/jquery/3.4.0/jquery.min.js">
</script>