专栏首页女程序员的日常_LinforEach、for...in 、 for...of

forEach、for...in 、 for...of

概述

1.forEach -不能中止循环

2.for...in - 可枚举属性

3.for...of - 除对象外的各种类型


for 、 forEach

for(var index=0; index<myArray.length; index++){
  console.log(myArray[index]);
}

JS5内置的forEach方法:

myArray.forEach(function(value){
  console.log(value)
})

写法简单了许多,但是有缺点:不能中断循环(使用break语句或使用return语句)。

for...in循环

语句以任意顺序遍历一个对象的除Symbol以外的可枚举属性。

for...in 循环只遍历可枚举属性(包括它的原型链上的可枚举属性)。像 ArrayObject使用内置构造函数所创建的对象都会继承自Object.prototypeString.prototype的不可枚举属性,例如 StringindexOf() 方法或 ObjecttoString()方法。循环将遍历对象本身的所有可枚举属性,以及对象从其构造函数原型中继承的属性(更接近原型链中对象的属性覆盖原型属性)。

  • 遍历对象及其原型上可枚举的属性
  • 如果用于遍历数组,处理遍历元素外,除了遍历开发者对数组对象自定义的枚举属性及其原型链上的可枚举属性
  • 遍历对象返回的属性名和遍历数组返回的索引都是string类型
  • 某些情况下可能按随机顺序遍历数组元素
var obj = {
  a:1,
  b:2,
  c:3
 }
 for(var prop in obj){
   console.log("obj."+ prop + "=" + obj[prop]);
 }
// 输出:
// "obj.a = 1"
// "obj.b = 2"
// "obj.c = 3"

循环数组

不应该是使用for...in来循环一个数组,其中索引顺序很重要。

数组索引只是具有整数名称的枚举属性,并且与通用对象属性相同。不能保证for ... in将以任何特定的顺序返回索引。for ... in循环语句将返回所有可枚举属性,包括非整数类型的名称和继承的那些。

因为迭代的顺序是依赖于执行环境的,所以数组遍历不一定按次序访问元素。因此当迭代访问顺序很重要的数组时,最好用整数索引去进行for循环(或者使用 Array.prototype.forEach()for...of 循环)。

for...in是用来循环带有字符串key的对象的方法。

for...of循环

for...of语句在可迭代对象(包括 ArrayMapSetStringTypedArray,arguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句

  • 支持遍历数组、类数组对象(DOM NodeList),字符串,Map对象,set对象
  • 不支持遍历普通对象
  • 遍历后输出的结果为数组元素的值
  • 可搭配实例方法entries(),同时输出数组的内容和索引

for...of循环比for循环简洁,同时弥补了forEach和for...in循环的短板。

for(var value of myArray){
  console.log(value)
}

循环一个数组:

let iterable = [10, 20, 30];
for(let value of iterable){
  console.log(value)
}
// 10
// 20 
// 30

循环一个字符串:

let iterable = "boo";
for(let value of iterable){
  console.log(value)
}
// "b"
// "o"
// "o"

循环一个类型化的数组

let iterable = new Unit8Array([0*00, 0*ff]);
for(let value of iterable){
  console.log(value);
}
// 0
// 255

循环一个Map

let iterable = new Map([['a',1],['b',2],["c",3]])
for(let [key, value] of iterable){
  console.log(value);
}
// 1 
// 2 
// 3 
for(let entry of iterable){
  console.log(entry)
}
// [a, 1]
// [b, 2]
// [c, 3]

循环一个Set

let iterable = new Set([1,1,2,2,3,3])
for(let value of iterable){
  console.log(value)
}
// 1
// 2
// 3

循环一个DOM结合

let articleParagraphs = document. queryselectorAll("article > p");
for(let paragraph of articleParagraphs){
  paragraph.classList.add("read")
}

迭代qrguments对象

(function() {
  for (let argument of arguments) {
    console.log(argument);
  }
})(1, 2, 3);

// 1
// 2
// 3

循环一个拥有可枚举属性的对象

for...of循环并不能直接使用在普通对象上,但如果按对象拥有的属性进行循环,可使用内置的Object.keys()方法:

for(var key of Objec.keys(someObject)){
  console.log(key + ":"+ someObject[key])
}

配合entries输出数组索引和值、对象的键值

var arr=['a', 'b', 'c'];
// Object.entries(arr)=>[ ["0", "a"],["1", "b"], ["2", "c"] ] 
for(ler [index,value] of Object.entries(arr)){
  console.log(index, ":", value)
  // 0:a , 1:b , 2:c
}
var obj = {name: 'june', age: 17, city: "广州"};
for(let [key,value] of Object.entries(obj)){
  console.log(key, ":", value)
  // name:june, age:17, city:广州
}

for...in和for...of的区别

无论是for...in还是for...of语句都是迭代一些东西。它们之间的主要区别在于它们的迭代方式。

for...in 语句以任意顺序迭代对象的可枚举属性。

for...of 语句遍历可迭代对象定义要迭代的数据。

参考:

  • https://juejin.im/post/5b2617e5f265da5954425022
  • https://www.html.cn/archives/9261
  • https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/for...in

当我们不再需要外在的认可来证明自己时

才能获得真正的自由

本文分享自微信公众号 - 女程序员的日常(gh_df41d619fb70),作者:凛

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-05-30

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一文彻底弄懂 for forEach for-in for-of 的区别

    在 JavaScript 中所有的数组都是对象,这意味着你可以给数组添加字符串属性:

    JS菌
  • javaScript循环总结(for,for-in,for-of,forEach,map,filter,every,reduce,reduceRight)

    循环是每个语言都必不可少的方法,javaScript也一样,随着javaScript的发展,我们用于循环的方法也在不断改进,也越来越精简,但是用好循环却不是那...

    用户2458785
  • JS遍历循环方法性能对比:for/while/for in/for of/map/foreach/every

    这周codeReview例会,又遇到map与foreach到底谁问题。单独图方便,我会选择用map一个函数搞定一切。但是从语义的角度来讲,如果只是单纯遍历,还是...

    周陆军
  • js --- for in 和 for of

    前言:for of是ES6新增的循环方法。前面已经说到了 【JavaScript】for、forEach 、for in、each循环详解。那for of又是怎...

    小蔚
  • for……in for……of 区别

    ES5的话也可以使用forEach,ES5具有遍历数组功能的还有map、filter、some、every、reduce、reduceRight等,只不过他们的...

    用户2323866
  • for of 和 for in 循环

    我曾经就是 for 走天下,最后发现自己给自己挖了一个巨大的坑,层层嵌套的循环,总要花大量的时间去捋清各种逻辑关系,很容易逻辑混乱。终于你经过千辛万苦把逻辑捋清...

    sunseekers
  • for of和for in的区别

    两个遍历方式的最终区别就在于:for in遍历的是数组的索引(即键名),而for of遍历的是数组元素值。

    OECOM
  • JavaScript中的iterable类型(Map,Set,Array三种)的遍历方法for in;for of;forEach的用法区别

    遍历Array可以采用下标循环,遍历Map和Set就无法使用下标。为了统一集合类型,ES6标准引入了新的iterable类型,Array、Map和Set都属于i...

    acoolgiser
  • for in

    大当家
  • Js篇-面试题11-比较下for..of与for..in的区别

    不同点: of 前面的item遍历的是数组arr的项,而in前面的item代表的事数组arr的属性,索引,属性,in 会遍历原型下的属性,不仅仅会遍历自身属性,...

    itclanCoder
  • for和foreach循环语句

    老雷PHP全栈开发
  • Workaround for Search for my account in MyAppointment

    版权声明:本文为博主汪子熙原创文章,未经博主允许不得转载。 https://jerry.bl...

    Jerry Wang
  • error for rrdtool in

    Command "python setup.py egg_info" failed with error code 1 in /tmp/pip-install-...

    py3study
  • 【NDN IoT】Caching in Named Data Networking for the Wireless Internet of Things

    Caching in Named Data Networking for the Wireless Internet of Things

    魏晓蕾
  • redis for lack of backlog

    版本: redis-3.2.9 部署: 5台64G内存的物理机,每台机器启动2个redis进程组成5主5备集群,每台机器1个主1个备,并且错开互备...

    一见
  • js遍历 for-of

    ydymz
  • WPF Trigger for IsSelected in a DataTemplate for ListBox items

    <DataTemplate DataType="{x:Type vm:HeaderSlugViewModel}"> <vw:HeaderSlug...

    hbbliyong
  • Java中的增强 for 循环 foreach

      foreach 是 Java 中的一种语法糖,几乎每一种语言都有一些这样的语法糖来方便程序员进行开发,编译期间以特定的字节码或特定的方式来对这些语法进行处理...

    IT可乐
  • Iterator 和 for...of 循环

    李才哥

扫码关注云+社区

领取腾讯云代金券