Array 對象屬性

constructor 返回對創建此對象的數組函數的引用。
length 設置或返回數組中元素的數目。
prototype 使您有能力向對象添加屬性和方法。

傳統Array 對象方法

toSource() 返回該對象的源代碼。
toString() 把數組轉換爲字符串，並返回結果。
toLocaleString() 把數組轉換爲本地數組，並返回結果。
valueOf() 返回數組對象的原始值

方法速查表

ES5 數組方法
1.Array.isArray()  方法用來判斷一個值是否爲數組。它可以彌補typeof運算符的不足

2.valueOf() 方法返回數組本身

3.toString() 方法返回數組的字符串形式

4.push() 方法用於在數組的末端添加一個或多個元素，並返回添加新元素後的數組長度。注意，該方法會改變原數組。

5.pop() 方法用於刪除數組的最後一個元素，並返回該元素。注意，該方法會改變原數組。

6.join() 方法以參數作爲分隔符，將所有數組成員組成一個字符串返回。如果不提供參數，默認用逗號分隔。

7.concat() 方法用於多個數組的合併。它將新數組的成員，添加到原數組成員的後部，然後返回一個新數組，原數組不變。

8.shift() 方法用於刪除數組的第一個元素，並返回該元素。注意，該方法會改變原數組。

9.unshift() 方法用於在數組的第一個位置添加元素，並返回添加新元素後的數組長度。注意，該方法會改變原數組。

10.reverse() 方法用於顛倒數組中元素的順序，返回改變後的數組。注意，該方法將改變原數組。

11.slice() 方法用於提取原數組的一部分，返回一個新數組，原數組不變。

12.splice() 方法用於刪除原數組的一部分成員，並可以在被刪除的位置添加入新的數組成員，返回值是被刪除的元素。注意，該方法會改變原數組。

　　splice的第一個參數是刪除的起始位置，第二個參數是被刪除的元素個數。如果後面還有更多的參數，則表示這些就是要被插入數組的新元素。

13.sort() 方法對數組成員進行排序，默認是按照字典順序排序。排序後，原數組將被改變。

14.map() 方法對數組的所有成員依次調用一個函數，根據函數結果返回一個新數組。

15.forEach() 方法與map方法很相似，也是遍歷數組的所有成員，執行某種操作，但是forEach方法一般不返回值，只用來操作數據。如果需要有返回值，一般使用map方法。

　　forEach方法的參數與map方法一致，也是一個函數，數組的所有成員會依次執行該函數。它接受三個參數，分別是當前位置的值、當前位置的編號和整個數組。

16.filter() 方法的參數是一個函數，所有數組成員依次執行該函數，返回結果爲true的成員組成一個新數組返回。該方法不會改變原數組。

17.some()，every()

　　這兩個方法類似“斷言”（assert），用來判斷數組成員是否符合某種條件。

　　它們接受一個函數作爲參數，所有數組成員依次執行該函數，返回一個布爾值。該函數接受三個參數，依次是當前位置的成員、當前位置的序號和整個數組。

　　some方法是隻要有一個數組成員的返回值是true，則整個some方法的返回值就是true，否則false。

18.reduce()，reduceRight()

19.indexOf()，lastIndexOf() 

　　indexOf 方法返回給定元素在數組中第一次出現的位置，如果沒有出現則返回-1。

　　lastIndexOf 方法返回給定元素在數組中最後一次出現的位置，如果沒有出現則返回-1。

ES6 數組方法
1.擴展運算符

2.Array.from() 類數組轉換成數組

3.Array.of() 方法用於將一組值，轉換爲數組。

4.copyWithin() 數組實例的 在當前數組內部，將指定位置的成員複製到其他位置（會覆蓋原有成員），然後返回當前數組。也就是說，使用這個方法，會修改當前數組。

5. find() 數組實例的 用於找出第一個符合條件的數組成員。它的參數是一個回調函數，所有數組成員依次執行該回調函數，直到找出第一個返回值爲true的成員，然後返回該成員。如果沒有符合條件的成員，則返回undefined。

6. findIndex() 數組實例的 方法的用法與find方法非常類似，返回第一個符合條件的數組成員的位置，如果所有成員都不符合條件，則返回-1。

7.fill() 數組實例的方法使用給定值，填充一個數組。

8.entries()，keys() 和 values()  數組實例的 

　　ES6 提供三個新的方法——entries()，keys()和values()——用於遍歷數組。它們都返回一個遍歷器對象（詳見《Iterator》一章），可以用for...of循環進行遍歷，唯一的區別是keys()是對鍵名的遍歷、values()是對鍵值的遍歷，entries()是對鍵值對的遍歷。

9.includes() 數組實例的 方法返回一個布爾值，表示某個數組是否包含給定的值，與字符串的includes方法類似。ES2016 引入了該方法。

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

修改原數組	不修改原數組
push， pop	concat
unshift，shift	join
sort	slice
reverse	indexOf()，lastIndexOf()
splice	forEach
copyWithin	map
fill	filter
	some
	every
	reduce，reduceRight
	includes
	finde，findIndex
	entries()，keys()，values()

修改原數組

push() 向數組的末尾添加一個或更多元素，並返回新的長度。

unshift() 向數組的開頭添加一個或更多元素，並返回新的長度。

pop() 刪除並返回數組的最後一個元素

shift() 刪除並返回數組的第一個元素

sort() 對數組的元素進行排序

reverse() 顛倒數組中元素的順序。

splice() 刪除元素，並向數組添加新元素。

splice

語法

arrayObject.splice(index,howmany,item1,.....,itemX)

var arr = new Array();
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";
 
arr.splice(2,1);               //"George", "John"
arr.splice(1,0,"William");     //"George", "William", "John"
arr.splice(2,1,"haha");        //"George", "William", "haha"

不修改原數組

concat() 連接兩個或更多的數組，並返回結果。
join() 把數組的所有元素放入一個字符串。元素通過指定的分隔符進行分隔。
slice() 從某個已有的數組返回選定的元素

slice

語法

arrayObject.slice(start,end);

start 必需。規定從何處開始選取。可爲負，從數組尾部開始算起。
end 可選。規定從何處結束選取。如果沒有指定，那麼切分的數組包含從 start 到數組結束的所有元素。可爲負，從數組尾部開始算起。

var arr = new Array();
arr[0] = "George";
arr[1] = "John";
arr[2] = "Thomas";
 
arr.slice(2,1);         //[]
arr.slice(1,2);         //"William"
arr.slice(-2,-1);         //"William"

將類似數組的對象(比如arguments)轉換爲真實的數組
Array.prototype.slice.call(arguments);

ES5新增數組

索引方法：indexOf()，lastIndexOf()
迭代方法：forEach()、map()、filter()、some()、every()
歸併方法：reduce()、reduceRight()

方法並不會修改原數組

索引方法

indexOf

array.indexOf(searchElement[, fromIndex])

返回整數索引值，如果沒有匹配（嚴格匹配），返回-1。
fromIndex可選，表示從這個位置開始搜索，若缺省或格式不合要求，使用默認值0。

var data = [2, 5, 7, 3, 5];
 
console.log(data.indexOf(5, "x")); // 1 ("x"被忽略)
console.log(data.indexOf(5, "3")); // 4 (從3號位開始搜索)

lastIndexOf

array.lastIndexOf(searchElement[, fromIndex])

從字符串的末尾開始查找，而不是從開頭。
fromIndex的默認值是array.length - 1。

var data = [2, 5, 7, 3, 5];
 
console.log(data.lastIndexOf(5)); // 4
console.log(data.lastIndexOf(5, 3)); // 1 (從後往前，索引值小於3的開始搜索)
 
console.log(data.lastIndexOf(4)); // -1 (未找到)

兩個方法在比較第一個參數與數組中的每一項時，會使用全等操作符，要求必須完全相等,否則返回-1。

迭代方法

每個方法都接受兩個參數，第一個參數callback（回調函數，必選），第二個參數是一個可選的上下文參數。

其中第一個參數callback接受三個參數，當前項的值、當前項在數組中的索引、數組對象本身。即 function(value,index,arr) {}；需要注意的是與我們常用的jQuery中封裝的方法區別在第一個參數和第二個參數，即index和value的順序是相反的。
第二個參數是一個可選的上下文參數，是執行第一個函數參數的作用域對象，也就是上面說的callback中this所指向的值。如果這第2個可選參數不指定，則使用全局對象代替（在瀏覽器是爲window），嚴格模式下甚至是undefined。

需要注意的是除了forEach()方法，其餘的迭代方法中callback需要有return值否則會返回undefined。

forEach

forEach()對數組進行遍歷循環，對數組中的每一項運行給定的函數，這個方法沒有返回值。

[].forEach(function(value, index, array) {
    // ...
}, [ thisObject]);

forEach除了接受一個必須的回調函數參數，還可以接受一個可選的上下文參數（改變回調函數裏面的this指向）（第2個參數）。
如果這第2個可選參數不指定，則使用全局對象代替（在瀏覽器是爲window），嚴格模式下甚至是undefined.

[1, 2, 3, 4].forEach(function (item, index, array) {
  console.log(array[index] == item); // true
  sum += item;
});
 
alert(sum); // 10
 
var database = {
  users: ["小張", "小江", "小李"],
  sendEmail: function (user) {
    if (this.isValidUser(user)) {
      console.log("你好，" + user);
    } else {
      console.log("抱歉，"+ user +"，你不是本家人");    
    }
  },
  isValidUser: function (user) {
    return /^張/.test(user);
  }
};
 
// 給每個人法郵件
database.users.forEach(  // database.users中人遍歷
  database.sendEmail,    // 發送郵件
  database               // 使用database代替上面標紅的this
);
 
// 結果：
// 你好，小張
// 抱歉，小江，你不是本家人
// 抱歉，小李，你不是本家

map

map()指“映射”，對數組中的每一項運行給定的函數，返回每次函數調用的結果組成的數組。

[].map(function(value, index, array) {
    // ...
}, [ thisObject]);

var data = [1, 2, 3, 4];
//===============================
var arrayOfSquares = data.map(function (item) {
  return item * item;
});
 
alert(arrayOfSquares); // 1, 4, 9, 16

filter

filter()，“過濾”，對數組中的每一項運行給定函數，返回滿足過濾條件組成的數組。

array.filter(callback,[ thisObject]);

filter的callback函數需要返回布爾值true或false。
返回值只要是弱等於== true/false就可以了，而非非得返回 === true/false。

var arr3 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
var flag = arr3.filter(function(value, index) {
  return value % 3 === 0;
}); 
console.log(flag);  // [3, 6, 9]

every

every()，判斷數組中每一項都是否滿足所給條件，當所有項都滿足條件，纔會返回true。

array.every(callback,[ thisObject]);

var arr4 = [1, 2, 3, 4, 5];
var flag = arr4.every(function(value, index) {
  return value % 2 === 0;
}); 
console.log(flag);  // false

some

some()，判斷數組中是否存在滿足條件的項，只要有一項滿足條件，就會返回true。

array.some(callback,[ thisObject]);

var arr5 = [1, 2, 3, 4, 5];
var flag = arr5.some(function(value, index) {
  return value % 2 === 0;
}); 
console.log(flag);   // true

歸併方法

這兩個方法相比前面可能稍微複雜一些，它們都會迭代數組中的所有項，然後生成一個最終返回值。這兩個方法接收兩個參數。

第一個參數callback，函數接受4個參數分別是（初始值total必選，當前值currentValue必選，索引值currentIndex可選，當前數組arr可選），函數需要返回一個值，這個值會在下一次迭代中作爲初始值。
第二個參數是迭代初始值（initialValue），參數可選，如果缺省，初始值爲數組第一項，從數組第一個項開始疊加，缺省參數要比正常傳值少一次運算。

reduce

reduce() 方法接收一個函數作爲累加器，數組中的每個值（從左到右）開始縮減，最終計算爲一個值。 reduce() 對於空數組是不會執行回調函數的。

array. reduce(function(total, currentValue, currentIndex, array) {
    // ...
});

//===========================================
var arr9 = [1, 2, 3, 4];
var sum9 =arr9.reduce(function (total, curr, index, array) {
  return total * curr;
});
console.log(sum9);  // 24 
var sum9_1 =arr9.reduce(function (total, curr, index, array) {
  return total * curr;
}, 10);
console.log(sum9_1);  // 240

reduceRight

reduceRight()和reduce()相比，用法類似，差異在於reduceRight是從數組的末尾開始實現的。

array.reduceRight(callback,[ thisObject]);

var arr9 = [2, 45, 30, 80];
var flag = arr9.reduceRight(function (total, curr, index) {
  return total - curr;
});
var flag_1 = arr9.reduceRight(function (total, curr, index) {
  return total - curr;
},200);
console.log(flag);  // 3
console.log(flag_1);  // 43

Array方法

isArray

判斷參數是否是”Array”返回true或false。

var a = [1,2,3];

Array.isArray(a); //true

ES6數組方法

Array方法

Array.from()

用於將兩類對象轉爲真正的數組：類似數組的對象（array-like object）和可遍歷（iterable）的對象（包括 ES6 新增的數據結構 Set 和 Map）。

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
 
let arr2 = Array.from(arrayLike); // ['a', 'b', 'c']

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]

Array.of()

用於將一組值，轉換爲數組。

Array.of(3, 11, 8) // [3,11,8]

Array.of(3) // [3]

實例方法

會改變原數組

copyWithin

在當前數組內部，將指定位置的成員複製到其他位置（會覆蓋原有成員），然後返回當前數組。

array. copyWithin(target, start = 0, end = this.length);

target（必需）：從該位置開始替換數據。如果爲負值，表示倒數。
start（可選）：從該位置開始讀取數據，默認爲 0。如果爲負值，表示倒數。
end（可選）：到該位置前停止讀取數據，默認等於數組長度。如果爲負值，表示倒數。

// 將3號位複製到0號位
[1, 2, 3, 4, 5].copyWithin(0, 3, 4)
// [4, 2, 3, 4, 5]
 
// -2相當於3號位，-1相當於4號位
[1, 2, 3, 4, 5].copyWithin(0, -2, -1)
// [4, 2, 3, 4, 5]

fill

使用給定值，填充一個數組。

array. copyWithin(target, start = 0, end = this.length);

target（必需）：從該位置開始替換數據。如果爲負值，表示倒數。
start（可選）：從該位置開始讀取數據，默認爲 0。如果爲負值，表示倒數。
end（可選）：到該位置前停止讀取數據，默認等於數組長度。如果爲負值，表示倒數。

['a', 'b', 'c'].fill(7);   // [7, 7, 7]
 
let arr = new Array(3).fill([]);
arr[0].push(5);       // [[5], [5], [5]]

不會改變原數組

find

用於找出第一個符合條件的數組成員。它的參數是一個回調函數，所有數組成員依次執行該回調函數，直到找出第一個返回值爲true的成員，然後返回該成員。如果沒有符合條件的成員，則返回undefined。
find方法的回調函數可以接受三個參數，依次爲當前的值、當前的位置和原數組。

array.reduceRight(callback,[ thisObject]);

[1, 4, -5, 10].find((n) => n < 0)
// -5
[1, 5, 10, 15].find(function(value, index, arr) {
  return value > 9;
}) // 10

findIndex

findIndex方法的用法與find方法非常類似，返回第一個符合條件的數組成員的位置，如果所有成員都不符合條件，則返回-1。

array.reduceRight(callback,[ thisObject]);

[1, 5, 10, 15].findIndex(function(value, index, arr) {
  return value > 9;
}) // 2

includes

返回一個布爾值，表示某個數組是否包含給定的值。

[1, 2, 3].includes(2)     // true

entries()，keys() 和 values()

ES6提供了三個新方法：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"

如果不使用for...of循環，可以手動調用遍歷器對象的next方法，進行遍歷。

let letter = ['a', 'b', 'c'];
let entries = letter.entries();
console.log(entries.next().value); // [0, 'a']
console.log(entries.next().value); // [1, 'b']
console.log(entries.next().value); // [2, 'c']

ES5-ES6中數組方法使用詳解

Array 對象屬性

傳統Array 對象方法

方法速查表

修改原數組

splice

不修改原數組

slice

ES5新增數組

索引方法

indexOf

lastIndexOf

迭代方法

forEach

map

filter

every

some

歸併方法

reduce

reduceRight

Array方法

isArray

ES6數組方法

Array方法

Array.from()

Array.of()

實例方法

會改變原數組

copyWithin

fill

不會改變原數組

find

findIndex

includes

entries()，keys() 和 values()