Javascript

客戶端腳本語(yǔ)言，用于用戶交互

特點(diǎn)：

弱類型
解釋型
基于對(duì)象
事件驅(qū)動(dòng)
單線程/異步(callback)

作用：

動(dòng)態(tài)創(chuàng)建元素
動(dòng)畫(huà)效果
操作元素的屬性，樣式與內(nèi)容
表單驗(yàn)證
ajax...進(jìn)行頁(yè)面局部刷新

組成：

ECMA基礎(chǔ)語(yǔ)法

變量、數(shù)據(jù)類型、運(yùn)算符、流程控制、數(shù)組、函數(shù)、對(duì)象（屬性和方法）、作用域、作用域鏈、原型、原型鏈，es6
BOM瀏覽器對(duì)象模型

地址對(duì)象、歷史記錄對(duì)象、window對(duì)象
DOM文檔對(duì)象模型

獲取元素，操作屬性，事件，節(jié)點(diǎn)，事件對(duì)象

概念：

基于對(duì)象與事件驅(qū)動(dòng)的松散型 解釋型語(yǔ)言。

引入方式：

外部引入方式：

優(yōu)化：body標(biāo)簽結(jié)束位置

<script src="index.js"></script>
嵌入式：

在html內(nèi)部寫(xiě)script標(biāo)簽對(duì)
```
<script>
    // js代碼
</script>
```
以上兩種方式引入的js存在關(guān)聯(lián)，相互訪問(wèn)，相互修改。

調(diào)試工具：

彈框 alert(1); 不識(shí)別變量，中文；代碼從上到下執(zhí)行，遇到錯(cuò)誤的語(yǔ)句停止并報(bào)錯(cuò)；
輸出到控制臺(tái) console.log("輸出到控制臺(tái)");
輸出到頁(yè)面 document.write("輸出到頁(yè)面中");
提示用戶輸入 prompt("提示用戶輸入")； console.log(prompt("提示用戶輸入",20));
提示確定與取消 confirm("提示文本"); confirm("是否關(guān)閉"); consloe.log(confirm("是否關(guān)閉")); true false

注釋：

//
/**/

一、變量

用來(lái)存儲(chǔ)數(shù)的容器，var

命名規(guī)范：

命名由數(shù)字、字母、下劃線、$組成，不能以數(shù)字開(kāi)頭
區(qū)分大小寫(xiě)
命名要有意義
不能用關(guān)鍵字（js中已經(jīng)用到的）定義變量名
- 不能用保留字（js將來(lái)會(huì)用到的）定義變量名
首字母大寫(xiě)法 Object
駝峰命名法 getElementById

賦值方式：

先聲明一個(gè)變量，再賦值
聲明一個(gè)變量的同時(shí)賦值
先聲明多個(gè)變量，再賦值 ,
聲明多個(gè)變量的同時(shí)賦值 ,

注意事項(xiàng)：

變量的默認(rèn)值為undefined
變量可以賦新值
變量可以重復(fù)聲明
一般都需要先聲明后訪問(wèn)，如果你先訪問(wèn)后聲明，變量值為undefined 。瀏覽器的預(yù)解析
預(yù)解析 var function 只解析到關(guān)鍵字
解析執(zhí)行
當(dāng)不用var關(guān)鍵字聲明變量，變量賦值，不會(huì)報(bào)錯(cuò)，變量為全局變量
當(dāng)不用var關(guān)鍵字聲明變量，變量沒(méi)有賦值，會(huì)報(bào)錯(cuò)。

let:es6

聲明變量
不能夠重復(fù)聲明
不存在變量提升（先訪問(wèn)后聲明）
識(shí)別塊級(jí)作用域

const：es6

聲明常量，值不能變化
不能重復(fù)聲明
不存在變量提升
不能先聲明后賦值
識(shí)別塊級(jí)作用域

二、數(shù)據(jù)類型

棧區(qū) 堆區(qū)（引入數(shù)據(jù)類型）代碼塊區(qū)

根據(jù)數(shù)據(jù)在內(nèi)存中的存儲(chǔ)位置不同進(jìn)行劃分。

基本數(shù)據(jù)類型:(棧)

number數(shù)字型
string字符串
boolean布爾型
undefined
1. 變量聲明未賦值
2. 函數(shù)沒(méi)有返回值
3. 形參不傳值
4. 對(duì)象沒(méi)有屬性
5. 數(shù)組的越界訪問(wèn)
null

symbol(es6)

值是獨(dú)一無(wú)二的，一般用作對(duì)象的屬性名

let mysymbol=Symbol("fun");
let mysymbol1=Symbol("fun");
 mysymbol 與 mysymbol1 即使有相同的值也認(rèn)為是不相等的

對(duì)象的屬性名
```
let mysymbol=Symbol("fun");
let mysymbol1=Symbol("fun");
let obj={
  [mysymbol]:"hello",
  [mysymbol1]:"hello",
}
不能用點(diǎn)運(yùn)算符
```
以symbol作為屬性名的話，不能用for in 遍歷，Object.getOwnPropertySymbols(obj)以數(shù)組的形式返回對(duì)象Symbol 的鍵名

引用數(shù)據(jù)類型:(堆)

object

數(shù)組，函數(shù)，對(duì)象；conslone.log(typeof num);檢測(cè)數(shù)據(jù)類型,只看二進(jìn)制的前三位，null和object前三位一樣

數(shù)據(jù)類型	值	typeof的結(jié)果
number	整數(shù)，小數(shù)，正數(shù)，負(fù)數(shù)，科學(xué)計(jì)數(shù)法，NaN(not a number)	number
string	單雙引號(hào)	string
boolean	true、false	boolean
undefined	變量只聲明未賦值，值為undefined	undefined
null	null	object
symbol
object	數(shù)組，對(duì)象；函數(shù)	object；function

三、運(yùn)算符

算術(shù)運(yùn)算符：

+ - * / % var++ ++var var-- --var

隱式數(shù)據(jù)類型轉(zhuǎn)換

數(shù)字字符串console.log(Numder("abc"));

console.log(Numder("123"));

console.log(Numder(true));

console.log(Numder(false));

console.log(Numder(undefined));

console.log(Numder(null));

- * / %:四則運(yùn)算 /求商

如果操作數(shù)的數(shù)據(jù)類型不是number,會(huì)隱式調(diào)用Number()函數(shù)

true：1，false:0,undefined:NaN,null:0,"123":123

+
- 加法運(yùn)算
  
  兩個(gè)操作數(shù)都為number型
- 拼接運(yùn)算
  
  只要有一個(gè)操作數(shù)是字符串就做拼接
var++ ++var var-- --var
- ++在前，先算++
- ++在后，先算其他，再算++
- ++自增，--自減
- ++只能作用于變量

關(guān)系運(yùn)算符:

> < <= >= == ===嚴(yán)格相等 != !==非嚴(yán)格相等

關(guān)系運(yùn)算符的返回值是布爾值

兩個(gè)操作數(shù)都是數(shù)字，按照數(shù)字大小比較
兩個(gè)操作數(shù)都是字符串，按照ASCII值比較
如果一個(gè)是數(shù)字，一個(gè)是字符串，先試圖將字符串轉(zhuǎn)換為數(shù)字，如果轉(zhuǎn)換成功進(jìn)行比較，轉(zhuǎn)換不成功，輸出false
===值和數(shù)據(jù)類型都相等 ==值相等
NaN!=NaN null===ull undefined==null

賦值運(yùn)算符：

= += -= *= /= %=

var num=10;
num+=20;//num=num+20

邏輯運(yùn)算符：

&& || ！

布爾：flase,0,undefined,null,NaN,""都為假（6種）

&& 與

同真為真，返回第一個(gè)假值（短路原則），最后一個(gè)真值
|| 或

同假為假，返回第一個(gè)真值·
！非

取反

|A|B|A&&B|A||B|!A|
|--|--|--|--|--|
|true|true|true|true|false|
|true|false|false|true|false|
|false|true|false|true|true|
|false|false|false|false|true|

三元運(yùn)算符：

表達(dá)式？值1：值2；

表達(dá)式的值是否為真，為真執(zhí)行結(jié)果1，為假執(zhí)行結(jié)果2

一元運(yùn)算符：

typeof 檢測(cè)數(shù)據(jù)類型
new 實(shí)例化對(duì)象
delete 刪除對(duì)象的屬性（es6)
instanceof：檢測(cè)對(duì)象與構(gòu)造函數(shù)或者類的關(guān)系 true false
```
arr instanceof Array
```

特殊運(yùn)算符：

, 同時(shí)聲明多個(gè)變量
（）提升優(yōu)先級(jí)，函數(shù)調(diào)用

運(yùn)算符的優(yōu)先級(jí)：

四、流程控制

按照相應(yīng)的條件執(zhí)行相應(yīng)的代碼。

順序結(jié)構(gòu)：按照代碼的順序，從上到下執(zhí)行
分支結(jié)構(gòu)：滿足一定的條件，執(zhí)行相應(yīng)的代碼
循環(huán)結(jié)構(gòu)：滿足一定的條件，重復(fù)執(zhí)行相應(yīng)的代碼

分支結(jié)構(gòu)

單分支：

if(條件){
  滿足條件時(shí)執(zhí)行的語(yǔ)句；
}

雙分支：

if(條件){
  滿足條件時(shí)執(zhí)行的語(yǔ)句；
}else{
  不滿足條件時(shí)執(zhí)行的語(yǔ)句；
}

多分支：

if(條件1){
  滿足條件1時(shí)執(zhí)行的語(yǔ)句；
}else if(條件2){
  滿足條件2時(shí)執(zhí)行的語(yǔ)句；
}else if(條件3){
  滿足條件3時(shí)執(zhí)行的語(yǔ)句；
}else{
  以上條件都不滿足執(zhí)行的語(yǔ)句；
}

嵌套分支：

if(條件1){
  if(條件1-1){
     滿足條件1并且滿足條件1-1時(shí)執(zhí)行的語(yǔ)句；
  }else if（）{
    
  }else if{}
  else{}
 }else{}

switch：

switch(變量){
  case 值1:語(yǔ)句1;break;//break終止
  case 值2:語(yǔ)句2;break;
  case 值3:語(yǔ)句3;break;
  case 值4:語(yǔ)句4;break;
  default:以上情況都不滿足時(shí)執(zhí)行；
}

值必須為變量能夠取到的值，數(shù)據(jù)類型必須相等
prompt接收的是字符串
如果條件是一個(gè)范圍，用if else；條件是具體的值，用switch。

循環(huán)結(jié)構(gòu)：

for：

for(初始條件;終止條件;步進(jìn)值)
{
  循環(huán)體；
}

while:

while(條件){
     循環(huán)體; 
}

do while:

do{
  循環(huán)體;
}while(條件)

區(qū)別：當(dāng)初始條件不滿足終止條件時(shí)，dowhile會(huì)執(zhí)行一次，while不會(huì)執(zhí)行。

跳出循環(huán)的語(yǔ)句：

break;終止整個(gè)循環(huán)
continue; 終止?jié)M足條件的本次循環(huán)，后面的循環(huán)滿足條件仍然執(zhí)行。

五、函數(shù)

對(duì)能實(shí)現(xiàn)特定功能的代碼的封裝，能夠重復(fù)使用。

聲明函數(shù)的方式：

function關(guān)鍵字

function 函數(shù)名(){
  函數(shù)體；
}
fn1();

匿名函數(shù)，以自變量、自面量的方式聲明函數(shù)
```
var 函數(shù)名=function(){
  函數(shù)體；
}
fn1();
```

實(shí)例化構(gòu)造函數(shù)function,new

var 函數(shù)名=new Function{
  ' 函數(shù)體；'
}
fn1();

函數(shù)名相同，函數(shù)體不同，下面的覆蓋上面的

以function的方式定義函數(shù)可以先訪問(wèn)后聲明，但是匿名方式必須先聲明后訪問(wèn)。

函數(shù)的調(diào)用：

() 調(diào)用：函數(shù)名（）
在事件中調(diào)用
```
<div onclick="fn()"></div>
```
函數(shù)的自調(diào)用

只能調(diào)用一次
```
(function fn(){
  //函數(shù)體;
})()
```

函數(shù)的參數(shù)：

目的是使函數(shù)更加靈活

參數(shù)可以是任意數(shù)據(jù)類型，形參只在函數(shù)內(nèi)部起作用。

function 函數(shù)名(num1,num2){//形參
  函數(shù)體；
}
fn1(num1,num2);//實(shí)參

形參只能在函數(shù)內(nèi)部訪問(wèn)

參數(shù)的默認(rèn)值：

分支結(jié)構(gòu)
三元運(yùn)算符
邏輯或 flag=flag||"<"
es6 function fn(flag="<")

函數(shù)的屬性與方法:

name:fn.name 返回函數(shù)的名稱
length：fn.length 返回函數(shù)形參的個(gè)數(shù)
toString():fn.toString 將函數(shù)的原碼轉(zhuǎn)換為字符串

函數(shù)的返回值：

用return表達(dá)式：給函數(shù)一個(gè)返回值

函數(shù)沒(méi)有返回值為undefined
return可以終止整個(gè)函數(shù)的執(zhí)行。continue、break
函數(shù)中可以有多個(gè)return分支，但最終只執(zhí)行一個(gè)return分支
返回值也可以是任意的數(shù)據(jù)類型

箭頭函數(shù)：es6

var fn=function(){
  return v;
}
var fn=v=>v;
var fn=(v)=>{return v};//要是有{}，必須加return；沒(méi)有{}默認(rèn)有return

如果函數(shù)沒(méi)有參數(shù)，可用（）代替
如果函數(shù)體中代碼多余一條，要用{}包起來(lái)
如果返回值是對(duì)象，json格式，要在對(duì)象外面添加（）
構(gòu)造函數(shù)不能用箭頭函數(shù)定義
箭頭函數(shù)內(nèi)部沒(méi)有arguments對(duì)象
箭頭函數(shù)多用于簡(jiǎn)化回調(diào)函數(shù)

回調(diào)函數(shù)：

把一個(gè)函數(shù)當(dāng)做參數(shù)，傳遞給另一個(gè)函數(shù)。當(dāng)做參數(shù)的這個(gè)函數(shù)叫做回調(diào)函數(shù)。

自己記的：使函數(shù)更加靈活。

遞歸函數(shù)：

在函數(shù)體內(nèi)調(diào)用本函數(shù)，注意要有終止條件。階乘。

閉包：

為什么出現(xiàn)：解決在函數(shù)外部訪問(wèn)函數(shù)內(nèi)部變量的需求
概念：定義在函數(shù)內(nèi)部的函數(shù)，使用目標(biāo)變量，使用的變量不會(huì)被回收

缺點(diǎn)：變量常駐內(nèi)存

function fn(){
  var num=100;
  function aa(){
    return num;
  }
  return aa;
}
let num1=fn()();//aa num
console.log(num1);

六、作用域

變量或函數(shù)起作用的范圍。 8

全局作用域：在整個(gè)js代碼中都能被訪問(wèn)到的變量
- 在函數(shù)外部用var或let 聲明的變量擁有全局作用域
- 不用var聲明但是賦值的變量，擁有全局作用域
局部作用域：在函數(shù)內(nèi)部會(huì)被訪問(wèn)到的變量
- 在函數(shù)內(nèi)部用var或let聲明的變量，擁有局部作用域
- 形參擁有局部作用域
塊級(jí)作用域（es6）{ }
- let const 識(shí)別塊級(jí)作用域

作用域鏈：

當(dāng)訪問(wèn)變量時(shí)，js會(huì)為變量創(chuàng)建一個(gè)作用域鏈，規(guī)定了變量的訪問(wèn)順序。

訪問(wèn)順序：從內(nèi)向外訪問(wèn)
局部作用域優(yōu)于全局作用域

七、預(yù)解析

環(huán)境

宿主：瀏覽器
執(zhí)行環(huán)境：全局環(huán)境、局部環(huán)境

預(yù)解析：

按照script代碼塊的順序解析
var,function關(guān)鍵字會(huì)被提前解析到內(nèi)存中
一個(gè)變量名既是全局又是局部變量，局部變量的優(yōu)先級(jí)高于全局變量
預(yù)解析：函數(shù)名與變量名相同，函數(shù)名的優(yōu)先級(jí)高
定義函數(shù)與變量時(shí)，名字不能相同。（執(zhí)行時(shí)）

九、內(nèi)置頂層函數(shù)：

內(nèi)置：自帶；頂層：window的方法

Number() 將任意數(shù)據(jù)類型轉(zhuǎn)換為數(shù)字型

true:1;false:0;null:0;undefined:NaN;數(shù)字：數(shù)字；空字符串：0；數(shù)字型字符串：數(shù)字；其他字符串：NaN;
Boolean() 將任意數(shù)據(jù)類型轉(zhuǎn)換為布爾型

undefined,null,NaN,false,0,空字符串 false
String() 將任意數(shù)據(jù)類型轉(zhuǎn)換為字符串型
parseInt() 將字符串轉(zhuǎn)換為整型
- 數(shù)字型字符串，轉(zhuǎn)換為十進(jìn)制數(shù)
- 忽略空格，從第一個(gè)數(shù)字到最后一個(gè)數(shù)字進(jìn)行轉(zhuǎn)換
- 不是以數(shù)字、空格、-數(shù)字開(kāi)頭，其他情況轉(zhuǎn)換為NaN
parseFloat() 將字符串轉(zhuǎn)換為浮點(diǎn)型
- 如果為整數(shù)，不會(huì)轉(zhuǎn)換為浮點(diǎn)型，會(huì)轉(zhuǎn)換為整型
- 轉(zhuǎn)換的字符串是一個(gè)規(guī)范的浮點(diǎn)型，只能是一個(gè)小數(shù)點(diǎn)。
isNaN() 判斷一個(gè)數(shù)是否能轉(zhuǎn)換為數(shù)值型，可以返回的是fslae,不能返回的是true。
eval() 將傳入的字符串當(dāng)做js代碼進(jìn)行執(zhí)行

作用：數(shù)據(jù)類型轉(zhuǎn)換

強(qiáng)制數(shù)據(jù)類型轉(zhuǎn)換
隱式數(shù)據(jù)類型轉(zhuǎn)換

十、數(shù)組

array()數(shù)組的構(gòu)造函數(shù)

聲明數(shù)組

var arr=[];

實(shí)例化對(duì)象

var arr=new Array();
var arr=new Array(4);//1個(gè)值，代表數(shù)組的長(zhǎng)度
var arr=new Array(4,"shr",true);//大于1個(gè)值，代表數(shù)組的值

數(shù)組的賦值

聲明的同時(shí)賦值
```
var arr=[1,2,3];
```

先聲明后賦值

var arr=[];
arr[0]=12;arr[1]=2;arr[2]=22;arr[3]="abc";

數(shù)組的訪問(wèn)：

下標(biāo)訪問(wèn)arr[i]，下標(biāo)的范圍：0~arr.length-1;
數(shù)組中的元素可以是任意數(shù)據(jù)類型
數(shù)組可以越界訪問(wèn)，值為undefined

數(shù)組的遍歷：

for

for（var i=0;i<arr.length;i++）{
  arr[i];
}

for in

for(var i in arr){
    i;//下標(biāo)
      arr[i];//值
}

for of

for(var i of arr){
    i;//數(shù)組中的值
}

二維數(shù)組：

數(shù)組中的每一個(gè)元素都是數(shù)組。數(shù)組嵌套數(shù)組。

訪問(wèn)：

arr[i][j]

遍歷：

for(let i=0;i<arr.length;i++){
  for(let j=;j<arr[i].length;j++){
    arr[i][j];
  }
}

數(shù)組的拷貝

淺拷貝：地址
```
let arr2=arr1;
```

深拷貝：值

let arr1=[1,2,3]
arr1.forEach(ele=>{
  arr2.push(ele);
})

十一、對(duì)象

對(duì)屬性和方法的集合。

屬性：描述對(duì)象的特征。

方法：描述對(duì)象的功能

聲明對(duì)象的方式

字面量方式聲明：json格式格式轉(zhuǎn)換

  "屬性名":"屬性值",
  方法名:function(){
            
  }//最后一個(gè)不寫(xiě)逗號(hào)
var asus={//asus對(duì)象
  color:"blank",
  size:14,//size:'14px',
  play:function(){
        console.log("play");
    },
 study:function(){
        return "study";
    }
};//分號(hào)
//訪問(wèn)屬性與方法
//1.對(duì)象.屬性名2.對(duì)象['屬性名']
//1.對(duì)象.方法名()2.對(duì)象['方法名']()
console.log(asus);
console.log(asus.color);
asus.play();
//增加 對(duì)象.屬性名=屬性值  對(duì)象.方法名=函數(shù)
asus.price=30000;//新增一個(gè)屬性;后訪問(wèn)
console.log(asus);
asus.video=function(){
  //函數(shù)體;
}
//刪除屬性
                           //刪除對(duì)象 asus=null;
delete 對(duì)象.屬性名
delete asus.color
//修改
對(duì)象.屬性名=新屬性值

實(shí)例化構(gòu)造函數(shù)

function Computer(){
  this.color="black";
  this.play=function(name){
    return name+"play"
  };//這個(gè)分號(hào)可有可無(wú)
  this.play=function(name){
    return name+"play"
  }
}
var apple=new Computer();
//增加
apple.price=16000;

this：函數(shù)內(nèi)部存在this ，誰(shuí)調(diào)用函數(shù)this指向誰(shuí)，

window，實(shí)例化構(gòu)造函數(shù)的對(duì)象

實(shí)例化Object
```
var obj=new Object();
```

class (es6) 定義類類要大寫(xiě)

class Computer{
  //構(gòu)造方法 es5
    constructor(size){
      this.size=size；
    }
  //相當(dāng)于原型
  play(){
        
  }
  study(){
    
  }
}
var apple=new Computer(12);

對(duì)象的遍歷：

for in

for(let i in obj){
  i;//對(duì)象屬性名字
  obj[i];//值
}

constructor ：

原型對(duì)象的屬性，用來(lái)指向原型所對(duì)應(yīng)的構(gòu)造函數(shù)

instanceof:

判斷對(duì)象與構(gòu)造函數(shù)的關(guān)系。true false

new運(yùn)算符做了什么？

創(chuàng)建空對(duì)象obj
將obj的__proto__指向構(gòu)造函數(shù)的原型
將構(gòu)造函數(shù)內(nèi)部的this指向obj

this

原型原型對(duì)象：prototype

構(gòu)造函數(shù)的屬性，存放公共的屬性和方法，節(jié)省空間。

構(gòu)造函數(shù).prototype={
    屬性名：屬性值,//json格式
    方法名：方法,
}；//這個(gè)分號(hào)也是可有可無(wú)

原型鏈：

在訪問(wèn)對(duì)象的屬性與方法時(shí)，遵循的一條規(guī)則。從對(duì)象，到對(duì)象的原型，再原型的原型。如果屬性不存在返回undefined ；方法不存在，報(bào)錯(cuò)。

如果對(duì)象自身和它的原型上都定義了同一屬性名，優(yōu)先讀取對(duì)象自身的屬性。

原型鏈通過(guò)__proto__ 實(shí)現(xiàn)。

通過(guò)原型鏈實(shí)現(xiàn)繼承。

自己記的：每一個(gè)函數(shù)都有一個(gè)prototype屬性，指向一個(gè)對(duì)象。原型對(duì)象的屬性不是實(shí)例對(duì)象自身的屬性。

對(duì)象的特性：

封裝：

將對(duì)象的組成組合起來(lái)。構(gòu)造函數(shù)與prototype

工廠函數(shù)
構(gòu)造函數(shù)
prototype
混合函數(shù)：構(gòu)造函數(shù)與prototype

繼承：

原型繼承：prototype
call:fun.call(obj,參數(shù)1,...) 將fun的this指向改變?yōu)閛bj
apply：fun.apply(obj,[參數(shù)1,參數(shù)2,...]) 將fun的this指向改變?yōu)閛bj
bind：fun.bind(obj,參數(shù)1,...)() 將fun的this指向改變?yōu)閛bj。返回對(duì)應(yīng)的函數(shù)，需要以后調(diào)用。call與apply是立即執(zhí)行函數(shù)。

extends:(es6)

class Point{
  constructor(x,y){
     this.x=x;
     this.y=y;
  }
  say(){
    return "say";
  }
}
class Points1 extends Point{
  constructor(x,y,color){
    super(x,y);
    this.color=color;
  }
  circle(){
    return "123";
  }
}

用 extends實(shí)現(xiàn)子類繼承父類
在子類構(gòu)造方法中添加super()
在子類中訪問(wèn)父類的屬性用this.父類屬性名
在子類中訪問(wèn)父類的方法用super.父類方法名

數(shù)組對(duì)象

屬性：

length：數(shù)組的長(zhǎng)度
constructor:返回對(duì)象的構(gòu)造函數(shù)

方法：

參數(shù)三個(gè)

arr.push() 向數(shù)組添加一個(gè)或多個(gè)元素，添加到數(shù)組的末尾，改變?cè)瓟?shù)組，返回新數(shù)組長(zhǎng)度。
arr.unshift() 向數(shù)組的開(kāi)頭添加一個(gè)或多個(gè)元素，改變?cè)瓟?shù)組，返回新數(shù)組長(zhǎng)度。
arr.shift() 刪除數(shù)組中第一個(gè)元素，并返回第一個(gè)元素的值，會(huì)改變?cè)瓟?shù)組
arr.pop() 刪除數(shù)組中最后一個(gè)元素，并返回最后一個(gè)元素的值，會(huì)改變?cè)瓟?shù)組
arr.concat(arr1,arr2) 實(shí)現(xiàn)一個(gè)或多個(gè)數(shù)組的拼接，返回拼接后的數(shù)組，不會(huì)對(duì)原數(shù)組產(chǎn)生影響。
arr.every(function(ele,index){ return ele>0}) 當(dāng)所有元素都滿足條件時(shí)返回true，否則返回false
arr.some(function(ele,index){ return ele>0}) 只要有一個(gè)元素滿足條件時(shí)返回true，否則返回false
arr.includes() 判斷數(shù)組中是否包含指定的值，包含返回true，否則返回false。
arr.indexOf() 返回指定值在數(shù)組中首次出現(xiàn)的下標(biāo)，不包含返回-1；
arr.lastIndexOf() 返回指定值在數(shù)組中首次出現(xiàn)的下標(biāo)，從后向前訪問(wèn)
arr.join("-") 將數(shù)組轉(zhuǎn)換為字符串，默認(rèn)用逗號(hào),拼接
arr.toString() 將數(shù)組轉(zhuǎn)換為字符串,不會(huì)改變?cè)瓟?shù)組
arr.toLocalString() 將數(shù)組轉(zhuǎn)換為本地字符串，使用地區(qū)特定的分隔符把生成的字符串連接起來(lái)，形成一個(gè)字符串
arr.filter(function(ele,index){return ele>3;}) 一個(gè)集合到一個(gè)更小的集合 es6新增
arr.map((ele)=>{return ele*2;}) 映射，一一對(duì)應(yīng)，一個(gè)集合到另一個(gè)集合 es6新增
arr.forEach(function(ele,index){}) 數(shù)組遍歷 es6新增
arr.slice(start,end) 截取從開(kāi)始的下標(biāo)到結(jié)束的下標(biāo)，但不包含結(jié)束的下標(biāo)，結(jié)束下標(biāo)-1。如果結(jié)束沒(méi)有值，截取剩余所有的元素。
arr.splice(start,length) 刪除從開(kāi)始的下標(biāo)刪除指定的長(zhǎng)度，改變?cè)瓟?shù)組，當(dāng)length為0時(shí)，做添加功能，當(dāng)length不為0時(shí)，先刪除指定的長(zhǎng)度個(gè)元素，在添加
arr.sort(function(a,b){return a-b(從小到大) / b-a (從大到小);}) 排序
arr.reverse() 顛倒順序，反轉(zhuǎn)，會(huì)改變?cè)瓟?shù)組
arr.reduce(function(tot,ele){ return tot+ele}) 數(shù)組從左向右累計(jì)求和 es6新增
arr.reduceRight(function(tot,ele){ return tot+ele}) 數(shù)組從右向左累計(jì)求和
arr.flat() 數(shù)組平坦
arr.flatMap() 對(duì)數(shù)組的每個(gè)成員執(zhí)行一個(gè)函數(shù)
arr.find(function(ele,index){return ele>1;}) 返回?cái)?shù)組中滿足條件的第一個(gè)元素，如果不存在返回undefined
arr.findIndex(function(ele,index){return ele>1;}) 返回?cái)?shù)組中滿足條件的第一個(gè)元素的下標(biāo)，如果不存在返回-1

Math對(duì)象

屬性

Math.PI

方法:

Math.floor() 向下取整
Math.ceil() 向上取整
Math.random() 取0-1的隨機(jī)數(shù)。Math.random()*(b-a)+a
Math.abs() 取絕對(duì)值
Math.max() 取最大值
Math.min() 取最小值
Math.pow(x,y) 返回x的y次冪
Math.round() 四舍五入

日期對(duì)象

var date=new Date(2019,9,1) 實(shí)例化日期對(duì)象

方法：

年 date.getFullYear()
月 0-11 date.getMonth()
日 1-31 date.getDate()
周中的某一天 0-6 ；0表示周日 date.getDay()
時(shí) date.getHours()
分 date.getMinutes()
秒 date.getSeconds()
獲取到1970年1 月1 日的毫秒數(shù) date.getTime()

屬性：

constructor
prototype

自己記的：

console.log(console);

console.clear();清除控制臺(tái)

字符串對(duì)象

屬性：

length 字符串長(zhǎng)度

方法：

str.charAt (index) 返回指定下標(biāo)的字符串
str.charCodeAt (index) 返回指定下標(biāo)的字符的ASCII碼值
String.fromCharCode(ASCII) 返回指定的ASCII對(duì)應(yīng)的字符
str.indexOf() 返回指定字符串首次出現(xiàn)的下標(biāo)
str.lastIndexOf() 倒序返回指定字符串首次出現(xiàn)的下標(biāo)
str.replace("被替換的內(nèi)容", "替換后的內(nèi)容") 替換，替換首次出現(xiàn)的
str.slice(start,end) 截取，從開(kāi)始的下標(biāo)到結(jié)束的下標(biāo)，但是不包含結(jié)束的下標(biāo)
str.substring(start,end) 截取，不識(shí)別負(fù)數(shù)
str.substr(start,length) 截取，從開(kāi)始的下標(biāo)截取指定的長(zhǎng)度
str.split('') 將字符串按照特定標(biāo)識(shí)轉(zhuǎn)換為數(shù)組，用逗號(hào)隔開(kāi)
str.toUpperCase() 將字符串全部轉(zhuǎn)換為大寫(xiě)
str.toLowerCase() 將字符串全部轉(zhuǎn)換為小寫(xiě)
str.trim() 去掉字符串的左右空格
str.trimRight() 去掉字符串的右空格
str.trimLeft() 去掉字符串的左空格
str.concat() 連接兩個(gè)或多個(gè)字符串
str.join('') 轉(zhuǎn)換為字符串
str.reverse() 反轉(zhuǎn)

Javascript對(duì)象的分類：

內(nèi)置對(duì)象：ECMAScript內(nèi)置的對(duì)象，直接拿來(lái)用就可以，不需要實(shí)例化
- 內(nèi)置頂層對(duì)象(global): Math;
本地對(duì)象:需要實(shí)例化才能用
- String;
- Boolean;
- Number;
- Function;
- Array;
宿主對(duì)象: BOM DOM

宿主：js的執(zhí)行環(huán)境

Object對(duì)象：

方法：

Object.assign(obj1,obj2,obj3) 對(duì)象的拼接，將obj2,obj3拼接到obj1中，會(huì)改變?cè)瓕?duì)象
Object.is(a,b) 比較兩個(gè)值是否相等；基本數(shù)據(jù)類型比的是值，引用數(shù)據(jù)類型比的是地址
Object.keys(obj) 以數(shù)組的形式返回對(duì)象的鍵名
Object.values(obj) 以數(shù)組的形式返回對(duì)象的鍵值
Object.getOwnPropertyNames(obj); 以數(shù)組的形式返回對(duì)象的鍵名
Object.getOwnPropertySymbol(obj); 以數(shù)組的形式返回對(duì)象中Symbol的鍵名

正則對(duì)象

正則表達(dá)式用來(lái)匹配或檢索符合某一種規(guī)則的字符，常見(jiàn)于表單驗(yàn)證當(dāng)中，判斷用戶名是否滿足要求或者判斷手機(jī)號(hào)碼是否符合規(guī)則、驗(yàn)證身份證號(hào)碼是否符合規(guī)則

創(chuàng)建正則對(duì)象的方式：

let reg = /正則表達(dá)式/
    
let reg1 = new RegExp();

模式修正符

符號(hào) 描述

i 執(zhí)行對(duì)大小寫(xiě)不敏感的匹配

g 執(zhí)行全局匹配（查看所有匹配）

m 執(zhí)行多行匹配

符號(hào)	描述
i	執(zhí)行對(duì)大小寫(xiě)不敏感的匹配
g	執(zhí)行全局匹配（查看所有匹配）
m	執(zhí)行多行匹配

組成正則對(duì)象的最小單元——原子

原子	描述
\d	匹配0-9之間的一個(gè)字符
\D	匹配除了0-9之間的一個(gè)字符
\w	匹配數(shù)字、字母、下劃線字符
\W	匹配除了數(shù)字、字母、下劃線的字符
\n	用于匹配換行字符或者當(dāng)成換行字符寫(xiě)入到字符串中

原子表	含義
[]	只匹配其中的一個(gè)字符
[0-9]	匹配0-9之間的一個(gè)字符，與\d相同
[^0-9]	匹配除了0-9之間的一個(gè)字符，與\D相同


量詞	含義
{n}	表示前面的原子被重復(fù)n次
{0,n}	前面的原子重復(fù)0-n次
{1,n}	前面的原子重復(fù)1-n次
+	前面的原子重復(fù)1-n次
*	前面的原子重復(fù)0-n次
{n,}	規(guī)定前面的一個(gè)原子重復(fù)n次及n次以上
?=n	匹配字符后面緊跟n的字符
?!n	匹配字符后不跟n的字符

邊界	描述
^	從字符串的開(kāi)頭進(jìn)行匹配
$	匹配到字符串的結(jié)尾
\b	匹配單詞邊界
\B	匹配非單詞邊界
\|（管道符）	表示或者的意思，

DOM對(duì)象：

操作html頁(yè)面

一、DOM對(duì)象的屬性：

屬性	描述	讀寫(xiě)
URL	網(wǎng)站的url	只讀
title	網(wǎng)站的標(biāo)題	讀寫(xiě)
charset	字符編碼	只讀
forms	頁(yè)面中的所有form標(biāo)簽	只讀
images	頁(yè)面中的所有img標(biāo)簽	只讀
body	body標(biāo)簽	只讀
head	head標(biāo)簽	只讀
documentElement	html標(biāo)簽	只讀
cookie	cookie信息(登錄信息，愛(ài)好等存儲(chǔ)信息)	讀寫(xiě)

二、獲取元素的方法：

標(biāo)簽名：html集合類數(shù)組

document.getElementsByTagName("標(biāo)簽名")

類名：html集合類數(shù)組小標(biāo)訪問(wèn)
```
document.getElementsByClassName("類名")
```
id：一個(gè)dom對(duì)象
```
document.getElementById("id名")
```
name:節(jié)點(diǎn)列表類數(shù)組小標(biāo)訪問(wèn)
```
document.getElementByName("name名")
```
獲取第一個(gè)元素： DOM對(duì)象
```
document.querySelector("css選擇器")
```
獲取所有元素：節(jié)點(diǎn)列表 for
```
document.querySelectorAll("css選擇器")
```

三、操作內(nèi)容：

普通標(biāo)簽
- innerHTML:識(shí)別標(biāo)簽對(duì) dom對(duì)象.innerHTML
- innerText：不識(shí)別標(biāo)簽對(duì) dom對(duì)象.innerText
value 表單

四、操作屬性 html

標(biāo)準(zhǔn)屬性：

獲?。簅bj.attr 對(duì)象.屬性名
設(shè)置：obj.attr=value 對(duì)象.屬性名=屬性值

非標(biāo)準(zhǔn)屬性：

獲?。?code>obj.getAttribute(name);
設(shè)置：obj.setAttribute(name,value);
是否包含：obj.hasAttribute(name) true false

五、操作樣式 css行內(nèi)樣式：

obj.style.css屬性名=屬性值;
//屬性中有-，第二個(gè)單詞的首字母大寫(xiě)

//移入事件
obj.onmouseenter=function(){

}
//移出事件
obj.onmouseleave=function(){

}

批量操作：

類名：
- 添加：obj.classList.add("類名")
- 刪除：obj.classList.remove("類名")
- 切換：obj.classList.toggle("類名")
- 是否包含：obj.classList.contains("類名")
- 替換
id:
- 添加：obj.id="id名"
- 刪除：obj.id=""

獲取樣式：

getComputedStyle(obj,null).attr 獲取內(nèi)聯(lián)css,外部引入css中的樣式
將字符串轉(zhuǎn)換為整型 parseInt()

六、節(jié)點(diǎn)：

在html中，所有的事物都被視為節(jié)點(diǎn)，節(jié)點(diǎn)之間是相互聯(lián)系。整個(gè)html文件被視為節(jié)點(diǎn)樹(shù)。

節(jié)點(diǎn)的分類:

元素節(jié)點(diǎn)：標(biāo)簽
屬性節(jié)點(diǎn)：html屬性
文本節(jié)點(diǎn)：文字，空格，換行
注釋節(jié)點(diǎn)
文檔節(jié)點(diǎn)

節(jié)點(diǎn)詳細(xì)信息：

節(jié)點(diǎn)的屬性:

對(duì)象.parentNode 獲取父節(jié)點(diǎn)
對(duì)象.childNodes 獲取子節(jié)點(diǎn)
對(duì)象.firstChild 獲取第一個(gè)子節(jié)點(diǎn)
對(duì)象.lastChild 獲取最后一個(gè)子節(jié)點(diǎn)
對(duì)象.nextSibling 獲取下一個(gè)兄弟節(jié)點(diǎn)
對(duì)象.previousSibling 獲取上一個(gè)兄弟節(jié)點(diǎn)

元素節(jié)點(diǎn)的屬性:

對(duì)象.parentElement 獲取父元素節(jié)點(diǎn)
對(duì)象.children 獲取子元素節(jié)點(diǎn)
對(duì)象.childElementCount 獲取子元素節(jié)點(diǎn)的個(gè)數(shù)
對(duì)象.firstElementChild 獲取第一個(gè)子元素節(jié)點(diǎn)
對(duì)象.lastElementChild 獲取最后一個(gè)子元素節(jié)點(diǎn)
對(duì)象.nextElementSibling 獲取下一個(gè)兄弟元素節(jié)點(diǎn)
對(duì)象.previousElementSibling 獲取上一個(gè)兄弟元素節(jié)點(diǎn)

節(jié)點(diǎn)的方法:

創(chuàng)建：document.createElement(標(biāo)簽名)
操作內(nèi)容、操作屬性、操作樣式
插入節(jié)點(diǎn)：parent.appendChild（子節(jié)點(diǎn)）
插入節(jié)點(diǎn)到指定位置：parent.insertBefore(新節(jié)點(diǎn)，位置)
刪除節(jié)點(diǎn)：parent.removeChild(子節(jié)點(diǎn))
替換節(jié)點(diǎn)：parent.replaceChild(新節(jié)點(diǎn),舊節(jié)點(diǎn))
克隆節(jié)點(diǎn)：node.cloneNode(boolean) false 克隆節(jié)點(diǎn)本身 true 克隆子節(jié)點(diǎn)以及本身

七、事件：

事件源.事件=事件處理函數(shù)

添加事件的方式：

行內(nèi)事件： <div onclick="fn()"></div>
on+type:如果給同一事件源添加相同的事件，后者的事件處理函數(shù)覆蓋前者的。
- 鼠標(biāo)：click、mouseenter、mouseleave、dblclick
- 鍵盤(pán)：keydown、keyup
- 表單:focus、blur(失去焦點(diǎn))、change(改變并且失去焦點(diǎn))、input(表單的值實(shí)時(shí)改變)
- window:load(頁(yè)面加載)、scroll(頁(yè)面的滾動(dòng))

事件監(jiān)聽(tīng) ：同一個(gè)事件源的同一個(gè)事件可以添加多個(gè)事件處理函數(shù)

添加事件：

obj.addEventListener(even(事件名稱),callback（回調(diào)函數(shù)）,boolean);
obj.addEventListener("click",fn,false);//false表示在冒泡階段調(diào)用
obj.addEventListener("click",function(){},true);//true表示在捕獲階段調(diào)用事件處理程序

移除事件：不能使用匿名函數(shù)，要獲取函數(shù)的引用
```
obj.removeEventListener(even,callback,boolean);
```

事件對(duì)象：

記錄事件發(fā)生時(shí)的詳細(xì)信息

event：事件處理函數(shù)的第一個(gè)參數(shù)。

box.addEventListener("click",function(e){
  console.log(e);
},flase);

自己記的：

屬性：

方法：

適用場(chǎng)景：時(shí)間點(diǎn)擊需要得到它的詳細(xì)信息，阻止瀏覽器的默認(rèn)行為

鼠標(biāo)事件對(duì)象：

offestX 距事件源左上角水平方向的距離補(bǔ)充：誰(shuí)調(diào)用？事件對(duì)象
offesY 距事件源左上角垂直方向的距離
clientX 距瀏覽器左上角水平方向的距離
clientY 距瀏覽器左上角垂直方向的距離
pageX 距頁(yè)面左上角水平方向的距離
pageY 距頁(yè)面左上角垂直方向的距離

鍵盤(pán)事件對(duì)象

屬性

key 當(dāng)前所按鍵的名稱
keyCode 當(dāng)前所按鍵的鍵盤(pán)碼打字游戲
altKey
ctrlKey
shiftKey
左37 上 38 右39 下40
e.target 獲取事件源

方法

preventDefault() 阻止瀏覽器的默認(rèn)行為
阻止冒泡型事件流的方法e.stopPropagation()

阻止a連接的默認(rèn)行為：

javascript:;
javascript:void(0);
js中preventDefault()

//html
<a href="" class="clearA">Google谷歌</a>
//js
let clearA=document.querySelector(".clearA");
    clearA.onclick=function (e) {
        e.preventDefault();
    }

事件流：

事件發(fā)生時(shí)會(huì)在元素節(jié)點(diǎn)與根節(jié)點(diǎn)之間按照順序傳播的事件。

兩種類型：

不明確：根節(jié)點(diǎn) 明確：當(dāng)前元素

冒泡型事件流:從明確的元素到不明確的元素。on+type；事件監(jiān)聽(tīng)false
捕獲型事件流:從不明確的元素到明確的元素。事件監(jiān)聽(tīng)true

三個(gè)階段：

捕獲階段
目標(biāo)階段
冒泡階段:阻止冒泡型事件流的方法e.stopPropaga

事件委派(事件代理)：

定義：將子元素的事件添加在父元素身上
原理：冒泡型事件流
獲取目標(biāo)元素：e.target (小程序上也會(huì)用到，a鏈接的打開(kāi)方式)
判斷目標(biāo)元素：
- 判斷內(nèi)容：e.target.innerHTML innerText
- 標(biāo)簽名：e.target.nodeName(大寫(xiě)的標(biāo)簽名)
- 是否包含屬性：e.target.hasAttribute(“屬性名”)
- 是否包含類名：e.target.classList.contains("類名")
應(yīng)用場(chǎng)景：
- 需要給大量元素添加事件時(shí)，提升代碼的運(yùn)行效率，減少對(duì)dom元素的操作
- 給動(dòng)態(tài)創(chuàng)建的元素添加事件的時(shí)候也要用事件委派

八、元素的尺寸和位置：

元素的真實(shí)寬度 obj.offsetWidth 內(nèi)容+內(nèi)填充+邊框
- 元素的真實(shí)高度 obj.offsetHeight 內(nèi)容+內(nèi)填充+邊框
距文檔頂部的距離：obj.offsetTop
距文檔左部的距離：obj.offsetLeft
有滾動(dòng)條的元素滾動(dòng)時(shí)距滾動(dòng)條頂部的距離：obj.scrollTop
有滾動(dòng)條的元素滾動(dòng)時(shí)距滾動(dòng)條左部的距離：obj.scrollLeft
```
window.onscroll=function(){
  obj.scrollTop
}
```

BOM 瀏覽器對(duì)象模型：

管理窗口與窗口之間的通信

window是核心對(duì)象

window
window.console 控制臺(tái)
window.history 歷史記錄對(duì)象
window.location 地址對(duì)象
window.navigator 導(dǎo)航器對(duì)象

window對(duì)象：

屬性：

innerWidth: 瀏覽器的寬度 ie9
innerHeight: 瀏覽器的高度 ie9
document.documentElement.clientWidth: 瀏覽器的寬度 ie8及以下
document.documentElement.clientHeigth: 瀏覽器的高度 ie8及以下

方法：

alert() 警告框
prompt() 提示用戶輸入的對(duì)話框
confirm() 有確定與取消的對(duì)話框
open() window.open(url) 在新的標(biāo)簽頁(yè)打開(kāi)新的窗口
close() window.close(); 關(guān)閉本窗口
時(shí)間函數(shù)，定時(shí)器：js中的一個(gè)異步
- 時(shí)間函數(shù)：間隔一定的時(shí)間，重復(fù)不斷地執(zhí)行代碼
```
setInterval(function(){
          
},1000)
```
- 清除時(shí)間函數(shù)：
```
window.clearInterval(t);
```
- 時(shí)間函數(shù)：間隔一定時(shí)間，執(zhí)行一次代碼
```
let t=setTimeOut(function(){
     
},1000)

 clearTimeOut(t);
```

history對(duì)象：

屬性：

length 記錄歷史記錄對(duì)象長(zhǎng)度

方法：

history.forward() history.go(1)前進(jìn)
history.back() history.go(-1)后退
history.go(0) 刷新

location對(duì)象：

屬性：

href 獲取或設(shè)置頁(yè)面的url地址
origin 協(xié)議域名端口號(hào)
host 域名端口號(hào)
hostname 域名
port 端口號(hào)
pathname 路徑
search 查詢字符串
hash 哈希
protocol 協(xié)議

方法：

reload() 重新加載本頁(yè)面
replace(url) 用指定的url替換本頁(yè)面

總結(jié)：

js刷新本頁(yè)面方法匯總：

history.go(0)
location.reload()

js跳轉(zhuǎn)頁(yè)面方法匯總：

window.open(url)
location.href=""
location.assign(url)

自己加的：

輪播圖：

初始化，選中一個(gè)點(diǎn)和一個(gè)圖
聲明一個(gè)全局變量num=0
時(shí)間函數(shù)
- 獲取元素
- 增加1
- 當(dāng)前的添加樣式，清除剩余的樣式
- 判斷num3

雙下標(biāo)輪播圖：

Ajax

是什么：

異步的Javascript和XML。創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)。

做什么：

發(fā)送和接收數(shù)據(jù)

    在不重新加載頁(yè)面的情況下發(fā)送請(qǐng)求給服務(wù)器。

    接受并使用從服務(wù)器發(fā)來(lái)的數(shù)據(jù)。

為什么：局部刷新，如果不采用ajax，整個(gè)頁(yè)面將會(huì)都刷新

同步：代碼從上到下執(zhí)行，到它就執(zhí)行。
異步：代碼不按照從上到下的順序執(zhí)行，觸發(fā)時(shí)才執(zhí)行。 ( 時(shí)間函數(shù)，事件，ajax )

ajax的使用：

核心對(duì)象：XMLHttpRequest，

同源策略：

協(xié)議，域名，端口相同

跨域：Access-Control-Allow-Origin

解決1：jsonp

原理：是在頁(yè)面中動(dòng)態(tài)的創(chuàng)建一個(gè)script標(biāo)簽對(duì)，因?yàn)樵陧?yè)面中src是沒(méi)有跨域問(wèn)題

與json沒(méi)有什么關(guān)系

script標(biāo)簽沒(méi)有跨域限制的特點(diǎn)。

是動(dòng)態(tài)的創(chuàng)建一個(gè)script標(biāo)簽對(duì)，

代理

在項(xiàng)目下創(chuàng)建一個(gè)vue.config.js

json

是什么：輕量級(jí)的數(shù)據(jù)交互格式，JavaScript對(duì)象的表示法。

本地存儲(chǔ)：

將一些數(shù)據(jù)存儲(chǔ)在客戶端

localstorage

特點(diǎn)：永久性存儲(chǔ)，5M-10M
應(yīng)用場(chǎng)景：1.數(shù)據(jù)存儲(chǔ)在本地，進(jìn)行第二次訪問(wèn)2.多窗口訪問(wèn)數(shù)據(jù)（同一域名）
屬性：
- localstorage.length 獲取長(zhǎng)度
- localstorage.key=value 添加數(shù)據(jù)
- localstorage.key 查詢數(shù)據(jù)
方法：
- localstorage.setItem(key,value) 添加
- localstorage.getItem(key) 查詢
- localstorage.removeItem(key) 移除
- localstorage.clear() 清除整個(gè) localstorage
數(shù)據(jù)格式轉(zhuǎn)換：
- JSON.stringify() 將對(duì)象轉(zhuǎn)換為字符串
- JSON.parse() 將字符串轉(zhuǎn)換為對(duì)象

Session Storage

特點(diǎn)：一次會(huì)話 5M-10M 短期存儲(chǔ)
方法：
- sessionStorage.setItem(key,value) 存
- sessionStorage.getItem(key) 取
- sessionStorage.removeItem(key) 刪除
- sessionStorage.clear() 清空
- sessionStorage.setItem.key=value 存

session:

插件

Echarts

swiper

layui

forpage

es6：

let const 聲明變量與常量
塊級(jí)作用域
剩余參數(shù)

接收實(shí)參，允許長(zhǎng)度不確定的實(shí)參作為一個(gè)數(shù)組
箭頭函數(shù)
給參數(shù)賦默認(rèn)值
模板字符串
class類
symbol數(shù)據(jù)類型即使一樣了，也認(rèn)為不一樣
Set數(shù)據(jù)結(jié)構(gòu)
- 成員唯一的數(shù)組，可以實(shí)現(xiàn)數(shù)組的去重
- add() delete() has() clear() keys() values() enteries() forEach() size
Map數(shù)據(jù)結(jié)構(gòu)
- 類似于對(duì)象，鍵值對(duì)的集合，鍵可以是任意數(shù)據(jù)類型
- Map與數(shù)組，Map與對(duì)象的轉(zhuǎn)換
解構(gòu)賦值

按模式匹配的方式，為變量進(jìn)行賦值
- 數(shù)組
- 對(duì)象 :let {obj1,obj2}={obj1:1,obj2,2}
- 字符串：let [a,b,c]="efg";
擴(kuò)展運(yùn)算符

將一個(gè)數(shù)組轉(zhuǎn)換為用逗號(hào)分隔的參數(shù)序列
- ...[1,2,3] 1 2 3
- {...obj,obj1} 對(duì)象的連接
Iterator遍歷器：
- 概念：提供了一個(gè)遍歷接口，讓不允許用for...of 進(jìn)行遍歷的數(shù)據(jù)類型添加Symbol.iterator屬性，從而可以使用for...of 進(jìn)行遍歷
- 普通對(duì)象：數(shù)字作為鍵名，添加length屬性; [Symbol.iterator]:Array.prototype.[Symbol.iterator]
- Array NodeList String Set Map

Ajax：

是什么

是異步的Javascript和XML；(Asynchronous JavaScript And XML)使用XML HttpRequest對(duì)象與服務(wù)器通信

做什么

發(fā)送和接受數(shù)據(jù)

怎么做

實(shí)例化XMLHttpRequest對(duì)象；

let ajax=new XMLHttpRequest();

用xml.open打開(kāi)鏈接：ajax.open("get/post",url,asyns)
在所有的準(zhǔn)備都做好了后，向服務(wù)器發(fā)送請(qǐng)求，使用send();
監(jiān)聽(tīng)請(qǐng)求數(shù)據(jù)的狀態(tài)，確定請(qǐng)求數(shù)據(jù)成功，onreadystatychange事件;

Ajax的使用：核心對(duì)象

同源策略：

跨域：Access-control-Allow_Origin

解決１：jsonp

json

輕量級(jí)的數(shù)據(jù)交互格式，ｊｓ對(duì)象的表示法

JSON.Stringify

同步：

異步：只有事件、時(shí)間函數(shù)、ajax是異步

發(fā)送方式：

GET方式：
POST方式：application／ｘ－ｗｗｗ

本地存儲(chǔ)：

講一些數(shù)據(jù)存儲(chǔ)在客戶端

localStorage

特點(diǎn)：保存的期限為永久性存儲(chǔ)；大小5MB-10MB之間
應(yīng)用場(chǎng)景：
1. 將數(shù)據(jù)存在本地，進(jìn)行第二次訪問(wèn)；
2. 多窗口訪問(wèn)數(shù)據(jù)（同一域名下使用）；
屬性：
- 長(zhǎng)度:localStorage.length 獲取長(zhǎng)度
- localStorage.key-value 添加與查詢數(shù)據(jù)；
- localStorage.key 查詢數(shù)據(jù)
方法：
- localStorage.setItem(key,value) 添加
- localStorage.getItem(key) 查詢;
- localStorage.removeItem(key) 刪除
- localStorage.clear() 清楚整個(gè)local Storage
數(shù)據(jù)格式轉(zhuǎn)換：
- JSON.stringify() 將對(duì)象轉(zhuǎn)換為字符串；
- JSON.parse() 將字符串轉(zhuǎn)換為對(duì)象；

異步編程：

setTimeout、事件、Ajax；

Ajax：

Ajax是指利用XMLHttpRequest對(duì)象，在客戶端向服務(wù)器端；

Ajax是用于創(chuàng)建快速動(dòng)態(tài)網(wǎng)頁(yè)的一門(mén)技術(shù)；

Ajax請(qǐng)求五部曲

實(shí)例化XMLHttpRequest()

let xml=new XMLHttpRequest();
使用open方法準(zhǔn)備發(fā)送請(qǐng)求

xml.open(請(qǐng)求類型，請(qǐng)求地址，是否異步)

xml.open("GET","http://www.baidu.com",'true')
使用send方法發(fā)送請(qǐng)求

xml.send()

使用inreadystatechange事件監(jiān)聽(tīng)當(dāng)前的請(qǐng)求狀態(tài)，確保成功以后進(jìn)行數(shù)據(jù)的渲染

xml.onreadystatechange=function(){
   //判斷請(qǐng)求成功
    if(xml.response===4){
    //判斷相應(yīng)成功
       if(xml.status===200){
            //保存數(shù)據(jù)
         let data = xml.response
       }
    }
}

在事件處理程序中判斷條件，進(jìn)行數(shù)據(jù)的渲染

請(qǐng)求狀態(tài)和相應(yīng)狀態(tài)

請(qǐng)求狀態(tài)

請(qǐng)求狀態(tài)被保存在xml對(duì)象的ready State屬性中，有5個(gè)值，分別對(duì)應(yīng)如下：
- 0：
- 1：
- 2：
- 3：
- 4：
響應(yīng)狀態(tài)

響應(yīng)狀態(tài)保存在xml的status屬性中，狀態(tài)碼分別如下：

ajax封裝

在Ajax請(qǐng)求中，請(qǐng)求的地址url，請(qǐng)求的方式type，極大的方便了頁(yè)面的請(qǐng)求

因?yàn)樾枰膮?shù)過(guò)多，所以不講參數(shù)一一傳遞，將他們整體放置到一個(gè)對(duì)象中，將對(duì)象作為參數(shù)進(jìn)行傳遞

obj={
  url="",   //請(qǐng)求地址
  data:"",  //請(qǐng)求參數(shù)
  dataType:"",  //請(qǐng)求數(shù)據(jù)格式
  type:"",  //請(qǐng)求方式
  async:"",  //是否支持異步
  success:callback,//請(qǐng)求成功以后要執(zhí)行的回調(diào)函數(shù)
  error:callback,  //請(qǐng)求失敗以后要執(zhí)行的回調(diào)函數(shù)
}
function  ajax(obj){
  
}

post請(qǐng)求參數(shù)需要放在send中進(jìn)行傳遞

數(shù)據(jù)獲取成功執(zhí)行success回調(diào)函數(shù)，需要判斷是否存在success；

ES6新增特性

Symbol

在ES6之前，對(duì)象的屬性名字必須是字符串，當(dāng)我們引用一個(gè)對(duì)象的時(shí)候，添加屬性時(shí)有可能會(huì)影響原先對(duì)象中的屬性，造成屬性名字的沖突，為了解決這個(gè)問(wèn)題，ES6中新增了Symbol獨(dú)一無(wú)二的值，用過(guò)Symbol生成的值可以保證不會(huì)重復(fù)。將這個(gè)值作為對(duì)象的鍵名字可以保證不沖突

每次調(diào)用一次Symbol（）都會(huì)生成一個(gè)獨(dú)一無(wú)二的值

let sym = Symbol();
//Symbol中可以接受一個(gè)字符串作為參數(shù)，用來(lái)區(qū)分Symbol；


let a = Symbol('aaa');
let b = Symbol('aaa');

console.log(a===b); //false

新增數(shù)據(jù)結(jié)構(gòu)

在ES6之前，數(shù)據(jù)結(jié)構(gòu)主要有數(shù)組和對(duì)象，ES6中戲贈(zèng)了set和map數(shù)據(jù)結(jié)構(gòu)

Set數(shù)據(jù)結(jié)構(gòu)

Set是一個(gè)構(gòu)造函數(shù)，使用Set數(shù)據(jù)結(jié)構(gòu)必須進(jìn)行new實(shí)例化

Set數(shù)據(jù)結(jié)構(gòu)中的成員的值都是獨(dú)一無(wú)二的；

set對(duì)象，map

set本身是一個(gè)構(gòu)造函數(shù)，類似于數(shù)組，里面的每個(gè)成員都是唯一的，

Set屬性：

size：返回Set構(gòu)造函數(shù)的成員個(gè)數(shù)

Set方法：

方法名	參數(shù)	返回值	描述
set.add()	被添加的成員	添加成員后的Set對(duì)象	給set結(jié)構(gòu)中添加傳入的成員
set.delete()	被刪除的成員	Boolean	刪除指定的set成員
set.has()	被判斷的成員	Boolean	判斷某個(gè)成員是否存在
set.clear()	無(wú)	undefined	清空所有的成員

set.add(); 一次只能添加一個(gè)，添加多個(gè)如：rex.add(1).add(2)；鏈?zhǔn)秸{(diào)用中只有add可以

set.add() 這個(gè)方法輸出后是一個(gè)對(duì)象所以可以鏈?zhǔn)秸{(diào)用
set.delete();
set.has();
set.clear();

Map數(shù)據(jù)結(jié)構(gòu)

也是一個(gè)構(gòu)造函數(shù)

Promise對(duì)象

Promise對(duì)象是最早提出的解決異步問(wèn)題的特性。

在Promise對(duì)象中其實(shí)封裝了在未來(lái)某一個(gè)階段會(huì)執(zhí)行的代碼，等到異步問(wèn)題處理完成以后再去執(zhí)行

在Promise對(duì)象中有then，catch等方法，用來(lái)處理成功或失敗以后的代碼

其實(shí)Promise對(duì)象就是將回調(diào)的過(guò)程封裝起來(lái)，讓整個(gè)回調(diào)看起來(lái)更加的整潔

Promise對(duì)象的實(shí)例化

new Promise((resolve,reject)=>{
    //resolve接受異步處理成功時(shí)的回調(diào)函數(shù)，
    //reject接受異步處理失敗時(shí)的回調(diào)函數(shù)
})

then();處理異步成功后需要執(zhí)行的代碼
catch()；用來(lái)接受異步失敗的信息
Promise.resolve()；將其他的數(shù)據(jù)轉(zhuǎn)為promise對(duì)象
Promise.all()；將多個(gè)promise對(duì)象轉(zhuǎn)為一個(gè)promise對(duì)象

本地存儲(chǔ)

cookie

標(biāo)題	介紹
存儲(chǔ)方式	鍵值對(duì)的方式存儲(chǔ)
存儲(chǔ)大小	存儲(chǔ)內(nèi)容不得超過(guò)4K，最多可存儲(chǔ)20個(gè)cookie
訪問(wèn)	不同域名不可以互相訪問(wèn)cookie
清理機(jī)制	IE呵呵Opera定期將不常使用的進(jìn)行清理，也可以設(shè)置存儲(chǔ)期限，F(xiàn)ireFox會(huì)隨機(jī)清理cookie
缺陷	每次http請(qǐng)求都會(huì)攜帶cookie，浪費(fèi)帶寬
應(yīng)用	購(gòu)物車、登錄狀態(tài)