ECMAScript5 Array新增方法

ECMAScript5標準發佈於2009年12月3日，它帶來了一些新的，改善現有的Array數組操做的方法。
若是不考慮兼容性的話能夠大面積使用了。

在ES5中，Array一共有10個方法：

Array.isArray
Array.prototype.indexOf
Array.prototype.lastIndexOf
Array.prototype.every
Array.prototype.some
Array.prototype.forEach
Array.prototype.map
Array.prototype.filter
Array.prototype.reduce
Array.prototype.reduceRight

0. Array.isArray(value)

Array.isArray() 方法用來判斷某個值是否爲數組。若是是，則返回 true，不然返回 false

// 下面的函數調用都返回 true
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
// 不爲人知的事實：其實 Array.prototype 也是一個數組。
Array.isArray(Array.prototype); 

// 下面的函數調用都返回 false
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);
Array.isArray({ __proto__: Array.prototype });

具體參考MDN

1. .indexOf(element) / .lastIndexOf(element)

indexOf方法返回元素在數組中的第一個位置的索引，若是不存在返回"-1"

不使用indexOf時:

var arr = ['apple','orange','pear'],
    found = false;

for(var i = 0, length = arr.length; i < length; i++) {
    if (arr[i] === 'orange') {
        found = true;
    }
}

console.log('found orange :' + found);

使用indexOf方法後：

var arr = ['apple','orange','pear'];
console.log('found orange : ',  arr.indexOf('orange') != -1);

2. .filter(function(element))

filter方法建立一個一個新的匹配過濾條件的數組，返回數組的一個子集，回調函數用於邏輯判斷是否返回，返回true則把當前元素加入到返回數組中，false則不加，新數組只包含返回true的值，索引缺失的不包括，原數組保持不變.

var arr = new Array(1, 2, 3, 4, 5, 6);

var newArr = arr.filter(function(e){
    return e % 2 == 0;
});

console.log(newArr); // [ 2, 4, 6 ]
console.log(arr); //[1, 2, 3, 4, 5, 6]

再舉個例子，不使用filter時：

var arr = [
    {"name":"apple", "count": 2},
    {"name":"orange", "count": 5},
    {"name":"pear", "count": 3},
    {"name":"orange", "count": 16},
];
    
var newArr = [];

for (var i = 0, l = arr.length; i < l; i++) {
    if (arr[i].name === "orange") {
        newArr.push(arr[i]);
    }
}

console.log("Filter results:", newArr);

使用filter後：

var arr = [
    {"name":"apple", "count": 2},
    {"name":"orange", "count": 5},
    {"name":"pear", "count": 3},
    {"name":"orange", "count": 16},
];

var newArr = arr.filter(function(item){
    return item.name === "orange";
});
console.log("Filter results:",newArr);

3. .forEach(element,index,array)

遍歷數組，參數爲一個回調函數，回調函數有三個參數：當前元素，元素索引，整個數組。
爲每個元素執行對應的回調方法。 forEach 是用來替換 for 、和 for in 循環的。

var arr = [1,2,3,4,5,6,7,8];

// 普通for循環
for(var i= 0, l = arr.length; i< l; i++){
    console.log(arr[i]);
}

// forEach 迭代
arr.forEach(function(item,index){
    console.log(item);
});

// 給數組中的每一個元素加1
var a = new Array(1, 2, 3, 4, 5, 6);
a.forEach(function(e, i, array) {
    array[i] = e + 1;
});
console.log(a); //[2, 3, 4, 5, 6, 7]

4. .map(function(element))

map()對數組的每一個元素進行必定操做（映射）後，會返回一個新的數組。
與forEach相似，遍歷數組，回調函數的返回值組成一個新的數組，新數組的索引結構和原數組一致，原數組保持不變。

不使用map()

var oldArr = [
    {
        first_name: "Colin",
        last_name: "Toh"
    }, 
    {
        first_name: "Addy",
        last_name: "Osmani"
    }, 
    {
        first_name: "Yehuda",
        last_name: "Katz"
    }];

function getNewArr() {

    var newArr = [];

    for (var i = 0, l = oldArr.length; i < l; i++) {
        var item = oldArr[i];
        item.full_name = [item.first_name, item.last_name].join(" ");
        newArr[i] = item;
    }

    return newArr;
}

console.log(getNewArr());

使用map()後：

var oldArr = [
    {
        first_name: "Colin",
        last_name: "Toh"
    }, 
    {
        first_name: "Addy",
        last_name: "Osmani"
    }, 
    {
        first_name: "Yehuda",
        last_name: "Katz"
    }];

function getNewArr() {

    return oldArr.map(function(item, index) {
        item.full_name = [item.first_name, item.last_name].join(" ");
        return item;
    });
}

console.log(getNewArr());


// 再舉個例子：
var a = new Array(1, 2, 3, 4, 5, 6);
var newArr = a.map(function(e) {
    return e * e;
});
console.log(newArr); // [1, 4, 9, 16, 25, 36]
console.log(a); //[1, 2, 3, 4, 5, 6]

5. .reduce(function(v1,v2),initialValue) / .reduceRight(function(v1,v2),initialValue)

reduce()能夠實現一個累加器的功能，將數組的每一個值（從左到右）將其下降到一個值。
遍歷數組，調用回調函數，將數組元素組合成一個值返回,
reduce從索引最小值開始，reduceRight反向，方法有兩個參數。

1. 回調函數：把兩個值合爲一個，返回結果;
2. initialValue，一個初始值,可選。

舉個例子：

var a = new Array(1, 2, 3, 4, 5, 6);

var a2 = a.reduce(function(v1, v2) {
    return v1 + v2;
});

var a3 = a.reduceRight(function(v1, v2) {
    return v1 - v2;
}, 100);

console.log(a2); // 21
console.log(a3); // 79

再舉個例子： 統計一個數組中每一個單詞出現的次數。

不使用 .reduce():

var arr = ["apple", "orange", "apple", "orange", "pear", "orange"];

function getWordCnt() {
    var obj = {};

    for (var i = 0, l = arr.length; i < l; i++) {
        var item = arr[i];
        obj[item] = (obj[item] + 1) || 1;
    }

    return obj;
}

console.log(getWordCnt()); // { apple: 2, orange: 3, pear: 1 }

使用.reduce()：

var arr = ["apple", "orange", "apple", "orange", "pear", "orange"];

function getWordCnt() {
    return arr.reduce(function(prev, next) {
        prev[next] = (prev[next] + 1) || 1;
        return prev;
    }, {}); // 傳遞一個初始值{}
}

console.log(getWordCnt()); // { apple: 2, orange: 3, pear: 1 }

最後再來一個例子， 加深理解傳遞初始值和不傳初始值的區別：

var arr = ["apple","orange"];

function noPassValue(){
    return arr.reduce(function(prev,next){
        console.log("prev:",prev);
        console.log("next:",next);
        
        return prev + " " +next;
    });
}
function passValue(){
    return arr.reduce(function(prev,next){
        console.log("prev:",prev);
        console.log("next:",next);
        
        prev[next] = 1;
        return prev;
    },{});
}

console.log("No Additional parameter:",noPassValue());
console.log("----------------");
console.log("With {} as an additional parameter:",passValue());

原文首發於 http://fy98.com/2015/09/23/es5-array-new-function/