async和defer的區別
都是<script>的可選屬性，針對外部腳本
- 純
<script>
渲染DOM樹時阻塞，等script加載完成和執行後繼續渲染 async
異步加載，加載完成後立即執行defer
異步加載，加載完成後不立即執行，等DOM渲染完成後執行
![async加載和defer加載]()
常見數組API
- 判斷數組類型
isArray(),instanceof,Object.prototype.toString.call()
let a = [0,1,2,3]
a instanceof Array //true
Arrar.isArray(a)//true
Object.prototype.toString.call(a)//[object Array]
Object.prototype.toString.apply(a)//[object Array]
typeof a // "object"
- 注：
instanceof運算符要小心全局作用域不一致
- 轉換方法
toString(),valueOf(),toLocaleString()
let a = [0,1,2,3]
a.valueOf()//[0,1,2,3]
a.toString()//"0,1,2,3"
a.toLocaleString()//"0,1,2,3"
- 拼接
join()
let a = [0,1,2,3]
a.join("-")//0-1-2-3
a//[0,1,2,3]
- 棧方法
push()和pop()
let a = [1,2,3,4]
a.push(8)//5
a//[1,2,3,4,8]
a.pop()//8
a//[1,2,3,4]
- 隊列方法
shift,unshift
let a =[0,1,2,3]
a.unshift(-1)//5
a // [-1,0,1,2,3]
a.shift()//-1
a // [0,1,2,3]
- 重排序
reverse(),sort()
let a = [0,1,2,3]
a.reverse()//[3,2,1,0]
a.sort()//[0,1,2,3]
- 操作方法
concat(),slice(),splice(),indexOf()
- 注：
concat()和slice()均不對原數組有影響 splice()會操作原數組
let a = [0,1,2,3]
let i = 8
a.concat(i)//[0,1,2,3,8]
a//[0,1,2,3]
a.slice(0,1)//0
a//[0,1,2,3]
a.indexOf(0)//0
a.splice(0,1)//0
a//[1,2,3]
-
迭代方法
every(),some(),forEach(),map(),filter()
參數爲(item.index,arr) -
縮小方法
reduce()
參數爲(prev,cur,index,arr)
從第二項開始，每個返回值作爲prev向後傳遞
document的API
- 操作節點
appendChild()
removeChild
replaceChild()
insertChild() document
document.documentElement對<html>的引用
document.domain對域名的引用- 查找元素
document.getElementById(),document.getElementsByName(),document.getElementsByTagName(),document.getElementsByClassName()
事件的API
事件機制
- Js事件流
事件捕獲，處於目標階段，事件冒泡
- 事件捕獲：從不具體元素逐級向下，在事件爲運行時捕獲
- 事件冒泡：從具體元素向上
![Js事件流]()
- 事件處理
addElementListener(),removeElementListener()
false表示冒泡階段觸發，true表示捕獲階段觸發
var btn = document.getElementById("myButton")
btn.addEventListener("click",function(e){
console.log(this.id)
e.stopPropagation()//阻止事件冒泡
},false)
return false可阻止一些默認時間- Vue中的
native，爲原生HTML標籤綁定事件監聽addEventListener()
<el-input
class="input"
v-model="password" type="password"
@keyup.enter.native="handleSubmit">
</el-input>
委託/事件代理
指定一個事件處理程序來管理一個類型的所有事件。
var btn = document.getElementById("myButton")
btn.addEventListener("click",function(e){
e.stopPropagation()//阻止事件冒泡
switch(e.id){
case "doSomething":
//do something
break;
case "goSomething":
//go something
break;
}
},false)