JavaScript中forEach,for-in,for-of循环的用法

JavaScript诞生已经有20多年了,我们一直使用的用来循环一个数组的方法是这样的:

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

自从JavaScript5起,我们开始可以使用内置的forEach方法:

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

写法简单了许多,但也有短处:你不能中断循环(使用break语句或使用return语句。

JavaScript里还有一种循环方法:for–in。

for-in循环实际是为循环”enumerable“对象而设计的:

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 (var index in myArray) {    // 不推荐这样
  console.log(myArray[index]);
}

不推荐用for-in来循环一个数组,因为,不像对象,数组的index跟普通的对象属性不一样,是重要的数值序列指标。

总之,for–in是用来循环带有字符串key的对象的方法。

for-of循环

JavaScript6里引入了一种新的循环方法,它就是for-of循环,它既比传统的for循环简洁,同时弥补了forEach和for-in循环的短板。

我们看一下它的for-of的语法:

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

for-of的语法看起来跟for-in很相似,但它的功能却丰富的多,它能循环很多东西。

for-of循环使用例子:

循环一个数组(Array):
let iterable = [10, 20, 30];

for (let value of iterable) {
  console.log(value);
}
// 10
// 20
// 30
我们可以使用const来替代let,这样它就变成了在循环里的不可修改的静态变量。

let iterable = [10, 20, 30];

for (const value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

循环一个字符串:

let iterable = "boo";

for (let value of iterable) {
  console.log(value);
}
// "b"
// "o"
// "o"
循环一个类型化的数组(TypedArray):
let iterable = new Uint8Array([0x00, 0xff]);

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 collection

循环一个DOM collections,比如NodeList,之前我们讨论过如何循环一个NodeList,现在方便了,可以直接使用for-of循环:

// Note: This will only work in platforms that have
// implemented NodeList.prototype[Symbol.iterator]
let articleParagraphs = document.querySelectorAll("article > p");

for (let paragraph of articleParagraphs) {
  paragraph.classList.add("read");
}

循环一个拥有enumerable属性的对象

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

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

循环一个生成器(generators)
我们可循环一个生成器(generators):

function* fibonacci() { // a generator function
  let [prev, curr] = [0, 1];
  while (true) {
    [prev, curr] = [curr, prev + curr];
    yield curr;
  }
}

for (let n of fibonacci()) {
  console.log(n);
  // truncate the sequence at 1000
  if (n >= 1000) {
    break;
  }
}

时间: 2024-10-26 20:38:10

JavaScript中forEach,for-in,for-of循环的用法的相关文章

javascript中FOREACH数组方法使用示例_基础知识

Array.prototype.forEach()方法让数组的每一项都执行一次给定的函数. - MDN 假设有这么一个场景,你拿到了这么一个数组 [   { symbol: "XFX", price: 240.22, volume: 23432 },   { symbol: "TNZ", price: 332.19, volume: 234 },   { symbol: "JXJ", price: 120.22, volume: 5323 },

javascript中的遍历for in 以及with的用法_基础知识

for in  循环执行一个对象中的属性 with语句: (对象操作语句)                   功能:为一段程序建立默认对象         格式: 复制代码 代码如下:           with(<对象>){               <语句组>            } 具体示例: 复制代码 代码如下: <script type="text/javascript"> function member(name,gender){

javascript 中break 强制限while,for循环实现方法

break 语句 中断当前循环,或和 label 一起使用,中断相关联的语句. break [label]; 可选的 label 参数指定断点处语句的标签. 说明 通常在 switch 语句和 while.for.for...in.或 do...while 循环中使用 break 语句. 最一般的是在 switch 语句中使用 label 参数,但它可在任何语句中使用,无论是简单语句还是复合语句. 执行 break 语句会退出当前循环或语句,并开始脚本执行紧接着的语句 for循环中应用break

javascript中split和整数字符串互转的用法。。。

javascript|字符串 <script >function evil(){ var toint=parseInt("123"); var intvalue=123; var tostr=intvalue.toString(); var my_friends ="trixie,moxie,sven,guido,hermes";var friend_array =my_friends.split(",");for (loop=0;

javascript中setTimeout和setInterval的unref()和ref()用法示例_javascript技巧

unref()和ref()用法非常的简单,就是取消和回复setTimeout和setInterval函數的調用的. 代码如下: 复制代码 代码如下:  var testFunction=function(){      console.log("guoyansi");  }  var timer=setInterval(testFunction,1000);  timer.unref();//取消setTimeout和setInterval函數的調用  timer.ref();//恢復

JavaScript中对循环语句的优化技巧深入探讨_javascript技巧

循环是所有编程语言中最为重要的机制之一,几乎任何拥有实际意义的计算机程序(排序.查询等)都里不开循环. 而循环也正是程序优化中非常让人头疼的一环,我们往往需要不断去优化程序的复杂度,却因循环而纠结在时间复杂度和空间复杂度之间的抉择. 在 javascript 中,有3种原生循环,for () {}, while () {}和do {} while (),其中最为常用的要数for () {}. 然而for正是 javascript 工程师们在优化程序时最容易忽略的一种循环. 我们先来回顾一下for

javascript中call,apply,bind的用法对比分析

 这篇文章主要给大家对比分析了javascript中call,apply,bind三个函数的用法,非常的详细,这里推荐给小伙伴们.     关于call,apply,bind这三个函数的用法,是学习javascript这门语言无法越过的知识点.下边我就来好好总结一下它们三者各自的用法,及常见的应用场景. 首先看call这个函数,可以理解成"借用","请求".想像一下如下的情景:你孤单一人漂泊在外,有急事想往家里打电话,可是很不巧,手机欠费了,或者没电了,或者掉坑里了

JavaScript中的function使用方法

JavaScript入门易,可深究起来,竟搞得我如此混乱,这恐怕就是弱类型语言的特点吧?写惯了C++,还真是不适应.近日在google上搜来搜去,学习了半天function.this和prototype,这就总结一下,但愿能把它们理清楚.这是第一篇,关于JavaScript中的function. 参考了一些文章,我认为JavaScript中的function可以有以下两种用法:一是做"普通逻辑代码容器",也就是我们通常意义上的函数.方法,和我们C/C++里的函数没什么大分别,只是写法稍

javascript中for循环有几种不同的使用情况介绍

 for循环是多数语言都有的.在javascript中,for循环有几种不同的使用情况,下面为大家一一介绍下 程序实现中经常要用到循环语句,其中for循环是多数语言都有的.在javascript中,for循环有几种不同的使用情况,下面就分别来讲述我的理解.    第一种:(通常情况,循环执行相关操作)   代码如下: var objA=document.getElementsByTagName("a");  var i,max;  for(i=0,max=objA.length;i&l