自驗積累（1）-JavaScript

1. js基礎

1.1 數據類型

1.1 基本類型

1. Boolean（布爾）
2. String（字符串）
3. Number（數字）
4. null（空）
5. undefined（未定義）
6. Symbol（符號）（ES2015 新增）

1.2 引用類型

1. Object（對象）
2. Array（數組）
3. Date（日期）
4. Function（函數）？？
5. RegExp（正則表達式）？？
6. Error（錯誤）？？

1.1.3 變量

1. let與var的區別？
2. 爲何 var 能夠重複聲明？

1.2 數組

1.2.1 數組各版本支持函數

ES3：

• new Array() 構造器

• 改變自身的方法：

  1. push()、pop()：操做數組末尾，pop 返回出棧元素，push 返回數組新長度
  2. shift()、unshift()：操做數組頭，unshift 返回出隊列元素，shift 返回數組新長度
  3. splice(start,deleteCount[, item1[, item2[, …]]])：刪除元素，並向數組添加新元素，返回由原數組中被刪除元素組成的數組；
  4. sort()：數組元素默認按照各自轉換爲字符串的Unicode(萬國碼)位點順序排序。例如"Boy"將排到"apple"以前。當對數字排序的時候，25將會排到8以前，由於轉換爲字符串後，」25」將比」8」靠前；
  5. reverse()：顛倒數組中元素的順序。

• 不改變自身的方法：

  1. concat()
  2. join()
  3. slice()：將數組中一部分元素淺複製存入新的數組對象，而且返回這個數組對象。
  4. toString()、toLocaleString()：把數組轉換爲字符串/本地數組，並返回結果
  5. valueOf()：返回數組對象的原始值
  6. toSource()：返回該對象的源代碼（目前只有 Firefox 實現了它）

ES5：

• 新增方法：
  1. Array.isArray() 構造函數方法
• 不改變自身的方法：
  1. indexOf()、lastIndexOf()
  2. map()、forEach()、every()、some()、filter()
  3. reduce(fn, initialValue)、reduceRight()

ES6(ES2015)：

新增方法：

• Array.of()、Array.from() 構造函數方法

• 改變自身的方法：

  1. copyWithin(target, start[, end = this.length])：在當前數組內部，將指定位置的成員複製到其餘位置（會覆蓋原有成員），而後返回當前數組。
  2. fill(value, start[, end = this.length])：將數組指定區間內的元素替換爲某個值。

• 不改變自身的方法：

  1. find() 和 findIndex()：返回數組中第一個知足條件的元素/索引
  2. keys()、values() 和 entries()：返回一個數組迭代器對象
  3. flat()，flatMap()：默認只會「拉平」一層

• 可使用 for ... of 遍歷數組

• Array.of() 用於將參數依次轉化爲數組中的一項，而後返回這個新數組，而無論這個參數是數字仍是其它。它基本上與Array構造器功能一致，惟一的區別就在單個數字參數的處理上。以下：

  Array.of(8.0); // => [8] 
  Array(8.0);    // => [undefined × 8]
  複製代碼

  參數爲多個，或單個參數不是數字時，Array.of() 與 Array 構造器等同。

  Array.of(8.0, 5); // => [8, 5]
  Array(8.0, 5);    // => [8, 5]
  Array.of('8');    // => ['8']
  Array('8');       // => ["8"]
  複製代碼

• Array.from() 用於將兩類對象轉爲真正的數組：相似數組的對象（array-like object）和可遍歷（iterable）的對象（包括 ES6 新增的數據結構 Set 和 Map）。所謂相似數組的對象，本質特徵只有一點，即必須有length屬性。 注意：

  • 擴展運算符（...）也能夠將某些數據結構轉爲數組。擴展運算符背後調用的是遍歷器接口（Symbol.iterator），若是一個對象沒有部署這個接口，就沒法轉換。
  • 任何有length屬性的對象，均可以經過Array.from方法轉爲數組，而此時擴展運算符就沒法轉換。

ES7(ES2016)

新增方法：

1. includes()：與 indexOf() 的惟一區別就是includes()可以發現NaN，而 indexOf() 不能。

   var array = [NaN]; 
   console.log(array.includes(NaN)); // => true 
   console.log(array.indexOf(NaN)>-1); // => false
   複製代碼

1.2.2 檢驗數組類型

ES3：

var a = []; 
// 1.基於instanceof 
a instanceof Array; 

// 2.基於constructor 
a.constructor === Array; 

// 3.基於Object.prototype.isPrototypeOf 
Array.prototype.isPrototypeOf(a); 

// 4.基於getPrototypeOf 
Object.getPrototypeOf(a) === Array.prototype; 

// 5.基於Object.prototype.toString 
Object.prototype.toString.apply(a) === '[object Array]';
複製代碼

以上，除了Object.prototype.toString外，其它方法都不能正確判斷變量的類型。

要知道，代碼的運行環境十分複雜，一個變量可能使用渾身解數去迷惑它的創造者。且看：

var a = {
    __proto__: Array.prototype
};

// 分別在控制檯試運行如下代碼// 1.基於instanceof
a instanceof Array; // => true

// 2.基於constructor
a.constructor === Array; // => true

// 3.基於Object.prototype.isPrototypeOfArray.prototype.isPrototypeOf(a); // => true

// 4.基於getPrototypeOf
Object.getPrototypeOf(a) === Array.prototype; // => true
複製代碼

以上，4種方法將所有返回true，爲何呢？咱們只是手動指定了某個對象的__proto__屬性爲Array.prototype，便致使了該對象繼承了Array對象，這種絕不負責任的繼承方式，使得基於繼承的判斷方案瞬間土崩瓦解。

不只如此，咱們還知道，Array是堆數據，變量指向的只是它的引用地址，所以每一個頁面的Array對象引用的地址都是不同的。iframe中聲明的數組，它的構造函數是iframe中的Array對象。若是在iframe聲明瞭一個數組x，將其賦值給父頁面的變量y，那麼在父頁面使用y instanceof Array ，結果必定是false的。而最後一種返回的是字符串，不會存在引用問題。實際上，多頁面或系統之間的交互只有字符串可以暢行無阻。

1. value instanceof Array

缺點：

• 在多個全局做用域（一個頁面包含多個 frame ）的狀況下，會有問題。value 必須與 Array 構造函數在同一個全局做用域中。（Array 是 window 的屬性）若是 value 是在另外一個 frame 中定義的數組，那麼上面代碼會返回 false。

2. Object.prototype.toString.call(value) == "[object Array]"

function isArray(){
    return Object.prototype.toString.call(value) == "[object Array]"
}
複製代碼

一樣思路能夠用來檢測某個值是否是 原生函數 或 正則表達式：

function isFunction(){
    return Object.prototype.toString.call(value) == "[object Function]"
}

function isRegExp(){
    return Object.prototype.toString.call(value) == "[object RegExp]"
}
複製代碼

ES5：

1. Array.isArray()

環境要求：IE9+

Array.isArray([]); // => true 
Array.isArray({0: 'a', length: 1}); // => false
複製代碼

ES6：

1.2.3 數組遍歷

1.2.4 數組去重

1.2.5 刪除數組中全部的重複元素(包括自身)

如a = [1, 2, 3, 2]，指望獲得b = [1, 3]

a.filter(v=> a.indexOf(v) === a.lastIndexOf(v))
複製代碼

1.2.6 數組排序

各瀏覽器的針對 sort() 方法內部算法實現不盡相同，排序函數儘可能只返回-一、0、1三種不一樣的值，不要嘗試返回 true 或 false 等其它數值，由於可能致使不可靠的排序結果。

1. 純數字

let arr = [10, 1, 3, 20];
arr.sort((a,b)=>a-b)
複製代碼

1.2.5 怎樣去除兩個數組的交集，合併成新數組

如：a = [1, 2, 3, 4], b = [3, 4, 5, 5], 指望獲得c = [1, 2, 5, 5]

let temp = a.filter(v=>b.includes(v)); 
let c = [...a,...b].filter(v=> !temp.includes(v))
複製代碼

1.2.6 Array.from 使用實例

1. 生成一個從0到指定數字的新數組

   Array.from({length: 10}, (v, i) => i); // [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
   複製代碼

2. 將字符串轉爲數組，而後返回字符串的長度。 由於 Array.from 能正確處理各類 Unicode 字符，能夠避免 JavaScript 將大於\uFFFF的 Unicode 字符，算做兩個字符的 bug。

   function countSymbols(string) {
     return Array.from(string).length;
   }
   複製代碼

1.3 對象

1.3.1 怎麼判斷兩個對象相等？

【未完待續】