javascript中遍历数组有哪几种方式?

发布于 2022-08-29 17:01:34 字数 208 浏览 14 评论 0

面试被问到,那时候完全不知道...现在学会了几种
先抛个砖

var arr = [1,2,2,3,4,5,6];
for(var i = 0; i<arr.length;i++){
  console.log(arr[i]);
}

还有没有其他方式呢,最好利弊也介绍下

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

酒绊 2022-09-05 17:01:34

可以使用map方法,在codewars上很多人使用这个方法遍历数组,但是在w3cschool上查询手册时没有查到

var arr = [1,2,2,3,4,5,6];
arr.map(function(n){ console.log(n); });

现在知道map方法是怎么回事了,从javascript 6开始,javascript引入了map方法,目前仅有chrome和firefox支持,其他浏览器可以使用以下扩展来实现:

Array.prototype.map = function(fn) {
    var a = [];
    for ( var i = 0; i < this.length; i++) {
        var value = fn(this[i], i);
        if (value == null) {
            continue;
        }
        a.push(value);
    }
    return a;
};
空宴 2022-09-05 17:01:34

我知道的几种

  • for(var i=0;arr[i];i++){console.log(arr[i])}及其他for相关变形
  • i=arr.length;while(i--){console.log(arr[i])}及其他while相关变形
  • arr.forEach(function(v,k){console.log(v)})
  • for(var i in arr){console.log(arr[i])}
  • 稍微偏一点的map/filter/reduce等系列:
    • arr.map(function(v){console.log(v);return v})
    • arr.filter(function(v){console.log(v);return true})
    • arr.reduce(function(a,b){console.log(b);a.push(b);return a},[])

forwhile系列都差不多,简单有效。forEach在数据量大的时候会有效率问题,for(var i in arr)也是一样。偏一点的只是附带遍历效果,但是主要功能不是这个,所以肯定没有直接for效率高。

刚才在下面和 @StephenLee 讨论length问题的时候发现一个有趣的网站,可以拿来比较whilefor的效率问题:http://jsperf.com/caching-array-length/4

静谧幽蓝 2022-09-05 17:01:34

没人写迭代么?

  var arr = [1,2,2,3,4,5,6];

    var i = 0;
    function echo(){
        if(i < arr.length -1)
        {
            console.log(arr[i]);
            i++;
            echo();
        }
    }

    echo();
谜兔 2022-09-05 17:01:34

因为数组也是一种对象,所以还可以使用 for in 来遍历数组:

var arr = [1,2,2,3,4,5,6];
for(var i in arr)  console.log(arr[i]);

但是由于该方法遍历原型链上所有可枚举的属性,因此在执行时,会过一遍所有原型链上的属性以判断它的枚举值,所以效率表现不佳。
使用普通的 for 循环是最佳的遍历数组方法,但是最好能缓存数组长度,这样可以避免每次遍历时计算数组长度的开销。

var arr = [1,2,2,3,4,5,6];
for(var i = 0, l = arr.length; i < l; i ++)  console.log(arr[i]);
生生不灭 2022-09-05 17:01:34

js有五个迭代方法:

  1. every() 如果对函数中的每一项都返回true,则返回true
  2. some() 如果该函数中的任一项返回true,则返回true
  3. foreach() 对数据中的每一项运行给定函数,没有返回值
  4. map()对数据中的每一项运行给定函数,返回每次函数调用的结果组成的数组。
  5. filter() 对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组

下面是简单的例子:
var numbers = [1,2,6,8,5,4,3];
var everyResult = numbers.every(function(item,index,array){return item>9}) //返回false

var someResult = numbers.some(function(item,index,array){return item > 2}) //返回true

var mapResult = numbers.map(function(item,index,array){return item * 2}) //返回 [2, 4, 12, 16, 10, 8, 6]

var filterResult = numbers.filter(function(item,index,array){return (item>4)}) // 返回[6, 8, 5]

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文