简单聊聊

循环也好，递归也罢，都是编程语句中最常见的操作。这二者通常来说在完成效果上没有什么太大区别；从性能角度来讲，一个处理欠佳的递归函数，会导致函数嵌套引用，从而出现内存溢出的错误，影响性能，因此如果没有掌握递归的精髓，还是尽可能用循环完成，否则得不偿失。但是如果循环中加入了异步操作，比如ajax, 或者reader.onload事件，同时，最终结果又依赖于所有异步操作返回的结果，此时就不得不使用递归操作了，否则，循环一趟迅速跑完，却只是发出了一堆异步请求，异步的回调并没有触发，或者个别触发，将会导致一个绝对不准确的最终结果。然而，写不好递归该如何是好？两个字，学呗！不过ES6带来了两个新的函数：Promise和生成器函数，分别用来处理异步和可挂起操作的函数，结合这两个新东西，递归就变得容易了。

实战介绍

最近自己写了一套图片预览的js插件，支持多图片预览，其中就涉及了reader.onload，这就必须用到递归方式了。于是顺带就用传统递归和Promise+生成器两种方式分别研究实现了一下，看过之后，就会发现，后者代码处理更易理解，参数处理更少。直接代码讲解：注：只截取了主要代码，其他变量声明，类声明省略，因此看到奇怪的变量，就当他是已经存在的。

普通递归：

//读取文件
readerImg() {//判断是否支持FileReaderif(window.FileReader) {//递归变量声明let reader = new FileReader(),len = this.files.length,i = 0;//递归调用this.loopHandleImg(reader, i, len);} else {this.div.innerHTML = "浏览器暂不支持预览!";};
},
//递归（需要传入reader,index标识和文件总数）
loopHandleImg(reader, i, len) {//判断是否已结束,显示图片if(i == len) {this.toResult();//最终显示所有图片的函数return;};let file = this.files[i],_this = this;//验证图片if(this.validate(file)) {this.img_files.push(file);reader.onload = function(pic) {//获取图片显示位置let img = document.createElement("img");//图片路径设置为读取的图片img.src = pic.target.result;_this.fragment.appendChild(img);i++;  //这个小动作不能忘//递归带着三个参数，逻辑要自己梳理清楚_this.loopHandleImg(reader, i, len);};reader.readAsDataURL(file);} else {//非图片处理this.no_pic++;i++;   //这里也不能忘这个小动作！//递归this.loopHandleImg(reader, i, len);};},

Promise加生成器递归

//读取文件
readerImg() {
let _this = this,//获取生成器函数的迭代器对象imgItr = this.getImg();//这里用立即函数处理第一步，还可以用其他方法。(function getImg(item, reader) {//判断是否有reader对象if(typeof reader === "undefined") {reader = new FileReader();}//利用生成器返回对象的done属性做终止判断if(!item.done) {item.value.then(pic => {//处理逻辑if(_this.validate(pic)) {reader.onload = function(pic) {let img = document.createElement("img");//图片路径设置为读取的图片img.src = pic.target.result;_this.fragment.appendChild(img);//next方法调用生成器递归getImg(imgItr.next(), reader);};reader.readAsDataURL(pic);_this.img_files.push(pic);} else {_this.no_pic++;//next调用生成器递归getImg(imgItr.next(), reader);}}).catch(err => alert(err)); //捕捉一切错误} else {_this.toResult();}})(imgItr.next())
},
//生成器函数，仅仅做Promise的生成工作
getImg: function*() {let _this = this;/*利用常用的for循环自动处理，代替普通递归中手动的索引增加以及显示的递归终止判断操作。*/for(let i = 0; i < _this.files.length; i++) {let temp = _this.files[i];yield new Promise((res, err) => {if(window.FileReader) {res(temp);} else {err("浏览器暂不支持预览!");};})}
},

实战总结

以上代码中的注释基本上也就是二者的区别，本质都是递归，只不过采用了不同的实现形式，P+生成的方式让我们可以省去很多手动要考虑的环节：

1. 利用生成器自身的暂挂起行为，可以方便的使用循环来处理文件，不必手动计数，也不必担心传统循环带来的异步影响；

2. 利用生成器对象done属性值，可以方便的进行递归终止操作，不必显示的写一堆判断语句，而且判断结果绝对不会出错（done为true时，就结束了，当然除非你的生成器函数内部写错了，但是即便如此只会影响最终结果，不会影响done的值。）；

3. 只需调用next方法传入生成器的下一个值，即可进行递归，不必手动传入index值或其他一大堆标识符值，而且绝不会出错（next方法永远只会获取下一个值，直到生成器方法结束，而与此同时，配合done属性值，就可以知道是否结束）；

4. 利用Promise处理异步，catch可以捕捉到其中的一切错误，包括运行时的一些错误，这就省去了在普通递归中（如果需要）书写错误处理语句的动作。

所以，把一切需要手动监控的变成自动的，甚至于原生的时候，代码出错的几率就会大大降低，同时处理逻辑也会变得简单。当然，关于Promise和生成器，还有更多强大的功能，还需继续研究和努力。

欢迎大家留言探讨！

工作累了吧，可以扫描二维码关注公众号，看看轻松的文章，放松一下。再忙，也该有自己的生活，一定要爱惜身体！