JavaScript
ESCMAScript（核心）
變量
關鍵字
一組特定用途的關鍵字：Var、if、else、do、while、for、in …
var、let用於定義變量，使用了let定義變量不能重複,使用const定義的叫常量，定義之後不能改變
保留字
未來有可能成爲關鍵字
變量命名規則
由數字、字母、下劃線和美元符號的一種或幾種組成，不能以數字開頭，嚴格區分大小寫
數據類型
基本（原始）數據類型
數字（一般用於計算）
number
字符串
string
布爾
Boolean
undefined
undefined
null
object
Symbol 類型 表示獨一無二的值
使用console.log(typeof a);//在控制檯看數據類型
引用（複合）數據類型
對象
object
類型轉換
顯式轉換
把字符串轉換爲數字
var num1 = parseInt(); //把字符串轉換成整數數值（取出整數部分）
parseFloat(); //把字符串直接轉換成浮點數(小數)
number(); //\n把字符串直接轉換成數字（只有純數字才能轉換，如果裏面包含有字母，就直接轉爲NAN【不是數字】）
把數字轉換爲字符串
console.log(string(num)); //直接轉化爲字符串
console.log(booLean(0)); //轉換爲布爾值，只有值爲0，輸出false，其他值輸出爲true
隱式轉換
運算符
算術運算符
+
-
*
/
%
求餘數 求n/m的餘數 n/2看結果可知道n爲奇偶
**
求次方 n**m 求n的m次方
賦值運算符
=
直接賦值
+=
box+=10; //box結果爲原先的box值加10
-=
box-=10; //box結果爲原先的box值減10
*=
box*=10; //box結果爲原先的box值乘10
/=
box/=10; //box結果爲原先的box值處以10
%=
box%=10; //box結果爲原先的box值處以10的餘數
關係運算符
>
n>m； //當結果爲正確時，打印出來的結果爲true，反之爲false
<
<=
>=
==
用於判斷是否相等，只判斷數字是否相等
!=
用於判斷是否不相等，不光比較數值，還比較類型
===
全等，精確相等，判斷等號前後是否完全一致，不光比較數值，還比較類型
!==
只判斷數字是否不相等
單目運算符
雙目運算符
1+2；
三目運算符（相當於一個if else判斷）
let res1 = 1 > 2 ? 2 : 3; console.log(res1) // let res1 = 表達式1 ? 表達式2 : 表達式3;（如果表達式1的值爲true，整個表達式的值爲表達式2，反之結果爲表達式3）
程序的基本結構
順序結構
代碼從上往下執行
選擇結構（分支結構）
單分支
if
if （）{}
if else
if （）{}else{}
switch
switch (){case: console.log() break; default: console.log() break; }
多分支
雙分支
循環結構
while 循環
while（條件）{語句}
do while循環
do{語句}while(條件)
for循環
for(初始化表達式；條件；遞增表達式){}
循環嵌套
外層循環循環一次，能層循環循環一圈
死循環
當不知道循環次數時，使用死循環然後再合適的時候結束循環
while（true）{}
for(;;){}
跳轉，讓代碼不按既有的順序循環
break
結束整個循環流程
continue
結束本次循環，返回循環的頭部，進入下一輪循環
函數：一個函數只執行一個功能，可以反覆調用
function函數
function 函數名稱（）{函數中要執行的代碼}
變量的聲明提升（面試題）
在函數內部使用var命令聲明的變量，會被提升到函數體的頭部，js引擎在執行js時，會先做一個預解析。提前將所都要用到的變量先定義但是沒有賦值
function foo(x){if(x>100){var tmp=x-100;}}\n//等同於\nfunction foo(x){var tmp;if(x>100){tmp=x-100;};}
函數表達式
採用變量賦值的方式聲明函數
var 函數名稱=function(){函數中要執行的代碼}
內置函數
parseInt();//parseInt函數 功能：把參數轉換成整數
parseFloat();//parseFloat函數 功能：轉換爲數字
函數和事件
鼠標事件
but.onclick=function(){}//鼠標左鍵單擊
ondblclick 鼠標雙擊
onmousedown 鼠標按鍵擡起
onmousemove 鼠標按鍵在元素上移動
onmouseover 鼠標進入
onmouseout 鼠標移出 （與onmouseover是一對） 他們兩個默認冒泡
onmouseleave 鼠標移出（與onmouseenter是一對）他們兩個默認不冒泡
onmouseenter 鼠標移入
oncontextmenu 鼠標右鍵點擊
根據id名獲得HTML中的元素
let btn=document.getElementById('btn')
div.innerHTML獲取元素內部的HTML代碼
div.innerHTML='字符串'//相當於替換了DIV內部的原HTML代碼
鍵盤事件
Onkeydown 鍵盤按鍵按下
Onkeyup 鍵盤按鍵擡起
Onkeypress 鍵盤按鍵按住
表單事件
Onblur 失去焦點
Onfocus 獲取焦點
Onchange 內容修改
函數的返回值：return
如果沒有return該函數將返回undefined
arguments 對象
在函數內部讀取所有的參數
arguments【0】是第一個實參
arguments【1】是第二個實參
arguments【‘length’】用於求參數的長度
arguments.length 用於求參數的長度
console.log(arguments) 獲取所有的實參
隨機數
Math.random()
它是一個【0-1）之間的數值
parseInt(Math.random()*10)
它是一個【0-9）之間的整數
作用域
局部作用域
局部變量（形參都是局部變量）
使用var在函數內部定義的變量
使用let或者const在代碼塊中定義的變量
全局作用域
全局變量（在函數外部聲明的）
全局變量會被同名的局部變量覆蓋
遞歸函數
能用循環的都能用遞歸，但是一般都用循環，循環的效率比遞歸高
步驟
先找臨界值
找本項和上一項的關係
假設當前函數已經可以用了，調用上一次的結果寫出關係式
構造函數
函數名（首字母大寫）
屬性
this;//當使用new調用構造函數的時候,會自動創建一個this 是一個{}對象
this.name=name;this age=1;
方法
函數
數組
創建
字面量和構造函數
方法
尾部添加：push（改變原數組）
尾部刪除：pop（改變原數組）
頭部添加：unshift（改變原數組）
頭部刪除：shift（改變原數組）
複製數組：slice（不改變原數組）
刪除數組：splice（改變原數組）
反轉數組：reverse（改變原數組）
按字典方式排序：sort（改變原數組）
將數組轉爲字符串：join
把多個數組合併成爲一個：concat（不改變原數組）
判斷是不是數組Array.isArray（）
遍歷數組中的每一個元素：arr.forEach(function(v,i){})
根據return後面的規則一一映射：arr.map(function(v,i){return v*1.3})
用於過濾滿足條件的元素：arr.filter(function(v,i){return v>5})
累計：arr.reduce(function(v,i){return a+b})
數組中某個元素第一次出現的位置，找不到返回-1：arr.indexOf()
數組中某個元素最後一次出現的位置，找不到返回-1：arr.lastIndexOf()
判斷是否數組中的每一個元素都符合某個條件：arr.every(function(v,i){return v>3})
判斷是否數組中有某一個元素符合某個條件：arr.some(function(v,i){return v>3})
查找元素，返回元素，找不到返回undefined：arr.find(function(v,i){return v===3})
查找元素，返回元素所在的下標，找不到返回undefined：arr.findIndex(function(v,i){return v===3})
將可遍歷的對象和僞數組以及arguments對象都轉化爲數組：Array.from
數組去重：Arrayfrom(new Set(arr))
數組去重：【...(new Set(arr))】
判斷數組中是否包含某個元素：includes
字符串
創建
字面量
構造函數
方法【字符串中的所有方法都不改變原數組】
獲取指定位置的字符：charAt
複製字符串：slice substr substring
查找某個字符串第一次出現的位置:indexOf
查找某個字符串最後一次出現的位置：lastIndexOf
去除字符串兩端的空格：trim
將字符串全部轉爲小寫：toLowerCase
將字符串全部轉爲大寫：toUpperCase
替換字符串:str.replace(/b/g,'*') 將字符串中的所有的b替換爲*
將字符串轉換爲數組：split
獲取某個位置的字符的編碼：charCodeAt
將編碼轉換爲字符串：String.fromCharCode
判斷字符串中是否包含某個字符串：includes
判斷是否以某個字符串開頭：startsWith
判斷是否以某個字符串結尾：endswith
將字符串進行重複：repeat
查找與正則表達式相匹配的某個字符串第一次出現的位置：search
對字符串進行正則匹配，返回匹配的結果：match
Math
創建
字面量
構造函數
方法
Math.PI Π值
Math.E 常數e的值
Math.abs 絕對值
Math.max 最大值
Math.min 最小值
arr.indexOf(Math.max(...arr)) 獲取數組中的最值的位置
Math.floor 求小於參數的最大整數值
Math.ceil 求大於參數的最小整數值
Math.round 四捨五入
Math.pow 求次方
Math.sqrt 求平方根
Math.sin 正弦，它的參數是弧度，180度對應的Π值
Math.random 隨機數
隨機m-n之間的整數：parseInt(Math.random()*(n-m+1))+m
Date
創建
字面量
構造函數
var now=new Date(); 等同於 now.toString()
方法
getDate() 返回一個月中的某一天 （1-31）
getDay 返回一週中的某一天 （0-6）0代表週一
getMonth 返回月份 （0-11） 0代表一月
getFullYear 返回年份
getHours 返回當前小時 （0-23）
getMinutes 返回當前分鐘 （0-59）
getSeconds 返回當前秒 （0-59）
getMillisenconds 返回毫秒數（0-999）
getTimes 返回1970年至今的毫秒數
設置即是將上面所有的get改爲set
將日期轉爲毫秒數：Date.parse(new Date()) 將日期轉換爲 相對於1970年的毫秒數
定時器
設置
let timer=setInterval(function(){},1000)
清除
clearInterval(timer)
延時器
設置
let timer=setTimeout(function(){},1000)
清除
clearTimeout(timer)
DOM（文檔對象模型）
屬性操作
自定義
className=''
設置
添加class名：classList.add
刪除class名：classlist.remove
判斷是否包含某個類名：classList.contains
替換類名：classList.replace('a','b')將a替換爲b
最終樣式
let style=box.currentStyle||getComputedStyle(box)
獲取自定義樣式的值：getAttribute
元素操作
CRUD
增（創建）
創建元素document.createElement()
添加子元素：appendChild()
創建文本節點：createTextNode
創建註釋節點：createComment
複製元素節點：cloneNode（true）複製整個元素包括標籤裏的內容
複製元素節點：cloneNode（false）只是單純的複製一個空標籤
ul.insertBefore(li,ul.firstChild)將li標籤添加爲ul裏的第一個子元素
ul.insertBefore(li,ul.lastChild)將li標籤添加爲ul裏的最後一個子元素
box.insertBefore(span,p)將span標籤插到box標籤裏的p標籤之前
document.createDocumentFragment() 文檔碎片 作爲容器使用 ，避免頻繁使用操作dom,減少渲染次數
刪（刪除）
this.remove刪除當前元素
this.parentNode.remove刪除當前操作的父元素
a.removeChild(b)將 a標籤裏的子元素b刪除
改（修改）
a.replaceChild(b,c)將a標籤中的c標籤替換爲b標籤
查（查詢）
document.querySelector()
document.querySelectorAll()
document.getElementById()
document.getElementsByClassName()
document.getElementsByName()
document.getElementsByTagName()
節點之間的關係
childNodes獲取子節點
children獲取子元素
parentNode獲取父節點
parentElement父元素
firstChild第一個子節點
firstElementChild第一個子元素
lastChild最後一個節點
lastElementChild最後一個子元素
nextSibling下一個節點
nextElementSibling下一個元素節點
previousSibling上一個節點
previousElementSibling上一個元素節點
節點類型：nodeType
節點的值：nodeValue
Element
offsetWidth 元素可視區域的寬度（當元素被隱藏時值爲零）
offsetHeight 元素可視區域的高度（當元素被隱藏時值爲零）
offsetParent 返回最靠近當前元素的，且定位屬性值不爲static的父元素（類似於包含塊）
offsetLeft 元素距離offsetParent的左邊界偏移量
offsetTop 元素距離offsetLeft的右邊界的偏移量
事件
HTML事件
onload:當頁面加載完畢時觸發
onselect:當用戶選擇文本框（input或者texteara）內容改變或者失去焦點後觸發
onchange:當文本框（input或texteara）內容改變且失去焦點後觸發
oninput:當（input或textarea）內部輸入輸入內容時觸發
onfocus:當頁面或元素獲得焦點時在window及相關元素上面觸發
onresize:當頁面或者框架的大小發生變化時觸發
onblur:當頁面或者元素失去焦點時觸發
onscoll:當用戶滾動帶滾動條的元素時觸發
將元素滾動到可視區域（寫聊天框時，一直使後面發送的內容顯示）li.scrollIntoView();
鼠標事件
oncontextmenu:鼠標右鍵事件
onmousedown當鼠標點擊時
btn.onmousedown=function(e){console.log(e.button)} 0是左鍵 1是滾輪 2是右鍵
鍵盤事件
onkeyup 當鍵盤按鍵釋放
onkeydown 當鍵盤按鍵被按下
onkeypress 當用戶按下鍵盤上的字符鍵觸發
ctrlkey Boolean類型 表示事件發生的時候ctrlkey鍵是否被按下
altkey Boolean類型 表示事件發生時alt鍵是否被按下
shiftkey Boolean類型 表示發生事件的時候shift按鍵是否被按下
獲取鍵碼的兼容性寫法（通過鍵碼判斷用戶是否按下了某個鍵）let keyCode=e.keyCode||e.which
組合鍵判斷（即判斷用戶是否同時按下了兩個鍵）
e.ctrlKey&&e.keyCode==13； 判斷是否同時按下了ctrl和回車鍵
事件對象
獲取
let e=evt||window.event
屬性
event.button 當事件觸發時哪個按鍵被按下
clienkX 鼠標光標相對窗口的左邊界的位置
clienkX 鼠標光標相對窗口的右邊界的位置
screenX 鼠標光標相對於屏幕的X座標
screenY 鼠標光標相對於屏幕的Y座標
offsetX 鼠標光標相對於事件源（e.target）的X座標
offsetY 鼠標光標相對於事件源(e.target)的Y座標
pageX 鼠標光標相對於頁面的X座標
pageY 鼠標光標相對於頁面的Y座標
事件源
target 事件在哪個元素上產生
事件冒泡
阻止事件冒泡的兼容性寫法：e.stopPropagation();e.cancelBubble=true;
阻止默認事件
e.preventDefalt() W3C的方式
e.returnValue=false IE的方式
DOM2添加事件監聽器
ele.addEventListenter(事件名，處理函數（回調函數），布爾值)【注：事件名不帶on，是一個字符串，它默認是冒泡（false）】
IE兼容寫法 attachEvent(事件名，處理函數)【注：事件名帶on,它默認是捕獲】
DOM2移除事件監聽器
removeEventListener(事件名，處理函數，（false或者true）)【注：事件名不帶on，是一個字符串，它默認是冒泡】
IE兼容寫法 detachEvent（事件名，處理函數）【注：事件名帶on,它默認是捕獲】
正則
創建
字面量
構造函數
let reg=new RegExp('sss',ig) i忽略大小寫 g 全局匹配
方法
reg.test('a'):返回布爾值，表示當前正則表達式能否匹配參數字符串
如果test匹配的正則表達式含有g
,則每一次test方法都從上一次結束的位置開始向後匹配
reg.exec('a') 用於檢索字符串中正則表達式的匹配，返回一個數值，其中存放的是所有匹配的結果，如未找到匹配，返回null
字符串方法結合正則使用
str.replace(reg,'b') 將str中滿足reg的字符串替換爲b
str.search(reg) 返回與正則 表達式相匹配的第一個值所在的下標，不存在返回-1
str.match(reg) 返回str中所有匹配reg的結果
限定符
* 匹配前面的子表達式零次或多次
+ 匹配前面的子表達式一次或多次
？ 匹配前面的子表達式零次或一次
{n} 匹配前面的子表達式n次
{n,m} 最少匹配n次，最多匹配m次
字符匹配符
[0-9] 匹配0-9中的任意一個字符
[^0-9] 匹配除了0-9的任意一個字符
[a-z] 26個小寫字母
[A-Z] 26個大寫字母
\d 相當於【0-9】
\D 相當於【^0-9】
\w 相當於【0-9a-zA-Z】
\W 相當於【^0-9a-zA-Z】
\s 匹配空格（包括換行符，製表符，空格符等）
\S 匹配非空格的字符
. 匹配除了\n （換行） 之外的任何字符
定位符
^ 限定開始（匹配輸入字符串的開始位置）
$ 限定結尾（匹配字符串的結束位置）
轉義符
\ 用於匹配那些特殊字符（即匹配在正則中有特殊含義的字符）
選擇匹配符
| 相當於or
正則分組
/hahaha/ 相當於/（ha）{3}/
捕獲型分組
被正則表達式匹配到的內容會被暫存起來，用$1可以獲得被第一個分組捕獲的內容
非捕獲型分組
（？：）當不需要捕獲某個分組的時候可以使用它
this關鍵字
(在嚴格模式下，普通函數的this指的是undefined)
非嚴格模式下，在全局環境下使用this,他指的就是頂層對象window
(普通函數裏的this被誰調用它就指向誰)
(構造函數使用new調用，this指向的是這個函數)
(構造函數不使用new調用，this指的還是全局)
(普通函數裏的this被誰調用它就指向誰)
bind 方法
bind方法用於將函數體內的this綁定到某個對象，然後返回一個新的函數
let關鍵字
let（定義變量）在代碼塊中聲明的變量都是局部變量
const關鍵字
const 定義常量,const聲明的變量不能改變值
箭頭函數
let f=()=>{}
變量解構
解構數組
let [a,b,c]=[1,2,3]
解構對象
let {f,b}={b:0,f:1}
... 擴展運算符
將數組展開 ...arr
合併數組 [...[1,2],...[3,4]]//[1,2,3,4]
取出參數對象的所有可便利屬性 {...{a:1,b:2}}///{a:1,b:2}
複製對象
Object.assign({對象1}，{對象2})//把對象2裏的所有內容拷貝到對象1裏
Set
數組去重
[...(new Set([1,2,2]))] //[1,2]
方法
size 獲取Set的長度
add 添加
delete 刪除
clear 清空
has 判斷
遍歷
set.forEach((v) => console.log( v))
Map
方法
set 設置
get 獲取
has 判斷
delete 刪除
clear 清除
size 長度
遍歷
map.forEach((k,v)=>console.log(k,v))
for(let [k,v] of map){console.log(k,v)}
class 類
constructor 默認方法
繼承 extends
super（）
static 關鍵字 方法前面添加此關鍵字，此方法不會被繼承，只能直接通過類調用
JSON 字符串和對象的轉換
JSON.parse() 將JSON字符串轉換爲對象
JSON.stringify() 將對象轉換爲JSON字符串
eval 函數
計算某個字符串，並執行其中的JavaScript代碼
localstorage
設置
localStorage.setItem('user','123')
獲取
localStorage.getItem('user')
刪除
localStorage.removeItem('user')
清空
localStorage.clear()
BOM（瀏覽器對象模型）
location對象
href:返回完整的URL
hash:返回從#開始的URL
seach：返回從？開始的URL
history對象
後退一頁：history.go(-1) history.back()
前進一頁：history.go(1) history.forwary()
前進兩頁：history.go(2)
事件
window.onresize 事件會在窗口或框架被調整大小時發生
window.onload 事件放生在頁面加載完畢時
window.onscroll 監聽頁面的滾動
方法
assign：加載新的文檔
reload：重新加載當前文檔
replace（）：用心的文檔替換當前文檔
open:打開一個新的瀏覽器窗口或者查找一個已命名的窗口
close：關閉瀏覽器窗口
confirm：顯示一個帶有提示信息和確認及取消按鈕的警告框
prompt：顯示可提示用戶進行輸入的對話框
alert:彈出警示框