数组遍历 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

.