---

一、JavaScript簡單入門

1.1.一門客戶端腳本語言

運行在客戶端瀏覽器中的，每一個瀏覽器都有JavaScript的決議引擎
腳本語言：不需要編譯，直接就可以被瀏覽器決議執行了
功能：可以來增強用戶和html頁面的互動程序，可以來控制html元素，讓頁面有一些動態的效果，增強用戶的體驗

1.2.JavaScript發展史

1992年，Nombase公司，開發出第一門客戶端腳本語言，專門用于表單的校驗，命名為 ： C-- ，后來更名為：ScriptEase
1995年，Netscape(網景)公司，開發了一門客戶端腳本語言：LiveScript，后來，請來SUN公司的專家，修改LiveScript，命名為JavaScript
1996年，微軟抄襲JavaScript開發出JScript語言
1997年，ECMA(歐洲計算機制造商協會)，制定出客戶端腳本語言的標準：ECMAScript，就是統一了所有客戶端腳本語言的編碼方式，

JavaScript = ECMAScript + JavaScript自己特有的東西(BOM+DOM)

1.3.JavaScript優勢

a.解釋性語言
b.基于物件
c.事件驅動
d.弱型別
e.安全性高
f.跨平臺

1.4.JavaScript參考

如需在 HTML 頁面中插入 JavaScript，請使用 <script> 標簽，
<script> 和 </script> 會告訴 JavaScript 在何處開始和結束，
<script> 和 </script> 之間的代碼行包含了 JavaScript

<script type="text/javascript" src="${request.contextPath}/static/js/homepage.js"></script>

1.5.JavaScript輸出的幾種方式

window.alert()
document.write()
innerHTML
console.log()

就個人使用來看 console.log()在編程中使用是較多切方便的 直接F12控制臺即可查看輸出內容

1.6.JavaScript有哪些關鍵字

1.7.JavaScript注釋

// 這是代碼：單句注釋，在編輯器一般是ctrl + L鍵，
/* 這是代碼 */：多行注釋，在編輯器一般是ctrl + shift + L鍵，

1.8.JavaScript常見識別符號有哪些

1.9.JavaScript常見HTML事件有哪些

1.10.JavaScript常見運算子

1.11.JavaScript常見賦值運算子

1.12.JavaScript常見比較運算子

1.13.JavaScript常見邏輯運算子

二、細講JavaScript基礎語法

2.1.變數

2.1.1.定義一個變數

// 宣告一個變數名為test的變數，
var test;

var age, name, sex;//宣告age、name、sex三個變數

//同時宣告變數并賦值
var age = 10, name = "小強", sex = "1";

2.1.2.變數命名規則及規范

1、由字母、數字、下劃線、💲符號組成，不能以數字開頭
2、不能使用關鍵字，例如：while
3、區分大小寫
規范：約定俗成的寫法
1、變數名要有意義.
2、遵守駝峰命名法，駝峰命名法：首字母小寫，后面單詞首字母大寫，例如userName.

2.2.資料型別

其中資料型別有:Number型別、String型別、Boolean型別、Undefined型別、Null型別、Object型別

2.2.1.Number

Number數字型別：包含整數和小數
可以表示：十進制、八進制、十六進制

如:

var num = 10; //十進制
var num1 = 012; //八進制
var num2 = ox123; //十六進制

數值范圍:

console.log(Number.MAX_VALUE); //最大值 值為5e-324
console.log(Number.MIN_VALUE); // 最小值 值為1.7976931348623157e+308
無窮大：Infinity
無窮小：-Infinity

數值判斷不可以用小數驗證小數以及不要用NaN驗證是不是NaN (NaN----not a number) 但是可以用isNaN— is not a number結果是不是NaN
如:

var num; //宣告一個變數，未賦值
console.log(isNaN(num)); // true 不是一個數字嗎？ 結果是true

2.2.2.String

字串轉義符:

轉義序列	字符
\b	退格
\f	走紙換頁
\n	換行
\r	回車
\t	橫向跳格(Ctrl-I)
\‘	單引號
\“	雙引號
\	雙斜杠

eg:

var str = "iam a pm\\"
console.log(str); // iam a pm\

字串拼接:

var str1 = "先生";
var str2 = "您好";
console.log(str1+str2); // 先生您好

若是字串和數字拼接 結果也是字串 拼接效果如上所示

2.2.3.Boolean

布爾型別的話兩個屬性 true/false

2.2.4.Undefined

undefined表示一個宣告了沒有賦值的變數，變數只宣告的時候值默認是undefined
如:

var num;
console.log(num); // undefined

2.2.5.Null

Null表示一個空，變數的值如果想為null，必須手動設定

2.2.6.Object

2.3.資料型別的轉換

2.3.1.轉換成數值型別

(1)、Number()可以把任意值轉換成數值，如果要轉換的字串中有一個不是數值的字符，回傳NaN
如：

var num1 = Number("10");
console.log(num1); // 10
var num2 = Number('10adbdn');
console.log(num2); //NaN
var num3 = Number("10.78");
console.log(num3); //10.78
var num4 = Number('10.65dd');
console.log(num4); //NaN
var num5 = Number("a10");
console.log(num5); //NaN

(2)、parseInt()轉整數
如：

var num1 = parseInt("10");
console.log(num1); // 10
var num2 = parseInt('10adbdn');
console.log(num2); //10
var num3 = parseInt("10.78");
console.log(num3); //10
var num4 = parseInt('10.65dd');
console.log(num4); //10
var num5 =parseInt("a10");
console.log(num5); //NaN

(3)、parseFloat()轉小數
如：

var num1 = parseFloat("10");
console.log(num1); // 10
var num2 = parseFloat('10adbdn');
console.log(num2); //10
var num3 = parseFloat("10.78");
console.log(num3); //10
var num4 = parseFloat('10.65dd');
console.log(num4); //10
var num5 = parseFloat("a10");
console.log(num5);

(4)、Number()、parseInt()、parseFloat()三者的區別
Number()要比parseInt()和parseFloat()嚴格.
parseInt()和parseFloat()相似，parseFloat會決議第一個. 遇到第二個.或者非數字結束

2.3.2.轉換成字串型別

(1)、toString()
如：

var num = 10;
console.log(num.toString()); // 字串 10

(2)、String()
如：

var num1 =5;
console.log(String(num1)); // 字串 5

(2)、JSON.stringfy()

2.3.3.轉換成布爾型別

0、空字串、null 、undefined 、NaN 會轉換成false 其它都會轉換成true
如:

var num1 = Boolean(0);
console.log(num1); // false
var num2 = Boolean("");
console.log(num2); // false
var num3 = Boolean(null);
console.log(num3); // false
var num4 = Boolean(undefined);
console.log(num4); // false
var num5 = 10;
var num6;
console.log(Boolean(num5+num6)); // false

2.4.運算子

運算子種類：算數運算子、復合運算子、關系運算子、邏輯運算子

(1)、算數運算子：“+”“-”“*”“/”“%”
算數運算運算式：由算數運算子連接起來的運算式 復合運

(2)、復合運算子：“+=”“-=”“*=”“/=”“%=”
復合運算運算運算式：由復合運算子連接起來的運算式

(3)、關系運算子：“>”“<”“>=”“<=”“”“=”“!=”“!==”
關系運算運算式：由關系運算子連接起來的運算式

(4)、邏輯運算子：“&&”“||”“！”
邏輯運算運算式：由邏輯運算子連接起來的運算式

運算式1 && 運算式2
如果有一個為false,整個的結果就是false

運算式1 || 運算式2
如果有一個為true,整個的結果就是false

! 運算式
運算式的結果是true,整個的結果為false
運算式的結果是false,整個的結果為true

2.5.運算子的優先級

由高到低:

() 優先級最高
一元運算子 ++ – !
算數運算子 先* / % 后 + -
關系運算子 > >= < <=
相等運算子 == != === !==
邏輯運算子 先&& 后||
賦值運算子

2.6.函式

2.6.1.簡介

JavaScript中的函式就是物件，物件是“名/值”對的集合并擁有一個連到原型物件的隱藏連接，物件字面量產生的物件連接到Object.prototype，函式物件連接到Function.prototype（該原型物件本身連接到Object.prototype），每個函式在創建時會附加兩個隱藏屬性：函式的背景關系和實作函式行為的代碼

2.6.2.函式使用

function functionname(){
這里是要執行的代碼
}

語法:
圓括號可包括由逗號分隔的引數：

(引數 1, 引數 2, …)

由函式執行的代碼被放置在花括號中：{}

function name(引數 1, 引數 2, 引數 3) {
    要執行的代碼
}

函式引數（Function parameters）是在函式定義中所列的名稱，
函式引數（Function arguments）是當呼叫函式時由函式接收的真實的值

函式的呼叫:

//此處創建一個函式sum
function sum(num1, num2) {
    var result = num1 + num2;
    console.log("num1 + num2 = " + result);
}

// 函式呼叫
sum(10, 20);

立即執行函式:

$(function(){
	//不只有函式 所有變數輸出等等在這里寫都是頁面加載直接運行
	sum()
})

2.7.JavaScript正則運算式

2.7.1.創建正則運算式

字面量，語法：Reg = /pattern/modifiers; 字面量的正則由兩個正斜桿組成//，第一個正斜桿后面寫規則：/pattern[規則可以寫各式各樣的元字符|量詞|字集|斷言…]，第二個正斜桿后面寫識別符號/modifiers[g全域匹配 | i忽略大小寫 | m換行匹配 | ^起始位置 | $結束位置] 識別符號，
var Reg = /box/gi;
建構式，語法 Reg = new RegExp( pattern , modifiers ); pattern ，modifiers此時是字串，何種方法創建都是一樣的，pattern 模式 模板，要匹配的內容，modifiers 修飾符，

var Reg = new RegExp("box","gi");

2.7.2.String中正則運算式方法

方法	描述
String.match(Reg)	回傳RegExp匹配的包含全部字串的陣列或null
String.search(Reg)	回傳RegExp匹配字串首次出現的位置
String.replace(Reg, newStr)	用newStr替換RegExp匹配結果，并回傳新字串
String.split(Reg)	回傳字串按指定RegExp拆分的陣列

var str = 'a1b2c3a4a5',
    reg = /a/g;
console.log(str.match(reg)); //["a", "a", "a"]

var str = 'a1b2c3a4a5',
    reg = /a/;
console.log(str.search(reg)); //0

var str = 'a1b2c3a4a5',
    reg = /a/g;
console.log(str.replace(reg,function(){
    console.log(arguments);
    return 5555;
}));

var str = 'a,b,c,d',
    reg = /,/g;
//console.log(str.split(',')); //["a", "b", "c", "d"]
console.log(str.split(reg)) //["a", "b", "c", "d"]

2.7.3.RegExp物件的方法

方法	描述
RegExp.exec(String)	在字串中執行匹配搜索，回傳首次匹配結果陣列
RegExp.test(String)	在字串中測驗模式匹配，回傳true或false

2.7.4.修飾符

修飾符也稱作識別符號，可指定匹配的模式，修飾符用于執行區分大小寫和全域匹配，
i忽略大小寫匹配，
g全域匹配，沒有g只匹配第一個元素，就不在進行匹配，
m執行多行匹配

var patt =  /pattern/i;         //忽略大小寫匹配
var patt =  /pattern/g;         //全域匹配
var patt =  /pattern/m;         //執行多行匹配

2.7.5.元字符

在正則運算式中具有特殊意義的專用字符，
特殊的轉譯字符. \ /，

. 單個任意字符，除了換行符\n與制表符\r 
\ 轉義字符，將具有特殊意義的符號轉義成普通符號: \.
\d 數字[0~9]
\D 非數字
\s 空格
\S 非空格
\w 字符[字母|數字|下劃線]
\W 非字符
\b 單詞邊界( 除了 （字)字母 數字_ 都算單詞邊界) 
\B 非單詞邊界

var reg = /\./;//匹配.
var reg = /\\/;//匹配\
var reg = /\//;//匹配/

var str = '\\';
var reg = /\\/g;
console.log(reg.test(str)); //true

2.8.JavaScript常用物件

2.8.1.Date物件

Date物件是一個有關日期和時間的物件，它具有動態性，必須試用new關鍵字創建一個實體，如：
var Mydata=new Date（）；
Date物件沒有提供直接訪問的屬性，只有獲取和設定日期的方法，如下表

2.8.2.String物件

String物件是JavaScript提供的字串處理物件，創建物件實體后才能參考，它提供了對字串進行處理的屬性和方法（類似java一樣）具體如下表：
屬性 length —回傳字串中字符的個數，
注意：一個漢字也是一個字符！！

2.8.3.Math物件

屬性:

Math物件方法:

三角函式（sin(), cos(), tan(),asin(), acos(), atan(), atan2()）是以弧度回傳值的，可以通過除法Math.PI / 180把弧度轉換為角度，也可以通過其他方法來轉換，

方法	說明
Math.abs(x)	回傳x的絕對值.
Math.acos(x)	回傳x的反余弦值.
Math.acosh(x)	回傳x的反雙曲余弦值.
Math.asin(x)	回傳x的反正弦值.
Math.asinh(x)	回傳x的反雙曲正弦值.
Math.atan(x)	以介于 -PI/2 與 PI/2 弧度之間的數值來回傳 x 的反正切值.
Math.atanh(x)	回傳 x 的反雙曲正切值.
Math.atan2(x, y)	回傳 y/x 的反正切值.
Math.cbrt(x)	回傳x的立方根.
Math.ceil(x)	回傳x向上取整后的值.
Math.clz32(x)	Returns the number of leading zeroes of a 32-bit integer.
Math.cos(x)	回傳x的余弦值.
Math.cosh(x)	回傳x的雙曲余弦值.
Math.exp(x)	回傳 Ex, 當x為引數, E 是歐拉常數 (2.718…), 自然對數的底.
Math.expm1(x)	回傳 exp(x)-1 的值.
Math.floor(x)	回傳小于x的最大整數，
Math.fround(x)	Returns the nearest single precision float representation of a number.
Math.hypot([x[,y[,…]]])	Returns the square root of the sum of squares of its arguments.
Math.imul(x)	Returns the result of a 32-bit integer multiplication.
Math.log(x)	Returns the natural logarithm (loge, also ln) of a number.
Math.log1p(x)	Returns the natural logarithm of 1 + x (loge, also ln) of a number.
Math.log10(x)	Returns the base 10 logarithm of x.
Math.log2(x)	Returns the base 2 logarithm of x.
Math.max([x[,y[,…]]])	回傳0個到多個數值中最大值.
Math.min([x[,y[,…]]])	回傳0個到多個數值中最小值.
Math.pow(x,y)	回傳x的y次冪.
Math.random()	回傳0到1之間的偽亂數. 可能等于0，但是一定小于1
Math.round(x)	回傳四舍五入后的整數.但是Math.round(-4.40)值為-4
Math.sign(x)	回傳x的符號函式, 判定x是正數,負數還是0.
Math.sin(x)	回傳正弦值.
Math.sinh(x)	回傳x的雙曲正弦值.
Math.sqrt(x)	回傳x的平方根.
Math.tan(x)	回傳x的正切值.
Math.tanh(x)	回傳x的雙曲正切值.
Math.toSource()	回傳字串 “Math”.
Math.trunc(x)	回傳x的整數部分,去除小數.

例子1:寫一個函式，回傳從min到max之間的隨機整數，包括min不包括max

function getRandomArbitrary(min, max) {
  return min + Math.random() * (max - min);
}

例子2:寫一個函式，生成一個長度為 n 的隨機字串，字串字符的取值范圍包括0到9，a到 z，A到Z

function getRandomInt(min, max) {
  return min + Math.floor(Math.random() * (max - min + 1));
}

function randomStr(n){
  var dict = '1234567890abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
  var str = '';
  for(i = 0; i < n;i++){
    str += dict[getRandomInt(0,62)];
  }
  return str;
}
var str = getRandStr(10);
console.log(str);

2.8.4.陣列物件

陣列的分類**
1、二維陣列，二維陣列的本質是陣列中的元素又是陣列，

var arr = [[1,2],[a,b]];
alert(arr[1][0]); //a 第2列第1行所在的元素

2、稀疏陣列

稀疏陣列是包含從0開始的不連續索引的陣列，在稀疏陣列中一般length屬性值比實際元素個數大（不常見）
舉例

var a=["a",,"b",,,,"c",,];

陣列物件屬性

屬性	作用
length 屬性	表示陣列的長度，即其中元素的個數
prototype 屬性	回傳物件型別原型的參考
constructor 屬性	表示創建物件的函式

1.length屬性:

alert(arr.length); //顯示陣列的長度10
arr.length=15; //增大陣列的長度,length屬性是可變的
alert(arr.length); //顯示陣列的長度已經變為15

2.prototype 屬性

prototype 屬性回傳物件型別原型的參考，prototype 屬性是object共有的，
objectName.prototype
objectName 引數是object物件的名稱，
說明：用 prototype 屬性提供物件的類的一組基本功能， 物件的新實體“繼承”賦予該物件原型的操作，
對于陣列物件，用以下例子說明prototype 屬性的用途，
給陣列物件添加回傳陣列中最大元素值的方法，要完成這一點，宣告一個函式，將它加入 Array.prototype， 并使用它，

function array_max( ){
   var i, max = this[0];
   for (i = 1; i < this.length; i++){
       if (max < this[i])
       max = this[i];
   }
   return max;
}
Array.prototype.max = array_max;
var x = new Array(1, 2, 3, 4, 5, 6);
var y = x.max( );

3.constructor 屬性

constructor 屬性表示創建物件的函式，
object.constructor //object是物件或函式的名稱，
說明：constructor 屬性是所有具有prototype 的物件的成員，它們包括除 Global 和 Math物件以外的所有JScript固有物件，constructor屬性保存了對構造特定物件實體的函式的參考，

例如：

x = new String("Hi");
if (x.constructor == String) // 進行處理（條件為真），
//或
function MyFunc {
// 函式體，
}
y = new MyFunc;
if (y.constructor == MyFunc) // 進行處理（條件為真），

Array的物件方法
說明：部分是ECMAScript5的新特性（IE678不支持）

方法	作用
concat()	連接兩個或者更多的陣列，并回傳結果
join()	將陣列的元素組起一個字串
pop()	洗掉并回傳陣列的最后一個元素
push()	陣列末尾添加一個或者多個元素，回傳新的長度
reverse	顛倒陣列中元素的順序
shift()	洗掉并回傳陣列的第一個元素
slice()	從某個已有的陣列回傳選定的元素
sort()	對陣列元素排序
splice()	洗掉元素,并向陣列添加新元素
toSource()	回傳該物件的源代碼
toString()	把陣列轉化為字串并回傳結果
toLocalString()	把陣列轉化為本地元素并回傳結果
unshift	向陣列開頭添加一個或者更多的元素，并回傳新的長度
valueof()	回傳陣列物件的原始值
forEach()	遍歷陣列物件
map()	對陣列做一些映射
filter()	過濾
every()	檢查判斷
some()	檢查判斷
reduce()	兩兩執行一定的操作
reduceRight()	從右到左執行操作
indexOf()	陣列檢索查找某個元素
Array.isArray（[]）	判斷是否是陣列

主要對一些新特性進行講解

concat
concat作用是拼接陣列，需要注意的是也可以把一個陣列元素作為拼接的元素，如果這樣的話，陣列會被拉平，再和其它的元素拼接起來成為新的陣列，但是不會被拉平兩次，concat不會修改原陣列，

例如:

var arr=[1,2,3,4,5];
arr.concat([10,11],13);//[1,2,3,4,5,10,11,13]
arr.concat([1,[2,3]]);//[1,2,3,4,5,1,[1,3]]

slice
slice（a,b）a和b可以取負數，表示從a位置開始截取到b位置的一段陣列，是一個左閉右開的區間，a和b可以取負數，如果是負數代表倒數第a/b個元素

var arr=[1,2,3,4,5];
arr.slice(1,3);//[2,3]
arr.slice(1);//[2,3,4,5]
arr.slice(1,-1);//[2,3,4]
arr.slice(-4,-3);//[2]

splice
splice洗掉元素并向陣列添加新元素
object.splice(a)從左邊開始洗掉a個元素
object.splice(a，b)從a位置開始截取其中的b個元素
object.splice(a，b，c，d)從a位置開始截取b個元素，并將c和d或者更多的元素插入原陣列
需要注意的是splice會修改原陣列

var arr=[1,2,3,4,5];
arr.splice(2);//[3,4,5]
arr;//[1,2];原陣列被修改了

var arr=[1,2,3,4,5];
arr.splice(2，2);//[3,4]
arr;//[1,2,5];

var arr=[1,2,3,4,5];
arr.splice(1，1，‘a’，‘b’);//[2]
arr;//[1,"a","b",3,4,5];

foreach
foreach()函式從頭到尾把陣列遍歷一遍，有三個引數分別是：陣列元素，元素的索引，陣列本身

var arr = [1, 2, 3, 4, 5];
arr.forEach(function(x, index, a)
{//分別對應：陣列元素，元素的索引，陣列本身
    console.log(x + '|' + index + '|' + (a === arr));
});
// 1|0|true
// 2|1|true
// 3|2|true
// 4|3|true
// 5|4|true

reduce()
Array的reduce()把一個函式作用在這個Array的[x1, x2, x3…]上，這個函式必須接收兩個引數，reduce()把結果繼續和序列的下一個元素做累積計算，其效果就是：

[x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)

var arr = [1, 2, 3];
var sum = arr.reduce(function(x, y) {
     return x + y
}, 0); //引數 0是可選的，如果寫了引數0那第一次傳遞的兩個值就是0和1
如果不寫第一次傳遞的就是陣列的前兩個值，計算結果是6
arr; //[1, 2, 3]

arr = [3, 9, 6];
var max = arr.reduce(function(x, y) {
     console.log(x + "|" + y);
     return x > y ? x : y;
});
// 3|9
// 9|6
max; // 9

陣列和一般物件的比較

	陣列/一般物件
相同點	都可以繼承，物件不一定是陣列，都可以當做物件添加屬性
不同點	陣列自動更新length按索引訪問陣列比訪問一般物件屬性明顯迅速，陣列物件繼承Array.prototype上的大量陣列操作方法

陣列和字串的比較

	陣列 /字串
相同點	字串是陣列的一種
不同點	字串是不可變的陣列，字串沒有陣列的方法

2.9.JSON

2.9.1.stringify()

用于把js物件序列化為JSON字串

var person={
name:"xiaoming",
age:12
}

var json=JSON.stringify(person); //{"name":"xiaoming","age":12}

stringify() 除了可以接受物件外，還可以接受2個引數，第一個引數是過濾器，可以是物件屬性的陣列集合，也可以是函式；第二個引數是一個選項，表示是否在JSON字串中保留縮進

陣列過濾器:

json=JSON.stringify(person,['name']); //{"name":"xiaoming"}

函式過濾器:

json=JSON.stringify(person,function(key,value){
    switch(key){
        case "name":
           return value+",wang";
        case "age":
           return undefined;
        default:
           return value;
    }
});
//{"name":"xiaoming,wang"}

注意，如果函式回傳undefined，則該屬性就會被忽略；

字串縮進:

json=JSON.stringify(person,null,4);
{
    "name": "xiaoming",
    "age": 12
}

2.9.2.toJSON()

向物件添加toJSON（）方法：

var person={
    name:"xiaoming",
    age:12,
    toJSON:function(){
        return this.name+" is "+this.age;
    }
}

json=JSON.stringify(person);
console.log(json); //"xiaoming is 12"

2.9.3.parse()

parse()除了接受json字串外，也可以接受一個函式引數，該函式接受2個值，一個鍵和一個值；

var person=JSON.parse('{"name":"xiaoming","age":12}');
var person=JSON.parse('{"name":"xiaoming","age":12}',function(key,value){
    if(key=="age"){
        return value+10;
    }
    else{
        return value;
    }
});

2.10.Ajax

2.10.1.創建步驟:

1.創建一個XMLHttpRequest異步物件
2.設定請求方式和請求地址
3.接著，用send發送請求
4.監聽狀態變化
5.最后，接識訓傳的資料

例:

const xhr = new XMLHttpRequest()
xhr.open('GET', './data/test.json', true)
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      console.log(JSON.parse(xhr.responseText))
    } else {
      console.log('其它情況...')
    }
  }
}
xhr.send()

2.10.2.ajax在jQuery中的應用

$.ajax({
                    type:"post",  //請求方式
                    url:"a.php", //服務器的鏈接地址
                    dataType:"json", //傳送和接受資料的格式
                    data:{
                        username:"james",
                        password:"123456"
                    },
                    success:function(data){//接受資料成功時呼叫的函式
                       console.log(data);//data為服務器回傳的資料
                    },
                    error:function(request){//請求資料失敗時呼叫的函式
                        alert("發生錯誤:"+request.status);
                    }
});

2.10.3.GET方法

結構

$.get( url，[ data ]，[ callback ]，[ type ])

引數解釋:

//步驟一：創建異步物件
var ajax = new XMLHttpRequest();
//步驟二：設定請求的url引數，引數一是請求的型別，引數二是請求的url
ajax.open("get", "users.json");
//步驟三：發送請求
ajax.send();
//步驟四：注冊事件 onreadystatechange 狀態改變就會呼叫
ajax.onreadystatechange = function () {
    if (ajax.readyState == 4 && ajax.status == 200) {
        //步驟五：如果能夠進到這個判斷，說明資料完美的回來了，并且請求的頁面是存在的
        console.log(ajax.responseText);//輸入回應的內容
    }
};

2.10.4.POST方法

它與$.get( )方法的結構和使用方式都相同，不過之間仍然有一下區別

2.10.5.get與post區別

1.post的安全性高于get；如果以get方式請求，請求引數會拼接到url后面，安全性性低，以post方式請求，請求引數會包裹在請求體中，安全性更高
2.數量區別：get方式傳輸的資料量小，規定不能超過2kb，post方式請求資料量大，沒有限制，
3.傳輸速度：get的傳輸速度高于post
因為使用方法相同，因此只要改變jQuery函式，就可以將程式在GET請求和POST請求之間切換

2.11.Cookie

2.11.1.js中cookie的讀取操作

function getCookie(c_name){
　　　　if (document.cookie.length>0){　　//先查詢cookie是否為空，為空就return ""
　　　　　　c_start=document.cookie.indexOf(c_name + "=")　　//通過String物件的indexOf()來檢查這個cookie是否存在，不存在就為 -1　　
　　　　　　if (c_start!=-1){ 
　　　　　　　　c_start=c_start + c_name.length+1　　//最后這個+1其實就是表示"="號啦，這樣就獲取到了cookie值的開始位置
　　　　　　　　c_end=document.cookie.indexOf(";",c_start)　　//其實我剛看見indexOf()第二個引數的時候猛然有點暈，后來想起來表示指定的開始索引的位置...這句是為了得到值的結束位置，因為需要考慮是否是最后一項，所以通過";"號是否存在來判斷
　　　　　　　　if (c_end==-1) c_end=document.cookie.length　　
　　　　　　　　return unescape(document.cookie.substring(c_start,c_end))　　//通過substring()得到了值，想了解unescape()得先知道escape()是做什么的，都是很重要的基礎，想了解的可以搜索下，在文章結尾處也會進行講解cookie編碼細節
　　　　　　} 
　　　　}
　　　　return ""
　　}　

2.11.2.cookie簡單存盤操作

$.cookie("groupCode",222)

2.11.3.cookie設定過期時間

document.cookie = "name=value;expires=date"

2.11.4.cookie修改

document.cookie = "username=zhangsan";
document.cookie = "username=lisi";
var cookies = document.cookie;
console.log(cookies);

2.11.5.cookie洗掉

document.cookie = "username=zhangsan";
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
var cookies = document.cookie;
console.log(cookies);

2.12.回圈

2.12.1.for回圈

for是最常用的回圈，主要用來回圈陣列

let arr = [1,2,3];
for (let i=0; i<arr.length; i++){
 console.log(i,arr[i])
}
// 0 1
// 1 2
// 2 3

2.12.2.Array.forEach()

語法：arr.forEach(callback(currentValue [, index [, array]])[, thisArg]);

callback為陣列中每個元素執行的函式，該函式接收三個引數，currentValue（陣列中正在處理的當前元素），index（陣列中正在處理的當前元素的索引），array（forEach() 方法正在操作的陣列）

thisArg為當執行回呼函式 callback 時，用作 this 的值，

let arr = [1, 2,  , 3]
let arrCopy1 = []
arr.map((item, index, arr) => {
     arrCopy1.push(item * 2)
})
console.log(arrCopy1)
// [2, 4, 6]

forEach() 為每個陣列元素執行一次 callback 函式
那些已洗掉或者未初始化的項將被跳過（例如在稀疏陣列上）
與map()和reduce()不同的是，它沒有回傳值，總是回傳undefind，
forEach()除了拋出例外以外，沒有辦法中止或跳出 forEach() 回圈，

2.12.3.while

while 陳述句可以在某個條件運算式為真的前提下，回圈執行指定的一段代碼，直到那個運算式不為真時結束回圈

示例：

let n = 0;

while (n < 3) {
  n++;
}

console.log(n);
// expected output: 3

注：使用break陳述句在condition計算結果為真之前停止回圈

2.12.4.do…while

do…while 陳述句創建一個執行指定陳述句的回圈，直到condition值為 false，在執行statement 后檢測condition，所以指定的statement至少執行一次

示例：

const list = ['a', 'b', 'c']
let i = 0
do {
  console.log(list[i]) //value
  console.log(i) //index
  i = i + 1
} while (i < list.length)

2.12.5.for…in

for…in回圈可以用來遍歷物件的可列舉屬性串列（包括[[Prototype]]鏈）

主要用于遍歷物件，通過屬性串列可以獲取屬性值

for (let property in object) {
  console.log(property) //property name
  console.log(object[property]) //property value
}

三、JavaScript新特性

參考此文:js新特性

文章到此就結束了 有幫助的朋友記得三連支持呦😘