轉載請註明預見才能遇見的博客：http://my.csdn.net/
原文地址：https://blog.csdn.net/pcaxb/article/details/101779805
JavaScript原生系列-Array數組方法總結
目錄
2.push 在數組末尾添加一個或多個元素，返回修改後數組長度
4.unshift 在數組頭部添加一個或多個元素，返回修改後數組長度
5.sort 對數組元素排序，返回排序後的數組，默認排序順序是根據字符串Unicode編碼
7.splice 刪除或插入元素，返回數組刪除的項，沒有刪除的項，返回空數組
2.join 將數組所有元素連接成一個字符串，返回連接後的字符串
4.indexOf 獲取查詢元素第一次出現的索引，找不到查詢元素，則返回-1
5.lastIndexOf 獲取查詢元素最後一次出現的索引，找不到查詢元素，則返回-1
6. toString 返回有數組每個元素的字符串形式拼接而成的以逗號分隔的字符串
1.every()，數組所有元素都滿足要求則返回true，否則返回false
2.reduceRight()，從數組最後一項開始遍歷到第一項
2.普通for優化,這種方法基本上是所有循環遍歷方法中性能最高的一種
3.弱化版for循環,這種方法的性能要遠遠小於普通for循環
一、會改變原數組
1.pop 移除數組末尾最後一項，返回移除項
var arr1 = [1,2,3,4];
L(arr1.pop(),arr1);//[1, 2, 3]
L([].pop());//undefined
2.push 在數組末尾添加一個或多個元素，返回修改後數組長度
var arr2 = [1,2,3,4];
L(arr2.push(5,6),arr2);//6 [1, 2, 3, 4, 5, 6]
//Array.prototype.push.apply 第一個參數類數組，第二個參數類數組，合併兩個數組，賦值給第一個數組
L(Array.prototype.push.apply(arr2,[7,8]),arr2);//8 [1, 2, 3, 4, 5, 6, 7, 8]
3.shift 移除數組第一項，返回移除的元素
var arr3 = [1,2,3,4];
L(arr3.shift(),arr3);//1 [2, 3, 4]
L(Array.prototype.shift.apply(arr3),arr3);//2 [3, 4]
//自定義shift
Array.prototype.shift = function () {
var temp = this[0];
for (var i = 1; i < this.length; i++) {
this[i-1] = this[i];
}
this.length--;
return temp;
}
L(arr3.shift(),arr3);
4.unshift 在數組頭部添加一個或多個元素，返回修改後數組長度
var arr4 = [1,2,3,4];
L(arr4.unshift(0,0,0),arr4);// 7 [0, 0, 0, 1, 2, 3, 4]
L(Array.prototype.unshift.apply(arr4,[1,1,1]),arr4);//10 [1, 1, 1, 0, 0, 0, 1, 2, 3, 4]
5.sort 對數組元素排序，返回排序後的數組，默認排序順序是根據字符串Unicode編碼
var fruit = ['cherries', 'apples', 'bananas'];
L(fruit.sort());//["apples", "bananas", "cherries"]
//注意10在2之前,因爲在 Unicode 指針順序中"10"在"2"之前
var scores = [1, 10, 21, 2]; // [1, 10, 2, 21]
L(scores.sort());
// 在Unicode中, 數字在大寫字母之前,大寫字母在小寫字母之前.
var things = ['word', 'Word', '1 Word', '2 Words'];
L(things.sort());//["1 Word", "2 Words", "Word", "word"]
//自定義排序
function compare(a, b) {
if(a < b) {
return -1;
}else if(a > b) {
return 1;
}else {
return 0;
}
}
var arr11 = [1, 10, 21, 2];
L(arr11.sort(compare)); //[1, 2, 10, 21]
L("=====================================")
L(arr11.sort( function(a,b){return a-b} ))//a-b升序 [1, 2, 10, 21]
L(arr11.sort( function(a,b){return b-a} ))//b-a降序 [21, 10, 2, 1]
L("=====================================")
6.reverse 顛倒數組元素，返回顛倒後的數組
var arr6 = [1,32,8,2,10,3,48,41];
L(arr6.reverse(),arr6);
//[41, 48, 3, 10, 2, 8, 32, 1][41, 48, 3, 10, 2, 8, 32, 1]
7.splice 刪除或插入元素，返回數組刪除的項，沒有刪除的項，返回空數組
var arr7 = [1,32,8,2,10,3,48,41];
//刪除，前閉後開，第一個參數是開始位置，第二個參數是結束位置
L(arr7.splice(0,2),arr7);// [1, 32] [8, 2, 10, 3, 48, 41]
arr7 = [8, 2, 10, 3, 48, 41]
//插入， 第一個參數是插入的位置，第二個參數是插入刪除幾個元素，第三個參數是插入內容
// L(arr7.splice(0,0,"cc"),arr7); //[] ["cc", 8, 2, 10, 3, 48, 41]
// L(arr7.splice(0,2,"cc"),arr7);//[8, 2] ["cc", 10, 3, 48, 41]
L(arr7.splice(3,2,"cc"),arr7);//[3, 48] [8, 2, 10, "cc", 41]
//替換
arr7 = [8, 2, 10, 3, 48, 41]
L(arr7.splice(3,1,"cc"),arr7);//[3] [8, 2, 10, "cc", 48, 41]
二、不會改變原數組
1.concat 合併兩個或多個數組，返回新數組
var arr01 = [1,2,3],arr02 = [4,5,6],arr03;
arr03 = arr01.concat(arr02);
L(arr01,arr02,arr03);
// (3) [1, 2, 3] (3) [4, 5, 6] (6) [1, 2, 3, 4, 5, 6]
2.join 將數組所有元素連接成一個字符串，返回連接後的字符串
var arr04 = [1, 2, 3, 4, 5, 6];
L(arr04.join("-"),arr04);//1-2-3-4-5-6 [1, 2, 3, 4, 5, 6]
L(arr04.join("-").split("-"));//1-2-3-4-5-6到["1", "2", "3", "4", "5", "6"]
//split是字符串的函數
3.slice 截取數組元素到新數組中，返回新數組
var arr05 = [1, 2, 3, 4, 5, 6];
//從1開始截取後面所有元素
L(arr05.slice(1),arr05);
//[2, 3, 4, 5, 6] [1, 2, 3, 4, 5, 6]
arr05 = [1, 2, 3, 4, 5, 6];
//第一個參數開始位置，第二個參數結束位置
L(arr05.slice(1,3),arr05);// [2, 3] [1, 2, 3, 4, 5, 6]
//截取原數組倒數第三個元素與倒數第一個元素之間的元素，前閉後開
arr05 = [1, 2, 3, 4, 5, 6];
L(arr05.slice(-3,-1),arr05);//[4,5]
4.indexOf 獲取查詢元素第一次出現的索引，找不到查詢元素，則返回-1
arr06 = [1, 2, 3, 4, 5, 6];
L(arr06.indexOf(3),arr06.indexOf(-3));//2 -1
5.lastIndexOf 獲取查詢元素最後一次出現的索引，找不到查詢元素，則返回-1
arr06 = [1, 2, 3, 4, 5, 6,3,2];
L(arr06.lastIndexOf(3),arr06.lastIndexOf(-3));//6 -1
6. toString 返回有數組每個元素的字符串形式拼接而成的以逗號分隔的字符串
arr06 = [1, 2, 3, 4, 5, 6, 3, 2];
L(arr06.toString());//1,2,3,4,5,6,3,2
三，迭代方法
每個方法接受含有三個參數的函數，三個參數爲：數組中的項，元素索引，數組本身
1.every()，數組所有元素都滿足要求則返回true，否則返回false
var number = [1,2,3,4,5,6,7,8];
var res = number.every(function(item, index, array) {
// L(item,index,array);
return (item > 0);
})
L(res); //每個都返回true就是true
2.some()，只要有滿足要求的就返回true
var res = number.some(function(item, index, array) {
return (item > 2);
})
L(res); //true
3.filter()，返回過濾後的結果數組
var res = number.filter(function(item, index, array) {
return (item > 2);
})
L(res); //[3, 4, 5, 6, 7, 8]
4.map()，返回在函數中處理過的數組
var res = number.map(function(item, index, array) {
return (item * 2);
})
L(res); //[2, 4, 6, 8, 10, 12, 14, 16]
5.forEach()，遍歷整個數組
var res = number.forEach(function(item, index, array) {
//執行某些操作
if(item > 6) L(item,index,array);
})
四，歸併方法
1.reduce()，從數組第一項開始遍歷到最後
開始執行回調函數prev爲1，cur爲2，第二次執行回調函數，在之前的基礎上加1函數返回的值都會作爲一個參數傳給下一項，最後執行函數時就是28+8
var number4 = [1,2,3,4,5,6,7,8];
var res4 = number.reduce(function(prev, cur, index, array) {
// L(prev,cur,index,array);
return prev + cur;
})
L(res4); //1+2+3+4+5+6+7+8=36
2.reduceRight()，從數組最後一項開始遍歷到第一項
var res5 = number.reduceRight(function(prev, cur, index, array) {
L(prev,cur,index,array);
return prev + cur;
})
L(res5); //8+7+6+5+4+3+2+1=36
五、JS數組遍歷的幾種方式性能比較
var array = [2,4,6,8];
1.普通for
for (let index = 0; index < array.length; index++) {
const element = array[index];
L(array[index])
}
2.普通for優化,這種方法基本上是所有循環遍歷方法中性能最高的一種
for (let index = 0,len = array.length; index < len; index++) {
const element = array[index];
L(array[index])
}
3.弱化版for循環,這種方法的性能要遠遠小於普通for循環
簡要說明: 這種方法其實嚴格上也屬於for循環，只不過是沒有使用length判斷，而使用變量本身判斷
for(let j = 0; array[j] != null; j++) {
L(j,array[j])
}
L("====",array[10],array[10] != null,array[10] === undefined,array[10] == null)//false true true
4.foreach循環
簡要說明: 數組自帶的foreach循環，使用頻率較高，實際上性能比普通for循環弱。不能正確響應break、continue和return語句
array.forEach(function(item,index){
L(item,index);
});
5.foreach變種
簡要說明: 遍歷類數組類型,實際性能要比普通foreach弱
var likenessArray = {"0":"a","1":"b","2":"c",length:3};;
Array.prototype.forEach.call(likenessArray,function(item,index){
L(item,index);
})
6.forin循環
簡要說明: 實際測試中，它的效率是最低的。forin是爲遍歷對象設計的。
for(var index in array){
L(array[index],index);
}
7.map遍歷
簡要說明: 雖然用起來比較優雅，但實際效率還比不上foreach
array.map(function(item,index){
L(item,index);
})
8.forof遍歷(需要ES6支持)
簡要說明: 這種方式是es6裏面用到的，性能要好於forin，但仍然比不上普通for循環。用來遍歷各種類數組集合
for(let item of array){
L(item);
}
javascript原生遍歷方法的建議用法：
- 用for循環遍歷數組，效率最高，如果要好看建議使用forEach，因爲forEach比map效率高。
- 用for-in遍歷對象
- 用for-of遍歷類數組對象（ES6）
- 用Object.keys()獲取對象屬性名的集合
參考資料：JS幾種數組遍歷方式總結
數組資料 Array
數組遍歷JS幾種數組遍歷方式總結
JavaScript原生系列-Array數組方法總結