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

CoderDock 發布于2019-08-21 17:43 / 606人閱讀

摘要：那么，這次我們不妨試試，在不使用循環語句的情況下，如何編程呢示例數組元素求和數組如下使用循環語句可知，我們需要通過修改變量，來計算結果。

譯者按： 通過使用數組的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循環語句

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/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