數組遍歷 map()、forEach() 及 字符串切割 split() / 字符串截取 slice()、substring()、substr()


JS數組遍歷的幾種方式

JS數組遍歷,基本就是for,forin,foreach,forof,map等等一些方法,以下介紹幾種本文分析用到的數組遍歷方式以及進行性能分析對比

第一種:普通for循環

代碼如下:

for(j = 0; j < arr.length; j++) {
   
} 

簡要說明:
最簡單的一種,也是使用頻率最高的一種,雖然性能不弱,但仍有優化空間

第二種:優化版for循環

代碼如下:

for(j = 0,len=arr.length; j < len; j++) {
   
}

簡要說明:
使用臨時變量,將長度緩存起來,避免重復獲取數組長度,當數組較大時優化效果才會比較明顯。

這種方法基本上是所有循環遍歷方法中性能最高的一種

第三種:弱化版for循環

代碼如下:

for(j = 0; arr[j]!=null; j++) {
   
}

簡要說明:
這種方法其實嚴格上也屬於for循環,只不過是沒有使用length判斷,而使用變量本身判斷

實際上,這種方法的性能要遠遠小於普通for循環

第四種:foreach循環

代碼如下:

var arr = ['a','b','c','d','e','f'];
arr.forEach(function(value,index,array) {
  console.log(value + '=' + array[index]); // a=a b=b c=c d=d e=e f=f
});

簡要說明:
數組自帶的foreach循環,使用頻率較高,實際上性能比普通for循環弱

第五種:foreach變種

代碼如下:

var arr = ['a','b','c','d','e','f'];
Array.prototype.forEach.call(arr,function(value,index,array){ 
    console.log(value + '=' + array[index]); // a=a b=b c=c d=d e=e f=f
});

簡要說明:
由於foreach是Array型自帶的,對於一些非這種類型的,無法直接使用(如NodeList),所以才有了這個變種,使用這個變種可以讓類似的數組擁有foreach功能。

實際性能要比普通foreach弱

第六種:forin循環

代碼如下:

var arr = ['a','b','c','d','e','f'];
for(j in arr) {
   console.log(j); // 0 1 2 3 4 5
}

簡要說明:
這個循環很多人愛用,但實際上,經分析測試,在眾多的循環遍歷方式中

它的效率是最低的

第七種:map遍歷

代碼如下:

var arr = ['a','b','c','d','e','f'];
arr.map(function(value,index,array) {
  console.log(value + '=' + array[index]); // a=a b=b c=c d=d e=e f=f
});

簡要說明:
這種方式也是用的比較廣泛的,雖然用起來比較優雅,但實際效率還比不上foreach

第八種:forof遍歷(需要ES6支持)

代碼如下:

var arr = ['a','b','c','d','e','f'];
for(let value of arr) { 
    console.log(value); // a b c d e f
};

簡要說明:
這種方式是es6里面用到的,性能要好於forin,但仍然比不上普通for循環

各種遍歷方式的性能對比

for in 循環最慢。優化后的普通for循環最快

注:jquery 的 $.each(arr,function(index,value){}) 和 $.map(arr,function(index,value){})  的第二個參數和第一個參數是反過來的

例如:

// each處理一維數組
var arr1 = [ "aaa", "bbb", "ccc" ];      
$.each(arr1, function(i,val){      
  alert(i);   
  alert(val);
});
// 處理json數據,例如ajax的返回值     
var obj = { one:1, two:2, three:3};      
 $.each(obj, function(key, val) {      
  alert(key); 
  alert(val); 
});

$.map() 與 $.each() 的區別
注:$.map()有返回值,可以return 出來,$.each()沒有返回值。

例如:

// $.map(arr,fn);
// 對數組中的每個元素調用fn函數逐個進行處理,fn函數將處理返回最后得到的一個新的數組
var arr = [9, 8, 7, 6, 5, 4, 3, 2, 1];
var newarr = $.map(arr, function (item,index,array) { return item * 2 });
alert(newarr);
// $.each(array,fn)對數組array每個元素調用fn函數進行處理,沒有返回值
var arr = [9, 8, 7, 6, 5, 4, 3, 2, 1];
$.each(arr, function (key, value) { alert("key:" + key + "value:" + value); });
// 還可以省略function的參數,這個時候this可以得到遍歷的當前元素的值
var arr = [9, 8, 7, 6, 5, 4, 3, 2, 1];
$.each(arr, function () { alert(this); });

  

JS字符串切割的方式

第一種:split()

說明:

使用一個指定的分隔符把一個字符串分割存儲到數組

實例:

var str = 'a,b,c,d,e,fg';
console.log(str.split(",")); // ["a", "b", "c", "d", "e", "fg"]

 

JS字符串截取的幾種方式

第一種:slice()

說明:

第一個參數代表開始位置,第二個參數代表結束位置的下一個位置,截取出來的字符串的長度為第二個參數與第一個參數之間的差;若參數值為負數,則將該值加上字符串長度后轉為正值;若第一個參數等於大於第二個參數,則返回空字符串.

實例:

var str = 'abcdefg';
console.log(str.slice(1,3)); // bc

第二種:substring()

說明:

第一個參數代表開始位置,第二個參數代表結束位置的下一個位置;若參數值為負數,則將該值轉為0;兩個參數中,取較小值作為開始位置,截取出來的字符串的長度為較大值與較小值之間的差.

實例:

var str = 'abcdefg';
console.log(str.substring(1,3)); // bc

第三種:substr()

說明:

第一個參數代表開始位置,第二個參數代表截取的長度

實例:

var str = 'abcdefg';
console.log(str.substr(1,3)); // bcd

.


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM