寫在前面

沒啥好說的，總結了點基礎知識查漏補缺。

fetch、ajax、axios

• Ajax(Asynchoronous javascript and XML)，一種技術的統稱。
• Fetch是一種具體的原生瀏覽器API，用于進行網絡請求，和XMLHttpRequest是同等級別的，但是Fetch語法更加簡潔、易用，支持Promise
• Axios是一種第三方庫，是最常使用的網絡請求庫，內部可以使用XMLHttpRequest和Fetch進行封裝使用。

那么如何使用XHR或fetch實現一個Ajax呢?

function ajax(url, successFn){
  const xhr = new XMLHttpRequest();
  xhr.open("GET",url,false);
  xhr.onreadystatechange = function(){
    //這里的函數異步執行，可以使用Promise進行處理
    if(xhr.readyState === 4){
      if(xhr.state === 200){
        successFn(xhr.responseText);
      }
    }
  }
  xhr.send(null);
}
function ajax2(url){
  return fetch(url).then(res=>res.json);
}

px、%、em、rem和vw/vh

• px是像素的基本單位，是絕對單位(其他的單位都是相對單位)
• %是相對于父元素的寬度比例
• em是相對于當前元素的font-size
• rem是相對于根節點的font-size，常用于移動端適配
• vw/vh是屏幕視口寬度/高度的1%
• vmin/vmax指的是屏幕視口寬度和高度的最小值/最大值

箭頭函數的缺點和不能使用的場景?

箭頭函數的一些缺點：

• 箭頭函數沒有arguments
• 自身沒有this，this指向的是箭頭函數的父作用域的this，不能通過apply、bind、call修改this的指向
• 某些代碼使用箭頭函數時，難以閱讀
• 箭頭函數不能使用new去創建對象，構造函數

箭頭函數不能使用的場景：

• 對象原型、對象方法、構造函數
• 動態上下文的回調函數
• Vue生命周期method

for...in 和 for...of的區別

• for...in遍歷得到的key，for...of遍歷得到的是value
• for...in常用于可枚舉數據，如：對象、數組、字符串，得到key值
• for...of常用于可迭代數據，如：數組、字符串、Map、Set，得到value值

那么，for await...of有什么作用呢?

for await...of用于遍歷多個Promise：

function createPromise(val){
    return new Promise((resolve)=>{
        setTimeout(()=>{
            resolve(val)
        },1000)
    })
}
(async function(){
    const p1 = createPromise(100)
    const p2 = createPromise(200)
    const p3 = createPromise(300)
    const list = [p1,p2,p3]
    // Promise.all(list).then(res=>
    //     console.log(res)
    // )    
    //等價于Promise.all
    for await(let p of list){
        console.log(p);
    }
})()

HTMLCollection和NodeList

DOM其實是一棵樹，多有的節點都是Node節點，而Node是Element的基類，Element是其它HTML元素的基類，如：HTMLDivElement、HTMLULElement等。

• HTMLCollection是Element的集合
• NodeList是Node的集合

 <div id="root">
    <ul>
        <li>一川</li>
        <li>二川</li>
    </ul>
    <p>你好呀</p>
</div>
<script>
    const p1 = document.querySelector("#root")
    console.log(p1.childNodes,p1.children);
</script>

我們可以看到最終打印的結果如下圖所示，NodeList打印的是所有的Node節點的集合，包括Element元素標簽、文本、注釋等內容。HTMLCollection打印的是純粹的Element元素標簽的集合，不包含任何文本和注釋等。

因此：

• childNodes和children返回的結果不一樣，childNodes返回的是一個NodeList，children返回的是一個HTMLCollection
• 獲取Node和Element的返回結果可能不一樣，如果只有純粹的HTML標簽，沒有文本Text、注釋Comment節點等其他內容，那么返回的結果就是一樣的

如何將一個類數組轉為一個數組呢?

• Array.from(list)
• Array.prototype.slice.call(list)
• 擴展運算符 [...list]

比如，HTMLCollection和NodeList都是"類數組"，但不是數組。

const list1 = Array.from(list)
const list2 = Array.prototype.slice.call(list)
const list3 = [...list]

offsetHeight、scrollHeight和clientHeight的區別

要想理解offsetHeight、scrollHeight和clientHeight的區別，首先我們得了解下盒子模型：

不同部分的說明：

Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。Border(邊框) - 圍繞在內邊距和內容外的邊框。Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。Content(內容) - 盒子的內容，顯示文本和圖像。

標準W3C盒子模型：

• CSS中設置的元素寬度(width)=內容(content)的寬
• CSS中設置的元素高度(height)=內容(content)的高

而標簽元素的實際高度=height+(padding+border+margin*2

標準W3C盒子模型

IE盒子模型：

• CSS中設置的寬度(width)=內容(content)的寬+(border+padding)*2
• CSS中設置的高度(height)=內容(content)的高+(border+padding)*2

而標簽元素的實際高度=height+margin*2

IE盒子模型

我們在實際開發中，html標簽默認采用的W3C盒子模型，當然你也可以設置box-sizing:border-box;將W3C盒子模型轉為IE盒子模型。

offsetHeight、scrollHeight和clientHeight的計算規則：

• offsetHeight=border+padding+content
• clientHeight=padding+content
• scrollHeight=padding+實際內容尺寸

clientHeight

offsetHeight

scrollHeight

寫在最后

簡單總結了一些基礎知識，希望能夠幫到大家。