成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

試過不用循環(huán)語(yǔ)句擼代碼嗎？

CoderDock / 611人閱讀

摘要：那么，這次我們不妨試試，在不使用循環(huán)語(yǔ)句的情況下，如何編程呢示例數(shù)組元素求和數(shù)組如下使用循環(huán)語(yǔ)句可知，我們需要通過修改變量，來(lái)計(jì)算結(jié)果。

譯者按： 通過使用數(shù)組的reduce、filter以及map方法來(lái)避免循環(huán)語(yǔ)句。

原文: Coding Tip: Try to Code Without Loops

譯者: Fundebug

為了保證可讀性，本文采用意譯而非直譯。另外，本文版權(quán)歸原作者所有，翻譯僅用于學(xué)習(xí)。

在前一篇博客，我們介紹了，如果不使用if語(yǔ)句的話，如何解決一些簡(jiǎn)單的編程問題。那么，這次我們不妨試試，在不使用循環(huán)語(yǔ)句的情況下，如何編程呢？

示例1: 數(shù)組元素求和

數(shù)組如下:

const arrayOfNumbers = [17, -4, 3.2, 8.9, -1.3, 0, Math.PI];
使用循環(huán)語(yǔ)句 
let sum = 0;

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

console.log(sum);

可知，我們需要通過修改sum變量，來(lái)計(jì)算結(jié)果。

不用循環(huán)語(yǔ)句

使用reduce方法時(shí)，就可以避免使用循環(huán)語(yǔ)句了：

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

console.log(sum);

實(shí)現(xiàn)遞歸，同樣可以避免使用循環(huán)語(yǔ)句：

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

console.log(sum(arrayOfNumbers))

可知，代碼中巧妙地使用了一個(gè)ES6語(yǔ)法 - 擴(kuò)展運(yùn)算符。rest代表了除去第一個(gè)元素之后的剩余數(shù)組，它的元素個(gè)數(shù)會(huì)隨著一層層遞歸而減小直至為0，這樣就滿足了遞歸結(jié)束的條件。這種寫法非常機(jī)智，但是在我看來(lái)，可讀性并沒有使用reduce方法那么好。

示例2: 將數(shù)組中的字符串拼接成句子

數(shù)組如下，我們需要過濾掉非字符串元素：

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

目標(biāo)結(jié)果是“Hello!”.

使用循環(huán)語(yǔ)句 
let string = "", i = 0;

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

console.log(string);
不用循環(huán)語(yǔ)句

使用filter和join方法的話，可以避免使用循環(huán)語(yǔ)句：

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

console.log(string);

可知，使用filter方法還幫助我們省掉了if語(yǔ)句。

廣而告之： 如果你需要監(jiān)控線上JavaScript代碼的錯(cuò)誤的話，歡迎免費(fèi)使用Fundebug!

示例3: 將數(shù)組元素變換為對(duì)象

數(shù)組元素為一些書名，需要將它們轉(zhuǎn)換為對(duì)象，并為每一個(gè)對(duì)象添加ID：

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

目標(biāo)結(jié)果如下：

newArray = [
  { id: 1, title: "Clean Code" },
  { id: 2, title: "Code Complete" },
  { id: 3, title: "Introduction to Algorithms" },
];
使用循環(huán)語(yǔ)句 
const newArray = [];
let counter = 1;

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

  counter += 1;
}

console.log(newArray);
不用循環(huán)語(yǔ)句

使用map方法的話，可以避免使用循環(huán)語(yǔ)句：

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

console.log(newArray);
總結(jié)

不難發(fā)現(xiàn)，我是通過使用數(shù)組的reduce、filter以及map方法來(lái)避免循環(huán)語(yǔ)句的，這是我的個(gè)人偏好。使用它們，可以幫助我們做很多有意思的事情。上面的圖片來(lái)自Steven Luscher，它們形象的表現(xiàn)了這3個(gè)方法的功能。

版權(quán)聲明:
轉(zhuǎn)載時(shí)請(qǐng)注明作者Fundebug以及本文地址：
https://blog.fundebug.com/2017/11/13/write-javascript-without-loop/

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89914.html

相關(guān)文章

  • 你試過不用if擼代碼嗎？

    摘要：譯者按試著不用擼代碼，是件很有趣的事，而且，萬(wàn)一你領(lǐng)會(huì)了什么是數(shù)據(jù)即代碼，代碼即數(shù)據(jù)呢原文譯者為了保證可讀性，本文采用意譯而非直譯。但是，不使用的話，有時(shí)候可以增加代碼的可讀性。 譯者按： 試著不用if擼代碼，是件很有趣的事，而且，萬(wàn)一你領(lǐng)會(huì)了什么是數(shù)據(jù)即代碼，代碼即數(shù)據(jù)呢？ 原文: Coding Tip: Try to Code Without If-statements 譯者:...

    I_Am 評(píng)論0 收藏0

  • 徒手擼UI之Tree

    摘要：是一個(gè)組件庫(kù)目前擁有的組件語(yǔ)法編寫，無(wú)依賴原生模塊化，以上支持，請(qǐng)開啟靜態(tài)服務(wù)器預(yù)覽效果，靜態(tài)服務(wù)器傳送門采用變量配置樣式辛苦造輪子，歡迎來(lái)倉(cāng)庫(kù)四月份找工作，求內(nèi)推，坐標(biāo)深圳寫在前面去年年底項(xiàng)目中嘗試著寫過一個(gè)分頁(yè)的組件，然后就有了寫的想法 QingUI是一個(gè)UI組件庫(kù)目前擁有的組件：DatePicker, TimePicker, Paginator, Tree, Cascader, ...

    2i18ns 評(píng)論0 收藏0

  • javascript 總結(jié)（那些剪不斷理還亂的關(guān)系）

    摘要：前言整理中一些相似的關(guān)鍵字方法概念。于是我們修改上面的函數(shù)來(lái)驗(yàn)證它們的區(qū)別小明擼代碼擼代碼小紅小黑小剛小紅小黑擼代碼小李小謝小剛小李小謝擼代碼那么與有什么區(qū)別呢與和不同的是，綁定后不會(huì)立即執(zhí)行。通常用來(lái)處理一些并發(fā)的異步操作。 前言 整理 javascript 中一些相似的關(guān)鍵字、方法、概念。 1. var、function、let、const 命令的區(qū)別 使用var聲明的變量，其作...

    hlcfan 評(píng)論0 收藏0

  • 徒手擼UI之TimePicker

    摘要：是一個(gè)組件庫(kù)目前擁有的組件語(yǔ)法編寫，無(wú)依賴原生模塊化，以上支持，請(qǐng)開啟靜態(tài)服務(wù)器預(yù)覽效果，靜態(tài)服務(wù)器傳送門采用變量配置樣式辛苦造輪子，歡迎來(lái)倉(cāng)庫(kù)四月份找工作，求內(nèi)推，坐標(biāo)深圳寫在前面去年年底項(xiàng)目中嘗試著寫過一個(gè)分頁(yè)的組件，然后就有了寫的想法 QingUI是一個(gè)UI組件庫(kù)目前擁有的組件：DatePicker, TimePicker, Paginator, Tree, Cascader, ...

    Codeing_ls 評(píng)論0 收藏0

  • threeJS中，那些會(huì)讓陰影失效的操作

    摘要：但后來(lái)發(fā)現(xiàn)，并不是陰影失效了，應(yīng)該是它導(dǎo)致了上面提到的陰影攝像機(jī)的范圍發(fā)生了變化 本來(lái)以為不就設(shè)一個(gè)陰影嘛，網(wǎng)上這么多文章，隨便看一篇就知道怎么設(shè)置了，然而我卻花了整整一天才讓陰影出現(xiàn)... 很多博主說，在threeJS中要讓陰影顯示，只要滿足以下幾個(gè)基本條件。 渲染器開啟陰影渲染：renderer.shadowMapEnabled = true; 燈光需要開啟引起陰影：light...

    CKJOKER 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<