[TOC] ## Array.from\(\) 將兩類對象轉換成真正的數組：類似數組的對象（array-like object）和可遍歷（iterable）對象（包括ES6新增的數據結構Set和Map）。 ``` let arraylike = { 0: 'a', 1: 'b', 2: 'c', length:3 } // ES5寫法 var arr1 = [].slice.call(arraylike) // ['a', 'b', 'c'] Array.prototype.slice.call //ES6寫法 let arr2 = Array.from(arraylikje) // ['a', 'b', 'c'] ``` 實際應用常見的類數組對象是DOM操作返回的NodeList集合，以及函數內部的arguments對象。Array.from都可以將它們轉化為數組。 ``` // NodeList集合 let p = document.querySelectorAll('p') Array.from(p).foEach(function (p) { cosole.log(p) }) // arguments 對象 function foo() { var args = Array.from(arguments) } ``` 擴展運算符\(...\)也可以將某些數據結構轉換為數組。如果一個對象沒有部署遍歷器接口（Symbol.iterator）則無法轉換。無法轉換類數組對象。 ``` function foo() { var args = [...arguments] } [...document.querySelectorAll('p')] ``` Array.from可接受第二個參數，對每個元素進行處理，將處理后的值放入返回的數組。 ``` Array.from(arraylike, x => x * x) //等同于 Array.from(arraylike).map(x => x * x) Array.from([1, 2, 3]).map(x => x * x) // [1, 4, 9] ``` Array.from\(\)的另一個應用是將字符串轉化為數組，然后返回字符串的長度。因為它能正確處理各種Unicode字符，避免將大于\uFFFF的Unicode字符算作2個字符的BUG。 ``` function contSymbols(string) { return Array.from(string).length } ``` ## Array.of\(\) 將一組數值轉化為數組 ``` Array.of(3, 1, 8) // [3,1,8] Array.of(3) //[3] ``` 這個方法的主要目的是彌補數組構造函數Array\(\)的不足。因為參數個數不同會導致Array的行為有差異。 ``` Array() // [] Array(3) // [,,,] Array(3, 1, 8) // [3,1,8] ``` ## 數組實例的copyWithin\(\) 在當前數組內部將制定位置的成員復制到其他位置（會覆蓋原有成員），然后返回當前數組。 使用這個方法會修改當前數組。 ``` Array.prototype.copyWithin(target, start = 0, end = this.length) ``` 參數 * target\(必須\)：從該位置開始替換數據 * start（可選）：從該位置開始讀取數據，默認為0 * end（可選）：到該位置前停止讀取數據，默認等于數組長度。 ``` [1,2,3,4,5].copyWithin(0, 3) // [4,5,3,5,5] //將3號位置賦值到0位置 [1,2,3,4,5].copyWithin(0,3,4) ``` ## 數組實例的find\(\)和findIndex\(\) find方法用于找到第一個符合條件的數組元素。它的第一個參數是回調函數，所有數組成員一次執行該函數，直到找出第一個返回值為true的成員，然后返回該成員，否則返回undefined。 ``` // 找出第一個小于10的成員 [1,4,-5,10].find((n) => n< 0) // -5 ``` find方法的回調函數接受3個參數，依次為當前的值，當前位置和原數組。 ``` [1,5,10,15].find(function(value, index, arr) { return value > 9 }) // ``` findIndex方法用法和find類似，返回第一個符合條件的數組成員的位置，如果都不符合，返回-1。 這兩個方法都可接受第二個參數，用來綁定回調函數的this對象。 另外這兩個方法都可以發現NaN，彌補數組的IndexOf的不足。 ``` [NaN].indexOf(NaN) // -1 [NaN].findIndex(y => Object.is(NaN, y)) // 0 ``` ## 數組實例的fill\(\) 使用給定值填充數組。 參數 * value\(必選\)，用來填充的值 * start（可選）：開始位置 * end（可選）：結束為止 ``` ['a','b','c'].fill(7) // [7,7,7] new Array(3).fill(7) // [7,7,7] ['a', 'b', 'c'].fill(7,1,2) // ['a'. 7 , 'c'] ``` ## 數組實例的entries\(\), keys\(\)和values\(\) 都用于遍歷數組，返回一個遍歷器對象，可以for...of循環遍歷。 Keys是對鍵明的遍歷，values是對鍵值的遍歷，entries是對鍵值對的遍歷。 ``` for(let index of ['a', 'b'].keys()) { console.log(index) } // 0 // 1 ``` ``` for(let elem of ['a', 'b'].values()) { console.log(elem) } // 'a' // 'b' ``` ``` for(let [index, elem] of ['a', 'b'].entries()) { console.log(index, elem) } // 0 'a' // 1 'b' ``` ## 數組實例的includes\(\) 返回一個布爾值，表示數組是否包含給定的值。 該分的第二個參數是搜索的起始位置，默認為0。 ``` [1,2,3].includes(2) // true [1,2,3].includes(4) // false [1,2,NaN].includes(NaN) // true ``` 沒有該方法時通常使用數組indexOf方法。 indexOf方法有兩個缺點：一，不夠語義化，要與-1比較；二，內部使用===進行判斷，會對NaN誤判。 ## 數組的空位 數組的空位是指數組在某個位置沒有值。 ``` Array(3) // [,,,] ``` 空位不是undefined。一個位置的值等于undefined依然是有值的。空位上沒有任何值，in運算符可以說明。 ``` 0 in [undefined,undefined,undefined] // true 0 in [,,,] // false ``` ES5大多數情況會忽略空位。 * forEach\(\)、filter\(\)、every\(\)和some\(\)會跳過空位 * map\(\)會跳過空位，但保留這個值 * join和toString\(\)將空位視為undefined，undefined和null被處理為空字符串 ES6將空位轉為undefined。 ``` Array.from(['a',,'b']) // ['a', undefined, 'b'] [...['a',,'b']] // ['a', undefined, 'b'] ``` ## 數組推導 數組推導允許直接通過現有數組生成新數組。（ES7） ``` var a1 = [1,2,3,4] var a2 = [for (i in a1) i * 2] a2 // [2,4,6,8] ``` 數組推導中，for ... of總是寫在最前面，返回的表達式寫在最后面。 for...of后面還可以附加if語句，用于設定循環的限制條件。 ``` var years = [1954,1974,1990,2006,2010,2014] [for (year of years) if(year > 2010) year] // [2006,2010,2014] ``` 數組推導可代替map和filter方法 ``` [for (i of [1,2,3]) i*i] // 等價于 [1,2,3].map(function (i) { return i * i }) ```