专栏首页女程序员的日常_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 条评论
登录 后参与评论

相关文章

  • NodeJS中的require

    b.将X当做文件,依次查找下面文件,只要其中有一个存在,就返回该文件,不在继续执行。

    用户3258338
  • Vue SSR

    vue.js是构建客户端应用程序的框架,在默认情况下,在浏览器输出Vue组件,进行生成DOM和操作DOM。Vue SSR 就是实现将组件渲染为服务器端的HTML...

    用户3258338
  • vue源码解读(一)

    后两条是在第一条命令的基础上,添加了一些环境参数。最终都会执行scripts/build.js文件。我们一起看一下scripts/build:

    用户3258338
  • 关于JS中的循环

    for...of循环可以使用的范围包括数组、Set 和 Map 结构、某些类似数组的对象(比如arguments对象、DOM NodeList 对象)、后文的 ...

    mafeifan
  • 【最新】机器学习顶会 NIPS 2017 Pre-Proceedings 论文列表(附pdf下载链接)

    【导读】机器学习领域顶尖学术会议——神经信息处理系统进展大会(Advances in NeuralInformation Processing Systems,...

    WZEARW
  • Java 如何写好一个 for 循环!!!

    作者:李学凯 原文:https://blog.csdn.net/qq_27093465/article/details/90702740

    好好学java
  • 【小家java】剖析for、while、foreach、标签循环语句的控制( break,continue,return )

    java一共提供了3中循环语法:for循环(含增强for循环)、while循环、do…while循环。java8之后提供了基于stream的foreach循环,...

    YourBatman
  • javascript常用开发笔记:一个简单强大的js日期格式化方法

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 ...

    eguid
  • Oracle 12cR2初体验(r11笔记第91天)

    对于很多Oracle DBA来说,12c最期待人心的就是12c Release 2的发布了,而Linux64位版本的发布则是一个重头戏。详情可以关注公众号dba...

    jeanron100
  • 【Rust日报】2020-05-18 Castor, WASM, Rust嵌套循环

    这是一个用Rust调用GTK库编写的纯文本互联网协议集的图形客户端,目前支持的简单互联网协议包括:Gemini, Gopher和Finger.

    MikeLoveRust

扫码关注云+社区

领取腾讯云代金券