試過不用循環語句擼代碼嗎？

譯者按： 經過使用數組的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/