es6經常使用數組操做及技巧彙總

定義數組

const array = [1, 2, 3];
或者
const array = new Array();
array[0] = '1';
建議儘可能使用第一種形式定義數組，採用new的形式在大量的數組定義時，會比較耗時。
new關鍵字的使用，除了在須要實例化一個對象，或罕見的須要延時加載數據的狀況外，你基本上不須要使用new關鍵字。在Javascript裏分配大量的new變量地址是一項很慢的操做，爲了效率起見，你應該始終使用對象符號。

　　在另一個搜索結果中，有提到這樣的一個說法：「很簡單，Array()是一個對象，[]是一個數據原型。使用new Array()系統每次都會新生成一個對象（瀏覽器每生成一個對象都會耗費資源去構造他的屬性和方法），他的子集是[]；我的推薦使用[]，效率高。瀏覽器對於CPU很吃緊，因此不少時候要有技巧。好比數字轉換成字符只要a=a+'';就能夠了，比用String效率高了不少。

檢測數組

Array.isArray([]);  // true
Array.isArray(undefined); // false;

或者
array instanceof Array; // true 檢測對象的原型鏈是否指向構造函數的prototype對象
或者
array.constructor === Array; // true

終極大招：
if (!Array.isArray) {
  Array.isArray = function(arg) {
    return Object.prototype.toString.call(arg) === '[object Array]';
  };
}

注意：typeof []; // "object" 不能夠用此方法檢查！！！

經常使用方法

1. array.concat(array1, array2,...arrayN);

合併多個數組，返回合併後的新數組，原數組沒有變化。

const array = [1,2].concat(['a', 'b'], ['name']);
// [1, 2, "a", "b", "name"]

2. array.every(callback[, thisArg]);

檢測數組中的每個元素是否都經過了callback測試，所有經過返回true，不然返回false。

// callback定義以下： element:當前元素值；index：當前元素下標； array:當前數組
function callback(element, index, array) {
  // callback函數必須返回true或者false告知every是否經過測試
  return true || false;
}

3. array.filter(callback[, thisArg]);

返回一個新數組，包含經過callback函數測試的全部元素。

// callback定義以下，三個參數： element:當前元素值；index：當前元素下標； array:當前數組
function callback(element, index, array) {
  // callback函數必須返回true或者false，返回true保留該元素，false則不保留。
  return true || false;
}
const filtered = [1, 2, 3].filter(element => element > 1);
// filtered: [2, 3];

4. array.find(callback[, thisArg]);

返回經過callback函數測試的第一個元素，不然返回undefined，callback函數定義同上。

const finded = [1, 2, 3].find(element => element > 1);
// finded: 2

若是你須要找到一個元素的位置或者一個元素是否存在於數組中，使用Array.prototype.indexOf() 或 Array.prototype.includes()。

5. array.findIndex(callback[, thisArg]);

返回經過callback函數測試的第一個元素的索引，不然返回-1，callback函數定義同上。

const findIndex = [1, 2, 3].findIndex(element => element > 1);
// findIndex: 1

6. array.includes(searchElement, fromIndex);

includes() 方法用來判斷一個數組是否包含一個指定的值，返回 true或 false。searchElement：要查找的元素；fromIndex：開始查找的索引位置。

[1, 2, 3].includes(2, 2);
// false

7. array.indexOf(searchElement[, fromIndex = 0]);

返回在數組中能夠找到一個給定元素的第一個索引，若是不存在，則返回-1。searchElement：要查找的元素；fromIndex：開始查找的索引位置。

[2, 9, 7, 8, 9].indexOf(9);
// 1

8. array.join(separator=',');

將數組中的元素經過separator鏈接成字符串，並返回該字符串，separator默認爲","。

[1, 2, 3].join(';');
// "1;2;3"

9. array.map(callback[, thisArg]);

返回一個新數組，新數組中的每一個元素都是調用callback函數後返回的結果。注意：若是沒有return值，則新數組會插入一個undefined值。

array.map因爲不具備過濾的功能，所以array調用map函數時，若是array中的數據並非每個都會return，則必須先filter，而後再map，即map調用時必須是對數組中的每個元素都有效。

const maped = [{name: 'aa', age: 18}, {name: 'bb', age: 20}].map(item => item.name + 'c');
// maped: ['aac', 'bbc'];

10. array.pop() 與 array.shift();

pop爲從數組中刪除最後一個元素，並返回最後一個元素的值，原數組的最後一個元素被刪除。數組爲空時返回undefined。

[1, 2, 3].pop();
// 3

shift刪除數組的第一個元素，並返回第一個元素，原數組的第一個元素被刪除。數組爲空返回undefined。

const shifted = ['one', 'two', 'three'].shift();
// shifted: 'one'

11. array.push(element1, element2, ....elementN) 與 array.unshift(element1, element2, ...elementN);

push是將一個或多個元素添加到數組的末尾，並返回新數組的長度; unshift將一個或多個元素添加到數組的開頭，並返回新數組的長度。惟一的區別就是插入的位置不一樣。

const arr = [1, 2, 3];
const length = arr.push(4, 5);
// arr: [1, 2, 3, 4, 5]; length: 5

push和unshift方法具備通用性，經過call()或者apply()方法調用能夠完成合並兩個數組的操做。

const vegetables = ['parsnip', 'potato'];
const moreVegs = ['celery', 'beetroot'];

// 將第二個數組融合進第一個數組
// 至關於 vegetables.push('celery', 'beetroot');
Array.prototype.push.apply(vegetables, moreVegs);
或者
[].push.apply(vegetables, moreVegs);
// vegetables: ['parsnip', 'potato', 'celery', 'beetroot']

12. array.reduce(callback[, initialValue]);

對數組中的每一個元素（從左到右）執行callback函數累加，將其減小爲單個值。

const total = [0, 1, 2, 3].reduce((sum, value) => {
  return sum + value;
}, 0);
// total is 6

const flattened = [[0, 1], [2, 3], [4, 5]].reduce((a, b) => {
  return a.concat(b);
}, []);
// flattened is [0, 1, 2, 3, 4, 5]

// initialValue累加器初始值， callback函數定義：
function callback(accumulator, currentValue, currentIndex, array) {
}
accumulator表明累加器的值，初始化時，若是initialValue有值，則accumulator初始化的值爲initialValue，整個循環從第一個元素開始；initialValue無值，則accumulator初始化的
值爲數組第一個元素的值，currentValue爲數組第二個元素的值，整個循環從第二個元素開始。initialValue的數據類型能夠是任意類型，不須要跟原數組內的元素值類型一致。


const newArray = [{ name: 'aa', age: 1 }, { name: 'bb', age: 2 }, { name: 'cc', age: 3 }].reduce((arr, element) => {
  if (element.age >= 2) {
    arr.push(element.name);
  }
  return arr; // 必須有return，由於return的返回值會被賦給新的累加器，不然累加器的值會爲undefined。
}, []);

// newArray is ["bb", "cc"];

上面代碼的同等寫法：
const newArray = [{ name: 'aa', age: 1 }, { name: 'bb', age: 2 }, { name: 'cc', age: 3 }].filter(element => element.age >= 2).map(item => item.name);
// newArray is ["bb", "cc"];

對於reduce的特殊用法，其實相似於省略了一個變量初始化步驟，而後經過每次的callback的返回修改該變量，最後返回最終變量值的過程，相似於一個變量聲明 + 一個forEach執行過程。
const newArray = [];
[{ name: 'aa', age: 1 }, { name: 'bb', age: 2 }, { name: 'cc', age: 3 }].forEach(item => {
 if (item.age >=2) {
  newArray.push(item.name);
 }
});

13. array.reverse();

將數組中元素的位置顛倒。

['one', 'two', 'three'].reverse();
// ['three', 'two', 'one']，原數組被翻轉

14. array.slice(begin, end)

返回一個新數組，包含原數組從begin 到 end(不包含end)索引位置的全部元素。

const newArray = ['zero', 'one', 'two', 'three'].slice(1, 3);
// newArray: ['one', 'two'];

15. array.some(callback[, thisArg]);

判斷數組中是否包含能夠經過callback測試的元素，與every不一樣的是，這裏只要某一個元素經過測試，即返回true。callback定義同上。

[2, 5, 8, 1, 4].some(item => item > 6);
// true

16. array.sort([compareFunction]);

對數組中的元素進行排序，compareFunction不存在時，元素按照轉換爲的字符串的諸個字符的Unicode位點進行排序，慎用！請使用時必定要加compareFunction函數，並且該排序是不穩定的。

[1, 8, 5].sort((a, b) => {
  return a-b; // 從小到大排序
});
// [1, 5, 8]

17. array.splice(start[, deleteCount, item1, item2, ...]);

經過刪除現有元素和/或添加新元素來更改一個數組的內容。start:指定修改的開始位置；deleteCount：從 start位置開始要刪除的元素個數；item...：要添加進數組的元素,從start 位置開始。

返回值是由被刪除的元素組成的一個數組。若是隻刪除了一個元素，則返回只包含一個元素的數組。若是沒有刪除元素，則返回空數組。

若是 deleteCount 大於start 以後的元素的總數，則從 start 後面的元素都將被刪除（含第 start 位）。

const myFish = ['angel', 'clown', 'mandarin', 'sturgeon'];

const deleted = myFish.splice(2, 0, 'drum'); // 在索引爲2的位置插入'drum'
// myFish 變爲 ["angel", "clown", "drum", "mandarin", "sturgeon"]，deleted爲[]

小結

push、 shift、 pop、 unshift、 reverse、 sort、 splice方法會對原來的數組進行修改，其餘的數組操做方法只有返回值不一樣，對原數組都沒有影響，即原數組不變。

小結

在看vue代碼的時候，發現vue教程裏面Array.apply(null, {length: 20})的用法，apply一直覺得第二個參數只能是[]或者Arguments這樣的類數組，瞭解了下發現{length: 20}也是類數組。 帶有length屬性的obj在apply函數裏都被認定爲類數組。能夠理解爲這裏的{length: 20}會被默認爲是一個數組了。下圖的slice操做是隻能在數組對象執行的操做，因此這裏是一個數組。

看了下代碼，apply生成的數組裏面被初始化爲了undefined，就是生成了長度爲5的數組，並且數組的每一個元素都被初始化爲了undefined。
Array(5)和new Array(5)調用效果是一致的。官網解釋爲：當把構造函數做爲函數調用，不使用 new 運算符時，它的行爲與使用 new 運算符調用它時的行爲徹底同樣。 它們也生成了長度爲5的數組，可是是個空數組，數組中的每一個元素都沒有初始化。

爲何要這麼寫？
map函數並不會遍歷數組中沒有初始化或者被delete的元素（有相同限制還有forEach, reduce方法）。
Array.apply(null, { length: 5 }) 是用來初始化一個長度爲5，每項的初始值都是undefined的數組。

render (createElement) {
      return createElement('div',
      // 這裏apply第一個對象爲null, 當調用的函數不須要this對象時，能夠傳null，在es5以前瀏覽器會將null表明的this指向window。es5以後，瀏覽器不會再將this指向window。這裏傳null是由於Array構造函數會從新建立this，不須要傳入this對象。
        Array.apply(null, { length: 20 }).map(function () {
         // 這裏若是用Array(2)的形式，map的回調函數不會被執行
          return createElement('p', 'hi')
        })
      )
    }