如果再写for循环,我就。。。
全栈开发者社区
共 5768字,需浏览 12分钟
· 2022-03-16
点击上方[全栈开发者社区]→右上角[...]→[设为星标⭐
点击领取全栈资料:全栈资料
for
执行最快,它没有任何额外的函数调用栈和上下文。但在实际开发中我们要结合语义话、可读性和程序性能,去选择究竟使用哪种方案。下面来看for
, foreach
, map
,for...in
, for...of
五种方法现场battle。自我介绍
// 遍历数组
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;iarticleParagraphs[i].classList.add("paragraph");
// 给class名为“article”节点下的 p 标签添加一个名为“paragraph” class属性。
}
forEach
// 遍历数组
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]) // 对象的键对应的值
})
map
let arr = [1,2,3,4,5];
let res = arr.map(i => i * i);
console.log(res) // logs [1, 4, 9, 16, 25]
for...in枚举
// 遍历对象
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) // 索引 字符串的下标
}
for...of迭代
// 迭代数组数组
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);
}
// logs:
// 0
// 255
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]{
}
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-in
for
循环当然是最简单的,因为它没有任何额外的函数调用栈和上下文;for...of
只要具有Iterator接口的数据结构,都可以使用它迭代成员。它直接读取的是键值。forEach
,因为它其实比我们想象得要复杂一些,它实际上是array.forEach(function(currentValue, index, arr), thisValue)
它不是普通的 for 循环的语法糖,还有诸多参数和上下文需要在执行的时候考虑进来,这里可能拖慢性能;map()
最慢,因为它的返回值是一个等长的全新的数组,数组创建和赋值产生的性能开销很大。for...in
需要穷举对象的所有属性,包括自定义的添加的属性也能遍历到。且for...in
的key是String
类型,有转换过程,开销比较大。
总结
觉得本文对你有帮助?请分享给更多人
关注「全栈开发者社区」加星标,提升全栈技能
本公众号会不定期给大家发福利,包括送书、学习资源等,敬请期待吧!
如果感觉推送内容不错,不妨右下角点个在看转发朋友圈或收藏,感谢支持。
好文章,留言、点赞、在看和分享一条龙
评论
老爸嘲讽我了,写破代码一年就挣十几万,他在工地带50个工人,一个月光人头费就3万,让我滚回去跟他干!
点击上方 "大数据肌肉猿"关注, 星标一起成长点击下方链接,进入高质量学习交流群今日更新| 1052个转型案例分享-大数据交流群来自:网络,侵删有个网友的父亲是做工程的,天天就嘲笑他,说他天天写着破代码有啥用,一年就拿个十多万的死工资,然后告诉他自己在工地里面带了50个工人,一个月能抽三万
程序源代码
0
我发现 Lombok的几个骚操作,哈哈好用
大家好,我是小富~前言本文不讨论对错,只讲骚操作。有的方法看看就好,知道可以这么用,但是否应用到实际开发中,那就仁者见仁,智者见智了。一万个读者就会有一万个哈姆雷特,希望这篇文章能够给您带来一些思考。耐心看完,你一定会有所收获。@onX例如 onConstructor, oMet
程序员内点事
0
聊一聊我最常关注的9个计算机视觉、自动驾驶、AI方向高质量圈子
随着计算机视觉(2D/3D)、SLAM、自动驾驶、AI技术的快速迭代更新,可落地的技术也成为人们争先学习的重点。这使得从业者对于最前沿技术的获取能力变得至关重要。微信公众号便是一个非常有效的前沿信息分享平台。这里给大家推荐9个最常打开的计算机视觉、自动驾驶、SLAM、机器学习和AI方向的优质公众号平
机器学习初学者
0
我发现这款浏览器真不错
“软件分享”只分享好玩有趣的黑科技软件很多人都知道我的电脑安装了10款浏览器,每一款浏览器都有自己的分工,国内外的浏览器基本都用过,今天我又发现了一款浏览器。下载用了一下午感觉还很符合国内用户使用,这款浏览器叫CentBrowser(百分浏览器)。可以说是谷歌浏览器增强版吧。Cent Browser
一锅汤软件
2
35K*14 薪入职了,这公司只要不裁员,我能一直呆下去。。
大家好,我是R哥。说说最近的面试辅导,有个学员进了某个知名互联网公司,拿到了 35K*14 薪的好成绩,有不少粉丝留言问我,现在行情这么差,他是怎么做到的?这篇拿他这个案例完整回顾一下吧,我管他叫小Y吧。背景沟通说下小Y的基本情况吧:小Y工作 5 年+,空窗期2个月+,5 年干了 3 家单位,学历不
Java技术栈
0
我用这10招,能减少了80%的BUG
将Python客栈设为“星标⭐”第一时间收到最新资讯前言对于大部分程序员来说,主要的工作时间是在开发和修复BUG。有可能修改了一个BUG,会导致几个新BUG的产生,不断循环。那么,有没有办法能够减少BUG,保证代码质量,提升工作效率?答案是肯定的。如果能做到,我们多出来的时间,多摸点鱼,做点自己喜欢
Python客栈
0
请问哪位大佬有空?我自己搞不定pycharm安装调试了?
点击上方“Python共享之家”,进行关注回复“资源”即可获赠Python学习资料今日鸡汤残云归太华,疏雨过中条。大家好,我是Python进阶者。一、前言前几天在Python最强王者交流群【斌】问了一个Python环境安装的问题,请问哪位大佬有空?我自己搞不定pycharm安装调试了。二、实现过程这
IT共享之家
0
周鸿祎:雷军说小米SU7不适合我,等小米做SUV时再推荐
360公司创始人周鸿祎在互联网30周年座谈会上向雷军提出想要体验小米SU7的请求,但被雷军婉拒。雷军给出的理由是,他仔细研究了周鸿祎的选车标准,发现周鸿祎不会开车,只坐后座,而小米SU7是为追求驾驶乐趣的用户设计的,因此不适合周鸿祎。雷军还表示,等到小米推出SUV版本时,再推荐给周鸿祎。目前已知明确
Python涨薪研究所
0