JS數(shù)組遍歷的幾種方式

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

第一種:普通for循環(huán)

代碼如下:

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

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

第二種:優(yōu)化版for循環(huán)

代碼如下:

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

簡要說明:
使用臨時變量，將長度緩存起來，避免重復(fù)獲取數(shù)組長度，當(dāng)數(shù)組較大時優(yōu)化效果才會比較明顯。

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

第三種:弱化版for循環(huán)

代碼如下:

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

簡要說明:
這種方法其實(shí)嚴(yán)格上也屬于for循環(huán)，只不過是沒有使用length判斷，而使用變量本身判斷

實(shí)際上，這種方法的性能要遠(yuǎn)遠(yuǎn)小于普通for循環(huán)

第四種:foreach循環(huán)

代碼如下:

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

簡要說明:
數(shù)組自帶的foreach循環(huán)，使用頻率較高，實(shí)際上性能比普通for循環(huán)弱

第五種: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)，所以才有了這個變種，使用這個變種可以讓類似的數(shù)組擁有foreach功能。

實(shí)際性能要比普通foreach弱

第六種:forin循環(huán)

代碼如下:

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

簡要說明:
這個循環(huán)很多人愛用，但實(shí)際上，經(jīng)分析測試，在眾多的循環(huán)遍歷方式中

它的效率是最低的

第七種: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 });

簡要說明:
這種方式也是用的比較廣泛的，雖然用起來比較優(yōu)雅，但實(shí)際效率還比不上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循環(huán)

各種遍歷方式的性能對比

for in 循環(huán)最慢。優(yōu)化后的普通for循環(huán)最快

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

例如：

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

$.map() 與 $.each() 的區(qū)別
注：$.map()有返回值，可以return 出來，$.each()沒有返回值。

例如：

// $.map(arr,fn); // 對數(shù)組中的每個元素調(diào)用fn函數(shù)逐個進(jìn)行處理，fn函數(shù)將處理返回最后得到的一個新的數(shù)組 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)對數(shù)組array每個元素調(diào)用fn函數(shù)進(jìn)行處理，沒有返回值 var arr = [9, 8, 7, 6, 5, 4, 3, 2, 1]; $.each(arr, function (key, value) { alert("key:" + key + "value:" + value); }); // 還可以省略function的參數(shù)，這個時候this可以得到遍歷的當(dāng)前元素的值 var arr = [9, 8, 7, 6, 5, 4, 3, 2, 1]; $.each(arr, function () { alert(this); });

　　

JS字符串切割的方式

第一種:split()

說明：

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

實(shí)例：

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

?

JS字符串截取的幾種方式

第一種:slice()

說明：

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

實(shí)例：

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

第二種:substring()

說明：

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

實(shí)例：

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

第三種:substr()

說明：

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

實(shí)例：

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

.

轉(zhuǎn)載于:https://www.cnblogs.com/crazycode2/p/8109940.html

總結(jié)

以上是生活随笔為你收集整理的数组遍历 map()、forEach() 及 字符串切割 split() / 字符串截取 slice()、substring()、substr()...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。