[Effective JavaScript 笔记]第50条:迭代方法优于循环
myzbx 2025-07-03 18:16 22 浏览
"懒"程序员才是好程序员。复制和粘贴样板代码,一但代码有错误,或代码功能修改,那么程序在修改的时候,程序员需要找到所有相同功能的代码一处处进行修改。这会使人重复发明轮子,而且在别人看代码的时候无法在更高层次都看待问题的解决方案。太容易陷入细节。
for循环
js中的for循环在进行一些细微变化时,可以引入不同的行为。编程的时候对于边界条件的判断往往会导致一些简单的错误。下面的一些for循环的细微变化导致边界条件的变化。
for(var i=0;i<=n;i++){...}
//包括最后的迭代
for(var i=1;i< n;i++){...}
//忽略第一次迭代
for(var i=n;i>=0;i--){...}
//包括第一次迭代
for(var i=n-1;i > 0;i++){...}
//忽略最后的迭代
在这里都是对终止条件的一个设置。这里可以有很多的方式,可以使终止条件发生错误。js的闭包是一种为这些模式建立迭代抽象方便的、富有表现力的手法,可以避免重复代码。
ES5中数组方法
其中ES5中提供的数组方法就包含很多。比如
Array.prototype.forEach
比如下面这段对数组的循环。
for(var i=0,n=players.length;i< n;i++){
players[i].score++;
}
使用数组的迭代方法,可以改写为
players.forEach(function(p){
p.score++;
});
上面的代码把循环的方式进行抽象,把要执行的具体代码通过函数传递闭包,完成对数组元素的操作及访问。这里消除了终止条件和任何数组索引。
Array.prototype.map
完成对数组的每个元素进行一些操作后建立一个新的数组。
使用循环
var trimmed=;
for(var i=0,n=input.length;i< n;i++){
trimmed.push(input[i].trim);
}
使用forEach
var trimmed=;
input.forEach(function(s){
trimmed.push(s.trim);
});
使用map
var trimmed=input.map(function(s){
return s.trim;
});
Array.prototype.filter
计算一个数组建立一个新数组,该数组只包含有数组的一些元素filter方法需要一个谓词函数,如果元素应该存在于新数组中则返回真值,如果元素应该被剔除则返回假值。例如,可以从价格表中提取出一个特定价格区间的列表。
listings.filter(function(listing){
return listing.price>=min&&listing.price<=max;
});
以上的forEach,map,filter三个方法都是ES5中,数组的默认方法。下面实现一个自己的迭代抽象。例:提取出满足谓词函数的数组的前几个元素,直到不满足的元素终止,不管后面是否有元素满足条件。
function takeWhile(a,pred){
var res=;
for(var i=0,n=a.length;i < n;i++){
if(!pred(a[i],i)){
break;
}
res[i]=a[i];
}
return res;
}
var prefix=takeWhile([1,2,3,4,26,18,9],function(n){
return n<10;
});
prefix;//[1, 2, 3, 4]
上面pred函数有两个参数,而下面的回调我们只传入了一个参数。对第二个参数没有进行处理,这里是无所谓的。
猴子补丁
把takeWhile函数添加到Array.prototype中使其成为一个方法。
Array.prototype.takeWhile=function(pred){
var res=;
for(var i=0,n=this.length;i < n;i++){
if(!pred(this[i],i)){
break;
}
res[i]=this[i];
}
return res;
};
var prefix=[1,2,3,4,26,18,9].takeWhile(function(n){
return n<10;
});
prefix;//[1, 2, 3, 4]
循环控制流操作
只有一点循环优于迭代,循环可以控制流操作,如break和continue。例如,使用forEach方法来实现takeWhile函数
function takeWhile(a,pred){
var res=;
a.forEach(function(x,i){
if(!pred(x)){
//?
}
res[i]=x;
});
return res;
}
上面的代码怎么终止该循环的当次执行。
内部异常
function takeWhile(a,pred){
var res=;
var earlyExit={};
try{
a.forEach(function(x,i){
if(!pred(x)){
throw earlyExit;
}
res[i]=x;
});
}catch(e){
if(e!==earlyExit){
throw e;
}
}
return res;
}
这样的处理方法,把原本简单的处理变得更加复杂了,不可取。
some,every
有没更简单的方法呢。下面看一下数组提供的用于提前终止循环的方法。some和every。
some方法返回一个布尔值表示其回调对数组的任何一个元素是否返回一个真值。
本人理解:
所有元素,对于传入的函数的判断,有一真则为真。全为假才为假。
相当于所有元素执行函数后取或。
[1,10,100].some(function(x){return x>5;});//true
[1,10,100].some(function(x){return x<0;});//false
every方法返回一个布尔值表示其回调函数是否对所有元素返回一个真值。
本人理解:
所有元素,对于传入的函数的判断,有一假则为假。全为真才为真。
相当于所有元素执行函数后取且。
[1,10,100].every(function(x){return x>5;});//false
[1,10,100].every(function(x){return x>0;});//true
这两个方法都是短路循环。只要产生的结果可以决定最后结果后,就不再执行后面的循环。即some一旦产生一个真值,则立即返回。every一旦产生一个假值,也立即返回。利用它们的特点,改写takeWhile函数。
function takeWhile(a,pred){
var res=;
a.every(function(x,i){
if(!pred(x)){
return false;//break
}
res[i]=x;
return true;
});
return res;
}
提示
-
使用迭代方法替换for循环使得代码可读,并且避免了重复循环控制逻辑
-
使用自定义的迭代函数来抽象未被标准库支持的常见循环模式
-
在需要提前终止循环的情况下,仍然推荐使用传统的循环。另外,some和every方法也可用于提前退出
相关推荐
- 半导体行业术语缩写词典总结-JKL_半导体词汇缩写表
-
作为半导体行业新人来说,最痛苦的莫过于各种缩写词术语了,有的缩写词一样但是会有不同的解释。这里作者给大家整理了部分术语词典,后面会按照更新顺序一一分享出来。废话不多说,直接开始,如有遗漏,欢迎大家在评...
- JD.com Deepens Push Into Embodied Intelligence With Investment in Sensor Maker PaXiniTech
-
ToraOne,thesecond-generationmultidimensionaltactilehumanoidrobotdevelopedbyPaXiniTechTMTPOS...
- Hong Kong's Consumer Market Becomes New Battleground for Chinese Mainland Internet Giants
-
AI-generatedimageTMTPOST--StrollthroughthestreetsofHongKongtoday,anditmightfeellikey...
- http2解决了哪些问题_简述http2的优点
-
HTTP/2(最初称为SPDY)是HTTP协议的第二个主要版本,它在HTTP/1.1的基础上进行了重大改进,旨在解决其在性能和效率方面的诸多瓶颈。以下是HTTP/2主要解决的问题:队头阻...
- China's economy stays strong and vital amid pressure
-
Peoplevisitthe4thChina-CEECExpo&InternationalConsumerGoodsFairinNingbo,eastChina's...
- JD.com Makes $2.4 Billion Bid for Ceconomy in Bold Push to Build a Global Retail Empire
-
TMTPOST--JD.comhasunveiledplanstoacquireGermany’sCeconomyAG—theparentofEurope’sleading...
- 深入剖析 Java 中的装饰器设计模式:原理、应用与实践
-
在Java软件开发的广阔天地里,设计模式犹如璀璨星辰,照亮我们构建高效、可维护系统的道路。今天,让我们聚焦于其中一颗闪耀的星——装饰器设计模式,深入探究它的奥秘,看看如何利用它为我们的代码赋予...
- 组合模式应用-适配器模式_适配器组件
-
写在前面Hello,我是易元,这篇文章是我学习设计模式时的笔记和心得体会。如果其中有错误,欢迎大家留言指正!该部分为各模式组合使用,涉及代码较多,熟能生巧。内容回顾定义适配器模式是一种结构型设计模式,...
- OOM (Out Of Memory) 故障排查指南
-
1.确认OOM类型首先需要确认是哪种类型的OOM:JavaHeapOOM:Java堆内存不足NativeMemoryOOM:本地内存不足MetaspaceOOM:元空间内存不足Contai...
- 刷完这49题,面试官当场给Offer!Java程序员必备指南
-
1.问题:如果main方法被声明为private会怎样?答案:能正常编译,但运行的时候会提示”main方法不是public的”。2.问题:Java里的传引用和传值的区别是什么?答案:传引用是指传递的是...
- C#编程基础(看这一篇就够了)_c#编程入门与应用
-
C#及其开发环境简介C#概述C#是一个现代的、通用的、面向对象的编程语言,由微软(Microsoft)开发,经Ecma和ISO核准认可。它由AndersHejlsberg和他的团队在.NET框架开发...
- 说一下JDK的监控和 线上处理的一些case
-
一句话总结JDK监控常用工具包括JConsole、VisualVM、JMC等,用于实时查看内存、线程、GC状态。线上常见问题处理:内存泄漏通过heapdump分析对象引用链;频繁GC可调整-Xmx/...
- JavaScript深拷贝极简指南:3种方法解决嵌套与循环引用难题
-
为什么需要深拷贝?首先我们看看浅拷贝,point指向的是同一个地址,这时我们修改obj2.point的属性时,obj1的point属性也会被修改再看看深拷贝,point指向的是不同地址,这时我们修改o...
- Java 25 在 JEP 519 中集成了紧凑对象头
-
作者|ANMBazlurRahman译者|刘雅梦策划|丁晓昀Java25通过JEP519将紧凑对象头作为产品特性进行了集成,在不需要更改任何代码的情况下,为开发人员提供了...
- 每日一练 Python 面试题(1)_python每日一记
-
以下是5道Python基本语法相关的面试题,涵盖变量、运算符、数据结构、函数和异常处理等核心概念:1.变量与作用域题目:以下代码的输出是什么?解释原因。x=10deffunc():...
- 一周热门
- 最近发表
-
- 半导体行业术语缩写词典总结-JKL_半导体词汇缩写表
- JD.com Deepens Push Into Embodied Intelligence With Investment in Sensor Maker PaXiniTech
- Hong Kong's Consumer Market Becomes New Battleground for Chinese Mainland Internet Giants
- http2解决了哪些问题_简述http2的优点
- China's economy stays strong and vital amid pressure
- JD.com Makes $2.4 Billion Bid for Ceconomy in Bold Push to Build a Global Retail Empire
- 深入剖析 Java 中的装饰器设计模式:原理、应用与实践
- 组合模式应用-适配器模式_适配器组件
- OOM (Out Of Memory) 故障排查指南
- 刷完这49题,面试官当场给Offer!Java程序员必备指南
- 标签列表
-
- HTML 简介 (30)
- HTML 响应式设计 (31)
- HTML URL 编码 (32)
- HTML Web 服务器 (31)
- HTML 表单属性 (32)
- HTML 音频 (31)
- HTML5 支持 (33)
- HTML API (36)
- HTML 总结 (32)
- HTML 全局属性 (32)
- HTML 事件 (31)
- HTML 画布 (32)
- HTTP 方法 (30)
- 键盘快捷键 (30)
- CSS 语法 (35)
- CSS 轮廓宽度 (31)
- CSS 谷歌字体 (33)
- CSS 链接 (31)
- CSS 定位 (31)
- CSS 图片库 (32)
- CSS 图像精灵 (31)
- SVG 文本 (32)
- 时钟启动 (33)
- HTML 游戏 (34)
- JS Loop For (32)