譯者按： 通過使用數組的reduce、filter以及map方法來避免循環語句。
為了保證可讀性，本文采用意譯而非直譯。另外，本文版權歸原作者所有，翻譯僅用於學習。
在前一篇博客，我們介紹了，如果不使用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);
|
不用循環語句
|
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/