zoukankan      html  css  js  c++  java
  • 数组遍历 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

    .

  • 相关阅读:
    ajax 传递参数中文乱码解决办法
    jQuery 时间戳转化成时间
    IDEA2017 导入 SVN上的 Myeclipse或Eclipse 项目
    ajax返回json数据,对其中日期的解析
    MYSQL 按照字母排序查询
    JVM介绍
    正则表达式
    could not find the main class错误
    转:MyEclipse使用总结——MyEclipse10安装SVN插件
    转:Oracle数据库sqlplus与plsqldev解决乱码
  • 原文地址:https://www.cnblogs.com/crazycode2/p/8109940.html
Copyright © 2011-2022 走看看