试过不用循环语句撸代码吗？

CoderDock 发布于2019-08-21 17:43 / 602人阅读

摘要：那么，这次我们不妨试试，在不使用循环语句的情况下，如何编程呢示例数组元素求和数组如下使用循环语句可知，我们需要通过修改变量，来计算结果。

译者按： 通过使用数组的reduce、filter以及map方法来避免循环语句。

原文: Coding Tip: Try to Code Without Loops

译者: Fundebug

为了保证可读性，本文采用意译而非直译。另外，本文版权归原作者所有，翻译仅用于学习。

在前一篇博客，我们介绍了，如果不使用if语句的话，如何解决一些简单的编程问题。那么，这次我们不妨试试，在不使用循环语句的情况下，如何编程呢？

示例1: 数组元素求和

数组如下:

const arrayOfNumbers = [17, -4, 3.2, 8.9, -1.3, 0, Math.PI];

使用循环语句

let sum = 0;

arrayOfNumbers.forEach((number) => {
  sum += number;
});

console.log(sum);

可知，我们需要通过修改sum变量，来计算结果。

不用循环语句

使用reduce方法时，就可以避免使用循环语句了：

const sum = arrayOfNumbers.reduce((acc, number) =>
  acc + number
);

console.log(sum);

实现递归，同样可以避免使用循环语句：

const sum = ([number, ...rest]) => {
  if (rest.length === 0) { 
    return number;
  }
  return number + sum(rest);
};

console.log(sum(arrayOfNumbers))

可知，代码中巧妙地使用了一个ES6语法 - 扩展运算符。rest代表了除去第一个元素之后的剩余数组，它的元素个数会随着一层层递归而减小直至为0，这样就满足了递归结束的条件。这种写法非常机智，但是在我看来，可读性并没有使用reduce方法那么好。

示例2: 将数组中的字符串拼接成句子

数组如下，我们需要过滤掉非字符串元素：

const dataArray = [0, "H", {}, "e", Math.PI, "l", "l", 2/9, "o!"];

目标结果是“Hello!”.

使用循环语句

let string = "", i = 0;

while (dataArray[i] !== undefined) {
  if (typeof dataArray[i] === "string") {
    string += dataArray[i];
  }
  i += 1;
}

console.log(string);

不用循环语句

使用filter和join方法的话，可以避免使用循环语句：

const string = dataArray.filter(e => typeof e === "string").join("");

console.log(string);

可知，使用filter方法还帮助我们省掉了if语句。

广而告之： 如果你需要监控线上JavaScript代码的错误的话，欢迎免费使用Fundebug!

示例3: 将数组元素变换为对象

数组元素为一些书名，需要将它们转换为对象，并为每一个对象添加ID：

const booksArray = [
  "Clean Code",
  "Code Complete",
  "Introduction to Algorithms",
];

目标结果如下：

newArray = [
  { id: 1, title: "Clean Code" },
  { id: 2, title: "Code Complete" },
  { id: 3, title: "Introduction to Algorithms" },
];

使用循环语句

const newArray = [];
let counter = 1;

for (let title of booksArray) {
  newArray.push({
    id: counter,
    title,
  });

  counter += 1;
}

console.log(newArray);

不用循环语句

使用map方法的话，可以避免使用循环语句：

const newArray = booksArray.map((title, index) => ({ 
  id: index + 1, 
  title 
}));

console.log(newArray);

总结

不难发现，我是通过使用数组的reduce、filter以及map方法来避免循环语句的，这是我的个人偏好。使用它们，可以帮助我们做很多有意思的事情。上面的图片来自Steven Luscher，它们形象的表现了这3个方法的功能。

版权声明:
转载时请注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2017/11/13/write-javascript-without-loop/

GPU云服务器云服务器跳出循环语句优化循环语句 until循环语句 for循环语句

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/89914.html

你试过不用if撸代码吗？

摘要：译者按试着不用撸代码，是件很有趣的事，而且，万一你领会了什么是数据即代码，代码即数据呢原文译者为了保证可读性，本文采用意译而非直译。但是，不使用的话，有时候可以增加代码的可读性。译者按：试着不用if撸代码，是件很有趣的事，而且，万一你领会了什么是数据即代码，代码即数据呢？原文: Coding Tip: Try to Code Without If-statements 译者:...

I_Am 2019-08-21 17:42 评论0 收藏0
徒手撸UI之Tree

摘要：是一个组件库目前拥有的组件语法编写，无依赖原生模块化，以上支持，请开启静态服务器预览效果，静态服务器传送门采用变量配置样式辛苦造轮子，欢迎来仓库四月份找工作，求内推，坐标深圳写在前面去年年底项目中尝试着写过一个分页的组件，然后就有了写的想法 QingUI是一个UI组件库目前拥有的组件：DatePicker, TimePicker, Paginator, Tree, Cascader, ...

2i18ns 2019-08-22 15:46 评论0 收藏0
javascript 总结（那些剪不断理还乱的关系）

摘要：前言整理中一些相似的关键字方法概念。于是我们修改上面的函数来验证它们的区别小明撸代码撸代码小红小黑小刚小红小黑撸代码小李小谢小刚小李小谢撸代码那么与有什么区别呢与和不同的是，绑定后不会立即执行。通常用来处理一些并发的异步操作。前言整理 javascript 中一些相似的关键字、方法、概念。 1. var、function、let、const 命令的区别使用var声明的变量，其作...

hlcfan 2019-08-26 11:39 评论0 收藏0
徒手撸UI之TimePicker

摘要：是一个组件库目前拥有的组件语法编写，无依赖原生模块化，以上支持，请开启静态服务器预览效果，静态服务器传送门采用变量配置样式辛苦造轮子，欢迎来仓库四月份找工作，求内推，坐标深圳写在前面去年年底项目中尝试着写过一个分页的组件，然后就有了写的想法 QingUI是一个UI组件库目前拥有的组件：DatePicker, TimePicker, Paginator, Tree, Cascader, ...

Codeing_ls 2019-08-22 15:41 评论0 收藏0
threeJS中，那些会让阴影失效的操作

摘要：但后来发现，并不是阴影失效了，应该是它导致了上面提到的阴影摄像机的范围发生了变化本来以为不就设一个阴影嘛，网上这么多文章，随便看一篇就知道怎么设置了，然而我却花了整整一天才让阴影出现... 很多博主说，在threeJS中要让阴影显示，只要满足以下几个基本条件。渲染器开启阴影渲染：renderer.shadowMapEnabled = true; 灯光需要开启引起阴影：light...

CKJOKER 2019-08-22 18:08 评论0 收藏0