在几种遍历方法中,for运行得最快,没有添加函数调用栈和上下文。 但是,在实际的开发中,必须将语义化、可读性、程序性能结合起来,选择使用哪个方案。 让我们用五种方法来观察现场battle:for、foreach、map、for.in、for.of。
for语法
我是最早出现的一方的扫描语句,在这里的大家请叫我爷爷。 我能满足开发者的大部分需求。//遍历数组
letarr=[ 1,2,3 ];
for(Leti=0; I arr .长度; I ) {2}
console.log(I ) /索引、数组下标
与console.log(arr[I] ) /数组下标相对应的元素
}
//遍历对象
let简档={ name : ' April ',nickname: '二十七刻',国家: '中国';
for(Leti=0,keys=对象.密钥(轮廓); I键长度; I ) {2}
console.log(keys[I] )//对象的键值
console.log(profile[keys[I] ) /与对象的键对应的值
}
//遍历字符串
letstr='abcdef ';
for(Leti=0; I str .长度; I ) {2}
console.log(I ) /索引字符串的后缀
与console.log(str[I] ) /字符串下标相对应的元素
}
遍历//DOM节点
letarticleparagraphs=文档. Queryselectorall ('.articlep );
for(Leti=0; 细胞参数.长度; I ) {2}
article paragraphs [ I ] .类列表.添加(分区);
将名为paragraph的class属性添加到class的“article”节点下的p标签中。
}
forEach
我的ES5版本已经发布了。 对数组中具有有效值的每个项目按升序执行callback函数。 跳过已删除或未初始化的项目。 稀疏排列等。 我是for循环的强化版。//遍历数组
letarr=[ 1,2,3 ];
arr.foreach (I=控制台日志) I ) )
//logs 1
//logs 2
//logs 3
//直接输出了数组的要素
//遍历对象
let简档={ name : ' April ',nickname: '二十七刻',国家: '中国';
let keys=对象. keys (简档);
keys.Foreach(I={。
console.log(I ) /对象的键值
与console.log(profile[I] ) /对象的键对应的值
map
我也是用ES5版本发布的。 可以创建新数组。 新数组的结果是,原始数组的每个元素都是调用一次提供的函数后的返回值。letarr=[ 1,2,3,4,5 ];
letres=arr.map(I=I*I );
console.log(RES )/logs [ 1,4,9,16,25 ]
for...in枚举
我是ES5发行版。 按任意顺序遍历对象的非Symbol可枚举属性。//遍历对象
let简档={ name : ' April ',nickname: '二十七刻',国家: '中国';
适用于(letiinprofile ) {
letitem=轮廓;
console.log(item ) /对象的键值
与console.log(I ) /对象的键对应的值
//遍历数组
letarr=['a '、' b '、' c'] .
for (监听器) {
letitem=arr;
与console.log(item ) /数组下标对应的元素
console.log(I ) /索引、数组下标
//遍历字符串
letstr='abcd '。
for(Letiinstr ) {
letitem=str;
与console.log(item ) /字符串后缀对应的元素
控制台日志(I )//索引字
符串的下标 }for...of迭代
我是ES6版本发布的。在可迭代对象(包括 Array,Map,Set,String,TypedArray,arguments 对象等等)上创建一个迭代循环,调用自定义迭代钩子,并为每个不同属性的值执行语句。
// 迭代数组数组 let arr = ['a','b','c']; for(let item of arr){ console.log(item) } // logs 'a' // logs 'b' // logs 'c' // 迭代字符串 let str = "abc"; for (let value of str) { console.log(value); } // logs 'a' // logs 'b' // logs 'c' // 迭代map let iterable = new Map([["a", 1], ["b", 2], ["c", 3]] for (let entry of iterable) { console.log(entry); } // logs ["a", 1] // logs ["b", 2] // logs ["c", 3] // 迭代map获取键值 for (let [key, value] of iterable) { console.log(key) console.log(value); } // 迭代set let iterable = new Set([1, 1, 2, 2, 3, 3,4]); for (let value of iterable) { console.log(value); } // logs 1 // logs 2 // logs 3 // logs 4 // 迭代 DOM 节点 let articleParagraphs = document.querySelectorAll('.article > p'); for (let paragraph of articleParagraphs) { paragraph.classList.add("paragraph"); // 给class名为“article”节点下的 p 标签添加一个名为“paragraph” class属性。 } // 迭代arguments类数组对象 (function() { for (let argument of arguments) { console.log(argument); } })(1, 2, 3); // logs: // 1 // 2 // 3 // 迭代类型数组 let typeArr = new Uint8Array([0x00, 0xff]); for (let value of typeArr) { console.log(value); }经过第一轮的自我介绍和技能展示后,我们了解到:
for语句是最原始的循环语句。定义一个变量i(数字类型,表示数组的下标),按照一定的条件,对i进行循环累加。条件通常为循环对象的长度,当超过长度就停止循环。因为对象无法判断长度,所以搭配Object.keys()使用。forEach ES5 提出。自称是for语句的加强版,可以发现它比for语句在写法上简单了很多。但是本质上也是数组的循环。forEach每个数组元素执行一次 callback 函数。也就是调用它的数组,因此,不会改变原数组。返回值是undefine。map ES5 提出。给原数组中的每个元素都按顺序调用一次 callback 函数。生成一个新数组,不修改调用它的原数组本身。返回值是新的数组。for...in ES5 提出。遍历对象上的可枚举属性,包括原型对象上的属性,且按任意顺序进行遍历,也就是顺序不固定。遍历数组时把数组的下标当作键值,此时的i是个字符串型的。它是为遍历对象属性而构建的,不建议与数组一起使用。for...of ES6 提出。只遍历可迭代对象的数据。能力甄别
作为一个程序员,仅仅认识他们是远远不够的,在实际开发中鉴别他们各自的优缺点。因地制宜的使用他们,扬长避短。从而提高程序的整体性能才是能力之所在。
关于跳出循环体
在循环中满足一定条件就跳出循环体,或者跳过不符合条件的数据继续循环其它数据。是经常会遇到的需求。常用的语句是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,所以无法链式调用。
// 将元素乘以本身,再进行求和。 let arr = [1, 2, 3, 4, 5]; let res1 = 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() {}; var arr = ['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() {}; var arr = ['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更占上风更胜一筹。但是注意低版本浏览器的适配性。
性能
有兴趣的读者可以找一组数据自行测试,文章就直接给出结果了,并做相应的解释。
for > for-of > forEach > map > for-infor 循环当然是最简单的,因为它没有任何额外的函数调用栈和上下文;for...of只要具有Iterator接口的数据结构,都可以使用它迭代成员。它直接读取的是键值。forEach,因为它其实比我们想象得要复杂一些,它实际上是array.forEach(function(currentValue, index, arr), thisValue)它不是普通的 for 循环的语法糖,还有诸多参数和上下文需要在执行的时候考虑进来,这里可能拖慢性能;map() 最慢,因为它的返回值是一个等长的全新的数组,数组创建和赋值产生的性能开销很大。for...in需要穷举对象的所有属性,包括自定义的添加的属性也能遍历到。且for...in的key是String类型,有转换过程,开销比较大。总结
在实际开发中我们要结合语义化、可读性和程序性能,去选择究竟使用哪种方案?
如果你需要将数组按照某种规则映射为另一个数组,就应该用 map。如果你需要进行简单的遍历,用 forEach 或者 for of。如果你需要对迭代器进行遍历,用 for of。如果你需要过滤出符合条件的项,用 filterr。如果你需要先按照规则映射为新数组,再根据条件过滤,那就用一个 map 加一个 filter。总之,因地制宜,因时而变。千万不要因为过分追求性能,而忽略了语义和可读性。