JavaScript 小知識點

原型鏈相關

• 最詳盡的 JS 原型與原型鏈終極詳解

---

isNaN() 和 Number.isNaN() 的區別

isNaN()

• 是 ES1 規範；
• 是全局方法；
• 若是參數不是一個 Number 類型，會先嚐試將參數轉化爲數值，而後對轉換後的結果進行是不是 NaN 的判斷；

Number.isNaN()

• 是 ES6（ES2015） 規範；
• 是 Number 對象的靜態方法；
• 只有參數爲 NaN 是纔會返回 true；

---

JavaScript 中的錯誤類型

• SyntaxError 解析代碼時發生的語法錯誤；
• ReferenceError 對象是引用一個不存在的變量時發生的錯誤；

• RangeError 對象是一個值超出有效範圍時發生的錯誤；

  • 一個數組長度爲負數；
  • Number 對象的方法參數超出範圍；
  • 函數堆棧超過最大值；

• TypeError 對象是變量或參數不是預期類型時發生的錯誤；

  • 好比：對字符串、布爾值、數值等原始類型的值使用 new 命令；

• URIError 對象是 URI 相關函數的參數不正確時拋出的錯誤；

  • 主要涉及 encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()、unescape()
• EvalError eval 函數沒有正確執行時拋出的錯誤；已經再也不使用；
• Error

自定義錯誤

能夠建立自定義錯誤類，讓其集成 Error；

參考連接

• 錯誤處理機制

---

encodeURI 和 encodeURIComponent 的區別

encodeURI

encodeURI('http://example.com/test space')
// http://example.com/test%20space
// 對整個 URL 進行編碼，而 URL 的特定標識符不會被轉碼

encodeURIComponent

encodeURIComponent('http://example.com/test space')
// http%3A%2F%2Fexample.com%2Ftest%20space
// 對URL中的參數進行編碼，由於參數也是一個URL，若是不編碼會影響整個URL的跳轉

參考連接

• 百分號編碼 Percent-encoding
• [escape,encodeURI,encodeURIComponent有什麼區別?

](https://www.zhihu.com/questio...

---

Array.from / 擴展運算符 ... / rest 參數 ...

概念定義

ES6 中的三個點 ... 有兩個名字：rest 參數 / 擴展運算符

• 當用在函數定義時的形參前面是，稱爲 rest 參數。當函數調用時，用於接收不肯定數量的參數；
• 當與結構賦值組合使用時，稱爲 rest 參數，用於接收剩餘的值，存儲在數組中；
• 當用在字符串或數組前面時，稱爲擴展運算符，將數組或字符串進行拆解；

Array.from

Array.from 是 Array 對象的一個靜態方法。能夠經過一下方式來建立數組對象：

• 僞數組對象（擁有一個 length 屬性和若干索引屬性的任意對象）；
• 可迭代對象；

Array.from 還有一個可選參數 mapFn，能夠在最後生成的數組上再執行一次 map 方法後再返回；也就是說 Array.from(obj, mapFn, thisArg) 至關於 Array.from(obj).map(mapFn, thisArg)

擴展運算符 ...

擴展運算符是一個運算符，和 Array.from 最大的區別在於其只能從可迭代對象中進行解構；

---

JavaScript 的迭代方法

forEach()

讓數組中每一項作一些事，不能被 break；

• 返回值：undefined；

map()

讓數組對每一項進行某種計算後產生一個新數組；

• 返回值：一個新數組；

filter()

篩選出數組中符合條件的項，組成新數組；

• 返回值：一個新數組；

reduce()

對累加器和數組中的每一個元素（從左到右）應用一個函數，將其減小爲單個值；

• 返回值：函數累計處理的結果；

every()

檢測數組中的每一項是否都符合條件；

• 返回值：布爾值；

some()

檢測數組中是否有任意項符合條件；

• 返回值：布爾值；

對數組空位的處理

數組的空位指，數組的某一個位置沒有任何值。好比，Array構造函數返回的數組都是空位。

ES5 對空位的處理

• forEach(), filter(), reduce(), every() 和some()都會跳過空位。
• map()會跳過空位，但會保留這個值
• join()和toString()會將空位視爲undefined，而undefined和null會被處理成空字符串。

// forEach方法
[,'a'].forEach((x,i) => console.log(i)); // 1

// filter方法
['a',,'b'].filter(x => true) // ['a','b']

// every方法
[,'a'].every(x => x==='a') // true

// reduce方法
[1,,2].reduce((x,y) => return x+y) // 3

// some方法
[,'a'].some(x => x !== 'a') // false

// map方法
[,'a'].map(x => 1) // [,1]

// join方法
[,'a',undefined,null].join('#') // "#a##"

// toString方法
[,'a',undefined,null].toString() // ",a,,"

ES6 對空位的處理

ES6 則是明確將空位轉爲undefined。

• Array.from 方法會將數組的空位，轉爲 undefined，也就是說，這個方法不會忽略空位；
• 擴展預算符 ... 也會將空位轉爲 undefined；

Array.from(['a',,'b']);
// ["a", undefined, "b"]

[...['a',,'b']]
// ["a", undefined, "b"]

• copyWithin() 會連空位一塊兒拷貝；

[,'a',,'b'].copyWithin(2,0)
// [,"a",,"a"]

• fill() 將會視空位爲正常的數組位置；

new Array(3).fill('a');
// ["a", "a", "a"]

• for...of 循環也會遍歷空位；

let arr = [, ,];
for (let i of arr) {
  console.log(1);
}
// 1
// 1

上面代碼中，數組arr有兩個空位，for...of並無忽略它們。若是改爲map方法遍歷，空位是會跳過的。
可是，for...in 是會直接跳過空位，不會進行遍歷的，須要特別留意；

entries()、keys()、values()、find()和findIndex()會將空位處理成undefined。

// entries()
[...[,'a'].entries()] // [[0,undefined], [1,"a"]]

// keys()
[...[,'a'].keys()] // [0,1]

// values()
[...[,'a'].values()] // [undefined,"a"]

// find()
[,'a'].find(x => true) // undefined

// findIndex()
[,'a'].findIndex(x => true) // 0

參考連接

• 數組的擴展

---

javaScript 循環語句的對比

for

for...in

• 會跳過空值；
• 將會遍歷對象自身的全部可枚舉屬性以及對象從其構造函數原型中繼承的屬性；
• for...in 語句以原始插入順序迭代對象的可枚舉屬性，不能依賴於迭代的表面有序性；
• for...in 不該該用於迭代 Array，一是其順序不肯定，二是其會迭代全部對象和對象構造函數原型鏈裏的可迭代屬性；

for...of

• 不會跳過空值；
• 在可迭代對象（包括 Array，Map，Set，String，TypedArray，arguments 對象等等）上建立一個迭代循環，調用自定義迭代鉤子，併爲每一個不一樣屬性的值執行語句，這裏特別留意，Object 不是一個可迭代對象；
• 對於for...of的循環，能夠由break, continue, throw 或return終止。在這些狀況下，迭代器關閉。
• for...of 語句遍歷可迭代對象定義要迭代的數據；

---

ES6 中的 Class

一個問題，爲什麼 SubClass.__proto__ === SuperClass？

• 可能的回答：__proto__ 屬性與 ES6 classes 的繼承

再一個問題，ES6 中的 Class到底更接近以前的 Object 仍是 Fcnction？

• 通過測試，肯定是 Function；

super的一些小知識點

根據調用位置的不一樣，super 關鍵字的含義不一樣；

• 在子類的構造函數中使用 super()，super表明了父類的構造函數，此時，父類構造函數中的 this 指向的是子類；
• 在子類的實例方法中使用 super，super指向父類的 prototype 對象，調用父類方法時，調用的是父類的原型鏈上的方法；此時，該方法中的 this 指向的是子類的實例；
• 在子類的靜態方法中使用 super，super指向父類 ，調用父類方法時，調用的是父類的靜態方法；此時，該方法中的 this 指向的是子類；

原生構造函數的繼承

• 對原生構造函數使用 apply 不會更改其 this，也就是說，原生構造函數的 this 沒法綁定，從而致使拿不到內部屬性；
• 究其緣由，是由於 ES5 中的構造函數是先新建子類的實例對象 this，再將父類的屬性添加到子類上，因爲父類的內部屬性沒法獲取，致使沒法繼承原生的構造函數；
• ES6 容許繼承原生構造函數定義子類，ES6 是先新建父類的實例對象 this，而後再用子類的構造函數修飾 this，使得父類的全部行爲均可以繼承；
• 注意：繼承 Object 的子類，會有一個行爲差別；ES6 改變了 Object 構造函數的行爲，一旦發現 Object 方法不是經過 new Object() 這種形式調用，ES6 規定 Object 構造函數忽略參數；

---

修飾器

呃，待續。