如何在js代码中消灭for循环实例详解

前言

这篇文章基于我在公司内部分享会整理而成。欢迎探讨补充。

补充一：看来很多人没看完文章就评论了。我在文章末尾说了，是不写 for 循环，不是不用 for 循环。简单陈述不写 for 循环的理由：for 循环易读性差，而且鼓励写指令式代码和执行副作用。更多参考这篇文章

补充二：回应大家的一些反对意见。本来准备专门写文章回应的，但是没时间，就简短回复，直接扔链接了。

1、for 循环性能最好。回应：微观层面的代码性能优化，不是你应该关注的。我在文章中演示了，对百万级数据的操作，reduce 只比 for 循环慢 8 ms，可忽略不计。如果你要操作更大的数据，要考虑下换语言了。

2、不用 for 循环不能 break。回应：用递归。我在这篇文章里有解释怎样解决递归爆栈。

3、框架都用 for 循环！回应：框架考虑的场景和你不一样。React 和 Vue 还用 class 来创建对象呢。你该跟着学吗？事实上你应该用工厂函数。Class vs Factory function: exploring the way forward

一，用好 filter，map，和其它 ES6 新增的高阶遍历函数

问题一：

将数组中的空值去除

const arrContainsEmptyVal = [3, 4, 5, 2, 3, undefined, null, 0, ""];

答案：

const compact = arr => arr.filter(Boolean);

问题二：

将数组中的 VIP 用户余额加 10

const VIPUsers = [ { username: "Kelly", isVIP: true, balance: 20 }, { username: "Tom", isVIP: false, balance: 19 }, { username: "Stephanie", isVIP: true, balance: 30 }];

答案：

VIPUsers.map( user => (user.isVIP ? { ...user, balance: user.balance + 10 } : user));

问题三：

判断字符串中是否含有元音字母

const randomStr = "hdjrwqpi";

答案：

const isVowel = char => ["a", "e", "o", "i", "u"].includes(char);const containsVowel = str => [...str].some(isVowel); containsVowel(randomStr);

问题四：

判断用户是否全部是成年人

const users = [ { name: "Jim", age: 23 }, { name: "Lily", age: 17 }, { name: "Will", age: 25 }];

答案：

users.every(user => user.age >= 18);

问题五：

找出上面用户中的未成年人

答案：

const findTeen = users => users.find(user => user.age < 18);findTeen(users);

问题六：

将数组中重复项清除

const dupArr = [1, 2, 3, 3, 3, 3, 6, 7];