数组遍历 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
.
转载于:https://www.cnblogs.com/crazycode2/p/8109940.html
数组遍历 map()、forEach() 及 字符串切割 split() / 字符串截取 slice()、substring()、substr()...相关推荐
- html函数参数数组遍历,JavaScript foreach遍历数组
JavaScript forEach遍历数组教程 JavaScript forEach详解 定义 forEach() 方法为每个数组元素调用一次函数(回调函数). 语法 array.forEach(f ...
- JS中数组和字符串具有的方法,以及substring,substr和slice的用法与区别
String 对象属性 属性 描述 constructor 对创建该对象的函数的引用 length 字符串的长度 prototype 允许您向对象添加属性和方法 String 对象方法 方法 描述 ...
- 【Java字符串分割[split()]和截取[substring()]】
最近写代码时遇到自字符串分割和截取的问题,在此总结一下. 字符串的分割: 一般自字符串的分割常用的方法是java.lang包中的String.split()方法,返回是一个字符串数组. 语法: pub ...
- 字符串使用split()方法截取时的空字符串问题
一.用例子来说明 1.单个分隔符占据第1个位置 @Test public void test() {String str = "_1";String[] s = str.split ...
- kernel 字符串切割,字符串转整型,整型转字符串
strsep(&data,","); //字符串切割函数 kstrtoint(first,10,&duty_cycle);//字符串转整形 10:十进制 sprin ...
- js字符串slice_JavaScript子字符串示例-JS中的Slice,Substr和Substring方法
js字符串slice In daily programming, we often need to work with strings. Fortunately, there are many bui ...
- js 字符串切割 split方法 遍历map方法
split: var str='123456';console.log(str.split(''))// 打印数据 ["1","2","3" ...
- html遍历map,forEach()方法遍历map()方法数组遍历
1.forEach()方法//以前遍历的方法 var arr = ['苹果','西瓜','香蕉','芒果']; for (var i=0;i console.log(arr[i]); } //forE ...
- javascript——数组、数组遍历、forEach、增加删除元素
数组(Array) 数组也是一个对象,它和普通对象的功能类似,也是用来存储数据的:不同的是普通对象是使用字符串作为属性名的,而数组是使用数字来作为索引操作元素的 对象中是用属性,数组中用索引 索引:数 ...
最新文章
- json解析:[1]gson解析json
- Python技术栈与Spark交叉数据分析双向整合技术实战--大数据ML样本集案例实战
- 【算法与数据结构】汉诺塔问题Java实现
- java8新特性简述
- SQLAlchemy 操作数据库
- 机器学习介绍jc01
- 深度学习----一文搞懂激活函数(Sigmoid/ReLU/LeakyReLU/PReLU/ELU)
- BZOJ 3689: 异或之
- 将数字转化成拥有X小数位的形式
- 转:HTTP ---HTTP头的编码问题(Content-Disposition)
- 电脑花屏是屏幕坏了吗_电脑开机屏幕花的是不是主板坏了
- b站主页面视频推荐油猴脚本(更新)
- WZOI.CC基础题库答案向导
- 手机QQ聊天记录文件解密方法学习
- Win10应用商店终于恢复访问了
- pynq 环境搭建_FPGA硬件加速的图像大小调整案例分析
- 断食、清肠 三日记录
- java.lang.IllegalStateException: Failed to introspect Class
- 从0开发游戏引擎之引擎Win32平台的Platform类实现
- 浏览器审查元素查找网页元素对应代码