JavaScript數組方法整理

Array的原型方法

isArray()

Array.isArray(value)
檢測value是不是數組

join()

arr.join(separator)
將數組用 separator分隔，並返回分割後的字符串

var arr = ['red', 'green', 'blue'];
arr2 = arr.join('|'); // "red|green|blue"
arr3 = arr.join('');  // "redgreenblue"

reverse()

arr.reverse()
顛倒數組自身順序

var arr = [1, 2, 3, 5, 12, 100, 4];
arr.reverse(); // [4, 100, 12, 5, 3, 2, 1]

sort()

arr.sort() or arr.sort(campare)
按升序排序數組項
排序時，會調用每一個數組項的 toString()方法，比較獲得的字符串，以肯定如何排序；
即便數組中每一項都是數值，比較的也是字符串；
傳入比較函數，能夠解決此問題

push()

arr.push()
接受任意數量的參數，並逐個添加到數組末尾，返回修改後數組的長度；
push()與 pop()方法組成 棧方法 LIFO(Last-In-First-Out)；
push()與 shift()方法組成 隊列方法 FIFO(First-In-First-Out)；

var colors = ['blue'];
var len = colors.push('red', 'green');
console.log(len); // 3
console.log(colors.toString()); //blue,red,green

pop()

arr.pop()
移除數組最後一項，並返回該項，length值減一。

var colors = ['blue', 'red', 'green']
colors.pop();        // "green"
colors.toString();   // ["blue", "red"]
colors.length;       // 2

shift()

arr.shift()
移除數組第一項，並返回該項，並返回該項，length值減一。

var colors = ['red','green', 'blue'];
var item = colors.shift();
console.log(item);    // red
console.log(colors);  // ["green", "blue"]

unshift()

arr.unshift()
在數組前端添加任意個項，並返回新數組的長度。

var colors = ['red'];
var len = colors.unshift('green', 'blue');
console.log(len); // 3
console.log(colors); // ["green", "blue", "red"]

concat()

arr.concat(arrX,arrX, ..., arrX)
先建立當前數組的一個副本，而後將接收到的參數添加到這個副本的末尾，最後返回新構建的數組。
能夠用來 複製數組：不給 concat()傳遞參數的狀況下，只是複製當前數組並返回該副本。

var colors = ['red','green', 'blue'];
var newColors = colors.concat('yellow', ['pink', 'black']);
var newColors2 = colors.concat(); // 複製當前數組
console.log(colors);        // ["red", "green", "blue"]
console.log(newColors);     // ["red", "green", "blue", "yellow", "pink", "black"]
console.log(newColors2);    // ["red", "green", "blue"]

slice()

arr.slice(start, end)

• 基於當前數組中一個或多個項建立一個新數組。

• slice()方法能夠接受一或兩個參數，即要返回項的起始和結束位置。

  • 0個參數：複製當前數組並返回該副本；
  • 1個參數：從該參數指定位置開始到當前數組末尾的全部項；
  • 2個參數：返回起始和結束位置之間的項[start, end),不包含結束位置的項；

var arr = [1, 2, 3, 4, 5, 6, 7, 8];
var arr2 = arr.slice();
var arr3 = arr.slice(2);
var arr4 = arr.slice(2, 5);

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

splice()

arr.splice(startIndex, count, item1, ..., itemN)

• 參數說明

  • startIndex:必需。整數，規定添加/刪除項目的位置，使用負數可從數組結尾處規定位置。
  • count:必需。要刪除的項數。若是設置爲 0，則不會刪除項目。
  • item1, ..., itemX:可選。向數組添加的新項目。

• 返回值：

  • 始終返回一個數組,該數組中包含從原始數組中刪除的項（若沒有刪除任何項，則返回一個空數組）

功能	描述	舉例
刪除	刪除任意數量的項,只需指定2個參數； 要刪除的第一項的位置、要刪除的項數；	splice(1, 2)
插入	向指定位置插入多個項，只需提供3個參數； 起始位置，0（要刪除的項數）、要插入的項；	splice(1, 0, 'yellow', 'purple')
替換	向指定位置插入任意數量的項，且同時刪除任意數量的項； 起始位置、要刪除的項數、要插入的任意數量的項	splice(2, 2, 'white', 'black')

var colors = ["red", "green", "blue", "pink"];
// 刪除
var removed = colors.splice(1, 2); 
console.log(colors); // ["red", "pink"]
console.log(removed);// ["green", "blue"]
// 插入
removed = colors.splice(1, 0, 'yellow', 'purple');
console.log(colors);  // ["red", "yellow", "purple", "pink"]
console.log(removed); // []
// 替換
removed = colors.splice(1, 2, 'white', 'black');
console.log(colors);  // ["red", "white", "black", "pink"]
console.log(removed); // ["yellow", "purple"]

迭代方法

如下5個迭代方法均爲ECMAScript新增。

forEach()

arrayObject.forEach(function(currentValue, index, array))

• 對數組中的每一項運行給定函數；
• 沒有返回值；

var numbers = [1,2,3,4,5];
numbers.forEach(function(item, index, arr){
    console.log(item + " | " + index + " | " + arr.valueOf());
});

// 1 | 0 | 1,2,3,4,5
// 2 | 1 | 1,2,3,4,5
// 3 | 2 | 1,2,3,4,5
// 4 | 3 | 1,2,3,4,5
// 5 | 4 | 1,2,3,4,5

map()

arrayObject.map(function(currentValue, index, array))

• 對數組中對每一項運行給定函數；
• 返回每次函數調用對結果組成對數組；

var numbers = [1,2,3,4,5];
var newNumbers = numbers.map(function(item, index, arr){
    console.log(item + " | " + index + " | " + (numbers === arr));
    return item * 2;
});
console.log(newNumbers);
// 1 | 0 | true
// 2 | 1 | true
// 3 | 2 | true
// 4 | 3 | true
// 5 | 4 | true
// [2, 4, 6, 8, 10]

filter()

arrayObject.filter(function(currentValue, index, array))

• 對數組中對每一項運行給定函數；
• 返回該函數會返回true的項組成對數組；

var numbers = [1,2,3,4,5];
var newNumbers = numbers.filter(function(item, index, arr){
    console.log(item + " | " + index + " | " + (numbers === arr));
    return item % 2 === 0;
});
console.log(newNumbers); // [2, 4]

every()

arrayObject.every(function(currentValue, index, array))

• 對數組中對每一項運行給定函數；
• 若是該函數對每一項都返回true,則返回true;

var numbers = [1,2,3,4,5];
var everyResult = numbers.every(function(item, index, arr){
    console.log(item + " | " + index + " | " + (numbers === arr));
    return item % 2 === 0;
});
console.log(everyResult); // false

some()

arrayObject.some(function(currentValue, index, array))

• 對數組中對每一項運行給定函數；
• 若是該函數對人意項返回true,則返回true；

var numbers = [1,2,3,4,5];
var someResult = numbers.every(function(item, index, arr){
    console.log(item + " | " + index + " | " + (numbers === arr));
    return item > 0;
});
console.log(someResult); // true

歸併方法

reduce()

arrayObject.reduce(function(prev, cur, index, array))

• 參數：

  • prev: 必需，初始值, 或者計算結束後的返回值。第一次迭代時爲數組對第一項；
  • cur : 必需，當前迭代的元素；
  • index: 可選，當前元素對索引；
  • array: 可選，當前元素所屬的數組對象；
• 迭代數組對全部項，將數組元素計算爲一個值（從左到右➡️➡️）
• function(prev, cur, index, array)這個函數每次返回的任何值會做爲第一個參數自動傳給下一項；

var nums = [1,2,3,4,5];
var sum = nums.reduce(function(prev, cur, index, array){
    console.log(prev + ' | ' + cur + ' | ' + index + ' | ' + (nums===array))
    return prev + cur;
});
console.log('sum = ' + sum);

// prev  | cur | index | (nums===array)
// 可見第一次迭代發生在數組對第2項上，第一個參數是數組對第1項，第二個參數爲第二項
// 1     | 2   | 1     | true  
// 3     | 3   | 2     | true
// 6     | 4   | 3     | true
// 10    | 5   | 4     | true
// sum = 15

reduceRight()

arrayObject.reduce(function(prev, cur, index, array))

• reduceRight()與reduce()功能類似，從數組對最後一項開始，向前遍歷到第一項；

• 參數：

  • prev: 必需，初始值, 或者計算結束後的返回值。第一次迭代時爲數組對最後一項；
• 迭代數組對全部項，將數組元素計算爲一個值（從右到左⬅️⬅️）

var nums = [1,2,3,4,5];
var sum = nums.reduceRight(function(prev, cur, index, array){
    console.log(prev + ' | ' + cur + ' | ' + index + ' | ' + (nums===array))
    return prev + cur;
});
console.log('sum = ' + sum);

// prev| cur | index | (nums===array)
// 5   | 4   | 3     | true
// 9   | 3   | 2     | true
// 12  | 2   | 1     | true
// 14  | 1   | 0     | true
// sum = 15