根據個人在實際開發過程中，對于Array對象的方法使用比較多的，以及出現過的問題在這里做個簡單介紹。（屬于個人筆記，許多方法已經熟練的就只是列出來沒有詳細介紹）
一、ES5
- 不會改變原數組的方法。
1.1 contact
參數：arrayX
說明：返回一個新的數組。
1.2 join
參數：separator(分隔符)
說明：返回一個字符串。
1.3 slice
參數：start，end(可選)
說明：返回一個新的數組。參數可以為負數。開發過程中經常用slice()復制數組。
let A = [1,2,3];
let B = A.slice(1)
- 會改變原數組的方法。
2.1 pop
參數：none
說明：刪除數組最后一個元素，數組長度減一，并返回被刪除的元素，如果原數組為空，返回undefined。
2.2 push
參數：newElemmentX
說明：按照參數的先后順序添加到數組末尾，返回新數組的長度。
2.3 reverse
參數：none
說明：顛倒數組的元素。無返回值。
2.4 shift
參數：none
說明：刪除原數組第一個元素，并返回被刪除的元素。
2.5 sort
參數：sortby(可選)
說明：調用sort()前，數字每個元素會調用toString()方法。如果沒有參數，將按照字符編碼的順序進行排序。
var a=[1,2,3,'j','A',10,5,3];
a.sort() // [1, 10, 2, 3, 3, 5, "A", "j"]
如果有參數，參數必須是一個比較函數。
var a=[1,2,3,'j','A',10,5,3];
//降序函數
var desc = function(x,y)
{
if (x > y)
return -1; //返回一個小于0 的數即可
else
return 1; //返回一個大于0 的數即可
}
//升序函數
var asc = function(x,y)
{
if (x > y)
return 1; //返回一個大于0 的數即可
else
return -1; //返回一個小于0 的數即可
}
a.sort(desc);//[10, 5, 3, "j", "A", 3, 2, 1]
a.sort(asc);//[3, 5, 10, "A", "j", 1, 2, 3]
2.6 splice
參數：index，howmany，newElemmentX(可選)
說明：返回被刪除的元素組成的數組，如果沒有進行刪除操作，返回一個空數組。
2.7 unshift
參數：newElemmentX
說明：返回添加完后數組的長度。
二、 ES6
注：這部分是我參考阮一峰老師的[ECMAScript 6 入門]文章，自己記錄的筆記，詳細的內容請移步阮一峰老師的文章。
- 擴展運算符(...)。將一個數組轉為用逗號分隔的參數序列。
console.log(...[1, 2, 3])
// 1 2 3
console.log(1, ...[2, 3, 4], 5)
// 1 2 3 4 5
[...document.querySelectorAll('div')]
// [<div>, <div>, <div>]
該運算符主要用于函數調用。
function push(array, ...items) {
array.push(...items);
}
function add(x, y) {
return x + y;
}
var numbers = [4, 38];
add(...numbers) // 42
替代apply()方法
//es5
function arr(x,y,z){
return x+y+z
}
var array=[1,2,3];
arr.apply(null,array);
//es6
arr(...array)
替代push()方法
var arr1=[1,2,3];
var arr2=[4,5,6];
arr1.push(...arr2)
- 擴展運算符的應用
(1) 合并數組
var arr1=[1,2];
var arr2=[3,4];
var arr3=[5,6];
//es5
arr1.concat(arr2,arr3)
//es6
[...arr1,...arr2,...arr3]
(2) 與解構賦值結合
const [a,...b]=[1,2,3,4,5];
//a=1 b=[2,3,4,5]
const [a,...b]=[]
//a=undefined b=[]
const [a,...b]=[1]
//a=1 b=[]
(3) 字符串
[...'v1ta']
// ['v',1,'t','a']
(4) 實現了 Iterator 接口的對象
(5) Map 和 Set 結構，Generator 函數
- Array.form()
Array.from方法用于將兩類對象轉為真正的數組：類似數組的對象（array-like object）和可遍歷（iterable）的對象（包括ES6新增的數據結構Set和Map）
下面是一個類似數組的對象，Array.from將它轉為真正的數組。
let arrayLike = {
'0': 'a',
'1': 'b',
'2': 'c',
length: 3
};
// ES5的寫法
var arr1 = [].slice.call(arrayLike); // ['a', 'b', 'c']
//or Array.prototype.slice.call(arrayLike)
// ES6的寫法
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']
實際應用中，常見的類似數組的對象是DOM操作返回的NodeList集合，以及函數內部的arguments對象。Array.from都可以將它們轉為真正的數組。
// NodeList對象
let ps = document.querySelectorAll('p');
Array.from(ps).forEach(function (p) {
console.log(p);
});
// arguments對象
function foo() {
var args = Array.from(arguments);
// ...
}
上面代碼中，querySelectorAll()方法返回的是一個類似數組的對象，可以將這個對象轉為真正的數組，再使用forEach方法。
只要是部署了Iterator接口的數據結構，Array.from都能將其轉為數組。
Array.from('hello')
// ['h', 'e', 'l', 'l', 'o']
let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']
上面代碼中，字符串和Set結構都具有Iterator接口，因此可以被Array.from轉為真正的數組。
值得提醒的是，擴展運算符（...）也可以將某些數據結構轉為數組。
// arguments對象
function foo() {
var args = [...arguments];
}
// NodeList對象
[...document.querySelectorAll('div')]
擴展運算符背后調用的是遍歷器接口（Symbol.iterator），如果一個對象沒有部署這個接口，就無法轉換。Array.from方法還支持類似數組的對象。所謂類似數組的對象，本質特征只有一點，即必須有length屬性。因此，任何有length屬性的對象，都可以通過Array.from方法轉為數組，而此時擴展運算符就無法轉換。
Array.from({ length: 3 });
// [ undefined, undefined, undefined ]
Array.from還可以接受第二個參數，作用類似于數組的map()方法，用來對每個元素進行處理，將處理后的值放入返回的數組。
Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);
Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]
下面的例子是取出一組DOM節點的文本內容。
let spans = document.querySelectorAll('span.name');
// map()
let names1 = Array.prototype.map.call(spans, s => s.textContent);
// Array.from()
let names2 = Array.from(spans, s => s.textContent)
Array.from()可以將各種值轉為真正的數組，并且還提供map功能。這實際上意味著，只要有一個原始的數據結構，你就可以先對它的值進行處理，然后轉成規范的數組結構，進而就可以使用數量眾多的數組方法。
Array.from({ length: 2 }, () => 'jack')
// ['jack', 'jack']
上面代碼中，Array.from的第一個參數指定了第二個參數運行的次數。這種特性可以讓該方法的用法變得非常靈活。
- Array.of()
Array.of方法用于將一組值，轉換為數組。
Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1
- copyWithin()
數組實例的copyWithin方法，在當前數組內部，將指定位置的成員復制到其他位置（會覆蓋原有成員），然后返回當前數組。也就是說，使用這個方法，會修改當前數組。
它接受三個參數。
target（必需）：從該位置開始替換數據。
start（可選）：從該位置開始讀取數據，默認為0。如果為負值，表示倒數。
end（可選）：到該位置前停止讀取數據，默認等于數組長度。如果為負值，表示倒數。
這三個參數都應該是數值，如果不是，會自動轉為數值。
[1, 2, 3, 4, 5].copyWithin(0, 3)
// [4, 5, 3, 4, 5]
上面代碼表示將從3號位直到數組結束的成員（4和5），復制到從0號位開始的位置，結果覆蓋了原來的1和2。
- find() 和 findIndex()
數組實例的find()方法，用于找出第一個符合條件的數組成員。它的參數是一個回調函數，所有數組成員依次執行該回調函數，直到找出第一個返回值為true的成員，然后返回該成員。如果沒有符合條件的成員，則返回undefined。
[1, 4, -5, 10].find((n) => n < 0)
// -5
上面代碼找出數組中第一個小于0的成員。
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
上面代碼中，find方法的回調函數可以接受三個參數，依次為當前的值、當前的位置和原數組。
數組實例的findIndex()方法的用法與find()方法非常類似，返回第一個符合條件的數組成員的位置，如果所有成員都不符合條件，則返回-1。
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2
- fill()
fill()方法使用給定值，填充一個數組。
['a', 'b', 'c'].fill(7)
// [7, 7, 7]
new Array(3).fill(7)
// [7, 7, 7]
