JavaScript 數組操做方法小結

ECMAScript爲操做已經包含在數組中的項提供了不少方法。這裏本人總結一下本身對這些方法的理解，如此之多的方法中，我首先已是否會改變原數組作爲分類標準，逐個解釋一下每個方法。

1、不會改變原數組

1. concat()

使用方法：array.concat(array2,array3,...,arrayX)
返回值： 返回一個新的數組

concat()方法用於鏈接兩個或多個數組。該方法不會改變現有的數組，僅會返回被鏈接數組的一個副本。
在沒有傳遞參數的狀況下，它只是複製當前數組並返回副本；若是傳遞的值不是數組，這些值就會簡單地添加到結果數組的末尾。

var arr1 = [1,2,3];
var arr2 = arr1.concat(4,[5,6]);

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

2. join()

使用方法：array.join(separator)
返回值： 返回一個字符串

join()方法用於把數組中的全部元素放入一個字符串。元素是經過指定的分隔符進行分隔的，默認使用','號分割，不改變原數組。

var arr1 = [1,2,3];
var arr2 = arr1.join();

console.log(arr1);  // [ 1, 2, 3 ]
console.log(arr2);  // 1,2,3

以前接觸過一個功能是須要生成多個連續的 *，一開始是直接使用 for循環能夠作到，後面瞭解了 join()方法後，發現其實一句話就能夠弄好了。

var arr3 = "";
for(let i = 0; i < 15; i ++) {
    arr3 = arr3 + "*";
}
console.log(arr3);  // ***************

var arr4 = new Array(16).join("*");
console.log(arr4);  // ***************

3. slice()

使用方法：array.slice(start, end)
返回值： 返回一個新的數組，包含從 start 到 end （不包括該元素）的 arrayObject 中的元素

slice()接受一或兩個參數，即要返回項的起始和結束位置。
在只有一個參數的狀況下，slice()方法返回從該參數指定位置到當前數組末尾的全部項；
若是有兩個參數，改方法返回起始和結束位置之間的項——但不包括結束位置的項。
若是參數爲負數，規定從數組尾部開始算起的位置。也就是說，-1 指最後一個元素，-2 指倒數第二個元素，以此類推。

var arr1 = [1,2,3,4,5,6];
var arr2 = arr1.slice(1);
var arr3 = arr1.slice(2,4);
var arr4 = arr1.slice(-4,-2);  // 等價於 arr1.slice(2,4);

console.log(arr1);  // [ 1, 2, 3, 4, 5, 6 ]
console.log(arr2);  // [ 2, 3, 4, 5, 6 ]
console.log(arr3);  // [ 3, 4 ]
console.log(arr4);  // [ 3, 4 ]

對於僞數組轉換爲標準數據就用到了這個方法

Array.prototype.slice.call(arguments)

4. some()

使用方法：array.some(function(currentValue,index,arr),thisValue)
返回值： 布爾值

或 ==> some()對數組中的每一項運行給定的函數，若是該函數對任一項返回true，剩餘的元素不會再執行檢測；若是沒有知足條件的元素，則返回false。

function compare(item, index, arr){
    return item > 10;
}

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

5. every()

使用方法：array.every(function(currentValue,index,arr),thisValue)
返回值： 布爾值

和 ==> every()對數組中的每一項運行給定的函數，若是該函數對每一項返回true，剩餘的元素不會再執行檢測；若是其中有一個沒有知足條件的元素，則返回false。

function compare(item, index, arr){
    return item > 10;
}

[20, 50, 80, 11, 40].every(compare);  // true
[20, 50, 80, 10, 40].every(compare);  // false

5. filter()

使用方法：array.filter(function(currentValue,index,arr), thisValue)
返回值： 返回數組

filter()方法建立一個新的數組，新數組中的元素是經過檢查指定數組中符合條件的全部元素。
對數組的每一項都運行給定的函數，返回結果爲true的項組成的數組。

function filterArr(item, index, arr){
    return item > 4;
}

[2, 5, 8, 1, 4].filter(filterArr);  // [5,8]

6. find() —— ES6新增的方法

使用方法：array.find(function(currentValue, index, arr),thisValue)
返回值： 返回符合測試條件的第一個數組元素值，若是沒有符合條件的則返回 undefined

find()方法傳入一個回調函數，找到數組中符合當前搜索規則的第一個元素，返回它，而且終止搜索。

filter()和find()方法的區別：

• filter()方法是對數組的每一項都進行檢查，最後返回結果爲true的數組；而find()方法當找到符合的元素時，馬上返回該元素，以後的元素再也不進行檢查；
• filter()方法若是沒有找到符合的元素返回空的數組；而find()方法沒有找到符合的元素則返回undefined

function filterArr(item, index, arr){
    return item > 4;
}

[2, 5, 8, 1, 4].filter(filterArr);  // [5,8]
[2, 5, 8, 1, 4].find(filterArr); // 5

function findArr(item, index, arr){
    return item > 10;
}

[2, 5, 8, 1, 4].filter(findArr);  // []
[2, 5, 8, 1, 4].find(findArr); // undefined

7. map()

使用方法：array.map(function(currentValue,index,arr), thisValue)
返回值： 返回數組

map()方法返回一個新數組，數組中的元素爲原始數組元素調用函數處理後的值。

function mapArr(item, index, arr){
    return item * 4;
}

[2, 5, 8, 1, 4].map(mapArr);  // [8,20,32,4,16]

常常筆試和麪試都會考到的一道題 ——實現一個 map數組方法，如下是本人本身寫的一個方法

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

Array.prototype.myMap = function (fn, thisValue) {
    var arr = this,
        len = arr.length,
        tmp = 0,
        result = [];
    thisValue = thisValue || null;
    for (var i = 0; i < len; i++) {
        var item = arr[i],
            index = i;
        tmp = fn.call(thisValue, item, index, arr);
        result.push(tmp);
    }
    return result
}

function mapArr(item, index, arr) {
    return item * 4;
}
arr.myMap(mapArr)   // [8, 16, 32, 24, 4]

8. forEach()

使用方法：array.forEach(function(currentValue, index, arr), thisValue)
返回值： undefined

forEach() 方法用於調用數組的每一個元素，並將元素傳遞給回調函數。這個方法沒有返回值。
本質上與使用for循環迭代數組同樣。

var items = [1, 2, 4, 7, 3];
var copy = [];

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

console.log(items);  // [ 1, 2, 4, 7, 3 ]
console.log(copy);  // [ 0, 2, 8, 21, 12 ]

9. reduce() 與 reduceRight()

使用方法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)
返回值： 返回計算結果

參數	描述
function(total,currentValue, index,arr)	必需。用於執行每一個數組元素的函數。
initialValue	可選。傳遞給函數的初始值

函數參數

參數	描述
total	必需。初始值, 或者計算結束後的返回值。
currentValue	必需。當前元素
currentIndex	可選。當前元素的索引
arr	可選。當前元素所屬的數組對象。

這兩個方法都會迭代數組的全部項，而後構建一個最終返回的值。其中，reduce()方法中數組的第一項開始，逐個遍歷到最後；而reduceRight()則從數組的最後一項開始，向前遍歷到第一項。

若是沒有設置initialValue，total的值爲數組第一項，currentValue爲數組第二項。
若是設置了initialValue，則total的值就是initialValue，currentValue爲數組第一項。

var numbers = [65, 44, 12, 4];
 
function getSum(total,currentValue, index,arr) {
    return total + currentValue;
}

var res = numbers.reduce(getSum);

console.log(numbers);  // [ 65, 44, 12, 4 ]
console.log(res);  //  125

var numbers = [65, 44, 12, 4];
 
function getSum(total,currentValue, index,arr) {
    return total + currentValue;
}

var res = numbers.reduce(getSum, 10);  // 初始值設置爲10，因此最終結果也相應的加10

console.log(res);  //  135

具體 reduce()方法用得好是能起到很大的做用的，對於批量修改從後臺獲取的數據十分有用，能夠參考 JS進階篇--JS數組reduce()方法詳解及高級技巧

10. indexOf() 和 lastIndexOf()

使用方法：array.indexOf(item,start)
返回值： 元素在數組中的位置,若是沒與搜索到則返回 -1

indexOf() 和 lastIndexOf() 方法都接收兩個參數：要查找的項和（可選）查找起點位置的索引。
其中，indexOf()方法從數組開頭開始向後查找；lastIndexOf() 方法從數組末尾開始向前查找。

var n = [1,2,3,4,5,4,3,2,1];

console.log(n.indexOf(4));  // 3
console.log(n.lastIndexOf(4));  // 5

console.log(n.indexOf(4,4));  // 5
console.log(n.lastIndexOf(4,4));  // 3

indexOf()可使用在數組去重中，以下：

var n = [1, 2, 3, 4, 5, 4, 3, 2, 1];
function fn(arr) {
    var result = [],
        len = arr.length;
    for (var i = 0; i < len; i++) {
        var item = arr[i];
        if (result.indexOf(item) < 0) {
            result.push(item);
        }
   }
    return result;
}
console.log(fn(n));  // [1, 2, 3, 4, 5]

2、會改變原數組

1. push()

使用方法：array.push(item1, item2, ..., itemX)
返回值： 返回新數組的長度

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

var arr= [65, 44, 12, 4];
var arr1 = arr.push(2,5);

console.log(arr); // [ 65, 44, 12, 4, 2, 5 ]
console.log(arr1); // 6

2. pop()

使用方法：array.pop()
返回值： 數組原來的最後一個元素的值（移除的元素）

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

var arr = [65, 44, 12, 4];
var arr1 = arr.pop();

console.log(arr); // [ 65, 44, 12 ]
console.log(arr1); //  4

3. unshift()

使用方法：array.unshift(item1,item2, ..., itemX)
返回值： 返回新數組的長度

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

var arr = [65, 44, 12, 4];
var arr1 = arr.unshift(1);

console.log(arr); // [ 1, 65, 44, 12, 4 ]
console.log(arr1); //  5

4. shift()

使用方法：array.shift()
返回值： 數組原來的第一個元素的值（移除的元素）

shift() 方法用於把數組的第一個元素從其中刪除，並返回第一個元素的值。返回第一個元素，改變原數組。

var arr = [65, 44, 12, 4];
var arr1 = arr.shift();

console.log(arr); // [ 44, 12, 4 ]
console.log(arr1); //   65

5. sort()

使用方法：array.sort(sortfunction)
返回值： 返回排序後的數組（默認升序）

sort() 法用於對數組的元素進行排序。
排序順序能夠是字母或數字，並按升序或降序。
默認排序順序爲按字母升序。
P.S 因爲排序是按照 Unicode code 位置排序，因此在排序數字的時候，會出現"10"在"5"的前面，因此使用數字排序，你必須經過一個函數做爲參數來調用。

var values = [0, 1, 5, 10, 15];
values.sort();
console.log(values);  // [ 0, 1, 10, 15, 5 ]

values.sort(function(a, b){
  return a - b;
})
console.log(values);  //  [0, 1, 5, 10, 15 ]

6. reverse()

使用方法：array.reverse()
返回值： 返回顛倒後的數組

reverse() 方法用於顛倒數組中元素的順序。返回的是顛倒後的數組，會改變原數組。

var values = [0, 1, 5, 10, 15];
values.reverse();
console.log(values);  // [ 15, 10, 5, 1, 0 ]

7. fill() —— ES6新增的方法

使用方法：array.fill(value, start, end)
返回值： 返回新的被替換的數組

fill()方法用於將一個固定值替換數組的元素。

參數	描述
value	必需。填充的值。
start	可選。開始填充位置。
end	可選。中止填充位置(不包含) (默認爲 array.length)

var values = [0, 1, 5, 10, 15];
values.fill(2);
console.log(values);  // [ 2, 2, 2, 2, 2 ]

values = [0, 1, 5, 10, 15];
values.fill(2,3,4);
console.log(values);  // [ 0, 1, 5, 2, 15 ]

8. splice()

使用方法：array.splice(index,howmany,item1,.....,itemX)
返回值： 若是從 arrayObject 中刪除了元素，則返回的是含有被刪除的元素的數組

splice()有多種用法：

1. 刪除: 能夠刪除任意數量的項，只須要指定2個參數：要刪除的第一項的位置和要刪除的項數。splice(0,2) // 會刪除數組中前兩項
2. 插入: 能夠向指定位置插入任意數量的項，只需提供3個參數：起始位置、0（要刪除的項數）和要插入的項。若是要插入多個項，能夠再傳入第4、第五，以致任意多個項。splice(2,0,1,4) // 會從數組位置2的地方插入1和4
3. 替換: 能夠向指定位置插入任意數量的項，且同時刪除任意數量的項，只需提供3個參數：起始位置、要刪除的項數和要插入的項。插入的項沒必要與刪除的項數相等。splice(2,3,1,4) // 會從數組位置2刪除兩項，而後再從位置2的地方插入1和4

// 刪除
var values = [4,8,0,3,7];
var remove = values.splice(3,1);
console.log(values);  // [ 4, 8, 0, 7 ]
console.log(remove);  // [ 3 ]    刪除第四項
// 插入
remove = values.splice(2,0,1,2);
console.log(values);  // [ 4, 8, 1, 2, 0, 7 ]
console.log(remove);  // []  從位置2開始插入兩項，因爲沒有刪除全部返回空函數
// 替換
remove = values.splice(2,2,6,9,10);
console.log(values);  // [ 4, 8, 6, 9, 10, 0, 7 ]
console.log(remove);  // [ 1, 2 ]  從位置2開始刪除兩項，同時插入三項

9. copyWithin() —— ES6新增的方法

使用方法：array.copyWithin(target, start, end)
返回值： 返回新複製的數組

copyWithin()方法選擇數組的某個下標，從該位置開始複製數組元素，默認從0開始複製。也能夠指定要複製的元素範圍。

var fruits = [1,2,3,4,5,6];
fruits.copyWithin(1);  // [ 1, 1, 2, 3, 4, 5 ]   從下標爲1的元素開始，複製數組

fruits.copyWithin(3, 0, 3);  // [ 1, 2, 3, 1, 2, 3 ]  從下標爲3的元素開始，複製數組座標爲0到2的數組

3、其餘

1. form() —— ES6新增的方法

使用方法：Array.from(object, mapFunction, thisValue)
返回值： 數組對象

from() 方法用於字符串、擁有 length 屬性的對象(僞數組)或可迭代的對象(Set/Map)來返回一個數組。

var myArr = Array.from("RUNOOB");
var s = new Set(['A', 'B', 'C']);
var m = new Map([[1, 'x'], [2, 'y'], [3, 'z']]);
var s1 = Array.from(s);
var m1 = Array.from(m);

console.log(myArr);  // [ "R", "U", "N", "O", "O", "B" ]
console.log(s1);  // [ "A", "B", "C" ]
console.log(m1);  // [ [ 1, "x" ], [ 2, "y" ], [ 3, "z" ]]

對於僞數組轉換爲標準數據除了 Array.prototype.slice.call(arguments)，還可使用如下方法：

function test(){
     var arg = Array.from(arguments);
     arg.push(5);
     console.log(arg);  // [ 1, 2, 3, 4, 5 ]
}
test(1,2,3,4);

還能夠結合 new Set()進行數組的去重

> function dedupe(array){
return Array.from(new Set(array));
}
dedupe([1,1,2,3]) //[1,2,3]