博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
数组遍历 map()、forEach() 及 字符串切割 split() / 字符串截取 slice()、substring()、substr()...
阅读量:6067 次
发布时间:2019-06-20

本文共 3117 字,大约阅读时间需要 10 分钟。

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

.

转载于:https://www.cnblogs.com/crazycode2/p/8109940.html

你可能感兴趣的文章
本地连接linux虚拟机的方法
查看>>
某公司面试java试题之【二】,看看吧,说不定就是你将要做的题
查看>>
BABOK - 企业分析(Enterprise Analysis)概要
查看>>
Linux 配置vnc,开启linux远程桌面
查看>>
NLog文章系列——如何优化日志性能
查看>>
Hadoop安装测试简单记录
查看>>
CentOS6.4关闭触控板
查看>>
ThreadPoolExecutor线程池运行机制分析-线程复用原理
查看>>
React Native 极光推送填坑(ios)
查看>>
Terratest:一个用于自动化基础设施测试的开源Go库
查看>>
修改Windows远程终端默认端口,让服务器更安全
查看>>
扩展器必须,SAS 2.0未必(SAS挺进中端存储系统之三)
查看>>
Eclipse遇到Initializing Java Tooling解决办法
查看>>
while((ch = getchar()) != '\n')
查看>>
好程序员web前端分享JS检查浏览器类型和版本
查看>>
Linux 安装oracle内核参数
查看>>
Oracle DG 逻辑Standby数据同步性能优化
查看>>
exchange 2010 队列删除
查看>>
android实用测试方法之Monkey与MonkeyRunner
查看>>
「翻译」逐步替换Sass
查看>>