一次掌握 JavaScript ES5 到 ES8 數組內容

ECMAScript 5.1 中提供的數組方法

ECMA-262/5.1 規範

判斷是不是數組

Array.isArray ( arg )
// false or true

不支持此方法的IE9-等瀏覽器能夠這樣處理：

Object.prototype.toString.call(obj) === '[object Array]';

轉換方法

toString

數組的 valueOf 會默認調用 toString 方法，因此他們的返回值同樣，都是逗號分隔每一項組成的字符串

var months = ['Jan', 'Feb', 'Mar', 'Apr'];
months.toString(); // "Jan,Feb,Mar,Apr"

toLocaleString

調用數組每一項的 toLocaleString 方法，有時和 toString 方法的結果是同樣的。有時也不一樣，好比 Date 對象元素組成的數組裏，返回的結果會不一樣。

join

a.join();      // 'Wind,Rain,Fire'
a.join(', ');  // 'Wind, Rain, Fire'
a.join(' + '); // 'Wind + Rain + Fire'
a.join('');    // 'WindRainFire'

若是數組中的某一項的值是 null 或者 undefined，那麼該值在 join()、toLocale-String()、toString() 和 valueOf() 方法返回的結果中以空字符串表示

棧方法

pop 刪除數組的最後一項

操做原數組，返回刪除項

var a = [1, 2, 3];
var b = a.pop();

console.log(a); // [1, 2]
console.log(b); // 3

push 在數組末尾添加新元素

操做的原數組，返回數組長度

var a = [1, 2, 3];
var b = a.push(4, 5);

console.log(a); // [1, 2, 3, 4, 5]
console.log(b); // 5

隊列方法

shift 刪除數組的第一項

操做的原數組，返回刪除項

var a = [1, 2, 3];
var b = a.shift();

console.log(a); // [2, 3]
console.log(b); // 1

unshift 數組的前面添加新元素

操做的原數組，返回數組長度

var a = [1, 2, 3];
var b = a.unshift(4, 5);

console.log(a); // [4, 5, 1, 2, 3]
console.log(b); // 5

重排序方法

reverse 反轉數組項的順序

操做原數組，返回數組

var a = ['one', 'two', 'three'];
var b= a.reverse();

console.log(a); // ['three', 'two', 'one']
console.log(b); // ['three', 'two', 'one']

sort 排序

按照 Unicode code 位置排序，默認升序

var fruit = ['cherries', 'apples', 'bananas'];
fruit.sort(); // ['apples', 'bananas', 'cherries']

var scores = [1, 10, 21, 2];
scores.sort(); // [1, 10, 2, 21]

// because '10' is mix of two characters '1' and '0' so '10' is before '2' in Unicode code point order.

以前寫過一篇排序方法的深刻解讀，感興趣請點擊這裏

深刻淺出 JavaScript 的 Array.prototype.sort 排序算法

操做方法

concat 合併數組

返回新數組

var arr1 = ['a', 'b', 'c'];
var arr2 = ['d', 'e', 'f'];

var arr3 = arr1.concat(arr2);

console.log(arr3);
// expected output: ["a", "b", "c", "d", "e", "f"]

slice 基於當前數組建立新數組

返回新數組

傳入兩個參數 起始位置（包含） 結束位置（不包含），有始無終，虎頭蛇尾。

只傳一個參數默認截取到數組末尾

傳遞的參數中有一個負數，則用數組長度加上該數來肯定位置。長度爲 5 的數組 slice（-2，-1） 與 slice（3, 4） 結果相同。

結束位置小於起始位置，則返回空數組

var a = ['1', '2', '3', '4'];
var sliced = a.slice(1, 3);

console.log(a);      // ['1', '2', '3', '4']
console.log(sliced); // ['2', '3']

splice

能夠實現 刪除、插入（元素個數大於要刪除的元素個數）、替換（刪除一個，再添加一個）

返回被刪除元素組成的數組，若是沒有被刪除元素，返回空數組

參數： 起始位置(包含)、要刪除的元素個數、元素

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

myFish.splice(2, 0, 'drum');
// ["angel", "clown", "drum", "mandarin", "sturgeon"]

myFish.splice(2, 1);
// ["angel", "clown", "mandarin", "sturgeon"]

myFish.splice(-1, 0, 'drum');
//["angel", "clown", "mandarin", "drum", "sturgeon"]

位置方法

indexOf 和 lastIndexOf 都接受兩個參數：查找的值、查找起始位置

不存在，返回 -1 ；存在，返回位置。indexOf 是從前日後查找， lastIndexOf 是從後往前查找。

indexOf

var a = [2, 9, 9];
a.indexOf(2); // 0
a.indexOf(7); // -1

if (a.indexOf(7) === -1) {
  // element doesn't exist in array
}

lastIndexOf

var numbers = [2, 5, 9, 2];
numbers.lastIndexOf(2);     // 3
numbers.lastIndexOf(7);     // -1
numbers.lastIndexOf(2, 3);  // 3
numbers.lastIndexOf(2, 2);  // 0
numbers.lastIndexOf(2, -2); // 0
numbers.lastIndexOf(2, -1); // 3

迭代方法

ECMAScript 5 提供了5個迭代方法，他們的參數都是

給定的函數(當前元素、位置、數組)

可選的，執行回調是的 this 值

every

對數組的每一項都運行給定的函數，每一項都返回 ture,則返回 true

function isBigEnough(element, index, array) {
  return element < 10;
}

[2, 5, 8, 3, 4].every(isBigEnough);   // true

some

對數組的每一項都運行給定的函數，任意一項都返回 ture,則返回 true

function isBiggerThan10(element, index, array) {
  return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true

filter

對數組的每一項都運行給定的函數，返回 結果爲 ture 的項組成的數組

var words = ["spray", "limit", "elite", "exuberant", "destruction", "present", "happy"];

var longWords = words.filter(function(word){
  return word.length > 6;
});
// Filtered array longWords is ["exuberant", "destruction", "present"]

map

對數組的每一項都運行給定的函數，返回每次函數調用的結果組成一個新數組

var numbers = [1, 5, 10, 15];
var doubles = numbers.map(function(x) {
   return x * 2;
});
// doubles is now [2, 10, 20, 30]
// numbers is still [1, 5, 10, 15]

forEach 數組遍歷

const items = ['item1', 'item2', 'item3'];
const copy = [];

items.forEach(function(item){
  copy.push(item)
});

縮小方法

reduce、reduceRight 一個是從前日後遍歷，一個是從後往前遍歷，比上面的五個迭代方法回調函數多了一個參數：上一項的值

回調函數參數 上一項、當前元素、位置、數組

reduce

var numbers = [0, 1, 2, 3];

var result = numbers.reduce(function(accumulator, currentValue) {
    return accumulator + currentValue;
});

console.log(result);
// expected output: 6

reduceRight

var flattened = [[0, 1], [2, 3], [4, 5]].reduceRight(function(a, b) {
    return a.concat(b);
}, []);

// flattened is [4, 5, 2, 3, 0, 1]

小總結

隊列方法和棧方法操做的都是原數組，增長數組元素的時候，返回值是數組長度；刪除數組元素的時候，返回值是被刪除的元素。

哪些方法改變了原數組？

棧方法：push、pop

隊列方法：shift、unshift

重排序方法：reverse、sort

哪些方法返回的是數組？

重排序方法：reverse、sort

操做方法：splice、slice、concat

迭代方法中：filter、map

ECMAScript 6.0 新增的方法

ECMA-262/6.0 規範

from

將相似數組的對象（array-like object）和可遍歷（iterable）的對象轉爲真正的數組

const bar = ["a", "b", "c"];
Array.from(bar);
// ["a", "b", "c"]

Array.from('foo');
// ["f", "o", "o"]

of

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

這個方法的主要目的，是彌補數組構造函數 Array() 的不足。由於參數個數的不一樣，會致使 Array() 的行爲有差別。

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

Array.of(7);       // [7]
Array.of(1, 2, 3); // [1, 2, 3]

Array(7);          // [ , , , , , , ]
Array(1, 2, 3);    // [1, 2, 3]

copyWithin

將指定位置的元素複製到其餘位置（會覆蓋原有元素），返回當前數組。該方法會修改當前數組。

它接受三個參數。

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

[1, 2, 3, 4, 5].copyWithin(-2);
// [1, 2, 3, 1, 2]

[1, 2, 3, 4, 5].copyWithin(0, 3);
// [4, 5, 3, 4, 5]

[1, 2, 3, 4, 5].copyWithin(0, 3, 4);
// [4, 2, 3, 4, 5]

[1, 2, 3, 4, 5].copyWithin(-2, -3, -1);
// [1, 2, 3, 3, 4]

fill

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

會抹除數組原有的元素

還能夠接受第二個和第三個參數，用於指定填充的起始位置和結束位置。

var numbers = [1, 2, 3]
numbers.fill(1);
// results in [1, 1, 1]

['a', 'b', 'c'].fill(7, 1, 2)
// ['a', 7, 'c']

find

找出第一個符合條件的數組元素，參數是一個回調函數，全部數組元素依次執行該回調函數，直到找出第一個返回值爲 true 的元素，而後返回該元素。若是沒有符合條件的元素，則返回 undefined。回調函數能夠接受三個參數，依次爲當前的值、當前的位置和原數組。

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

[1, 5, 2, 3].find(function(value, index, arr) {
  return value > 9;
}) // undefined

findIndex

findIndex 方法的用法與 find 方法很是相似，返回第一個符合條件的數組元素的位置，若是全部元素都不符合條件，則返回 -1。

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

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"

entries

var a = ['a', 'b', 'c'];
var iterator = a.entries();

console.log(iterator.next().value); // [0, 'a']
console.log(iterator.next().value); // [1, 'b']
console.log(iterator.next().value); // [2, 'c']

keys

var arr = ['a', 'b', 'c'];
var iterator = arr.keys();

console.log(iterator.next()); // { value: 0, done: false }
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

values

var a = ['w', 'y', 'k', 'o', 'p'];
var iterator = a.values();

console.log(iterator.next().value); // w
console.log(iterator.next().value); // y
console.log(iterator.next().value); // k
console.log(iterator.next().value); // o
console.log(iterator.next().value); // p

更多使用方式，能夠參考 阮一峯 ECMAScript 6入門

ECMAScript 7.0 新增的方法

ECMA-262/7.0 規範

includes

判斷數組中是否存在該元素

參數：查找的值、起始位置

能夠替換 ES5 時代的 indexOf 判斷方式

indexOf 判斷元素是否爲 NaN，會判斷錯誤

var a = [1, 2, 3];
a.includes(2); // true
a.includes(4); // false

ECMA-262/8.0 規範

ES8 沒增長數組方法

參考

JavaScript 高級程序設計

MDN web docs

阮一峯 ECMAScript 6入門