JS
1、js簡介
JavaScript是一種基于對象的客戶端的腳本語言
是一種弱類型的動態(tài)腳本語言
弱類型：對數(shù)據(jù)類型要求不嚴(yán)格，只有當(dāng)執(zhí)行到某一句代碼的時(shí)候，才去確定這個變量里的數(shù)據(jù)是什么類型
動態(tài)語言：就是指在運(yùn)行過程當(dāng)中，可以動態(tài)地給對象添加屬性和方法
js能做什么
網(wǎng)頁特效
數(shù)據(jù)驗(yàn)證
游戲開發(fā)
與服務(wù)器交互
服務(wù)端開發(fā)
js的歷史
1995年誕生，專用于客戶端數(shù)據(jù)驗(yàn)證，叫LiveScript
當(dāng)時(shí)Java很火，為了推廣，更名Javascript
1996年，微軟發(fā)布了自己的Javascript，叫JScript
1997年，ECMA組織規(guī)定了Javascript的標(biāo)準(zhǔn)，叫ECMAScript，約束了js的語法和功能
2003年，js被大量用于頁面廣告，被稱為“牛皮癬”
2004年，Google公司推出Ajax技術(shù)，拯救了Js
2007年，移動端的出現(xiàn)讓js更加得到重視
2010年，H5推出，Canvas和Javascript的結(jié)合使用，讓js功能更加強(qiáng)大
2011年，nodejs的出現(xiàn)，讓js前后端通吃
js的組成
ECMAScript 規(guī)定了js的語法規(guī)范和所具有的功能
DOM（document object model）文檔對象模型：就是js操作頁面結(jié)構(gòu)的一套工具（方法）
BOM （browser object model）瀏覽器對象模型 ：操作瀏覽器部分功能的一套方法
如何使用js
內(nèi)嵌式
外聯(lián)式
行內(nèi)式(了解)
JS語法
1、注釋
讓js解釋器，忽略注釋之后的內(nèi)容
單行注釋 //
多行注釋 /* 需要注釋的內(nèi)容 */
作用：解釋說明，文檔注釋
2、常用全局函數(shù)
alert() 彈出一個提示框，警告框
console.log() 在控制臺中輸出內(nèi)容
document.write() 在頁面上輸出內(nèi)容
3、變量
什么是變量？簡單的理解為：變量是用來存儲數(shù)據(jù)的容器
深刻的理解變量：變量并不是真正保存數(shù)據(jù)的地方，真正保存數(shù)據(jù)的地方是內(nèi)存，內(nèi)存存在一個內(nèi)存地址，變量負(fù)責(zé)保存內(nèi)存地址，內(nèi)存地址指向數(shù)據(jù)
4、變量的聲明和賦值
var 變量名;
聲明和賦值可以同時(shí)進(jìn)行 var a = "張三";
聲明和賦值可以分開：var a; a = "李四";
變量聲明是可以一次聲明多個: var a,b,c,d; or var c=1,d=2,e=3;
變量是可以重復(fù)賦值: var a = 10; a = 12;
5、變量命名規(guī)范
字母，下劃線，數(shù)字，$ 這些可用的字符
不能用數(shù)字開頭
不能使用關(guān)鍵字，保留字
嚴(yán)格區(qū)分大小寫
建議變量的命名要有意義
建議使用駝峰命名法
駝峰命名法：第一個單詞的首字母小寫，第二個及以后的單詞首字母大寫
userNameOne
關(guān)鍵字和保留字：
保留字：現(xiàn)在還不是關(guān)鍵字，將來有可能成為關(guān)鍵字
注意：使用保留字為變量命名是不會報(bào)錯，但是為了程序的安全性考慮，我們規(guī)定不能使用保留字作為變量名
1、js數(shù)據(jù)類型
基本類型：number數(shù)字，string字符串，布爾boolean，undefined，null
引用類型：object
number數(shù)字類型
包括所有的數(shù)字（浮點(diǎn)數(shù)，整數(shù)，正數(shù)，負(fù)數(shù)）和 NaN
isNaN （） 方法可判斷數(shù)據(jù)是否為NaN（結(jié)果為 true false）
NaN 表示某個結(jié)果不是一個數(shù)字，但是它歸屬于Number類型
isNaN() 判斷某個數(shù)據(jù)是否不是一個數(shù)字，當(dāng)數(shù)據(jù)是數(shù)字的時(shí)候，返回false，當(dāng)數(shù)據(jù)不是數(shù)字的時(shí)候，返回true
數(shù)字的進(jìn)制：
二進(jìn)制 滿二進(jìn)一 0-1
八進(jìn)制 滿八進(jìn)一 0-7
十進(jìn)制 滿十進(jìn)一 0-9
十六進(jìn)制 滿十六進(jìn)一 0-9a-f
String字符串類型
格式：使用雙引號，或者單引號包起來
字符串不可變性: 在js當(dāng)中，操作字符串的時(shí)候，并不是在原來的字符串上進(jìn)行修改，而是重新開辟內(nèi)存，生成新的字符串，把變量重新指向新的字符串，原來的字符串并不會馬上消失，而是等待垃圾回收機(jī)制進(jìn)行回收
Boolean布爾類型
只有兩個值：ture，false 通常表示對和錯，表示條件成立與否 比較運(yùn)算符
null
空 只有一個值 null 表示不是一個對象
undefined
未定義
只有一個值 undefined
聲明變量的時(shí)候，如果沒有賦值，默認(rèn)就是賦值為undefined
2、運(yùn)算符
比較運(yùn)算符
< >= <= == != 不嚴(yán)格等于: 比較的是內(nèi)容（值）
=== !== 嚴(yán)格等于: 比較的是內(nèi)容（值）和類型
當(dāng)兩邊都為 String 時(shí)，將比較其 ASCII
當(dāng)兩邊有一個為number時(shí)，左右都必須轉(zhuǎn)換成number類型然后比較
算術(shù)運(yùn)算符
- 二元算術(shù)運(yùn)算符
+ - * / %
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n132" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">+ ：運(yùn)算
?
數(shù)字相加：得到數(shù)字
?
數(shù)字和非數(shù)字內(nèi)容的字符串相加：字符串
?
數(shù)字和數(shù)字內(nèi)容的字符串相加：字符串
?
-，*，/，% : 運(yùn)算
?
數(shù)字相運(yùn)算得到數(shù)字
?
數(shù)字和數(shù)字內(nèi)容的字符串運(yùn)算：得到數(shù)字
?
數(shù)字和非數(shù)字內(nèi)容的字符串運(yùn)算：NaN</pre>
- 一元算術(shù)運(yùn)算符
++，--
前++（--） ++a：先對a進(jìn)行自增或者是自減，然后以新的值參與運(yùn)算
后++（--）a++：先以a的值進(jìn)行運(yùn)算，然后再進(jìn)行自增或者自減
邏輯運(yùn)算符
&& 與 兩個條件都是true的時(shí)候?yàn)閠rue
|| 或 兩個條件都是false的時(shí)候?yàn)閒alse
! 非 顛倒是非 【var c= !a //a轉(zhuǎn)換成bool取反,則c的值為false】
短路運(yùn)算（短路運(yùn)算的作用是為了賦值）
&& 短路： 當(dāng)&&左邊為true的時(shí)候，結(jié)果就跟左邊沒有關(guān)系了，直接得到&&的右邊（執(zhí)行結(jié)果）
|| 短路： 當(dāng)||的左邊為false，結(jié)果就跟false沒關(guān)系，直接得到||右邊的執(zhí)行結(jié)果 （函數(shù)傳參取默認(rèn)值常用）
賦值運(yùn)算符
= ：最簡單的賦值運(yùn)算
復(fù)雜：+=，-=，*=，/=, %= 【 兩個符號之間不能空格 】
運(yùn)算符的優(yōu)先級
3、類型轉(zhuǎn)換
-
將字符串轉(zhuǎn)換為數(shù)字
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n157" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">Number() （整體轉(zhuǎn)換：內(nèi)容為純數(shù)字，則能轉(zhuǎn)換成number,如果內(nèi)容有非數(shù)字的內(nèi)容，則會轉(zhuǎn)換成NaN）
【 Number 能轉(zhuǎn)換任意類型的數(shù)據(jù)如 string bool數(shù)據(jù)類型 等都可以 】
只能轉(zhuǎn)換數(shù)字為內(nèi)容的字符串，否則得到NaN
可以轉(zhuǎn)換浮點(diǎn)數(shù)
?
parseInt() （ 部分轉(zhuǎn)換 ）
【 parseInt只能轉(zhuǎn)換字符串類型的數(shù)據(jù)不能轉(zhuǎn)換如 bool 不能用該方法轉(zhuǎn)換 】
只能得到整數(shù)
會盡可能的嘗試轉(zhuǎn)換到第一個非數(shù)字的字符為止
?
parseFloat() （ 部分轉(zhuǎn)換 ）
【 parseFloat 只能轉(zhuǎn)換字符串類型的數(shù)據(jù)不能轉(zhuǎn)換如 bool 不能用該方法轉(zhuǎn)換】
會盡可能的嘗試轉(zhuǎn)換到第一個非數(shù)字的字符為止
可以轉(zhuǎn)換浮點(diǎn)數(shù)（能取到小數(shù)）</pre> -
將其他轉(zhuǎn)換成字符串
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n160" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">1 String() 可以將任意類型轉(zhuǎn)換為字符串
2 .toString() 可以將部分類型轉(zhuǎn)換為字符串，null，undefined不能使用
3 隱式轉(zhuǎn)換：+ ""</pre> -
轉(zhuǎn)換為布爾類型
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="" cid="n163" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">Boolean()
把其他任意類型轉(zhuǎn)換為布爾
?
在js當(dāng)中，有哪些可以轉(zhuǎn)換為false 【只有這個6個值轉(zhuǎn)換成bool時(shí)能】
null,undefined,0,""【空字符串】,false,NaN
?
隱式轉(zhuǎn)換 !!數(shù)據(jù) </pre>
類型判斷
判斷數(shù)據(jù)的類型 typeof 數(shù)據(jù) or typeof(數(shù)據(jù))
4、js的語法結(jié)構(gòu)
順序結(jié)構(gòu)
-
選擇結(jié)構(gòu)(if-else 和switch-case)
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n173" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">if (條件表達(dá)式) {
條件表達(dá)式成立的時(shí)候執(zhí)行的語句
}
?
if (條件表達(dá)式) {
條件表達(dá)式成立的時(shí)候執(zhí)行的語句
}else {
條件表達(dá)式不成立的時(shí)候執(zhí)行的語句
}
?
if (表達(dá)式1) {
表達(dá)式1成立時(shí)執(zhí)行的代碼
}else if （表達(dá)式2）{
表達(dá)式2成立時(shí)執(zhí)行的代碼
}else if (){
?
}...
else {
所有的表達(dá)式都不成立時(shí)執(zhí)行的代碼
}
?
switch(n) {
case 定值1:
當(dāng)n和定值1相等的時(shí)候執(zhí)行的代碼
break;
case 定值2:
當(dāng)n和定值2相等的時(shí)候執(zhí)行的代碼
break;
case 定值3:
當(dāng)n和定值3相等的時(shí)候執(zhí)行的代碼
break;
default：
當(dāng)n和所有的定值都不相等的時(shí)候執(zhí)行的代碼
}
switch-case和if-else的區(qū)別
- if-else 通常用來比較區(qū)間值
- switch-case 只能用來比較定值
所以，建議在一個變量和多個定值比較的時(shí)候，用switch-case，如果只有一個定值要比較，建議使用if-else，如果是區(qū)間值，只能只用if-else
?
三元表達(dá)式：
表達(dá)式1 ? 表達(dá)式2 : 表達(dá)式3
先判斷表達(dá)式1是否成立，如果成立，執(zhí)行表達(dá)式2，并且返回表達(dá)式2的執(zhí)行結(jié)果，如果表達(dá)式1不成立，執(zhí)行表達(dá)式3，并且返回表達(dá)式3的執(zhí)行結(jié)果，當(dāng)邏輯處理比較復(fù)雜的時(shí)候，使用if-else，如果邏輯處理非常簡單，使用三元表達(dá)式</pre> -
循環(huán)結(jié)構(gòu)
什么是循環(huán)：重復(fù)的去做一件事情 ,重復(fù)執(zhí)行一段代碼
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n178" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">while循環(huán)
?
while (條件表達(dá)式){
循環(huán)體，就是條件表達(dá)式成立的時(shí)候重復(fù)執(zhí)行的代碼
}
?
do {
循環(huán)體
}while(條件表達(dá)式)
?
?
do-while 和 while 的區(qū)別:
while 循環(huán)，有可能一次循環(huán)體都不執(zhí)行
do-while 至少執(zhí)行一次循環(huán)體
for循環(huán)
for ( 循環(huán)的初識值 ; 條件表達(dá)式 ; 自增或者自減的步長 ) {
循環(huán)體
}
執(zhí)行順序：
先初始化初始值，判斷條件表達(dá)式是否成立，執(zhí)行循環(huán)體，循環(huán)體執(zhí)行完畢之后，自增或者自減，再檢查條件是否成立，成立就執(zhí)行循環(huán)體，否則結(jié)束循環(huán)
?
for循環(huán)和while循環(huán)的區(qū)別:
?
while 可以無限次循環(huán)，通常用來做未知次數(shù)的循環(huán)
?
for 從一開始就指定循環(huán)的次數(shù)，用來做已知次數(shù)的循環(huán)</pre>
5、數(shù)組
什么是數(shù)組
數(shù)組就是數(shù)據(jù)的有序集合，有長度 length，在js當(dāng)中，數(shù)組可以裝任意類型的數(shù)據(jù)
創(chuàng)建數(shù)組
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n184" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">構(gòu)造函數(shù)的方式
var arr = new Array(); // 創(chuàng)建了一個空的數(shù)組，長度為0
var arr = new Array(100); //創(chuàng)建了一個空的數(shù)組，長度為100
?
字面量表示法:
var arr = []; // 創(chuàng)建了一個空的數(shù)組,長度為0</pre>
數(shù)組的賦值
<pre spellcheck="false" class="md-fences md-end-block ty-contain-cm modeLoaded" lang="js" cid="n186" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">使用索引賦值,數(shù)組的索引是從0開始
var arr = [];
arr[0] = 1;
arr[1] = 2;
arr[2] = "ABC";
arr[3] = false;
?
數(shù)組的初始化賦值：
?
ar arr = new Array(1,2,"abc",false);
var arr2 = [1,2,"abc",false];</pre>
數(shù)組的取值
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n188" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">使用索引取值
var str = arr[2]; // 通過索引取值，要使用[]運(yùn)算符
</pre>
數(shù)組的遍歷
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n190" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">for(var i = 0; i < arr.length ; i++ ){
console.log(arr[i]);
}
</pre>
6、數(shù)組的操作方法
concat：連接數(shù)組 不會改變原來的數(shù)組，而是得到一個新的數(shù)組
join : 使用某一個字符，連接所有的數(shù)組的元素，得到一個字符串
-
push(xx, ....)：向一個數(shù)組中添加一個或者多個元素，并且返回?cái)?shù)組增加元素之后的長度
會修改原來的數(shù)組
shift：刪除數(shù)組的第一個元素，并返回，也會修改原數(shù)組
pop(): 刪除數(shù)組中的最后一個元素，并且返回這個元素，會修改原數(shù)組
indexOf（searchValue [,formindex]）：獲取數(shù)組中某個元素第一次出現(xiàn)的索引，但是如果規(guī)定從哪個索引開始查找，可以查找到任意位置元素
-
slice（start，end） 獲取從數(shù)組中某個下標(biāo)開始，到end結(jié)束的所有元素，但是不能獲取到end
splice() 刪除從i(索引值)開始之后的那個元素。返回值是刪除的元素
清空數(shù)組
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n211" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var arr= [1,2,3,4,5];
// arr.splice(0);
// console.log(arr);
// console.log(arr);
// arr.length = 0;
console.log(arr);
arr = [];
console.log(arr);
</pre>
7、函數(shù)
什么是函數(shù)
可以在需要的時(shí)候執(zhí)行的，可以重復(fù)使用的一段代碼 ，思想：代碼復(fù)用，把不變的放到函數(shù)體里面，把改變的變成參數(shù)
定義函數(shù)
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n218" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">1、使用function關(guān)鍵字聲明
function 函數(shù)名 ( 參數(shù)列表 ) {
函數(shù)體
}
2、函數(shù)表達(dá)式
var 函數(shù)名 = function (參數(shù)列表) {
函數(shù)體
}
</pre>
函數(shù)命名
命名規(guī)范和變量一樣，推薦使用動詞，推薦駝峰命名
函數(shù)的調(diào)用
函數(shù)名(參數(shù)的列表);
函數(shù)的返回值
函數(shù)執(zhí)行完畢之后，得到一個結(jié)果，就是函數(shù)的返回值
如果函數(shù)里面沒有寫return關(guān)鍵字，函數(shù)執(zhí)行完畢之后，會默認(rèn)的到undefined
如果函數(shù)里有些return，但是return沒有跟任何的東西，函數(shù)執(zhí)行完畢，會默認(rèn)得到undefined
如果函數(shù)里有return，并且return后面跟著某個變量或者值，函數(shù)執(zhí)行之后，得到return后面的這個東西
return關(guān)鍵字，除了可以返回函數(shù)的返回值之外，還能，終止函數(shù)的執(zhí)行
函數(shù)的參數(shù)
- 形參
形式參數(shù)，就是我們在聲明函數(shù)的時(shí)候?qū)懺趨?shù)列表里的參數(shù)，起到占位的作用，讓我們可以在調(diào)用函數(shù)的時(shí)候，傳入響應(yīng)參數(shù)，來在函數(shù)執(zhí)行的時(shí)候參與運(yùn)算
- 實(shí)參
其實(shí)就是我們在調(diào)用函數(shù)的時(shí)候傳入?yún)?shù)，是實(shí)際參與函數(shù)執(zhí)行的參數(shù)。
函數(shù)的四種形式
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n249" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">1、無參無返回值
function logError(){
console.log("這里出現(xiàn)了一個錯誤");
}
2、無參有返回值
function getRandom(){
return Math.random();
}
3、有參無返回值
function log(msg){
console.log(msg);
}
4、有參有返回值
function getSum(n){
var sum = 0;
for (var i = 1; i < n; i++) {
sum += i;
}
return sum;
}
</pre>
函數(shù)調(diào)用函數(shù)的執(zhí)行過程
當(dāng)函數(shù)去調(diào)用另一個函數(shù)的時(shí)候，會去到那個被調(diào)用的函數(shù)里執(zhí)行，被調(diào)用的函數(shù)執(zhí)行完畢之后，會回到調(diào)用它的位置
函數(shù)也是數(shù)據(jù)類型
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n254" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">function fn(){
}
console.log(typeof fn); //得到的結(jié)果是輸出了：function 是數(shù)據(jù)類型，就可以當(dāng)成參數(shù)傳遞
</pre>
匿名函數(shù)
沒有函數(shù)名的函數(shù)
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n258" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">function （參數(shù)列表） {
函數(shù)體
}
</pre>
自執(zhí)行函數(shù)
聲明結(jié)束之后，立刻執(zhí)行
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n261" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">(function (){
console.log("1");
console.log("2");
})();
</pre>
8、作用域
-
全局作用域
在頁面的任意位置都可以訪問的作用域，在全局作用域下聲明的變量，可以在任意位置訪問
-
局部作用域
就是指函數(shù)的內(nèi)部，在函數(shù)內(nèi)部聲明的變量就是局部變量，如果在局部作用域內(nèi)，沒有使用var聲明的變量，這個變量是一個全局變量 。但是這種做法不推薦
9、預(yù)解析
js的執(zhí)行不是單純解釋一行執(zhí)行一行，而是有一個預(yù)解析的過程，會找到當(dāng)前作用域下的所有的var和function關(guān)鍵字，把變量的聲明和函數(shù)的聲明提升到當(dāng)前作用域的最頂端。
變量提升和函數(shù)提升
其實(shí)就是預(yù)解析的時(shí)候做的變量的聲明提前和函數(shù)的聲明提前
定時(shí)器
setTimeOut
setInterver
10、JS的內(nèi)置對象
Math對象
就是js提供的一套關(guān)于數(shù)學(xué)的一些方法
Math.ceil() 向上取整
Math.floor() 向下取整
Math.pow(x,y) 求x的y次方
Math.max(x,y,z,...) 求兩個或多個數(shù)字的最大值
Math.min(x,y,z...) 求兩個或者多個數(shù)字的最小值
Math.random() 獲得[0,1)之間的隨機(jī)數(shù)
Math.PI js當(dāng)中的圓周率
Data對象
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n303" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">創(chuàng)建當(dāng)前日期的日期對象
var date = new Date();
創(chuàng)建指定日期的日期對象
var date = new Date(2016,10,1); //注意：這里的月份是要從0開始，如果想要得到10月1號則要寫9月
獲取日期的毫秒數(shù)
var ms1 = +new Date();
or
var date = new Date();
console.log(date.getTime());
獲取日期對象的每一個部分
var date = new Date();
//獲取年份
console.log(date.getFullYear());
//獲取月份,獲得到的月份是從0開始
console.log(date.getMonth());
//獲取日期中日
console.log(date.getDate());
//獲取日期中的星期幾,要注意的是，星期是從星期日，得到0就是星期日，得到6，就是星期六
console.log(date.getDay());
//獲得小時(shí),0到23
console.log(date.getHours());
//獲取分鐘,0到59
console.log(date.getMinutes());
//獲取秒數(shù),0到59
console.log(date.getSeconds());
//獲取毫秒數(shù),得到0到999
console.log(date.getMilliseconds());
</pre>
操作字符串的方法
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n305" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">var str = "abcdefghijklmn";
得到某一個位置的字符
console.log(str.charAt(0));
console.log(str[5]);
concat用來連接多個字符串的方法
var str2 = "abc";
var str3 = "def";
連接多個字符串，得到一個新的字符串，不會改變原來的字符串
console.log(str.concat(str2,str3));
console.log(str);
slice用來截取從start開始，到end結(jié)束的字符
console.log(str.slice(3,7));
substring用來截取字符串，從start開始，到end結(jié)束的字符，可以取到start，不能得道end
console.log(str.substring(3,7));
substr(start,length)，意思是從start開始，一共截取length的長度
console.log(str.substr(3,5));
indexOf 查找某一個字符在字符串中的位置,只能找到從某一個位置開始的第一個
console.log(str.indexOf("z"));
var str = "abcabcabc";
console.log(str.indexOf("c",3));
lastIndexOf,從后面開始往前面找，也只能找到第一次出現(xiàn)的位置,除了查找的方向和indexOf不一樣，其他都一樣
var str = "abcabcabc";
console.log(str.lastIndexOf("a",5));
trim方法，用來去除字符串兩邊的空格,會得到新的字符串，不會改變原字符串
var str = " abc def hij ";
console.log(str);
console.log(str.length);
console.log(str.trim());
console.log(str);
字符串大小寫轉(zhuǎn)換
var str = "abcdef";
大寫轉(zhuǎn)換，不會對原來的字符串造成影響
var str2 = str.toUpperCase();
var str3 = str.toLocaleUpperCase();
console.log(str2);
console.log(str3);
console.log(str);
小寫轉(zhuǎn)換,不會對原字符串造成影響
var str4 = str2.toLowerCase();
var str5 = str3.toLocaleLowerCase();
console.log(str4);
console.log(str5);
console.log(str2);
console.log(str3);
replace替換字符串里的對應(yīng)字符,但是只能替換掉匹配的第一個
var str = "abcdeffkfkfff";
var str2 = str.replace("f","g");
console.log(str2);
console.log(str);
split把字符串變成數(shù)組,根據(jù)的是分割的字符
var arr = [1,2,3,4,5,6];
var str = arr.join("|");
console.log(str);
var newArr = str.split("|");
console.log(newArr);
var str = "abcabcabc";
var arr = str.split("a");
var arr = str.split("");
console.log(arr);
</pre>
對象
在js當(dāng)中，對象就是無序?qū)傩缘募?，對象里面包含屬性和方?/p>
創(chuàng)建對象
1 構(gòu)造函數(shù)法
var o = new Object();
2 對象的字面量表示法
var o = {};
訪問對象的屬性
-
使用點(diǎn)的方式
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n321" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">使用點(diǎn)的方式訪問對象的屬性，獲取對應(yīng)的屬性的值
console.log(nokia.brand);
console.log(nokia.name);
</pre> -
通過鍵的方式
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="" cid="n324" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">使用鍵的方式訪問對象的屬性
console.log(nokia["with"]);
</pre> -
使用for-in的方式遍歷對象
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n329" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit;">for-in 的方式訪問對象屬性，可以訪問到某個對象的所有屬性和方法
// for(var 鍵 in 要訪問的對象){
// 循環(huán)體
// }
for(var k in nokia){
console.log("對應(yīng)的鍵是"+k+"，對應(yīng)的值是"+nokia[k]);
}
</pre>
自定義對象的構(gòu)造函數(shù)
構(gòu)造函數(shù)本質(zhì)上也是函數(shù)，只不過是專門用來創(chuàng)建對象，并且使用new的方式
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="js" cid="n333" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">function Person(name,height,weight,color){
// 在構(gòu)造函數(shù)當(dāng)中，this關(guān)鍵字，就是構(gòu)造函數(shù)幫我們創(chuàng)建好的對象
this.name = name;
this.height = height;
this.weight = weight;
this.color = color;
this.sayHi = function(){
console.log("你好，我的名字是" + this.name +"，我的身高是" + this.height + "，我的體重是" + this.weight);
}
}
var zs = new Person("張三",150,50,"yellow");
var ls = new Person("李四",180,70,"black");
console.log(zs);
console.log(ls);
</pre>
this關(guān)鍵字
- 在構(gòu)造函數(shù)當(dāng)中
this關(guān)鍵字在構(gòu)造函數(shù)當(dāng)中，就是指構(gòu)造在創(chuàng)建對象時(shí)的那個對象
- 在函數(shù)或者方法當(dāng)中
誰調(diào)用函數(shù)或者方法，this就是誰
new關(guān)鍵字
new 用來創(chuàng)建新的對象
1 先創(chuàng)建了一個自定義對象
2 把this關(guān)鍵字指向剛才創(chuàng)建的對象
3 執(zhí)行構(gòu)造函數(shù)里的代碼，也就是想this（已經(jīng)創(chuàng)建的對象）添加屬相和方法
4 返回this（被創(chuàng)建的對象）
JSON
其實(shí)JSON，就是結(jié)構(gòu)化數(shù)據(jù)格式
1 JSON格式的鍵，必須是雙引號包裹的字符串
2 不支持undefined
<pre spellcheck="false" class="md-fences mock-cm md-end-block" lang="" cid="n359" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: pre-wrap; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-style: initial; text-decoration-color: initial;">{
"name" : "張無忌",
"wugong" : "九陽神功",
"attack" : 999999
// "deadTime" : undefined
}
</pre>
基本類型和引用類型
基本類型（值類型）
是存儲在?？臻g上，當(dāng)我們聲明多個變量的值都是一樣的時(shí)候，是分配不同的內(nèi)存位置，當(dāng)我們調(diào)用函數(shù)的時(shí)候，會把這些值復(fù)制一份進(jìn)入函數(shù)區(qū)運(yùn)行，就不會改變原來實(shí)參的值
引用類型
是存儲在堆空間里的，只有一份，如果有多個變量指向同一個對象，會在?？臻g保存有多個地址，這些地址都是指向這個對象，當(dāng)我們把這些變量傳入函數(shù)中運(yùn)行的時(shí)候，其實(shí)都是根據(jù)變量保存的地址，找到對象，操作同一個對象
