JavaScript數(shù)組方法整理

harryhappy 發(fā)布于2019-08-26 13:21 / 1783人閱讀

摘要：移除數(shù)組第一項(xiàng)，并返回該項(xiàng)，并返回該項(xiàng)，值減一。在數(shù)組前端添加任意個(gè)項(xiàng)，并返回新數(shù)組的長(zhǎng)度。整數(shù)，規(guī)定添加刪除項(xiàng)目的位置，使用負(fù)數(shù)可從數(shù)組結(jié)尾處規(guī)定位置。第一次迭代時(shí)為數(shù)組對(duì)最后一項(xiàng)迭代數(shù)組對(duì)所有項(xiàng)，將數(shù)組元素計(jì)算為一個(gè)值從右到左

Array的原型方法 isArray()

Array.isArray(value)
檢測(cè)value是否是數(shù)組

join()

arr.join(separator)
將數(shù)組用separator分隔，并返回分割后的字符串

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

reverse()

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

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)
按升序排序數(shù)組項(xiàng)
排序時(shí)，會(huì)調(diào)用每個(gè)數(shù)組項(xiàng)的toString()方法，比較得到的字符串，以確定如何排序；
即使數(shù)組中每一項(xiàng)都是數(shù)值，比較的也是字符串；
傳入比較函數(shù)，可以解決此問題

push()

arr.push()
接受任意數(shù)量的參數(shù)，并逐個(gè)添加到數(shù)組末尾，返回修改后數(shù)組的長(zhǎng)度；
push()與pop()方法組成棧方法LIFO(Last-In-First-Out)；
push()與shift()方法組成隊(duì)列方法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()
移除數(shù)組最后一項(xiàng)，并返回該項(xiàng)，length值減一。

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

shift()

arr.shift()
移除數(shù)組第一項(xiàng)，并返回該項(xiàng)，并返回該項(xiàng)，length值減一。

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

unshift()

arr.unshift()
在數(shù)組前端添加任意個(gè)項(xiàng)，并返回新數(shù)組的長(zhǎng)度。

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)
先創(chuàng)建當(dāng)前數(shù)組的一個(gè)副本，然后將接收到的參數(shù)添加到這個(gè)副本的末尾，最后返回新構(gòu)建的數(shù)組。
可以用來復(fù)制數(shù)組：不給concat()傳遞參數(shù)的情況下，只是復(fù)制當(dāng)前數(shù)組并返回該副本。

var colors = ["red","green", "blue"];
var newColors = colors.concat("yellow", ["pink", "black"]);
var newColors2 = colors.concat(); // 復(fù)制當(dāng)前數(shù)組
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)

基于當(dāng)前數(shù)組中一個(gè)或多個(gè)項(xiàng)創(chuàng)建一個(gè)新數(shù)組。

slice()方法可以接受一或兩個(gè)參數(shù)，即要返回項(xiàng)的起始和結(jié)束位置。

0個(gè)參數(shù)：復(fù)制當(dāng)前數(shù)組并返回該副本；
1個(gè)參數(shù)：從該參數(shù)指定位置開始到當(dāng)前數(shù)組末尾的所有項(xiàng)；
2個(gè)參數(shù)：返回起始和結(jié)束位置之間的項(xiàng)[start, end),不包含結(jié)束位置的項(xiàng)；

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)


參數(shù)說明


startIndex:必需。整數(shù)，規(guī)定添加/刪除項(xiàng)目的位置，使用負(fù)數(shù)可從數(shù)組結(jié)尾處規(guī)定位置。

count:必需。要?jiǎng)h除的項(xiàng)數(shù)。如果設(shè)置為 0，則不會(huì)刪除項(xiàng)目。

item1, ..., itemX:可選。向數(shù)組添加的新項(xiàng)目。



返回值：
始終返回一個(gè)數(shù)組,該數(shù)組中包含從原始數(shù)組中刪除的項(xiàng)（若沒有刪除任何項(xiàng)，則返回一個(gè)空數(shù)組）

功能	描述	舉例
刪除	刪除任意數(shù)量的項(xiàng),只需指定2個(gè)參數(shù)；要?jiǎng)h除的第一項(xiàng)的位置、要?jiǎng)h除的項(xiàng)數(shù)；	splice(1, 2)
插入	向指定位置插入多個(gè)項(xiàng)，只需提供3個(gè)參數(shù)；起始位置，0（要?jiǎng)h除的項(xiàng)數(shù)）、要插入的項(xiàng)；	splice(1, 0, "yellow", "purple")
替換	向指定位置插入任意數(shù)量的項(xiàng)，且同時(shí)刪除任意數(shù)量的項(xiàng)；起始位置、要?jiǎng)h除的項(xiàng)數(shù)、要插入的任意數(shù)量的項(xiàng)	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個(gè)迭代方法均為ECMAScript新增。

forEach()

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

對(duì)數(shù)組中的每一項(xiàng)運(yùn)行給定函數(shù)；
沒有返回值；

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))

對(duì)數(shù)組中對(duì)每一項(xiàng)運(yùn)行給定函數(shù)；
返回每次函數(shù)調(diào)用對(duì)結(jié)果組成對(duì)數(shù)組；

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))

對(duì)數(shù)組中對(duì)每一項(xiàng)運(yùn)行給定函數(shù)；
返回該函數(shù)會(huì)返回true的項(xiàng)組成對(duì)數(shù)組；

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))

對(duì)數(shù)組中對(duì)每一項(xiàng)運(yùn)行給定函數(shù)；
如果該函數(shù)對(duì)每一項(xiàng)都返回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))

對(duì)數(shù)組中對(duì)每一項(xiàng)運(yùn)行給定函數(shù)；
如果該函數(shù)對(duì)人意項(xiàng)返回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))


參數(shù)：

prev: 必需，初始值, 或者計(jì)算結(jié)束后的返回值。第一次迭代時(shí)為數(shù)組對(duì)第一項(xiàng)；
cur : 必需，當(dāng)前迭代的元素；
index: 可選，當(dāng)前元素對(duì)索引；
array: 可選，當(dāng)前元素所屬的數(shù)組對(duì)象；


迭代數(shù)組對(duì)所有項(xiàng)，將數(shù)組元素計(jì)算為一個(gè)值（從左到右????）

function(prev, cur, index, array)這個(gè)函數(shù)每次返回的任何值會(huì)作為第一個(gè)參數(shù)自動(dòng)傳給下一項(xiàng)；

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)
// 可見第一次迭代發(fā)生在數(shù)組對(duì)第2項(xiàng)上，第一個(gè)參數(shù)是數(shù)組對(duì)第1項(xiàng)，第二個(gè)參數(shù)為第二項(xiàng)
// 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()功能相似，從數(shù)組對(duì)最后一項(xiàng)開始，向前遍歷到第一項(xiàng)；

參數(shù)：
prev: 必需，初始值, 或者計(jì)算結(jié)束后的返回值。第一次迭代時(shí)為數(shù)組對(duì)最后一項(xiàng)；

迭代數(shù)組對(duì)所有項(xiàng)，將數(shù)組元素計(jì)算為一個(gè)值（從右到左????）

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