资讯专栏INFORMATION COLUMN

js遍历之for forEach in of

yeyan1996 / 379人阅读

摘要:语法参数当前遍历项。遍历的范围在第一次调用前就会确定。已删除的项不会被遍历到。的是由提出的,目的是作为遍历所有数据结构的统一方法。不仅可以遍历数组,还可以遍历结构,某些类似数组的对象如对象对象,对象,以及字符串。

即使是最简单的循环,其中也深藏学问

ECMAScript5(es5)有三种for循环

简单for

for in

forEach

ECMAScript6(es6)新增

for of

简单for

for是循环的基础语法,也是最常用的循环结构。没有兼容性问题,效率上:for > forEach > map >for in

forEach

forEach由es5提出,属于数组的迭代方法

概述: 方法让数组的每一项都执行一次给定的函数。

语法: array.forEach(callback[currentValue,index,array,thisArg]);

参数:

currentValue:当前遍历项。

index:当前项目的下标

array:当前数组本身

thisArg:修改内部值的指向。

特点:

forEach 方法为数组中含有有效值的每一项执行一次 callback 函数,那些已删除(使用 delete 方法等情况)或者从未赋值的项将被跳过(不包括那些值为 undefined 或 null 的项)。
forEach 遍历的范围在第一次调用 callback 前就会确定。调用forEach 后添加到数组中的项不会被 callback 访问到。如果已经存在的值被改变,则传递给 callback 的值是 forEach 遍历到他们那一刻的值。已删除的项不会被遍历到。

优点:

foreach会跳过数组中的空位
相对简单for来说更语义化

缺点:

不能中断循环,也不支持 continue 和 break,只能通过 return 来控制循环,但是不能退出循环本身。

兼容性: 只支持IE9及以上
性能: forEach 的速度不如 for

for in

此循环有一个特殊的用途:可以枚举任何对象的命名属性。实际上它是为循环”enumerable“对象而设计的。

需要注意的是,for-in 循环遍历的是对象的属性,而不是数组的索引。由于对象的属性没有顺序,for in循环输出的输出的属性名也是不可预测的

性能:

由于每次迭代操作要搜索实例或原型属性, for-in 循环的每次迭代都会产生更多开销,因此执行速度比其他循环类型慢。在同样的循环迭代操作中,其它类型循环速度要比它快7倍之多。除非对数目不详的对象属性进行操作,否则我们不推荐使用for in 循环。

Array 的真相

Array 在 Javascript 中是一个对象, Array 的索引是属性名。事实上, Javascript 中的 “array” 有些误导性, Javascript 中的 Array 并不像大部分其他语言的数组。首先, Javascript 中的 Array 在内存上并不连续,其次, Array 的索引并不是指偏移量。实际上, Array 的索引也不是 Number 类型,而是 String 类型的。我们可以正确使用如 arr[0] 的写法的原因是语言可以自动将 Number 类型的 0 转换成 String 类型的 "0" 。所以,在 Javascript 中从来就没有 Array 的索引,而只有类似 "0" 、 "1" 等等的属性。有趣的是,每个 Array 对象都有一个 length 的属性,导致其表现地更像其他语言的数组。但为什么在遍历 Array 对象的时候没有输出 length 这一条属性呢?那是因为 for-in 只能遍历“可枚举的属性”, length 属于不可枚举属性,实际上, Array 对象还有许多其他不可枚举的属性。

es6的for of

for of是由es6提出的,目的是作为遍历所有数据结构的统一方法。

我们先来回顾一下此前js的遍历方法:

foreach是为便利数组而设计的,不能正确响应break、continue和return语句

for in被设计用来枚举对象的属性的,遍历对象的属性

for in用在数组上,除了遍历数组元素以外,还会遍历自定义属性,甚至原型链上的属性,另外,遍历顺序是随机的

那么for of 有什么不一样呢?

特点:

语法同for in一样简洁,但避开了for in的缺陷

能正确响应break、continue和return语句

跟for in不一样,数组的遍历器接口只返回具有数字索引的属性

for in读取的是对象的键名,for of读取的是键值

提供遍历所有数据结构的统一方法。for of不仅可以遍历数组,还可以遍历Set、Map结构,某些类似数组的对象(如:argument对象、DOM NodeList对象),Generator对象,以及字符串。

如:
let arr = ["a" ,"b", "c", "d"];
let itr = arr[Symbol.iterator];

arr.forEach(function(val, index, arr){
    console.log(val); // a b c d
    console.log(index); // 0 1 2 3
});

for(let i of itr){
    console.log(i);  // a b c d
}

for(let i of arr){
    console.log(i);  // a b c d
}

for(let i in arr){
    console.log(i);  // 0 1 2 3
}

只要具有Iterator接口的数据结构,都可以使用for of循环遍历它的成员。关于Iterator,如果还不清楚的可以先去了解一下,这里就不赘述了。这里需要注意一下,由于for of读取的是键值,如果想通过for of获取键名,可以借助数组实例的entries和keys方法。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/83742.html

相关文章

  • js中的常见的循环迭代:for loop, forEach, for...in... for...

    摘要:下面就总结下中常见的几种循环方法。因为循环将遍历对象本身的所有可枚举属性,以及对象从其构造函数原型中继承的属性。上也明确提示不应该用于迭代一个,其中索引顺序很重要。 引言 平时工作中循环的使用场景可以说是非常之多了,昨天改别人代码时候有位同事非常喜欢用ES6等新特性,一个数组的遍历全部都是用for...of...,然后业务需求要用到数组中的序号index值,就很尴尬了,我只能改回for...

    Leo_chen 评论0 收藏0
  • JavaScript30秒, 从入门到放弃Array(六)

    摘要:从数组索引为开始删除元素,直到对数组元素运用指定方法为为止。对两个数组的元素分别调用指定方法后,返回以运行结果为判定基准的并集,并集是原始数组元素的并集而不是运行结果的并集。 原文地址:JavaScript30秒, 从入门到放弃之Array(六)博客地址:JavaScript30秒, 从入门到放弃之Array(六) 水平有限,欢迎批评指正 tail Returns all elem...

    Freeman 评论0 收藏0
  • 给初学者:JavaScript 中数组操作注意点

    摘要:使用遍历数组有三点问题遍历顺序不固定引擎不保证对象的遍历顺序。作为原生函数,和自身操作字符串的速度是很快的。由于没有返回值返回,所以它的回调函数通常是包含副作用的,否则这个写了毫无意义。接受一个回调函数,你可以提前,相当于手写循环中的。 不要用 for_in 遍历数组 这是 JavaScript 初学者常见的误区。for_in 用于遍历对象中包括原型链上的所有可枚举的(enumerab...

    tianyu 评论0 收藏0
  • JS中 map, filter, some, every, forEach, for in, for

    摘要:有返回值,返回一个符合条件的元素数组返回一个,判断是否有元素符合条件,如果有一个元素符合条件,则循环会终止。返回一个遍历器对象,用来遍历键名键值组成的数组。这三个方法调用后生成的遍历器对象,所遍历的都是计算生成的数据结构。 1.map 有返回值,返回一个新的数组,每个元素为调用func的结果。 let list = [1, 2, 3, 4, 5]; let other = list.m...

    yankeys 评论0 收藏0
  • JavaScript 的 4 种数组遍历方法: for VS forEach() VS for/in

    摘要:对于,除非使用箭头函数,它的回调函数的将会变化。使用测试下面的代码,结果如下打印打印要点使用的规则要求所有回调函数必须使用箭头函数。 译者按: JS 骚操作。 原文:For vs forEach() vs for/in vs for/of in JavaScript 译者: Fundebug 本文采用意译,版权归原作者所有 我们有多种方法来遍历 JavaScript 的数组或者...

    joyqi 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<