几种遍历方法中for执行最快,它没有任何额外的函数调用栈和上下文。但在实际开发中我们要结合语义话、可读性和程序性能,去选择究竟使用哪种方案。下面来看for , foreach , map , for...in, for...of五种方法现场battle。
for
foreach
map
for...in
for...of
自我介绍for
我是最早出现的一方遍历语句,在座的各位需称我一声爷爷。我能满足开发人员的绝大多数的需求。
// 遍历数组let arr = [1,2,3];for(let i = 0;i < arr.length;i++){console.log(i) // 索引,数组下标console.log(arr[i]) // 数组下标所对应的元素 }// 遍历对象let profile = {name:"April",nickname:"二十七刻",country:"China"};for(let i = 0, keys=Object.keys(profile); i < keys.length;i++){console.log(keys[i]) // 对象的键值console.log(profile[keys[i]]) // 对象的键对应的值 }// 遍历字符串let str = "abcdef";for(let i = 0;i < str.length ;i++){console.log(i) // 索引 字符串的下标console.log(str[i]) // 字符串下标所对应的元素 }// 遍历DOM 节点let articleParagraphs = document.querySelectorAll('.article > p');for(let i = 0;i articleParagraphs[i].classList.add("paragraph");// 给class名为“article”节点下的 p 标签添加一个名为“paragraph” class属性。 }
我是ES5版本发布的。按升序为数组中含有效值的每一项执行一次 callback 函数,那些已删除或者未初始化的项将被跳过(例如在稀疏数组上)。我是 for 循环的加强版。
// 遍历数组let arr = [1,2,3]; arr.forEach(i => console.log(i))// logs 1// logs 2// logs 3// 直接输出了数组的元素//遍历对象let profile = {name:"April",nickname:"二十七刻",country:"China"};let keys = Object.keys(profile); keys.forEach(i => {console.log(i) // 对象的键值console.log(profile[i]) // 对象的键对应的值 })
我也是ES5版本发布的,我可以创建一个新数组,新数组的结果是原数组中的每个元素都调用一次提供的函数后的返回值。
let arr = [1,2,3,4,5];let res = arr.map(i => i * i);console.log(res) // logs [1, 4, 9, 16, 25]
我是ES5版本发布的。以任意顺序遍历一个对象的除Symbol以外的可枚举属性。
搜索公众号程序员小乐回复关键字“offer”,获取算法面试题和答案。
// 遍历对象let profile = {name:"April",nickname:"二十七刻",country:"China"};for(let i in profile){let item = profile[i];console.log(item) // 对象的键值console.log(i) // 对象的键对应的值// 遍历数组let arr = ['a','b','c'];for(let i in arr){let item = arr[i];console.log(item) // 数组下标所对应的元素console.log(i) // 索引,数组下标// 遍历字符串let str = "abcd"for(let i in str){let item = str[i];console.log(item) // 字符串下标所对应的元素console.log(i) // 索引 字符串的下标 }
我是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'// 迭代maplet 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); }// 迭代setlet 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); }// logs:// 0// 255
经过第一轮的自我介绍和技能展示后,我们了解到:
for语句
i
Object.keys()
forEach
undefine
作为一个程序员,仅仅认识他们是远远不够的,在实际开发中鉴别他们各自的优缺点。因地制宜的使用他们,扬长避短。从而提高程序的整体性能才是能力之所在。
在循环中满足一定条件就跳出循环体,或者跳过不符合条件的数据继续循环其它数据。是经常会遇到的需求。常用的语句是break 与 continue。
break
continue
简单的说一下二者的区别,就当复习好了。
注意:forEach 与map 是不支持跳出循环体的,其它三种方法均支持。
原理 :查看forEach实现原理,就会理解这个问题。
Array.prototype.forEach(callbackfn [,thisArg]{ }
传入的function是这里的回调函数。在回调函数里面使用break肯定是非法的,因为break只能用于跳出循环,回调函数不是循环体。
搜索公众号程序员小乐回复关键字“Java”,获取Java面试题和答案。
在回调函数中使用return,只是将结果返回到上级函数,也就是这个for循环中,并没有结束for循环,所以return也是无效的。
map() 同理。
map()
map() 方法是可以链式调用的,这意味着它可以方便的结合其它方法一起使用。例如:reduce(), sort(), filter() 等。但是其它方法并不能做到这一点。forEach()的返回值是undefined,所以无法链式调用。
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"
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() 方法,它会返回一个布尔值,指示对象自身属性中是否具有指定的属性(也就是,是否有指定的键)。如下:
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..in
for..of
有兴趣的读者可以找一组数据自行测试,文章就直接给出结果了,并做相应的解释。
for > for-of > forEach > map > for-in
array.forEach(function(currentValue, index, arr), thisValue)
String
在实际开发中我们要结合语义话、可读性和程序性能,去选择究竟使用哪种方案。
如果你需要将数组按照某种规则映射为另一个数组,就应该用 map。
如果你需要进行简单的遍历,用 forEach 或者 for of。
如果你需要对迭代器进行遍历,用 for of。
如果你需要过滤出符合条件的项,用 filterr。
如果你需要先按照规则映射为新数组,再根据条件过滤,那就用一个 map 加一个 filter。
总之,因地制宜,因时而变。千万不要因为过分追求性能,而忽略了语义和可读性。在您的统治之下,他们5个只能是各自发挥长处,谁都别想称霸。
点击上方"方志朋",选择"设为星标" 回复"666"获取新整理的面试文章 几种遍历方法中for执行最快,它没有任何额外的函数调用栈和上下文. ...
几种遍历方法中for执行最快,它没有任何额外的函数调用栈和上下文.但在实际开发中我们要结合语义话.可读性和程序性能,去选择究竟使用哪种方案.下面来看for , foreach , map , for. ...
几种遍历方法中for执行最快,它没有任何额外的函数调用栈和上下文.但在实际开发中我们要结合语义话.可读性和程序性能,去选择究竟使用哪种方案.下面来看for, foreach, map, for...i ...
点击上方 好好学java ,选择 星标 公众号 重磅资讯.干货,第一时间送达 今日推荐:干掉 Navicat:这个 IDEA 的兄弟真香!个人原创100W+访问量博客:点击前往,查看更多 请 听 题 ...
大家可以回忆一下,之前我们学习过的循环结构.也就是for循环结构,今后我们还将学习另一种循环结构while结构,这里先不细讲.当初我们学习for循环结构的时候,有心的同学或许会发现,我们的for结构一 ...
C语言的流程控制:顺序.循环.分支.循环结构:while循环.for循环和do while循环. 6.1再探while循环 status = scanf("%ld",&nu ...
再写循环队列 class MyCircularQueue {public:/** Initialize your data structure here. Set the size of the qu ...
通过代码创建一个文件a.txt 然后写一个方法,控制台循环输入内容,然后通过gbk的编码格式保存到 a.txt中(要求可以追加),直到输入exit结束 再写一个方法,要求用字符缓冲流读取a.txt中的 ...
欢迎关注方志朋的博客,回复"666"获面试宝典 来源:juejin.cn/post/6844904038383747086 答应我,别再写上千行的类了好吗 最近在对已有项目进行扩展 ...