for( leti = 0;i < str.length ;i++){

console.log(i) // 索引 字符串的下标

console.log(str[i]) // 字符串下标所对应的元素

}

// 遍历DOM 节点

letarticleParagraphs = document.querySelectorAll( '.article > p');

for( leti = 0;i console.log(i))

// logs 1

// logs 2

// logs 3

// 直接输出了数组的元素

//遍历对象

letprofile = {name: "April",nickname: "二十七刻",country: "China"};

letkeys = Object.keys(profile);

keys.forEach( i=> {

console.log(i) // 对象的键值

console.log(profile[i]) // 对象的键对应的值

})

2.3 map

我也是ES5版本发布的，我可以创建一个新数组，新数组的结果是原数组中的每个元素都调用一次提供的函数后的返回值。

letarr = [ 1, 2, 3, 4, 5];

letres = arr.map( i=> i * i);

console.log(res) // logs [1, 4, 9, 16, 25]

2.4 for...in枚举

我是ES5版本发布的。以任意顺序遍历一个对象的除Symbol以外的可枚举属性。

// 遍历对象

letprofile = {name: "April",nickname: "二十七刻",country: "China"};

for( leti inprofile){

letitem = profile[i];

console.log(item) // 对象的键值

console.log(i) // 对象的键对应的值

// 遍历数组

letarr = [ 'a', 'b', 'c'];

for( leti inarr){

letitem = arr[i];

console.log(item) // 数组下标所对应的元素

console.log(i) // 索引，数组下标

// 遍历字符串

letstr = "abcd"

for( leti instr){

letitem = str[i];

console.log(item) // 字符串下标所对应的元素

console.log(i) // 索引 字符串的下标

}

2.5 for...of迭代

我是ES6版本发布的。在可迭代对象（包括 Array，Map，Set，String，TypedArray，arguments 对象等等）上创建一个迭代循环，调用自定义迭代钩子，并为每个不同属性的值执行语句。

// 迭代数组数组

letarr = [ 'a', 'b', 'c'];

for( letitem ofarr){

console.log(item)

}

// logs 'a'

// logs 'b'

// logs 'c'

// 迭代字符串

letstr = "abc";

for( letvalue ofstr) {

console.log(value);

}

// logs 'a'

// logs 'b'

// logs 'c'

// 迭代map

letiterable = newMap([[ "a", 1], [ "b", 2], [ "c", 3]]

for( letentry ofiterable) {

console.log(entry);

}

// logs ["a", 1]

// logs ["b", 2]

// logs ["c", 3]

// 迭代map获取键值

for( let[key, value] ofiterable) {

console.log(key)

console.log(value);

}

// 迭代set

letiterable = newSet([ 1, 1, 2, 2, 3, 3, 4]);

for( letvalue ofiterable) {

console.log(value);

}

// logs 1

// logs 2

// logs 3

// logs 4

// 迭代 DOM 节点

letarticleParagraphs = document.querySelectorAll( '.article > p');

for( letparagraph ofarticleParagraphs) {

paragraph.classList.add( "paragraph");

// 给class名为“article”节点下的 p 标签添加一个名为“paragraph” class属性。

}

// 迭代arguments类数组对象

( function{

for( letargument ofarguments) {

console.log(argument);

}

})( 1, 2, 3);

// logs：

// 1

// 2

// 3

// 迭代类型数组

lettypeArr = newUint8Array([ 0x00, 0xff]);

for( letvalue oftypeArr) {

console.log(value);

}

// logs：

// 0

// 255

经过第一轮的自我介绍和技能展示后，我们了解到：

for语句是最原始的循环语句。定义一个变量i(数字类型，表示数组的下标),按照一定的条件，对i进行循环累加。条件通常为循环对象的长度，当超过长度就停止循环。因为对象无法判断长度，所以搭配Object.keys使用。

forEachES5 提出。自称是for语句的加强版，可以发现它比for语句在写法上简单了很多。但是本质上也是数组的循环。forEach每个数组元素执行一次 callback 函数。也就是调用它的数组，因此，不会改变原数组。返回值是undefine。

mapES5 提出。给原数组中的每个元素都按顺序调用一次 callback 函数。生成一个新数组，不修改调用它的原数组本身。返回值是新的数组。

for...inES5 提出。遍历对象上的可枚举属性，包括原型对象上的属性，且按任意顺序进行遍历，也就是顺序不固定。遍历数组时把数组的下标当作键值，此时的i是个字符串型的。它是为遍历对象属性而构建的，不建议与数组一起使用。

for...ofES6 提出。只遍历可迭代对象的数据。

for语句是最原始的循环语句。定义一个变量i(数字类型，表示数组的下标),按照一定的条件，对i进行循环累加。条件通常为循环对象的长度，当超过长度就停止循环。因为对象无法判断长度，所以搭配Object.keys使用。

forEachES5 提出。自称是for语句的加强版，可以发现它比for语句在写法上简单了很多。但是本质上也是数组的循环。forEach每个数组元素执行一次 callback 函数。也就是调用它的数组，因此，不会改变原数组。返回值是undefine。

mapES5 提出。给原数组中的每个元素都按顺序调用一次 callback 函数。生成一个新数组，不修改调用它的原数组本身。返回值是新的数组。

for...inES5 提出。遍历对象上的可枚举属性，包括原型对象上的属性，且按任意顺序进行遍历，也就是顺序不固定。遍历数组时把数组的下标当作键值，此时的i是个字符串型的。它是为遍历对象属性而构建的，不建议与数组一起使用。

for...ofES6 提出。只遍历可迭代对象的数据。

03

能力甄别

作为一个程序员，仅仅认识他们是远远不够的，在实际开发中鉴别他们各自的优缺点。

因地制宜的使用他们，扬长避短。从而提高程序的整体性能才是能力之所在。

关于跳出循环体，在循环中满足一定条件就跳出循环体，或者跳过不符合条件的数据继续循环其它数据。是经常会遇到的需求。常用的语句是 break与 continue。

简单地说一下二者的区别，大家就当复习好了：

break语句是跳出当前循环，并执行当前循环之后的语句；

continue语句是终止当前循环，并继续执行下一次循环;

break语句是跳出当前循环，并执行当前循环之后的语句；

continue语句是终止当前循环，并继续执行下一次循环;

注意： forEach与map是不支持跳出循环体的，其它三种方法均支持。

原理：查看 forEach实现原理，就会理解这个问题。

Array.prototype.forEach（ callbackfn[，thisArg]{

}

传入的function是这里的回调函数。在回调函数里面使用break肯定是非法的，因为break只能用于跳出循环，回调函数不是循环体。

在回调函数中使用return，只是将结果返回到上级函数，也就是这个for循环中，并没有结束for循环，所以return也是无效的。

map同理。

map链式调用。

map方法是可以链式调用的，这意味着它可以方便的结合其它方法一起使用。例如：reduce, sort, filter等。但是其它方法并不能做到这一点。forEach的返回值是undefined，所以无法链式调用。

// 将元素乘以本身，再进行求和。

letarr = [ 1, 2, 3, 4, 5];

letres1 = arr.map( item=> item * item).reduce( ( total, value) => total + value);

console.log(res1) // logs 55 undefined"

for...in会遍历出原型对象上的属性：

Object.prototype.objCustom = function{};

Array.prototype.arrCustom = function{};

vararr = [ 'a', 'b', 'c'];

arr.foo = 'hello

for (var i in arr) {

console.log(i);

}

// logs

// 0

// 1

// 2

// foo

// arrCustom

// objCustom

然而，在实际的开发中，我们并不需要原型对象上的属性。这种情况下我们可以使用hasOwnProperty方法，它会返回一个布尔值，指示对象自身属性中是否具有指定的属性（也就是，是否有指定的键），如下：

Object.prototype.objCustom = function{};

Array.prototype.arrCustom = function{};

vararr = [ 'a', 'b', 'c'];

arr.foo = 'hello

for (var i in arr) {

if (arr.hasOwnProperty(i)) {

console.log(i);

}

}

// logs

// 0

// 1

// 2

// foo

// 可见数组本身的属性还是无法摆脱。此时建议使用 forEach

对于纯对象的遍历，选择for..in枚举更方便；对于数组遍历，如果不需要知道索引for..of迭代更合适，因为还可以中断；如果需要知道索引，则forEach更合适；对于其他字符串，类数组，类型数组的迭代，for..of更占上风更胜一筹。但是注意低版本浏览器的是配性。

04

性能

有兴趣的读者可以找一组数据自行测试，文章就直接给出结果了，并做相应的解释。

for> for- of> forEach > map > for- in

for循环当然是最简单的，因为它没有任何额外的函数调用栈和上下文；

for...of只要具有Iterator接口的数据结构，都可以使用它迭代成员。它直接读取的是键值。

forEach，因为它其实比我们想象得要复杂一些，它实际上是array.forEach(function(currentValue, index, arr), thisValue)它不是普通的 for 循环的语法糖，还有诸多参数和上下文需要在执行的时候考虑进来，这里可能拖慢性能；

map最慢，因为它的返回值是一个等长的全新的数组，数组创建和赋值产生的性能开销很大。

for...in需要穷举对象的所有属性，包括自定义的添加的属性也能遍历到。且for...in的key是String类型，有转换过程，开销比较大。

for循环当然是最简单的，因为它没有任何额外的函数调用栈和上下文；

for...of只要具有Iterator接口的数据结构，都可以使用它迭代成员。它直接读取的是键值。

forEach，因为它其实比我们想象得要复杂一些，它实际上是array.forEach(function(currentValue, index, arr), thisValue)它不是普通的 for 循环的语法糖，还有诸多参数和上下文需要在执行的时候考虑进来，这里可能拖慢性能；

map最慢，因为它的返回值是一个等长的全新的数组，数组创建和赋值产生的性能开销很大。

for...in需要穷举对象的所有属性，包括自定义的添加的属性也能遍历到。且for...in的key是String类型，有转换过程，开销比较大。

05

总结

在实际开发中我们要结合语义话、可读性和程序性能，去选择究竟使用哪种方案。

总之，因地制宜，因时而变。千万不要因为过分追求性能，而忽略了语义和可读性。在您的统治下，它们5个只能是各自发挥长处，谁都别想称霸。

1.RISC-V嵌入式开发课程节选版上线！文末还有图书优惠哦！赶快抢！

2.RISC-V能成为八位MCU的选择吗？

3.对嵌入式工程师硬件转软件的几条建议！

4.浅谈智能嵌入式系统的优化设计

5.单片机AD采样常用的十大滤波算法~

6.物联网时代，嵌入式软件测试工具越来越重要~

免责声明：本文系网络转载，版权归原作者所有。如涉及作品版权问题，请与我们联系，我们将根据您提供的版权证明材料确认版权并支付稿酬或者删除内容。返回搜狐，查看更多