簡(jiǎn)介
ECMAScript是JavaScript的標(biāo)準(zhǔn)舟肉，JavaScript實(shí)現(xiàn)了ECMAScript包竹，ECMAScript規(guī)范了JavaScript燕酷。
JavaScript體系
- 語言核心
- DOM
- BOM
JavaScript書寫位置
body里面寫script標(biāo)簽，例如：
<body>
<script>
alert('hello, world');
</script>
</body>
或者
<script src=" .js" type="text/javascript" charset="utf-8"></script>
認(rèn)識(shí)輸出周瞎、輸入語句
alert( ) 語句 彈窗
console.log( ) 語句 控制臺(tái)輸出
比如：
alert('haha');
alert( ) 是內(nèi)置函數(shù)苗缩，函數(shù)就是功能的封裝，調(diào)用函數(shù)需要使用小括號(hào)声诸。
'haha' 是函數(shù)的參數(shù)酱讶，因?yàn)槭亲址砸靡?hào)包裹彼乌。
console.log('test');
console是js的內(nèi)置對(duì)象泻肯，通過 打點(diǎn) 可以調(diào)用它內(nèi)置的 log 方法渊迁。
所謂方法就是對(duì)象能夠調(diào)用的函數(shù)。
var input = prompt('請(qǐng)輸入內(nèi)容');
輸入語句 prompt( ) 函數(shù)灶挟，彈出框輸入琉朽，輸入的內(nèi)容會(huì)轉(zhuǎn)為字符串類型。
學(xué)會(huì)處理報(bào)錯(cuò)
常見兩個(gè)錯(cuò)誤：
Uncaught SyntaxError: Invalid or unexpected token
未捕獲的語法錯(cuò)誤：不合法或錯(cuò)誤的符號(hào)稚铣。
Uncaught ReferenceError: a is not defined
未捕獲的引用錯(cuò)誤：a沒有被定義箱叁。
函數(shù)名拼寫錯(cuò)誤也會(huì)引發(fā) ReferenceError。
控制臺(tái)
控制臺(tái)也是一個(gè)REPL環(huán)境惕医，可以使用它臨時(shí)測(cè)試耕漱。
REPL：read 讀 eval 執(zhí)行 print 打印 loop 循環(huán)
變量
變量能儲(chǔ)存計(jì)算結(jié)果 或 表示一個(gè)值；
變量不是數(shù)值本身抬伺，只是儲(chǔ)存值的容器螟够。
定義變量
var 關(guān)鍵字， 定義變量后沛简，就可以使用了齐鲤，可以用等號(hào)賦值。如果沒有負(fù)值椒楣，默認(rèn)值為undefined给郊。可以同時(shí)聲明多個(gè)變量捧灰，用逗號(hào)隔開淆九。
var a;
console.log(a); //此時(shí)打印undefined
a = 7;
var b,
c,
d;
變量的合法命名
變量命名可以用多種風(fēng)格，例如：
- 小駝峰命名法：首字母小寫毛俏，后面每個(gè)單詞頭字母大寫炭庙。
- C風(fēng)格命名法：每個(gè)單詞用下劃線分隔。
變量命名符合JS標(biāo)識(shí)符命名規(guī)則煌寇，變量焕蹄、函數(shù)、類名阀溶、對(duì)象的屬性等都要遵守腻脏。
標(biāo)識(shí)符命名規(guī)則
- 只能由字母、數(shù)字银锻、下劃線永品、美元符號(hào)$組成，不能以數(shù)字開頭击纬。
- 不能是關(guān)鍵字或保留字鼎姐，例如float等。
- 變量名大小寫敏感，例如a和A不同炕桨。
全局變量聲明提升
全局預(yù)編譯
- 生成AO對(duì)象饭尝。
- 找變量聲明，將變量名作為GO的屬性名谋作，值為undefined芋肠。
- 在函數(shù)體里找函數(shù)聲明。
數(shù)據(jù)類型
- 基本數(shù)據(jù)類型：number遵蚜、string帖池、boolean、undefined吭净、null
- 復(fù)雜數(shù)據(jù)類型：Array睡汹、function、object 等...
typeof 運(yùn)算符
- 使用 typeof 運(yùn)算符可以檢測(cè)值或變量的類型寂殉，檢測(cè)復(fù)雜類型可能會(huì)有出入囚巴。
- typeof 返回值是字符串類型的值。
- typeof 檢測(cè)5種基本類型的的結(jié)果友扰，除了null會(huì)返回object外彤叉，其他同名。
- typeof 可接未定義的變量不會(huì)報(bào)錯(cuò)村怪。
基本數(shù)據(jù)類型
number 數(shù)字類型
所有數(shù)字不分大小秽浇、不分整數(shù)小數(shù)、不分正負(fù)甚负，都是數(shù)字類型柬焕。
零點(diǎn)幾的0可以省略。
科學(xué)計(jì)數(shù)法：3e7 => 3*10?梭域。
不同進(jìn)制的數(shù)字
二進(jìn)制數(shù)值以 0b 開頭：0b10 => 2斑举；
八進(jìn)制數(shù)值以 0 開頭：017 => 15;
十六進(jìn)制數(shù)值以 0x 開頭。
一個(gè)特殊的數(shù)字類型值NaN
- not a number 病涨，不是一個(gè)數(shù)富玷，但它是一個(gè)數(shù)值類型的值。
- 0除以0的結(jié)果是 NaN 既穆；運(yùn)算結(jié)果不是數(shù)字的數(shù)學(xué)運(yùn)算赎懦，返回值都是NaN。任何涉及NaN的運(yùn)算都返回NaN循衰。
- NaN 不自等，即 NaN == NaN; 返回 false褐澎。
- 用isNaN( ) 函數(shù)可以用來判斷變量值是否為NaN会钝，返回值是boolean布爾值，函數(shù)里的參數(shù)也會(huì)隱式轉(zhuǎn)換為數(shù)字類型，所以判斷不了undefined迁酸。
一個(gè)特殊的數(shù)字類型值Infinity
- Infinity 也是數(shù)值類型的的值先鱼，正數(shù)除以0得Infinite，負(fù)數(shù)除以0得-Infinity奸鬓。
string 字符串類型
- 字符串要用引號(hào)包裹焙畔，雙引號(hào)或者單引號(hào)均可串远。
- 加號(hào)可以用來拼接多個(gè)字符串（拼串兒）彪标。
- 直接書寫閉合的引號(hào)可得到空串。
字符串的length屬性：表示字符串的長(zhǎng)度漂彤。
字符串的常用方法：
| 方法名 | 功能 |
|---|---|
| charAt( ) | 得到指定位置字符 |
| substring( ) | 提取子串 |
| substr | 提取子串 |
| slice | 提取子串 |
| toUpperCase | 將字符串變?yōu)榇髮?/td> |
| toLowerCase | 將字符串變?yōu)樾?/td> |
| indexOf | 檢索字符串 |
charAt( )方法
- 可以得到指定位置的字符挫望，比如：
'abcdef'.charAt(0)返回a。 - 得到指定位置字符串還可以用方括號(hào)方法确镊，例如：
'abcdef'[3]返回d士骤。就是直接讀取可遍歷對(duì)象方括號(hào)里寫索引。 - charCodeAt() 返回相應(yīng)索引號(hào)的字符ASCII值
substring( )方法
sub 子蕾域，string字符串拷肌。
substring(a,b) 得到從 a 開始到 b 結(jié)束（不包括 b 處）的子串。
如果省略第二個(gè)參數(shù)旨巷，返回的子串會(huì)一直到字符串的結(jié)尾巨缘。
參數(shù)會(huì)自動(dòng)從小排到大，比如 (5,3) 會(huì)自動(dòng)變?yōu)?(3,5)采呐。（慎用若锁，可讀性差）
substr( )方法
substr(a,b) 得到從a開始的長(zhǎng)度為b的子串。
a可以是負(fù)數(shù)斧吐，表示倒數(shù)位置又固。b不能是負(fù)數(shù)，否則會(huì)返回空串煤率。
slice( )方法
slice(a,b) 得到從a開始到b結(jié)束（不包括b處）的子串仰冠。
a 可以是負(fù)數(shù)，表示倒數(shù)蝶糯，倒數(shù)的下標(biāo)從-1開始洋只。
參數(shù) a 必須小于參數(shù) b。
toUpperCase( )轉(zhuǎn)為大寫昼捍，toLowerCase( )轉(zhuǎn)為小寫
indexOf( )方法
返回某個(gè)指定的字符串值再字符串中首次出現(xiàn)的位置（索引值）识虚。
如果要檢索的字符串沒有出現(xiàn)，則返回-1妒茬。
傳入的參數(shù)是字符串担锤，例如'abcdef'.indexOf('de') 返回3。
此方法還可以傳入第二個(gè)參數(shù)乍钻，代表開始檢索肛循、搜索的索引位置蛛株。
boolean 布爾類型
小知識(shí)：布爾（Boole.George）英國(guó)19世紀(jì)數(shù)學(xué)家及邏輯學(xué)家。
布爾類型 值只有兩個(gè)：true 和 false 育拨，分別表示真假。
undefined 類型
undefinded 又是值欢摄，又是一種類型熬丧。
undefined 是全局對(duì)象上的一個(gè)屬性，window.undefined
不可寫 writable: false怀挠，比如window.undefined = 1無效析蝴。
不可配置 configurable: false，比如delete window.undefined無效绿淋。
不可枚舉 enumerable: flase 闷畸，比如
for(var k in window){
if(k === undefined){
console.log(k);
}
}
不打印內(nèi)容
不可重新定義 cannot redefine property: undefined;
系統(tǒng)會(huì)給一個(gè)未賦值的變量自動(dòng)賦值為undefined，類型也是undefined 吞滞。
函數(shù)內(nèi)部不寫返回值的時(shí)候佑菩，返回的也是一個(gè)undefined。
在函數(shù)內(nèi)部可以把undefined當(dāng)作一個(gè)變量名來用裁赠，但盡量別用殿漠。例如：
function test(){
var undefined = 1;
console.log(undefined);
}
test();
會(huì)打印1
void(0) 會(huì)返回undefined
null
null是基本數(shù)據(jù)類型的值，typeof返回類型是object佩捞。
代表空绞幌、空對(duì)象。
可用于對(duì)象銷毀一忱，數(shù)組銷毀莲蜘，事件清空。
顯式類型轉(zhuǎn)換
其他類型 轉(zhuǎn) 數(shù)字
- 使用 Number( ) 函數(shù)
字符串 → 數(shù)字：純數(shù)字字符串能變?yōu)閿?shù)字帘营，不是純數(shù)字的轉(zhuǎn)為NaN票渠，空串轉(zhuǎn)為0.
布爾值 → 數(shù)字：true轉(zhuǎn)為1，false轉(zhuǎn)為0.
undefined → 數(shù)字：undefined轉(zhuǎn)為NaN仪吧。
null → 數(shù)字：null轉(zhuǎn)為0庄新。 - 使用 parseInt( ) 函數(shù)。
用在字符串上時(shí)：將自動(dòng)截?cái)嗟谝粋€(gè)非數(shù)字字符之后的所有字符薯鼠，點(diǎn)也算择诈，不會(huì)四舍五入。 - 使用 parseFloat( ) 函數(shù)出皇。
將字符串轉(zhuǎn)為浮點(diǎn)數(shù)羞芍，只會(huì)識(shí)別到第一個(gè)點(diǎn)。
其他類型 轉(zhuǎn) 字符串
- 使用 String( ) 函數(shù)郊艘，變?yōu)殚L(zhǎng)得相同的字符串荷科。
- 使用 toString( ) 方法唯咬，數(shù)字使用 toString 要加括號(hào)，例如
(7).toString();
其他類型 轉(zhuǎn) 布爾值
使用 Boolean( ) 函數(shù)畏浆。
數(shù)字→布爾：除了0和NaN是false胆胰，其他true。
字符串→布爾：空窗false刻获，其他true蜀涨。
undefined和null：轉(zhuǎn)成布爾值都是false。
表達(dá)式 和 運(yùn)算符 和 隱式類型轉(zhuǎn)換
表達(dá)式
表達(dá)式蝎毡，由運(yùn)算元和運(yùn)算符構(gòu)成厚柳，并產(chǎn)生運(yùn)算結(jié)果的語法結(jié)構(gòu)。
表達(dá)式的種類有：算術(shù)沐兵、關(guān)系别垮、邏輯、賦值扎谎、綜合碳想。
算術(shù)運(yùn)算符
| 符號(hào) | 功能 |
|---|---|
| + | 加法、正數(shù)毁靶、連字符 |
| - | 減法移袍、負(fù)數(shù) |
| * | 乘法 |
| / | 除法 |
| % | 取余 |
取余，也叫求模運(yùn)算老充，用百分號(hào) % 表示葡盗，小數(shù)模大數(shù)得小數(shù)。
乘除余運(yùn)算優(yōu)先級(jí)高于加減運(yùn)算啡浊。
算術(shù)運(yùn)算符的隱式類型轉(zhuǎn)換
如果參與數(shù)學(xué)運(yùn)算的值不是數(shù)值型觅够，會(huì)自動(dòng)轉(zhuǎn)換為數(shù)值型然后運(yùn)算，加號(hào)例外因?yàn)橛衅创δ芟锵Ｆ浔举|(zhì)是內(nèi)部調(diào)用 Number( ) 函數(shù)喘先，例如：
true + true；
//Number(true) + Number(true) 然后返回一個(gè)2
+'1' //會(huì)返回一個(gè)數(shù)字1
3*'2天' //會(huì)返回NaN
算術(shù)運(yùn)算符中浮點(diǎn)運(yùn)算問題IEEE754
在JavaScript中廷粒，有些浮點(diǎn)運(yùn)算不是很精準(zhǔn)窘拯，因?yàn)椴捎玫氖荌EEE754二進(jìn)制浮點(diǎn)數(shù)算術(shù)標(biāo)準(zhǔn)，會(huì)產(chǎn)生“精度丟失”問題坝茎。
解決方法：可以用數(shù)字的 toFixed() 方法保留指定的小數(shù)位數(shù)涤姊，類型會(huì)變成字符串。例如：
(3.141592654).toFixed(2)
其他運(yùn)算的Math方法
-
冪和開根：
冪和開根沒有運(yùn)算符嗤放，需調(diào)用Math對(duì)象的方法實(shí)現(xiàn)思喊。
冪：Math.pow(底數(shù),次方數(shù));
開方：Math.sqrt(開根數(shù)); -
向上取整和向下取整：（相對(duì)數(shù)軸而言）
向上取整：Math.ceil(取整的數(shù));
向下取整：Math.floor(取整的數(shù)); -
隨機(jī)數(shù)：
Math.random( );得到0到1的隨機(jī)小數(shù)。（大于等于0小于1）
想得到[a,b]區(qū)間的整數(shù)，公式為：
parseInt(Math.random()*(b-a+1))+a;
封裝成函數(shù)就是
function getRandom(min,max){
return parseInt(Math.random()*(max-min+1))+min;
}
-
絕對(duì)值：
Math.abs();
關(guān)系運(yùn)算符
| 符號(hào) | 意義 |
|---|---|
| > | 大于 |
| < | 小于 |
| >= | 大于或等于 |
| <= | 小于或等于 |
| == | 等于 |
| != | 不等于 |
| === | 全等于 |
| !== | 不全等于 |
進(jìn)行關(guān)系運(yùn)算符運(yùn)算候的結(jié)果返回值是boolean布爾值爵嗅。
除了全等和不全等以外误墓，其他關(guān)系運(yùn)算符都會(huì)隱式轉(zhuǎn)換兩邊值為數(shù)字類型浅浮。
例如：
1 == '1'; //返回true
undefined == null; //這是個(gè)例外，undefined轉(zhuǎn)數(shù)字是NaN的惫恼，但返回true
undefined === null; //返回false
NaN == NaN; //返回false棚贾，NaN不自等酥宴，所以要用isNaN( ) 函數(shù)判斷
沒有數(shù)學(xué)書寫上的連比3<=16<=15纲辽，要連比只能用邏輯運(yùn)算符
邏輯運(yùn)算符
| 符號(hào) | 意義 |
|---|---|
| ! | 非 |
| && | 與 |
| || | 或 |
! 非
- 也可以稱為“置反運(yùn)算”斜纪。
- 是一個(gè)“單目操作符”，只需要一個(gè)操作數(shù)文兑。
- 置反運(yùn)算的結(jié)果一定是布爾值，要置放的值會(huì)先隱式轉(zhuǎn)換為布爾值腺劣。所以用雙非
!!可以用來隱式轉(zhuǎn)換一個(gè)值為布爾值绿贞。
&& 與運(yùn)算
找假返回假，如果沒有假則返回最后一個(gè)真橘原。（都真就真）
|| 或運(yùn)算
找真返回真籍铁，如果沒有真則返回最后一個(gè)假。（有真就真）
邏輯運(yùn)算符優(yōu)先級(jí)：非>與>或
賦值表達(dá)式
賦值運(yùn)算符
| 符號(hào) | 意義 |
|---|---|
| = | 賦值 |
| += | 快速賦值 |
| -= | 快速賦值 |
| *= | 快速賦值 |
| /= | 快速賦值 |
| %= | 快速賦值 |
| ++ | 自增運(yùn)算 |
| -- | 自減運(yùn)算 |
賦值運(yùn)算也會(huì)產(chǎn)生值趾断，例如：
var a;
console.log(a=7);
//a=7會(huì)返回7拒名，所以會(huì)打印7而不是a=7。
所以可以連續(xù)使用賦值運(yùn)算（實(shí)際開發(fā)禁止使用）芋酌，例如：
var a,b,c;
a=b=c=7;
//先c=7返回7增显，再b=c=77，再a=b=c=77
快速賦值：+= 脐帝、-= 同云、*= 、 /= 堵腹、%=
在原數(shù)值基礎(chǔ)上進(jìn)一步運(yùn)算炸站。
自增自減：++、--
自身基礎(chǔ)上加一或減一疚顷。
a++和++a區(qū)別：a++先用再加旱易，++a先加再用。例如：
var n1=1,n2=2;
var n3 = (n1++)+n2
//此時(shí)n3等于3
綜合表達(dá)式
綜合運(yùn)算順序：非運(yùn)算>數(shù)學(xué)運(yùn)算>關(guān)系運(yùn)算>邏輯運(yùn)算 （非數(shù)關(guān)邏）
流程控制語句
條件語句：if腿堤、if elseif else阀坏、switch、三元運(yùn)算符笆檀。
循環(huán)語句：for全释、while、break和continue误债、do while浸船。
條件語句
if語句
if(條件){
語句塊1妄迁，當(dāng)條件為真時(shí)執(zhí)行
}else{
語句塊2，當(dāng)條件為假時(shí)執(zhí)行
}
if語句執(zhí)行流程圖
graph TD
A[程序執(zhí)行] -->| | B(執(zhí)行)
B --> C{測(cè)試條件}
C -->|條件1| D[語句塊1]
C -->|條件2| E[語句塊2]
- if語句中的else可以省略
- 如果if語句體中只有一行語句李命，可以省略大括號(hào)和換行登淘，且結(jié)尾加分號(hào)
else if 否則如果
else if( ) 條件分支“暗含”不符合之前的所有條件。
if( 測(cè)試表達(dá)式1){
當(dāng)測(cè)試表達(dá)式1為true時(shí)執(zhí)行
}else if(測(cè)試表達(dá)式2){
當(dāng)測(cè)試表達(dá)式2為true時(shí)執(zhí)行
}else{
所有表達(dá)式為false時(shí)執(zhí)行
}
if 語句算法題
第一題： 判斷水仙花數(shù)封字。
如何拆位黔州？
- 數(shù)學(xué)方法：百位是原數(shù)值除以100取整。十位是原數(shù)字除以10取整阔籽，再與10求模流妻。個(gè)位是原數(shù)字與10求模
- 字符串方法：直接將原數(shù)字變?yōu)樽址缓笫褂胏harAt( )方法笆制。
第二題： 游樂園門票計(jì)算绅这。
| 年齡大于等于10 | 年齡小于10歲 | |
|---|---|---|
| 平日 | 300 | 140 |
| 周末 | 500 | 210 |
switch 語句
用途：當(dāng)一個(gè)變量被分類討論的情形。
- switch( ) 括號(hào)內(nèi)一般是一個(gè)變量名在辆，這個(gè)變量被分類討論证薇。
- case表示情況，后面直接跟一個(gè)值匆篓，程序會(huì)將這個(gè)值依次與switch括號(hào)內(nèi)的變量匹配浑度，如果全等，則執(zhí)行case后的語句鸦概，多條case可以共用一個(gè)語句體箩张。
- default 表示默認(rèn)情況。
- break 跳出switch語句窗市。
三元運(yùn)算符
條件表達(dá)式 ? 表達(dá)式1 : 表達(dá)式2
當(dāng)條件為真執(zhí)行1伏钠，為假執(zhí)行2。
循環(huán)語句
for 循環(huán)語句
for的小括號(hào)有三個(gè)表達(dá)式：
表達(dá)式1：for循環(huán)內(nèi)可用的變量谨设，循環(huán)變量一般定為i熟掂，意為iterator迭代器。
表達(dá)式2：只要這條返回true扎拣，就會(huì)繼續(xù)執(zhí)行后面的語句塊赴肚。
表達(dá)式3：一般用來更新循環(huán)變量。
for循環(huán)執(zhí)行機(jī)理：
for(var i=1①; i<=10②; i++④){
console.log(i)③;
}
//①→②→③→④
也就是說二蓝，for循環(huán)小括號(hào)內(nèi)的第三條語句誉券，是先執(zhí)行中括號(hào)內(nèi)的語句塊，再執(zhí)行的刊愚。
for循環(huán)算法題
- 累加器
- 1到100哪個(gè)數(shù)除3余1踊跟，除4余2，除5余3.（窮舉法）
while 循環(huán)語句
是一種“不定范圍”循環(huán)。先不指定循環(huán)開始和結(jié)束范圍商玫。只要滿足測(cè)試條件箕憾，就一直執(zhí)行循環(huán)體。
while(測(cè)試條件){
循環(huán)執(zhí)行的語句塊;
}
循環(huán)注意： 當(dāng)循環(huán)條件終止值與更新的循環(huán)體內(nèi)的值不是同一個(gè)時(shí)拳昌，當(dāng)要求的值是循環(huán)值時(shí)袭异，注意“出一錯(cuò)誤”
循環(huán)語句中的break和continue
執(zhí)行 break; 會(huì)立即終止循環(huán)。
執(zhí)行 continue; 會(huì)跳過循環(huán)中的一個(gè)迭代炬藤，跳過其中一次循環(huán)御铃，這一次循環(huán)體內(nèi)的continue后面的其他語句將跳過執(zhí)行一次。
do while 循環(huán)
先執(zhí)行一次循環(huán)體沈矿，再判斷測(cè)試條件是否滿足上真。
do{
循環(huán)執(zhí)行的語句塊（會(huì)先執(zhí)行一次）;
}while(循環(huán)執(zhí)行條件)
while循環(huán)算法題 猜數(shù)字
流程語句經(jīng)典算法題
可以先用偽代碼寫下解決思路，再翻譯成js語法羹膳。
累加器與累乘器
- 計(jì)算 3/2 + 4/3 + 5/4 + 6/5 + ...... + (n+1)/n 的結(jié)果
- 由用戶輸入數(shù)字n睡互，計(jì)算n的階乘。
for(var i=n; i>=1; i--){result*=i;}result要從1開始- 圓周率可以由萊布尼茨級(jí)數(shù)公式計(jì)算溜徙，用戶輸入n，計(jì)算圓周率Π犀填。
Π/2= 1 + 1/3 + 1*2/3*5 + 1*2*3/3*5*7 + 1*2*...n/3*5*...(2n-1)
窮舉法
- 100以內(nèi)蠢壹，能整除3也能整除5的數(shù)。
- 輸入一個(gè)數(shù)九巡，在控制臺(tái)顯示這個(gè)數(shù)的全部約數(shù)图贸。
- 尋找全部水仙花數(shù)。（每個(gè)數(shù)位的立方和等于它本身）冕广。
綜合算法題
- 尋找100以內(nèi)的質(zhì)數(shù)疏日。（用到給外層for循環(huán)套label，然后用continue label）
- 雞兔同籠撒汉，35頭沟优，94足。
數(shù)組
Array 睬辐，存儲(chǔ)一組值挠阁。
如何定義數(shù)組
- 使用方括號(hào)：
var arr = ['A','B','C']; - 使用 new Array 構(gòu)造函數(shù)：
var arr = new Array('A','B','C');
當(dāng)new Array函數(shù)只傳入一個(gè)數(shù)字時(shí)，則定義一個(gè)長(zhǎng)度為n的數(shù)組溯饵。
數(shù)組的每一項(xiàng)都有下標(biāo)侵俗，下標(biāo)從0開始。
使用 數(shù)組變量 接方括號(hào)中寫下標(biāo) 的形式丰刊，可訪問數(shù)組項(xiàng)隘谣，例如：a[0];
當(dāng)下標(biāo)越界，會(huì)返回undefined而不會(huì)報(bào)錯(cuò)啄巧。
數(shù)組的length屬性表示長(zhǎng)度寻歧，數(shù)組的最后一項(xiàng)的下標(biāo)時(shí)length-1
數(shù)組是可讀可寫的掌栅，如果更改的項(xiàng)下標(biāo)越界，則會(huì)創(chuàng)造這項(xiàng)熄求。
數(shù)組的遍歷：
for (var i=0;i<arr.length; i++){
arr[i];
}
數(shù)組的不停寫入渣玲，可用while循環(huán)（數(shù)組自增）：
var arr = [];
while( ){
arr[arr.length]=
}
判斷是不是數(shù)組
數(shù)組用typeof 檢測(cè)結(jié)果是object，可用 Array.isArray( ); 方法檢測(cè)弟晚。
數(shù)組相關(guān)遍歷算法題
- 求數(shù)組中每一項(xiàng)的總和忘衍、平均數(shù)。
- 求數(shù)組項(xiàng)的最大值和最小值卿城。
數(shù)組的頭尾操作方法
| 方法 | 功能 |
|---|---|
| push( ) | 在尾部插入新項(xiàng) |
| pop( ) | 在尾部刪除 |
| unshift( ) | 在頭部插入 |
| shift( ) | 在頭部刪除 |
push( ) 方法：推入新項(xiàng)枚钓，如果要推入多項(xiàng)，用逗號(hào)隔開瑟押。
pop( ) 方法：刪除數(shù)組中的最后一項(xiàng)搀捷，該方法會(huì)返回被刪除的項(xiàng)，可用一個(gè)變量接收多望。
unshift與shift特性與push嫩舟、pop相似。以上方法均會(huì)改變?cè)瓟?shù)組
數(shù)組的其他方法
會(huì)改變數(shù)組的：
| 方法（會(huì)改變?cè)瓟?shù)組） | 功能 |
|---|---|
| reverse | 逆轉(zhuǎn)排序 |
| splice | 切割 |
| sort | 改序 |
reverse( ) 方法
用于將數(shù)組中的全部項(xiàng)順序置反怀偷。
splice( ) 方法
用于替換數(shù)組中的指定項(xiàng)家厌。用法:
arr.splice(從下標(biāo)為n的項(xiàng)開始 , 替換多少項(xiàng) , 替換的新項(xiàng)可多項(xiàng))；
當(dāng)?shù)诙€(gè)參數(shù)為0時(shí)椎工，就會(huì)變?yōu)椴迦牍δ堋?br>
當(dāng)?shù)谌齻€(gè)參數(shù)不寫時(shí)饭于，就會(huì)變?yōu)閯h除功能。
該方法會(huì)返回被刪除的項(xiàng)組成的數(shù)組维蒙。
sort( ) 方法
arr.sort( );
sort開放了接口掰吕，可傳入一個(gè)函數(shù) arr.sort(function(){ });
- 必須寫兩形參！
arr.sort(function(a,b){ }); - 看返回值
1)返回值為正時(shí)颅痊，后面的數(shù)放前邊殖熟。
2)返回值為負(fù)時(shí)，前面的數(shù)放前邊斑响。
3)返回值為0時(shí)吗讶，不做操作。
自己總結(jié)就是恋捆，正數(shù)交換位置照皆，負(fù)數(shù)不換（正交負(fù)不換），所以：
arr.sort(function(a,b){return a-b;}) //升序
arr.sort(function(a,b){return b-a;}) //降序
arr.sort(function(a,b){return Math.random()-0.5;}) //亂序
不改變數(shù)組的方法：
| 方法（不改變?cè)瓟?shù)組） | 作用 |
|---|---|
| slice( ) | 截取數(shù)組 |
| concat( ) | 連接多個(gè)數(shù)組 |
數(shù)組的slice方法：
不會(huì)改變?cè)瓟?shù)組沸停，用于得到子數(shù)組膜毁。
slice(a,b) 截取從下標(biāo)為a開始，到下標(biāo)為b（不包括b）結(jié)束。
如果不傳第二個(gè)參數(shù)瘟滨。就會(huì)截取從a開始的后面所有項(xiàng)候醒。參數(shù)允許為負(fù)數(shù)。
數(shù)組的concat方法： 合并連接多個(gè)數(shù)組杂瘸，不改變?cè)瓟?shù)組倒淫。
數(shù)組與字符串間轉(zhuǎn)換的方法，以及更多通性
數(shù)組轉(zhuǎn)字符串： join( )方法败玉，將數(shù)組改變?yōu)樽址愋筒⒁詤?shù)作為連接符輸出敌土，不傳參數(shù)默認(rèn)逗號(hào)。傳遞的參數(shù)要用引號(hào)括起來运翼。
字符串轉(zhuǎn)數(shù)組： split( )方法返干，以什么字符拆分字符串，參數(shù)為空時(shí)將拆為一個(gè)字符串血淌。
更多相關(guān)性：
- 可以使用方括號(hào)寫下標(biāo)的形式訪問某個(gè)字符矩欠，等價(jià)于charAt( )方法。
- 字符串的一些算法問題可以改為數(shù)組解決悠夯。
indexOf( ) 和 includes( )
indexOf( ) 方法：搜索數(shù)組中的元素并返回下標(biāo)數(shù)癌淮，如果不存在返回-1。
includes( ) 方法：判斷數(shù)組是否包含一個(gè)元素沦补，返回布爾值乳蓄。
數(shù)組經(jīng)典算法題
冒泡排序：
for(var i=1; i<=arr.length-1;i++){
for(var j=0; j<arr.length-i; j++){
// j多功能擔(dān)任遍歷數(shù)組的下標(biāo)
if (arr[j]>arr[j+1]) {
//因?yàn)閖是訪問不到最后一位的，j<arr.length-i策彤，j最大只能到每一趟的倒數(shù)第二位栓袖。但是因?yàn)樵趇f里面比較的是[j+1]位匣摘，所以第一輪剛好能訪問到最后一位
var temp = arr[j];
arr[j] = arr[j+1];
arr[j+1] = temp;
}
}
數(shù)組去重：
思路：準(zhǔn)備一個(gè)空數(shù)組店诗，遍歷原數(shù)組，如果遍歷到的項(xiàng)新數(shù)組里沒有（用indexOf判斷或includes判斷音榜，后者是ES6）庞瘸，則push進(jìn)去。
function unique(arr){
var newArr = [];
for(var i=0;i<arr.length;i++){
if(newArr.indexOf(arr[i])===-1){
newArr.push(arr[i]);
}
}
return newArr;
}
隨機(jī)樣本：
思路：準(zhǔn)備一個(gè)空數(shù)組赠叼，遍歷原數(shù)組擦囊，隨機(jī)選擇一項(xiàng)，推入新數(shù)組嘴办，并刪除這項(xiàng)瞬场。
二維數(shù)組
- 數(shù)組里的項(xiàng)是數(shù)組時(shí)，就形成了二維數(shù)組
- 二維數(shù)組可以看作是矩陣涧郊。書寫上最好寫成矩陣贯被。
- 遍歷二維數(shù)組需要2層循環(huán)，n維數(shù)組則需要n層。
數(shù)組高階函數(shù)map() reduce() filter()
map方法接收一個(gè)函數(shù)作為參數(shù)彤灶，這個(gè)函數(shù)會(huì)接收三個(gè)參數(shù)：參數(shù)一是這個(gè)數(shù)組里的每一項(xiàng)看幼，參數(shù)二是每一項(xiàng)的下標(biāo)索引值，參數(shù)三是調(diào)用map方法的這個(gè)數(shù)組本身幌陕，return的是指定的值進(jìn)一個(gè)新的數(shù)組诵姜。最后map方法返回這個(gè)新的數(shù)組
var arr = [{name:'ming',age:18},{name:'he77',age:20},{name:'qi',age:24}]
var newArr = arr.map(function(item,index,arrSelf){
console.log(item,index,arrSelf)
return item.age
})
console.log(newArr) //[18,20,24]
reduce方法接收一個(gè)函數(shù)作為參數(shù)以及一個(gè)“開始計(jì)算的初始值”，這個(gè)函數(shù)會(huì)接收兩個(gè)參數(shù)：參數(shù)一是上一次return的結(jié)果搏熄，參數(shù)二是這一次參與計(jì)算的數(shù)據(jù)棚唆。不斷的計(jì)算最后return一個(gè)值。最后reduce方法返回這個(gè)值
var arr = [{name:'ming',age:18},{name:'he77',age:20},{name:'qi',age:24}]
var newValue = arr.reduce(function(previous,joining){
console.log(previous,joining)
return previous+joining.age
},0)
console.log(newValue) //62
filter方法接收一個(gè)函數(shù)作為參數(shù)搬卒，這個(gè)函數(shù)的參數(shù)會(huì)接受一個(gè)參數(shù)瑟俭，參數(shù)一是這個(gè)數(shù)組的每一項(xiàng)，return符合判斷為true的數(shù)據(jù)進(jìn)一個(gè)新數(shù)組契邀，最后filter方法返回這個(gè)新數(shù)組摆寄。
var arr = [{name:'ming',age:18},{name:'he77',age:20},{name:'qi',age:24}]
var newArr = arr.filter((item)=>{return item.name.includes('i')})
console.log(newArr) //[{name:'ming',age:18},{name:'qi',age:24}]
引用類型和基本類型
基本類型：number、string坯门、boolean微饥、undefined、null
引用類型：array古戴、object欠橘、function、regexp...
相等判斷：
- 基本類型進(jìn)行相等判斷现恼，會(huì)比較 值 是否相等肃续。
- 引用類型進(jìn)行相等判斷，會(huì)比較 址 是否相等叉袍。
所以淺克隆中如果克隆到數(shù)組始锚，并不完全克隆，這個(gè)時(shí)候就需要深克隆喳逛。
函數(shù)
函數(shù)就是語句的封裝瞧捌，方便復(fù)用，具有“一次定義润文，多次調(diào)用”的優(yōu)點(diǎn)姐呐。
函數(shù)的定義
使用function關(guān)鍵字，function是功能的意思典蝌。例如：
function fun( ){
}
function表示定義函數(shù)曙砂。
fun 是函數(shù)名，命名規(guī)則見js標(biāo)識(shí)符命名規(guī)則骏掀。
圓括號(hào)（）是形參列表鸠澈，即使沒有形參乔夯，也必須書寫圓括號(hào)。
大括號(hào){ }是函數(shù)執(zhí)行的語句體
第二種定義函數(shù)方法是使用函數(shù)表達(dá)式：
var fun = function(){ }
調(diào)用函數(shù)
在函數(shù)名字后面書寫圓括號(hào)即可款侵，也可以稱為函數(shù)執(zhí)行符末荐。。
函數(shù)聲明提升
只有函數(shù)聲明能提升新锈，函數(shù)表達(dá)式不提升甲脏。提升相關(guān)詳情見GO、AO預(yù)編譯妹笆。
例題
fun();
var fun = function(){alert('a');}
function fun(){alert('b');}
fun();
//執(zhí)行這段程序块请，會(huì)先彈出b，然后彈出a拳缠。
//所以函數(shù)只是聲明提升墩新，預(yù)編譯后不再參與變量賦值。
函數(shù)的參數(shù)
函數(shù)聲明時(shí)圓括號(hào)內(nèi)定義形參（形式參數(shù)）
調(diào)用函數(shù)時(shí)傳入實(shí)參（實(shí)際參數(shù)）
- 形參數(shù)量 = 實(shí)參數(shù)量 時(shí)：一一對(duì)應(yīng)窟坐。
- 形參數(shù)量 < 實(shí)參數(shù)量 時(shí)：多出的實(shí)參不傳入函數(shù)海渊，但arguments仍可讀到。
- 形參數(shù)量 > 實(shí)參數(shù)量 時(shí)：多出的形參值為undefined哲鸳。
arguments
函數(shù)內(nèi)的 arguments 表示它接收到的實(shí)參列表臣疑，他是一個(gè)類數(shù)組對(duì)象。
類數(shù)組對(duì)象：
是對(duì)象徙菠，可以當(dāng)數(shù)組用讯沈。
和數(shù)組類似可以用方括號(hào)訪問對(duì)象的屬性值，但不能調(diào)用數(shù)組的方法婿奔，可以自己寫入模擬數(shù)組方法缺狠。構(gòu)成要素：
①屬性要為索引（數(shù)字）屬性
②必須要有l(wèi)ength屬性
return 函數(shù)的返回值
使用return關(guān)鍵字。
調(diào)用一個(gè)有返回值的函數(shù)萍摊，可以當(dāng)一個(gè)普通值來用挤茄。
遇見return語句會(huì)立即退出函數(shù)。（結(jié)合if語句记餐，往往不需要寫else分支了）
return后不接內(nèi)容則函數(shù)返回undefined驮樊，接內(nèi)容則函數(shù)返回內(nèi)容薇正。
函數(shù)算法題
尋找喇叭花數(shù)（喇叭花數(shù)：三位數(shù)片酝，每一位數(shù)字階乘的和等于他本身）
函數(shù)的遞歸
函數(shù)內(nèi)部語句調(diào)用這個(gè)函數(shù)自身挖腰，從而發(fā)起函數(shù)新一輪迭代猴仑，在新的迭代中又執(zhí)行調(diào)用函數(shù)自身的語句审轮，一直迭代下去疾渣，知道函數(shù)執(zhí)行到某一次時(shí)不在迭代篡诽，然后一層一層返回，則形成函數(shù)遞歸达椰。
遞歸的要素
- 邊界條件：確定遞歸何時(shí)終止，也稱遞歸出口蝇裤。
①要么找到當(dāng)參數(shù)等于某個(gè)值時(shí)候函數(shù)有結(jié)果
②要么函數(shù)執(zhí)行次數(shù)有限，當(dāng)循環(huán)到某一次的時(shí)候不再調(diào)用函數(shù)自身拗秘。 - 遞歸模式：大問題分小問題，遞歸體。
遞歸常見算法題
斐波那契數(shù)列：每項(xiàng)等于前兩項(xiàng)的和辉阶。
function fibonacci(n){
if(n==0) return 0;
else if(n==1) return 1;
return fibonacci(n-1)+fibonacci(n-2);
}
實(shí)現(xiàn)深度克隆數(shù)組：
function arrClone(arr){
var newArr=[];
for(var i=0;i<arr.length;i++){
if(!Array.isArray(arr[i])) newArr[newArr.length]=arr[i];
else newArr[newArr.length] = arrClone(arr[i]);
}
return newArr;
}
變量作用域
JavaScript是函數(shù)及作用域編程語言：變量只在其定義時(shí)所在的 function 內(nèi)部有效，function 內(nèi)的變量成為 function 的局部變量规辱。
不見變量定義在任何函數(shù)里面改淑，這個(gè)變量就是全局變量朵夏，或者 function 內(nèi)不聲明變量直接賦值也是全局變量。
遮蔽效應(yīng)： 如果函數(shù)中也定義了與全局變量同名的變量，則函數(shù)內(nèi)的變量會(huì)將全局變量“遮蔽”爆捞。
js運(yùn)行三部曲
- 語法解析
- 預(yù)編譯
- 解釋執(zhí)行
會(huì)發(fā)生以下幾種情況：
函數(shù)聲明整體提升
變量聲明提升
imply global 暗示全局變量，window就是全局
預(yù)編譯發(fā)生在函數(shù)執(zhí)行前一刻成肘。
全局預(yù)編譯創(chuàng)建GO對(duì)象。
局部預(yù)編譯先創(chuàng)建AO對(duì)象，再逐步執(zhí)行（部分執(zhí)行）丘逸。
全局預(yù)編譯三部曲
- 生成GO對(duì)象。
- 找變量聲明，將變量名作為GO屬性名涛舍，值為undefined。
- 在函數(shù)體里面找函數(shù)聲明。
局部預(yù)編譯四部曲
- 生成AO對(duì)象（activation object）
AO{ } - 找形參和變量聲明蛤奢，將變量和形參名作為AO屬性名，值為undefined。
AO{
a: undefined;
b: undefined
}
- 將實(shí)參值與形參統(tǒng)一志衍。
AO{
a: 1;
b: undefined
}
- 再函數(shù)體里找函數(shù)聲明。
AO{
a: function a(){ };
b: undefined；
d: function d(){ }
}
閉包
JavaScript的函數(shù)會(huì)產(chǎn)生閉包（closure）。閉包是函數(shù)本身和該函數(shù)聲明時(shí)所處的環(huán)境狀態(tài)的組合央星。
函數(shù)能夠“記憶住”其定義時(shí)所處的環(huán)境，即使函數(shù)不在其定義的環(huán)境被調(diào)用，也能訪問定義時(shí)所處環(huán)境的變量叁幢。
在Javascript中鳞骤，每次創(chuàng)建函數(shù)時(shí)都會(huì)創(chuàng)建閉包。
但是，閉包特性往往需要將函數(shù)“換一個(gè)地方”執(zhí)行，才能被觀察出來录肯。
閉包非常實(shí)用，它允許我們將數(shù)據(jù)與操作該數(shù)據(jù)的函數(shù)關(guān)聯(lián)起來。
用途：
- 記憶性：當(dāng)閉包產(chǎn)生時(shí)养涮，函數(shù)所處環(huán)境的狀態(tài)會(huì)始終保持在內(nèi)存中蜀变，不會(huì)在外層函數(shù)調(diào)用后自動(dòng)清除爬舰。
- 模擬私有變量。
壞處：
濫用閉包會(huì)造成內(nèi)存泄漏，引發(fā)性能問題惜颇。
立即執(zhí)行函數(shù) IIFE
IIFE全稱：Immediately Invoked Function Expression芹橡，立即調(diào)用函數(shù)表達(dá)式屯伞，一被定義就立即被調(diào)用。
IIFE形成方法
只有表達(dá)式才能被執(zhí)行符號(hào)（圓括號(hào)）執(zhí)行末融。
表達(dá)式：由運(yùn)算元和運(yùn)算符構(gòu)成懈玻，并產(chǎn)生運(yùn)算結(jié)果的語句結(jié)構(gòu)
能被執(zhí)行符號(hào)執(zhí)行的表達(dá)式會(huì)忽略這個(gè)函數(shù)的名字艺栈，所以立即執(zhí)行函數(shù)寫函數(shù)名會(huì)被忽略。
IIFE作用
- 為變量賦值，例如一個(gè)值需要經(jīng)過一段流程控制語句后才產(chǎn)生，那么就可以把這堆流程控制語句封裝成函數(shù)并立即執(zhí)行然后返回值场刑。
- 將全局變量變?yōu)榫植孔兞浚ㄗ孖IFE里面的函數(shù)立即形成一個(gè)新的閉包）。
DOM
DOM是 Document Object Model 文檔對(duì)下個(gè)模型，是Javascript操作HTML文檔的接口茅茂。
DOM 節(jié)點(diǎn)樹
節(jié)點(diǎn)的四個(gè)屬性
| 屬性名 | 作用 |
|---|---|
| nodeName | 元素的標(biāo)簽名走敌，以大寫形式表示跌榔，只讀 |
| nodeValue | Text節(jié)點(diǎn)或Comment節(jié)點(diǎn)的文本內(nèi)容，可讀可寫 |
| nodeType | 該節(jié)點(diǎn)類型，見下表 |
| attributes | Element節(jié)點(diǎn)的屬性集合 |
nodeType 常用屬性值
| 值 | 屬性 |
|---|---|
| 1 | 元素節(jié)點(diǎn)，例如<p>和<div> |
| 3 | 文字節(jié)點(diǎn) |
| 8 | 注釋節(jié)點(diǎn) |
| 9 | document節(jié)點(diǎn) |
| 10 | DTD節(jié)點(diǎn) |
延遲運(yùn)行
- 在測(cè)試DOM代碼時(shí)，通常JS代碼要寫在HTML節(jié)點(diǎn)后面，否則JS無法找到相應(yīng)HTML節(jié)點(diǎn)循榆。
- 可以使用
window.onload = function(){ }或者document.addEventListener( 'DOMContentloaded',function(){ },false);使頁面加載完畢后，在執(zhí)行指定的代碼柑船，推薦第二種
訪問元素節(jié)點(diǎn)
尋找/遍歷/訪問主要依靠document對(duì)象扣蜻。
幾乎所有DOM的功能都封裝在 document對(duì)象中蒸苇。
document 對(duì)象也表示整個(gè)HTML文檔庇勃，是DOM節(jié)點(diǎn)樹的根
常用方法有：
| 方法 | 功能 |
|---|---|
| document.getElementById( ) | 通過ID得到元素 |
| document.getElementsByTagName( ) | 通過標(biāo)簽名得到元素?cái)?shù)組 |
| document.getElementsByClassName( ) | 通過類名得到元素?cái)?shù)組 |
| document.getElementsByName( ) | 只有部分標(biāo)簽name可生效 |
| document.querySelector( ) | 通過選擇器得到元素 |
| document.querySelectorAll( ) | 通過選擇器得到元素?cái)?shù)組 |
document.getElementById( )
當(dāng)html元素有id屬性的時(shí)候掂铐，可以用id獲取該元素節(jié)點(diǎn)
注意事項(xiàng)：
- 如果頁面上有相同id的元素爆班，則只能得到第一個(gè)雨涛。
- 不管元素藏得多深凉泄，都能通過id找到
getElementsByTagName( )
通過標(biāo)簽名得到節(jié)點(diǎn)數(shù)組。
注意事項(xiàng)：
- 數(shù)組方便遍歷，從而可以批量操控元素節(jié)點(diǎn)怖竭。
- 即使頁面上只有一個(gè)指定標(biāo)簽名的節(jié)點(diǎn)登夫，也將得到長(zhǎng)度為1的數(shù)組鸦致。
- 任何一個(gè)節(jié)點(diǎn)元素可以調(diào)用getElementsByTagName方法狮斗，比如
box1.getElementsByTagName( 'p');, 從而得到一個(gè)元素內(nèi)部的子元素節(jié)點(diǎn)。
getElementsByClassName( )
通過類名得到節(jié)點(diǎn)數(shù)組。
注意事項(xiàng)：
- 從IE9開始兼容。
- 其他同上Tag特性
querySelector( )
通過選擇器得到元素。例如：
var the_p = document.querySelector('#box1 .p')
注意事項(xiàng)：
- querySelector( )方法只能得到頁面上一個(gè)元素翼闹，如果有多個(gè)元素符合條件，只能得到第一個(gè)元素。
- querySelector( ) 方法從IE8開始兼容，但從IE9開始支持CSS3的選擇器，比如 :nth-child() 、:[src^='seven']等選擇器形式支持良好。（偽類不行）
querySelectorAll( )
通過選擇器得到元素?cái)?shù)組樱报。計(jì)師頁面上只有一個(gè)符合選擇器的節(jié)點(diǎn)民珍，也將得到長(zhǎng)度為1的數(shù)組
querySelector和querySelectorAll注意事項(xiàng)： 都不是實(shí)時(shí)的逆趣，例如節(jié)點(diǎn)是后期加上的會(huì)獲取不到。
節(jié)點(diǎn)關(guān)系，節(jié)點(diǎn)之間的關(guān)系
| 關(guān)系 | 考慮所有節(jié)點(diǎn) | 只考慮元素節(jié)點(diǎn) |
|---|---|---|
| 子節(jié)點(diǎn) | childNodes | children |
| 父節(jié)點(diǎn) | parentNode | parentElement |
| 第一個(gè)子節(jié)點(diǎn) | firstChild | firstElementChild |
| 最后一個(gè)子節(jié)點(diǎn) | lastChild | lastElementChild |
| 前一個(gè)兄弟節(jié)點(diǎn) | previousSibling | previousElementSibling |
| 后一個(gè)兄弟節(jié)點(diǎn) | nextSibling | nextElementSibling |
- DOM中每窖，文本節(jié)點(diǎn)也屬于節(jié)點(diǎn)稽莉，在使用節(jié)點(diǎn)關(guān)系時(shí)一定要注意。
- 在W3C標(biāo)準(zhǔn)規(guī)范中，空白文本節(jié)點(diǎn)也屬于節(jié)點(diǎn)，IE8之前不把空文本當(dāng)作節(jié)點(diǎn)予弧。
- 可以用
父節(jié)點(diǎn).hasChildNodes( );判斷有沒有子節(jié)點(diǎn)
封裝節(jié)點(diǎn)關(guān)系函數(shù)
//兼容IE8以下的獲取所有子元素節(jié)點(diǎn)函數(shù)刮吧，類似children屬性
function getChildren(node){
var children = [];
for(var i=0; i<node.childNodes.length; i++){
if(node.childNodes[i].nodeType == 1){
children.push(node.childNodes[i]);
}
}
return children;
}
//兼容IE8以下獲取前一個(gè)兄弟元素節(jié)點(diǎn)
function getPreviousElementSibling(node){
while(node.previousSibling != null){
if (node.previousSibling.nodeType == 1) {
return node.previousSibling;
}
node = node.previousSibling;
}
}
//兼容IE8以下獲取后一個(gè)兄弟元素節(jié)點(diǎn)
function getNextElementSibling(node){
while(node.nextSibling != null){
if (node.nextSibling.nodeType == 1) {
return node.nextSibling;
}
node=node.nextSibling;
}
}
//獲取所有兄弟元素節(jié)點(diǎn)
function getAllElementSibling(node){
var o =node;
var preES = [];
var nexES = [];
while(o.previousSibling != null){
if (o.previousSibling.nodeType == 1) {
preES.unshift(o.previousSibling);
}
o = o.previousSibling;
}
o = node;
while(o.nextSibling != null){
if (o.nextSibling.nodeType == 1) {
nexES.push(o.nextSibling);
}
o = o.nextSibling;
}
return preES.concat(nexES);
}
節(jié)點(diǎn)操作
改變?cè)毓?jié)點(diǎn)中的內(nèi)容可以使用兩個(gè)相關(guān)屬性：
- innerHTML ：能以HTML語法設(shè)置節(jié)點(diǎn)中的內(nèi)容結(jié)構(gòu)。
- innerText ： 只能以純文本的形式設(shè)置節(jié)點(diǎn)中的內(nèi)容掖蛤。寫進(jìn)去的標(biāo)簽也會(huì)變成字符串。
改變?cè)毓?jié)點(diǎn)的CSS樣式
用 元素.style.要修改的屬性 = ***;的形式蚓庭，例如：
div1.style.backgroundColor = 'blue';
div1.style.backgroundImage = 'url(images/1.jpg)';
div1.style.fontSize = '32px';
注意：
- js語句不能用橫杠-書寫標(biāo)識(shí)符致讥，所以用小駝峰形式書寫css屬性名。
- css屬性值要設(shè)置成完整形式器赞。
- 注意寫單位垢袱，注意寫單位，注意寫單位港柜。
- 是通過CSS行內(nèi)屬性設(shè)置上的请契。
- 寫入值必須是字符串，必須是字符串夏醉，必須是字符串爽锥。
腳本化CSS
以上操作稱為腳本化CSS，讀寫行間樣式授舟，如果是js保留字救恨，前面應(yīng)該加css，例如：cssFloat
如何查詢計(jì)算樣式释树，可以使用：
window.getComputedStyle(元素名,null);
//第一個(gè)值傳的是需要獲取計(jì)算樣式的元素肠槽，第二個(gè)值傳入是否獲取的是偽元素擎淤。
//IE8以下用ELE.currentStyle，或者封裝計(jì)算樣式方法
function getStyle(obj, name) {
if(window.getComputedStyle) {
//正常瀏覽器的方式秸仙，具有g(shù)etComputedStyle()方法
return getComputedStyle(obj, null)[name];
} else {
//IE8的方式嘴拢，沒有g(shù)etComputedStyle()方法
return obj.currentStyle[name];
}
}
改變?cè)氐腸ss還可以用改變類名的寫法
使用 DOMCUMENT.className += 需要樣式的類型
或者使用dom的 classList 屬性，classList是一個(gè)類數(shù)組寂纪，可以通過下標(biāo)方式取得元素的class組席吴，該屬性有多種方法
| 方法名 | 功能 |
|---|---|
| DOMCUMENT.classList.add(class1,class2) | 在元素中添加一個(gè)或多個(gè)類名。如果指定的類名已存在捞蛋，則不會(huì)添加 |
| DOMCUMENT.classList.remove(class1, class2, ...) | 移除元素中一個(gè)或多個(gè)類名孝冒。注意： 移除不存在的類名，不會(huì)報(bào)錯(cuò)拟杉。 |
| DOMCUMENT.classList.toggle(class,布爾值) | 在元素中切換類名庄涡。第一個(gè)參數(shù)為要在元素中移除的類名，并返回 false搬设。 如果該類名不存在則會(huì)在元素中添加類名穴店，并返回 true。 第二個(gè)是可選參數(shù)拿穴，是個(gè)布爾值用于設(shè)置元素是否強(qiáng)制添加或移除類泣洞，不管該類名是否存在。 |
| DOMCUMENT.classList.item(index) | 返回元素中索引值對(duì)應(yīng)的類名默色。索引值從 0 開始球凰。如果索引值在區(qū)間范圍外則返回 null |
| DOMCUMENT.classList.contains(class) | 返回布爾值，判斷指定的類名是否存在该窗〉苁矗可能值：true - 元素包已經(jīng)包含了該類名false - 元素中不存在該類名 |
改變?cè)毓?jié)點(diǎn)的引用地址
比如圖片的引用地址和a標(biāo)簽的跳轉(zhuǎn)地址用 元素.src 和 元素.href
更改元素節(jié)點(diǎn)的HTML屬性 setAttribute( ) 和 getAttribute( )
不符合W3C標(biāo)準(zhǔn)的屬性，例如自定義屬性名的屬性酗失，要使用 setAttribute( ) 和 getAttribute( ) 來設(shè)置，讀取昧绣。格式是:
元素.setAttribute(屬性名,屬性值);
元素.getAttribute(屬性名); //返回屬性名對(duì)應(yīng)的值
例如:
div1.setAttribute('data-n',10);
div1.getAttribute('data-n');
setAttribute() 修改元素的類名用的是 class 而不是 className
removeAttribute() 刪除元素節(jié)點(diǎn)的HTML屬性
removeAttribute('屬性名')
更改元素節(jié)點(diǎn)的自定義屬性data
JavaScript的dataset屬性规肴。
元素節(jié)點(diǎn).dataset.data后面的字符 = 'data-*的值';
如果后面的字符還是多個(gè)減號(hào)連接，那么data后面的字符用小駝峰式命名法夜畴。
節(jié)點(diǎn)的創(chuàng)建拖刃、插入、移動(dòng)贪绘、移除兑牡、克隆
| 方法名 | 功能 |
|---|---|
| document.createElement( ) | 創(chuàng)建一個(gè)指定tag name的HTML元素 |
| 父節(jié)點(diǎn).appendChild(孤兒節(jié)點(diǎn)) | 將新創(chuàng)節(jié)點(diǎn)掛載成最后一個(gè)子節(jié)點(diǎn) |
| 父節(jié)點(diǎn).insertBefore(孤兒節(jié)點(diǎn)，標(biāo)桿節(jié)點(diǎn) ) | 將新創(chuàng)節(jié)點(diǎn)掛載成標(biāo)桿節(jié)點(diǎn)前一個(gè)子節(jié)點(diǎn) |
| 父節(jié)點(diǎn).removeChild( ) | 從DOM父節(jié)點(diǎn)中刪除一個(gè)子節(jié)點(diǎn) |
| 子節(jié)點(diǎn).remove( ) | 從DOM中刪除一個(gè)子節(jié)點(diǎn) |
| 老節(jié)點(diǎn).cloneNode( ) | 克隆出一個(gè)新的孤兒節(jié)點(diǎn) |
| 節(jié)點(diǎn).replaceChild(新節(jié)點(diǎn),舊節(jié)點(diǎn)) | 替換節(jié)點(diǎn) |
節(jié)點(diǎn)創(chuàng)建
document.createElement( ) 方法用于創(chuàng)建一個(gè)指定標(biāo)簽名的HTML元素税灌，例如：
var div1 = document.createElement('div');
此時(shí)新創(chuàng)建的節(jié)點(diǎn)是“孤兒節(jié)點(diǎn)”均函，只生成在內(nèi)存中亿虽，需要掛在到DOM樹上才能看見他，也就是要“孤兒上樹”苞也，此時(shí)就需要使用孤兒上樹的兩個(gè)插入方法洛勉。
其他節(jié)點(diǎn)創(chuàng)建方法
| 方法名 | 作用 |
|---|---|
| document.createTextNode( ) | 創(chuàng)建一個(gè)文本節(jié)點(diǎn) |
| document.createComment( ) | 創(chuàng)建一個(gè)注釋節(jié)點(diǎn) |
| document.createDocumentFragment( ) | |
| 創(chuàng)建一個(gè)虛擬的節(jié)點(diǎn)對(duì)象 |
節(jié)點(diǎn)插入
孤兒就是孤兒，要掛數(shù)只能找父親如迟，然后讓一個(gè)野生父親使用 appendChild( ) 和 insertBefore( ) 方法即可收毫。
appendChild( )
任何已經(jīng)在DOM樹上的節(jié)點(diǎn)，都可以調(diào)用appendChild( ) 方法殷勘，它可以將孤兒節(jié)點(diǎn)掛載到它的內(nèi)部此再，使孤兒節(jié)點(diǎn)成為最后一個(gè)子節(jié)點(diǎn)。
父節(jié)點(diǎn).appendChild(孤兒節(jié)點(diǎn));
insertBefore( )
任何已經(jīng)在DOM樹上的節(jié)點(diǎn)玲销，都可以調(diào)用insertBefore( ) 方法引润，它可以將孤兒節(jié)點(diǎn)掛載到它的內(nèi)部，成為它的“標(biāo)桿子節(jié)點(diǎn)”之前的節(jié)點(diǎn)痒玩。
父節(jié)點(diǎn).insertBefore(孤兒節(jié)點(diǎn),標(biāo)桿節(jié)點(diǎn));
創(chuàng)建和插入練習(xí)：九九乘法表
<body>
<table></table>
<script type="text/javascript">
var table = document.getElementsByTagName('table')[0];
for (var i = 1;i<=9;i++) {
var tbr = document.createElement('tr');
table.appendChild(tbr);
for (var j=1;j<=i;j++) {
var trd = document.createElement('td');
trd.innerText = i+'*'+j+'='+i*j;
tbr.appendChild(trd);
}
}
</script>
</body>
元素的移動(dòng)
appendChild( ) 和 insertBefore( ) 還可以用作元素的移動(dòng)淳附，因?yàn)?一個(gè)節(jié)點(diǎn)不能同時(shí)位于DOM樹的兩個(gè)位置
如果將已經(jīng)掛載到DOM樹上的節(jié)點(diǎn)成為appendChild( ) 和insertBefore( ) 的參數(shù)，這個(gè)節(jié)點(diǎn)將會(huì)被移動(dòng)蠢古，使用方法：
新父節(jié)點(diǎn).appendChild(已經(jīng)有父親的節(jié)點(diǎn));
新父節(jié)點(diǎn).insertBefore(已經(jīng)有父親的節(jié)點(diǎn)奴曙，標(biāo)桿子節(jié)點(diǎn));
刪除節(jié)點(diǎn)
父節(jié)點(diǎn).removeChild(要?jiǎng)h除的子節(jié)點(diǎn));
子節(jié)點(diǎn).remove(要?jiǎng)h除的節(jié)點(diǎn));
removeChild( ) 方法從DOM中刪除一個(gè)子節(jié)點(diǎn)。
意味著節(jié)點(diǎn)不能主動(dòng)刪除自己草讶，必須由父節(jié)點(diǎn)刪除它洽糟。
克隆節(jié)點(diǎn)
var 孤兒節(jié)點(diǎn) = 老節(jié)點(diǎn).cloneNode( );
var 孤兒節(jié)點(diǎn) = 老節(jié)點(diǎn).cloneNode(true);
cloneNode( ) 方法可以克隆節(jié)點(diǎn)，克隆出的節(jié)點(diǎn)是孤兒節(jié)點(diǎn)堕战。
參數(shù)可以傳入一個(gè)布爾值坤溃，默認(rèn)false，false意味著只克隆元素本身不管子節(jié)點(diǎn)嘱丢。
如果是true則采用深度克隆薪介，該節(jié)點(diǎn)的所有后代節(jié)點(diǎn)也都會(huì)被克隆。
替換節(jié)點(diǎn)
替換父節(jié)點(diǎn)中的子節(jié)點(diǎn)越驻。用法：
父節(jié)點(diǎn).replaceChild(新的子節(jié)點(diǎn),舊的子節(jié)點(diǎn))
此方法如果用在已經(jīng)上樹的節(jié)點(diǎn)上汁政，會(huì)拉下來重新上樹，還是那個(gè)道理缀旁，一個(gè)dom節(jié)點(diǎn)不能位于樹上兩個(gè)位置
事件
事件是實(shí)現(xiàn)交互的核心记劈。用戶與界面做出的交互動(dòng)作都可以稱為事件。例如“當(dāng)用戶點(diǎn)擊元素時(shí)并巍，當(dāng)鼠標(biāo)移動(dòng)到元素上時(shí)目木，當(dāng)文本框內(nèi)容被改變時(shí)，當(dāng)網(wǎng)頁已加載完畢時(shí)懊渡」羯洌”
事件的三種模型
DOM0級(jí)：標(biāo)簽上直接綁定的onXXX事件和js用onXXX綁定的事件
IE：IE特有模型军拟，解決了某三個(gè)DOM0級(jí)的問題。
DOM2事件模型：addEventListener方式添加事件柄冲，可以監(jiān)聽事件冒泡和捕獲階段階段
常見事件
常見的鼠標(biāo)事件
| 事件名 | 事件描述 |
|---|---|
| click | 鼠標(biāo)單擊 |
| dblclick | 鼠標(biāo)雙擊 |
| mousedown | 鼠標(biāo)按鍵按下 |
| mouseup | 鼠標(biāo)按鍵松開 |
| mousemove | 鼠標(biāo)按鍵移動(dòng) |
| mouseenter吻谋、mouseover | 鼠標(biāo)進(jìn)入 |
| mouseleave、mouseout | 鼠標(biāo)離開 |
| contextmenu | 右擊鼠標(biāo)時(shí)觸發(fā)并打開上下文菜單 |
| mousewheel | 鼠標(biāo)滾輪 |
只有mouseup和mousedown區(qū)分鼠標(biāo)鍵现横，button值0漓拾、1、2
如何解決mousedown和click沖突（例如a標(biāo)簽拖拽后會(huì)出發(fā)click事件）：
利用時(shí)間戳和開關(guān)關(guān)閉click事件
mouseenter不冒泡戒祠，mouseover冒泡
常見的鍵盤事件
| 事件名 | 事件描述 |
|---|---|
| keydown | 鍵盤的鍵被按下（可響應(yīng)所有按鍵骇两，先于press執(zhí)行） |
| keypress | 鍵盤的鍵被按下，只能識(shí)別字符按鍵姜盈，例如方向鍵和功能鍵無法識(shí)別 |
| keyup | 當(dāng)某個(gè)按鍵被松開 |
keypress返回的ASCII碼（例charCode）可轉(zhuǎn)字符
常見的表單事件
| 事件名 | 事件描述 |
|---|---|
| input | 當(dāng)用戶改變域的內(nèi)容 |
| change | 當(dāng)用戶改變了域的內(nèi)容后 |
| focus | 當(dāng)某元素獲得焦點(diǎn)（比如tab鍵跳轉(zhuǎn)到或鼠標(biāo)點(diǎn)擊） |
| blur | 當(dāng)某元素失去焦點(diǎn) |
| submit | 當(dāng)表單被提交 |
| reset | 當(dāng)表單被重置 |
常見的頁面（窗體）事件監(jiān)聽
| 事件名 | 事件描述 |
|---|---|
| load | 當(dāng)頁面或圖像完全加載 |
| unload | 當(dāng)用戶退出頁面 |
| scroll | 滾動(dòng)滾動(dòng)條 |
| resize | 窗體大小改變時(shí) |
事件監(jiān)聽
DOM允許我們書寫JavaScript代碼以讓HTML元素對(duì)事件做出反應(yīng)低千。
“監(jiān)聽”就是讓計(jì)算機(jī)隨時(shí)能夠發(fā)現(xiàn)這個(gè)事件發(fā)生了，從而執(zhí)行一些預(yù)先編寫的語句馏颂。主要有兩種方法示血。
- 元素.onXXX = function(){}
- 元素.addEventListener('',function(){},BOOLEAN);
兩種監(jiān)聽區(qū)別
- onXXX只能監(jiān)聽冒泡階段，addEventListener可以開啟捕獲階段救拉。
- onXXX只能綁定一個(gè)函數(shù)难审，后寫的會(huì)覆蓋。addEventListener可多次復(fù)寫亿絮。
事件監(jiān)聽解除
- 元素.onXXX = null;
- 元素.removeEventListener('事件類型',函數(shù),false);
- IE獨(dú)有：元素.detachEvent('onXXX',函數(shù));
事件傳播
當(dāng)元素形成嵌套結(jié)構(gòu)時(shí)告喊，事件就會(huì)發(fā)生傳播，傳播分為：
- 事件捕獲：結(jié)構(gòu)上的父子元素派昧，開啟捕獲后黔姜，事件執(zhí)行從父元素捕獲到子元素。
- 事件冒泡：結(jié)構(gòu)上的父子元素關(guān)系蒂萎，時(shí)間會(huì)從子元素冒泡到父元素秆吵。
- onXXX監(jiān)聽方法只能監(jiān)聽到冒泡階段
- addEventListener第三個(gè)參數(shù)為true時(shí)會(huì)開啟捕獲監(jiān)聽。
- 嵌套結(jié)構(gòu)的最內(nèi)部元素不再區(qū)分捕獲和冒泡岖是，冒泡寫在前面先執(zhí)行冒泡帮毁，捕獲寫在前面先執(zhí)行捕獲。
- 冒泡階段的onXXX和addEventListener誰先寫先執(zhí)行哪個(gè)函數(shù)豺撑。
阻止事件傳播： event.stopPropagation( ); 方法，或者ie678的event.cancelBubble=true;
事件對(duì)象
事件處理函數(shù)提供一個(gè)形式參數(shù)黔牵，他是一個(gè)對(duì)象聪轿，封裝了本次事件的細(xì)節(jié)。這個(gè)形參通常用字母e或單詞event表示：例如
div.onclick = function(e){ }
div.addEventListener('click',function(event){},false);
誰是實(shí)參呢猾浦，實(shí)參由瀏覽器提供陆错，當(dāng)事件觸發(fā)時(shí)灯抛，瀏覽器會(huì)打包所有事件對(duì)象傳入事件處理函數(shù)形參中。
實(shí)際上并不用形參實(shí)參的說法音瓷，實(shí)測(cè)有一個(gè)event對(duì)象就是事件對(duì)象对嚼。
鼠標(biāo)位置屬性
| 屬性名 | 屬性描述 |
|---|---|
| offsetX、offsetY | 鼠標(biāo)指針相對(duì)于事件源元素的X軸绳慎、Y軸坐標(biāo) |
| clientX纵竖、clientY | 鼠標(biāo)指針相對(duì)于瀏覽器視口的X軸、Y軸坐標(biāo) |
| pageX杏愤、pageY | 鼠標(biāo)指針相對(duì)于整張網(wǎng)頁的X軸靡砌、Y軸坐標(biāo) |
| screenX、screenY | 鼠標(biāo)指針相對(duì)于電腦屏幕的X軸珊楼、Y軸坐標(biāo) |
鍵盤charCode屬性和keyCode屬性
e.charCode屬性通常用于onkeypress事件中通殃，表示用戶輸入的字符的ASCII碼。
e.keyCode屬性通常用于onkeydown事件和onkeyup中厕宗，表示用戶按下的按鍵的鍵碼画舌。
charcode字符碼
| 字符 | 字符碼 |
|---|---|
| 數(shù)字0~數(shù)字9 | 48~57 |
| 大寫字母A~Z | 65~90 |
| 小寫字母a~z | 97~122 |
keycode鍵碼
| 按鍵 | 鍵碼 |
|---|---|
| 數(shù)字0~數(shù)字9 | 48~57 |
| 字母不分大小a~z | 65~90 |
| 四個(gè)方向左上右下 | 37、38已慢、39曲聂、40 |
| 回車鍵 | 13 |
| 空格鍵 | 32 |
元素offset系列屬性
- 該系列屬性只讀，不可寫蛇受，且讀出來的數(shù)值是一個(gè)Number類型數(shù)值
- 可以得到元素的偏移位置句葵，返回不帶單位的數(shù)值。這個(gè)數(shù)值以開啟定位的父元素為準(zhǔn)兢仰。
ELE.offsetTop
ELE.offsetLeft - 可以得到元素的寬度和高度乍丈，包含padding和border，即元素盒子的大小把将。
ELE.offsetWidth
ELE.offsetHeight - 返回帶有定位的父親轻专，否則返回body
元素的client系列屬性
- clientWidth 和 clientHeight 得到元素盒子除了border以外的尺寸大小。
- clientLeft 和 clientTop 不常用察蹲，相當(dāng)于左邊框和上邊框的大小
元素的scroll系列屬性
- scroll系列屬性要出現(xiàn)滾動(dòng)條才更好理解更好用
- scrollWidth 和 scrollHeight 得到元素盒子除了border外的所有內(nèi)容的尺寸大小请垛。
- scrollTop 和 scrollLeft 得到元素盒子被卷去的尺寸長(zhǎng)度。該屬性可用于“滑到底部才可以點(diǎn)擊確定”
獲取元素在頁面上的屬性
- 可以用
window.getComputedStyle(元素名,null);
//第一個(gè)值傳的是需要獲取計(jì)算樣式的元素洽议，第二個(gè)值傳入是否獲取的是偽元素 - 可以用
ELE.getBoundingClientRect()宗收，例如ELE.getBoundingClientRect().left
事件的方法
preventDefault() 方法 阻止默認(rèn)事件
e.preventDefault( ) 方法用來阻止事件產(chǎn)生的“默認(rèn)動(dòng)作”。
例如鼠標(biāo)滾動(dòng)的動(dòng)作亚兄，表單提交混稽，a標(biāo)簽跳轉(zhuǎn)，右鍵菜單等。
一些特殊的業(yè)務(wù)需求匈勋，需要阻止事件的“默認(rèn)動(dòng)作”礼旅。
阻止默認(rèn)事件還可以用return false;
stopPropagation( ) 方法 阻止事件傳播
e.stopPropagation( ) 方法用來阻止事件繼續(xù)傳播
在一些場(chǎng)合，非常有必要切斷事件繼續(xù)傳播洽洁，否則會(huì)造成頁面特效顯示出bug
事件委托
把事件綁定到父元素上痘系，用 event.target 定位到子元素（利用了事件冒泡）
event.target 觸發(fā)此事件的最早元素，即“事件源元素”
event.currentTarget 事件處理程序附加到的元素
事件委托的使用場(chǎng)景：
- 當(dāng)有大量類似元素需要批量添加事件監(jiān)聽時(shí)饿自，使用事件委托可以減少內(nèi)存開銷汰翠。
- 當(dāng)由動(dòng)態(tài)元素節(jié)點(diǎn)上樹時(shí)，使用事件委托可以讓新上樹的元素具有事件監(jiān)聽
注意事項(xiàng)：
- 不能委托不冒泡的事件給祖先元素
- 最內(nèi)層元素不能再有額外的內(nèi)層元素了
移動(dòng)端事件
- 觸摸事件：touch事件璃俗、pointer事件奴璃。
- 手勢(shì)事件：gesture
- 傳感器事件：sensor
移動(dòng)端使用 tansform:translate3d(); 會(huì)開啟GPU加速，提高性能城豁。
touch 事件：
touchstart苟穆、touchmove、touchend唱星、touchcancel（比如操作時(shí)突然來電話）
touchstart 必須要在綁定事件的元素觸發(fā)雳旅，觸發(fā)start后，touchmove 和 touchend 手指移除元素依然可觸發(fā)间聊。
touch 事件的 TouchEvent 對(duì)象
- event.touches
- event.targetTouches
- event.changedTouches
這些對(duì)象都是一個(gè) Touchlist攒盈，單指操作只需提取一個(gè)即可，比如 event.changedTouches[0]
- touches是正在觸摸屏幕的所有手指的列表哎榴。
- targetTouches是正在觸摸當(dāng)前DOM元素的手指列表型豁。
- 如果是綁在dom元素的事件以上兩個(gè)是一樣的
- changedTouches是手指狀態(tài)發(fā)生了改變的列表，從無到有 或者 從有到無
touches 和 targetTouches 很多情況下在 touchend 事件里沒有值尚蝌，所以推薦使用 changedTouches
其他觸摸事件
touch 只是基礎(chǔ)事件迎变，還有其他例如單擊，長(zhǎng)按飘言，雙指等事件衣形。
可以自行封裝這些高級(jí)事件，也可使用例如 hammer.js 等別人封裝好的事件庫(kù)姿鸿。
定時(shí)器和延時(shí)器
定時(shí)器
setInterval( ) 函數(shù)可以重復(fù)調(diào)用一個(gè)函數(shù)谆吴，在每次調(diào)用之間具有固定的時(shí)間間隔，寫法：
setInterval(function(){},1000)
第一個(gè)參數(shù)是函數(shù)苛预，第二個(gè)參數(shù)是間隔時(shí)間句狼，函數(shù)里的語句塊將會(huì)在每過間隔時(shí)間后執(zhí)行一次。
setInterval函數(shù)可以接受第3热某、4鲜锚、5...個(gè)參數(shù)突诬，它們將按順序傳入函數(shù)苫拍，例如芜繁。
setInterval(function(a,b){
},1000,1,2)
//第三個(gè)參數(shù)開始，表示傳入函數(shù)內(nèi)的實(shí)參
清除定時(shí)器
clearInterval( ) 函數(shù)绒极，圓括號(hào)內(nèi)傳入要清除的定時(shí)器
延時(shí)器
setTimeout( ) 函數(shù)可以設(shè)置一個(gè)延時(shí)器骏令，當(dāng)指定時(shí)間到達(dá)后旨椒，會(huì)執(zhí)行函數(shù)一次棠赛，不再重復(fù)執(zhí)行，寫法：
setTimeout(function(){
},1000)
清除延時(shí)器
clearTimeout( ) 函數(shù)可以清除延時(shí)器
初識(shí)異步語句
定時(shí)器和延時(shí)器是兩個(gè)異步語句爱只。
異步（asynchronous）：不會(huì)阻塞CPU繼續(xù)執(zhí)行其他語句铡俐，當(dāng)異步完成時(shí)凰兑，會(huì)執(zhí)行“回調(diào)函數(shù)”（callback）
//例子：
setInterval(function(){
console.log('a');
},1000)
console.log('b');
//會(huì)先輸出b，再輸出aaaaaa
異步語句不會(huì)阻塞程序的正常執(zhí)行审丘。
（這里記個(gè)記號(hào)吏够，異步這部分是我學(xué)前端的第一個(gè)大坎，原因是我看的好多教程都沒有講解異步底層原理滩报，直到去看了pink老師的講解才理解了異步锅知，因?yàn)檫@點(diǎn)導(dǎo)致我后面的promise和ajax學(xué)得一知半解的）
函數(shù)節(jié)流
延時(shí)器可以用作函數(shù)節(jié)流，即加個(gè)開關(guān)脓钾，定時(shí)打開或關(guān)閉開關(guān)售睹，需足夠時(shí)間才能執(zhí)行下一次函數(shù)，具體方法：
var lock = true;
function 需要節(jié)流的函數(shù)名(){
if(!lock) return;
lock = false;
setTimeout(function(){
lock =true;
},節(jié)流時(shí)間);
}
BOM
Browser Object Model 瀏覽器對(duì)象模型可训，是JS與瀏覽器窗口交互的接口昌妹。
一些與瀏覽器改變尺寸、滾動(dòng)滾動(dòng)條相關(guān)的握截，都要借助BOM技術(shù)飞崖。
window對(duì)象
window對(duì)象是當(dāng)前js腳本運(yùn)行所處的窗口，而這個(gè)窗口中包含DOM結(jié)構(gòu)川蒙，window.document屬性就是document對(duì)象蚜厉。
在有標(biāo)簽頁功能的瀏覽器中，每個(gè)標(biāo)簽擁有自己的window對(duì)象畜眨，不共用昼牛。
全局變量是window的屬性
var a = 10;
//控制臺(tái)輸入window.a返回10
這意味著多個(gè)js文件之間是共享全局作用域的。
內(nèi)置函數(shù)普遍是window的方法
如setInterva( ) 康聂、alert( ) 等內(nèi)置函數(shù)贰健，普遍是window的方法
window屬性
瀏覽器窗口尺寸相關(guān)屬性
| 屬性 | 意義 |
|---|---|
| innerHeight | 瀏覽器窗口的內(nèi)容區(qū)高度，包含滾動(dòng)條（如果有） |
| innerWidth | 瀏覽器窗口的內(nèi)容區(qū)高度恬汁，包含滾動(dòng)條（如果有） |
| outerHeight | 瀏覽器窗口的外部高度 |
| outerWidth | 瀏覽器窗口的外部寬度 |
瀏覽器的滾動(dòng)條是有寬度的伶椿，如果想要獲得不包含滾動(dòng)條的窗口寬度，要用
document.documentElement.clientWidth
窗口改變事件resize見window事件
瀏覽器窗口滾動(dòng)條相關(guān)屬性
| 屬性 | 意義 |
|---|---|
| window.pageYOffset | 獲取當(dāng)前滾動(dòng)條Y軸已滾動(dòng)像素值 |
| window.pageXOffset | 獲取當(dāng)前滾動(dòng)條X軸已滾動(dòng)像素值 |
| window.scrollY | |
| window.scrollX | |
| document.documentElement.scrollTop | |
| document.documentElement.scrollLeft |
document.documentElement.scroll可讀可寫，可用作返回頂部脊另。
滾動(dòng)條相關(guān)事件scroll見window事件
瀏覽器窗口滾動(dòng)條相關(guān)方法
| 方法名 | 作用 |
|---|---|
| window.scoll( ) | |
| window.scollTo( ) | |
| window.scrollBy( ) |
傳入（x导狡，y）值滾動(dòng)到輸入的位置。
scroll和scrollTo一樣偎痛，scrollBy是在現(xiàn)基礎(chǔ)上累加
window方法
| 事件名 | 事件描述 |
|---|---|
| load | 當(dāng)頁面或圖像完全加載 |
| unload | 當(dāng)用戶退出頁面 |
| scroll | 滾動(dòng)滾動(dòng)條時(shí) |
| resize | 窗體大小改變時(shí) |
navigator對(duì)象
| 屬性 | 意義 |
|---|---|
| appName | 瀏覽器官方名稱 |
| appVersion | 瀏覽器版本 |
| userAgent | 瀏覽器的用戶代理（含有內(nèi)核信息和封裝殼信息） |
| platform | 用戶操作系統(tǒng) |
history對(duì)象
history.back(); //等同于瀏覽器回退按鈕
history.go(-1); //同上
history.go(1); //前進(jìn)一個(gè)頁面
history,forward(); //同上
a標(biāo)簽實(shí)現(xiàn)回退功能
<a href="javascript:history.back();">回退</a>
location 對(duì)象
location.href 返回當(dāng)前頁面URL
location.reload(true) 傳入true強(qiáng)制從服務(wù)器重新渲染頁面
location.search 當(dāng)前瀏覽器的get請(qǐng)求查詢參數(shù)
面向?qū)ο?/h1>
認(rèn)識(shí)對(duì)象
Object 是鍵值對(duì)的集合旱捧。
寫法：鍵和值之間用冒號(hào)分割，每組鍵值之間用逗號(hào)分隔踩麦。
如果對(duì)象的屬性鍵名不符合js標(biāo)識(shí)符命名規(guī)則枚赡，這個(gè)鍵名必須用引號(hào)包裹。
//方法一：
var 變量 = {
鍵1 : 值1,
鍵2 : 值2
}
//方法二：
var 變量 = new Object();
屬性的訪問
用 點(diǎn)語法 訪問對(duì)象中指定的值谓谦，
如果屬性名不符合js標(biāo)識(shí)符命名規(guī)則贫橙，則必須用方括號(hào)里加引號(hào)里寫屬性名。
如果屬性名以變量形式存儲(chǔ)反粥，也必須用方括號(hào)卢肃。
可用 hasOwnProperty( ) 方法判斷屬性是否是自己的，
或者使用 in 判斷屬性是否是自己和父級(jí)的星压。
屬性的更改
直接用賦值運(yùn)算符重新對(duì)屬性賦值即可践剂。
屬性的創(chuàng)建
如果對(duì)象本身沒有屬性，直接用 點(diǎn)語法 寫屬性名娜膘，并用賦值運(yùn)算符賦值即可逊脯，全局變量原理也是這樣。
屬性的刪除
用delete操作符竣贪，例如：
delete 對(duì)象.屬性;
對(duì)象的方法
如果某個(gè)屬性值是函數(shù)军洼，著它也被稱為對(duì)象的方法。
方法的調(diào)用
使用點(diǎn)語法即可演怎。
方法和函數(shù)
方法是對(duì)象的函數(shù)屬性匕争，需要用對(duì)象打點(diǎn)調(diào)用，函數(shù)也可以用window打點(diǎn)爷耀，所以二者在js里無差別甘桑。
對(duì)象的遍歷
用 for(var 循環(huán)變量 in 對(duì)象){} 循環(huán)，例：
for(var k in obj){
console.log(obj[k]);
}
循環(huán)變量可隨意命名歹叮，一般為k或prop跑杭，循環(huán)變量會(huì)一次變?yōu)閷?duì)象的每一個(gè)鍵。在for in 遍歷里咆耿，一定要寫成 對(duì)象[] 德谅，的形式，因?yàn)檠h(huán)變量是變量萨螺，中括號(hào)形式才能沒問題循環(huán)所有形式的變量窄做。
對(duì)象的深淺克隆
慕課網(wǎng)方法：
function deepClone(o){
if (Array.isArray(o)) {
var result = [];
for (var i = 0;i < o.length;i++) {
result.push(deepClone(o[i]));
}
}else if(typeof o == 'object'){
var result = {};
for (var k in o) {
result[k] = deepClone(o[k]);
}
}else{
var result = o;
}
return result;
}
渡一方法
function deepclone(origin,target){
var target = target||{};
for(var prop in origin){
if(origin.hasOwnProperty(prop)){
if(typeof(origin[prop]) == 'object'){
if (Object.prototype.toString.call(origin[prop])=='[object object]') {
target[prop] = {};
} else{
target[prop] = [];
}
deepclone(origin[prop],target[prop]);
}else{
target[prop] = origin[prop];
}
}
}
return target;
}
認(rèn)識(shí)函數(shù)的上下文
函數(shù)中可以用 this 關(guān)鍵字愧驱，他表示函數(shù)的上下文。
this 指向必須通過調(diào)用函數(shù)時(shí)的“前言后語”來判斷椭盏。
函數(shù)的上下文由調(diào)用方式?jīng)Q定组砚，函數(shù)只有被調(diào)用，才會(huì)產(chǎn)生上下文庸汗。
上下文規(guī)則
- 對(duì)象打點(diǎn)調(diào)用他的方法函數(shù)惫确，則函數(shù)的上下文是這個(gè)打點(diǎn)的對(duì)象。
- 圓括號(hào)直接調(diào)用函數(shù)蚯舱，則函數(shù)上下文是 window 對(duì)象。
- 數(shù)組（或類數(shù)組對(duì)象）枚舉出函數(shù)進(jìn)行調(diào)用掩蛤，則上下文是這個(gè)數(shù)組（或類數(shù)組對(duì)象）枉昏。
- 在IIFE函數(shù)中，上下文是window對(duì)象揍鸟。
- 定時(shí)器兄裂、延時(shí)器調(diào)用函數(shù)，上下文是 window 對(duì)象阳藻。
- 事件處理函數(shù)的上下文是綁定事件的DOM元素晰奖，所以通常需要備份上下文。
call 和 apply
能指定函數(shù)的上下文腥泥，例：
函數(shù).call(上下文)
函數(shù).apply(上下文)
區(qū)別： 當(dāng)函數(shù)需要參數(shù)時(shí)匾南，call 要用逗號(hào)羅列參數(shù)； apply 需把參數(shù)寫在數(shù)組中蛔外。
bind
bind 和 call 差不多蛆楞，不過它只改變this指向，不會(huì)調(diào)用函數(shù)夹厌，執(zhí)行完bind之后會(huì)返回一個(gè)已經(jīng)修改好this指向的函數(shù)豹爹，可以用一個(gè)變量接收
function fn(){}
var ojj = {}
var bii = fn.bind(o)
用new調(diào)用函數(shù)
用new接函數(shù)調(diào)用，會(huì)從函數(shù)內(nèi)部返回一個(gè)對(duì)象矛纹。
JS規(guī)定臂聋，使用new操作符調(diào)用函數(shù)會(huì)進(jìn)行“四步走”用new調(diào)用函數(shù)的四步走：
- 函數(shù)體內(nèi)會(huì)自動(dòng)創(chuàng)建出一個(gè)空白對(duì)象。
- 函數(shù)的上下文（this）會(huì)指向這個(gè)空白對(duì)象或南。
- 函數(shù)體內(nèi)的語句會(huì)執(zhí)行孩等。
- 函數(shù)會(huì)自動(dòng)返回上下文對(duì)象，即使函數(shù)沒有return語句迎献。
上下文規(guī)則總結(jié)表格
| 情況 | this指向 |
|---|---|
| 對(duì)象.函數(shù)() | 對(duì)象 |
| 函數(shù)直接調(diào)用 | window |
| 數(shù)組[下標(biāo)] () | 數(shù)組 |
| IIFE函數(shù) | window |
| 定時(shí)器瞎访、延時(shí)器 | window |
| DOM事件處理函數(shù) | 綁定DOM元素 |
| call和apply | 任意指定 |
| 用new調(diào)用函數(shù) | 秘密創(chuàng)建出的對(duì)象 |
構(gòu)造函數(shù)
function 函數(shù)名(參數(shù)1，參數(shù)2){
this.參數(shù)1同名 = 參數(shù)1;
this.參數(shù)2同名 = 參數(shù)2;
}
然后用 new 調(diào)用函數(shù)執(zhí)行：
構(gòu)造函數(shù)開發(fā)者約定函數(shù)命名時(shí)首字母要大寫吁恍，不用new調(diào)用不能正常工作扒秸。
構(gòu)造函數(shù)用來“構(gòu)造新對(duì)象”播演，它內(nèi)部語句會(huì)為新對(duì)象添加屬性和方法，完成對(duì)象初始化伴奥。
“類”與實(shí)例
JS中是沒有類這個(gè)概念的写烤，因?yàn)镴S的對(duì)象與真正的面向?qū)ο笳Z言有差別，叫“基于對(duì)象”拾徙。
構(gòu)造函數(shù)可以看為是“類”洲炊，構(gòu)造函數(shù)new出來的對(duì)象可以看作為“實(shí)例”。
判斷這個(gè)實(shí)力是否是一個(gè)“類”構(gòu)造出來的尼啡，可以用
A instanceof B
prototype 原型
任何函數(shù)都有prototype屬性暂衡。
prototype屬性是個(gè)對(duì)象，它默認(rèn)擁有constructor屬性指回函數(shù)崖瞭。
普通函數(shù)的prototype屬性沒有任何用處狂巢，而構(gòu)造函數(shù)的prototype非常有用，構(gòu)造函數(shù)的prototype是它實(shí)例的原型书聚。
原型鏈
[圖片上傳失敗...(image-be2be0-1649463907747)]
hasOwnProperty 可以檢查對(duì)象是否真正“自己擁有”某屬性或方法唧领。
in 可以檢查對(duì)象是否能訪問到這個(gè)屬性或方法。
無法直接訪問的意思是雌续，構(gòu)造函數(shù)自身無法直接調(diào)用或訪問原型上的方法或?qū)傩哉陡觯鴮?shí)例可以，構(gòu)造函數(shù)自身想訪問原型上的方法必須先找原型再調(diào)用
在prototype上添加方法
將方法添加到構(gòu)造函數(shù)上時(shí)驯杜，生成的每一個(gè)新對(duì)象就會(huì)多一個(gè)新占用內(nèi)存的方法受啥，會(huì)造成內(nèi)存浪費(fèi)。
解決方法就是將方法寫道prototype上艇肴，只生成一個(gè)堆內(nèi)存就夠了腔呜。
重寫constructor
prototype里面自帶有一個(gè)constructor方法用于指回是哪個(gè)構(gòu)造函數(shù)構(gòu)造出來的，但通常一個(gè)構(gòu)造函數(shù)的原型方法里需要塞下多個(gè)方法的時(shí)候我們通常需要用對(duì)象的形式再悼，例如
function FFnn(){
}
FFnn.prototype = {
say(){}
sing(){}
}
通常會(huì)這樣子通過對(duì)象的形式往里面添加多個(gè)方法核畴，那么這個(gè)時(shí)候自帶的construtor就沒有了，所以這個(gè)時(shí)候如果你還想要有一個(gè)constructor方法指回構(gòu)造函數(shù)冲九，記得重新自己把constructor寫上
FFnn.prototype = {
constructor:FFnn
say:function(){}
sing:function(){}
}
繼承
兩個(gè)無關(guān)的構(gòu)造函數(shù)谤草，但一個(gè)構(gòu)造函數(shù)需要的屬性在另一個(gè)函數(shù)上也有，就可以利用原型鏈原理達(dá)成繼承莺奸。
方法：使子函數(shù)的原型等于另一個(gè)函數(shù)的實(shí)例：
Fun2.prototype = new Fun1();
繼承——圣杯模式
function inherit(Target,Origin){
function F(){};
F.prototype = Origin.prototype
Target.prototype = new F();
Targer.prototype.constructor = Targer;
Targer.prototype.uber = Origin.prototype;
}
包裝類
包裝類的目的就是為了讓基本類型值可以從他們的構(gòu)造函數(shù)的prototype上獲得方法丑孩。
包裝類構(gòu)造出來的值是一個(gè)對(duì)象，type of 返回 object 灭贷，可以參與運(yùn)算温学。
Math 數(shù)學(xué)對(duì)象
除了之前介紹的那些 Math 方法以外，我們還有更多常用的Math方法甚疟。
四舍五入 Math.round()
實(shí)現(xiàn)四舍五入到小數(shù)點(diǎn)后某位：
數(shù)字 * 10的n次方 然后四舍五入 再 / 10的n次方仗岖。
得到參數(shù)列表最大最小值
Math.max() 得到參數(shù)列表最大值逃延。
Math.min() 得到參數(shù)列表最小值。
如何求數(shù)組最大最小值：Math.max() 和 Math.min() 結(jié)合apply轧拄，例如：
var arr = [3,2,9];
var max = Math.max.apply(null,arr);
//ES6之后還可以
Math.max(...arr);
Date 日期對(duì)象
使用 new Date() 即可得到當(dāng)前時(shí)間的日期對(duì)象揽祥，他是object類型值。如果什么參數(shù)都不加就是此時(shí)此刻的時(shí)間檩电。
使用new Date(2021,6,12) 即可得到指定日期的日期對(duì)象拄丰，注意第二個(gè)參數(shù)是從0開始算的，6表示7月份俐末。
也可以new Date('2021-7-12') 這樣寫料按，算時(shí)區(qū)。
常見日期方法
| 方法 | 功能 |
|---|---|
| getDate() | 得到日期1~31 |
| getDay() | 得到星期0~6 |
| getMonth() | 得到月份0~11 |
| getFullYear() | 得到年份 |
| getHours() | 得到小時(shí)數(shù)0~23 |
| getMinutes() | 得到分鐘數(shù)0~59 |
| getSeconds() | 得到秒數(shù)0~59 |
時(shí)間戳
表示從1970年1月1日零點(diǎn)整距離某時(shí)刻的毫秒數(shù)鹅搪。
可以通過 getTime() 方法或 Date.parse() 函數(shù)可將日期對(duì)象改為時(shí)間戳站绪。
或者直接在date對(duì)象前面加個(gè)加號(hào) + 即可，例如 var chuo = + new Date()
通過 new Date(時(shí)間戳) 可將時(shí)間戳改為日期對(duì)象
正則表達(dá)式
regular expression 描述了字符串的“構(gòu)成模式”丽柿，經(jīng)常被用于檢查字符串是否符合預(yù)定的格式要求。
正則表達(dá)式“按位”描述規(guī)則魂挂，是指它是一位一位的描述子字符串的構(gòu)成形式甫题。
正則表達(dá)式的創(chuàng)建
使用 /內(nèi)容/ 的語法形式，可以快速創(chuàng)建正則表達(dá)式
也可以使用 new RegExp('內(nèi)容') 這種方法使用一些字符可能要用轉(zhuǎn)義涂召。
type of 檢查正則表達(dá)式返回object坠非。
元字符
| 元字符 | 功能 |
|---|---|
| \d | 匹配一個(gè)數(shù)字 |
| \D | 匹配一個(gè)非數(shù)字字符 |
| \w | 匹配一個(gè)單字字符 |
| \W | 匹配一個(gè)非單字字符 |
| \s | 匹配一個(gè)空白字符，包含空格制表符換行符 |
| \S | 匹配一個(gè)非空白字符 |
| . | 任意字符 |
| ^ | 匹配開頭 |
| # | 匹配結(jié)尾 |
量詞
| 量詞 | 意義 |
|---|---|
| * | 匹配前一個(gè)表達(dá)式0次或多次果正，等價(jià)于{0,} |
| + | 匹配前一個(gè)表達(dá)式1次或多次炎码，等價(jià)于{1,} |
| ? | 匹配前一個(gè)表達(dá)式0次或1次 |
| {n} | n是一個(gè)正整數(shù)，匹配了前面一個(gè)字符剛好出現(xiàn)了n次 |
| {n,} | n是一個(gè)正整數(shù)秋泳，匹配前一個(gè)字符至少出現(xiàn)了n次 |
| {n,m} | n和m都是正整數(shù)潦闲，匹配前面的字符至少出現(xiàn)n次，最多m次 |
方括號(hào)表示法
- 使用方括號(hào)迫皱，比如[xyz]可以創(chuàng)建一個(gè)字符集合歉闰，表示匹配方括號(hào)中的任意字符，一個(gè)方括號(hào)代表一位卓起。
- 可以用短橫 - 來指定一個(gè)字符范圍和敬，^ 表示否定
例如[0-9] [a-z] [A-Z] [0-9a-zA-Z_] [0-68-9]
修飾符
| i | 不區(qū)分大小寫搜索 |
| g | 全局搜索 |
正則表達(dá)式的方法
test() 測(cè)試某字符串是否匹配正則表達(dá)式，返回布爾值
exec() 根據(jù)正則表達(dá)式戏阅，在字符串中進(jìn)行查找昼弟，返回結(jié)果數(shù)組或者null。exec方法開啟全局搜索后可逐條遍歷（ES6迭代器概念）奕筐。
字符串的相關(guān)正則方法
| 方法 | 簡(jiǎn)介 |
|---|---|
| search() | 在字符串中根據(jù)正則表達(dá)式及逆行查找匹配舱痘，返回首次匹配到的位置索引变骡，測(cè)試不到則返回 -1 |
| match() | 在在字符串中根據(jù)正則表達(dá)式進(jìn)行查找匹配，返回一個(gè)數(shù)組衰粹，找不到則返回null |
| replace() | 使用替換字符串替換掉匹配到的子字符串锣光，可以使用正則表達(dá)式 |
| split() | 分割字符串為數(shù)組，可以使用正則表達(dá)式 |
本地存儲(chǔ)
- 本地存儲(chǔ)不會(huì)發(fā)送到服務(wù)器端铝耻，且二者大小有所區(qū)別誊爹，sessionStorage能存儲(chǔ)5m左右，localstorage可以儲(chǔ)存10m左右瓢捉。（單個(gè)域名下）
- 二者都可以在瀏覽器F12中频丘，Application-Storage 中找到，分為 key 和 value泡态。
- 使用方法為
sessionStorage.setItem(key,value)和localStorage.getItem(key,value) - 二者存儲(chǔ)的鍵和值只能是字符串類型搂漠，如果不是字符串類型，也會(huì)先轉(zhuǎn)成字符串再存進(jìn)去某弦⊥┨溃或者存入JSON類型值
- 不同域名不能共用 sessionStorage 和 localStorage
- IE7及以下不支持
sessionStorage
sessionStorage 是一種瀏覽器本地存儲(chǔ)數(shù)據(jù)的方式，只存儲(chǔ)在本地靶壮，不發(fā)送到服務(wù)器端怔毛。當(dāng)會(huì)話結(jié)束（例如關(guān)閉瀏覽器時(shí)），sessionStorage 中的數(shù)據(jù)會(huì)清空腾降〖鸲龋基本用法：
- 增加數(shù)據(jù)setItem方法：
sessionStorage.setItem(key,value); - 查詢數(shù)據(jù)getItem方法：
sessionStorage.getItem(key); - 刪除數(shù)據(jù)removeItem方法：
sessionStorage.removeItem(key);
全部清空clear方法：sessionStorage.clear(); - 改更數(shù)據(jù)setItem方法：同key屬性覆蓋
其他屬性：
- length 屬性：
sessionStroage.length()獲取長(zhǎng)度 - key方法，參數(shù)時(shí)數(shù)據(jù)螃壤，代表key的索引抗果，根據(jù)索引獲取key值。
sessionStorage.key(0)
localStorage
localStorage 時(shí)持久化的本地存儲(chǔ)奸晴，除非手動(dòng)清楚或者滿了自動(dòng)清除冤馏，否則數(shù)據(jù)永遠(yuǎn)不會(huì)過期。
- 增加數(shù)據(jù)setItem方法：
localStorage.setItem(key,value); - 查詢數(shù)據(jù)getItem方法：
localStorage.getItem(key); - 刪除數(shù)據(jù)removeItem方法：
localStorage.removeItem(key);
全部清空clear方法：localStorage.clear(); - 改更數(shù)據(jù)setItem方法：同key屬性覆蓋
- length 屬性：
localStroage.length()獲取長(zhǎng)度 - key方法蚁滋，參數(shù)時(shí)數(shù)據(jù)宿接，代表key的索引，根據(jù)索引獲取key值辕录。
loacalStorage.key(0)
