這些JavaScript方法將會在幾分鐘內提高你的技能

mylxsw 發布于2019-08-22 17:19 / 2315人閱讀

摘要：這些方法將會被使用擴展運算符，三個點擴展操作符擴展運算符用于把一個數組展開變為一個數組元素序列一系列逗號隔開的值。

這些JavaScript方法將會在幾分鐘內提高你的技能

現在創建的大多數應用都會需要對一些數據集合做修改。處理集合中的元素是你最可能遇到的操作。不要再使用常規的像是(const i; i < value.length; i++ )的for-loop方式。
如果你想要展示一個商品列表，并且對這個數據集合做分類、篩選、搜索、修改和更新。或者你想做一些快速計算比如求和，相乘等等。實現這些操作的最佳方式是什么？
可能你不喜歡箭頭函數，你也不想花費太多時間去學習這些新東西，或者它們跟你沒有關系。放心，并不是只有你這樣。我會同時在ES5（普通函數）和ES6（箭頭函數）中展示給你看怎么實現。
注意：箭頭函數和函數聲明/表達式不是等價的，而且也不能盲目替換。你要記得this關鍵字在兩者之間的作用不一樣的。

這些方法將會被使用

Spread operator（擴展運算符，三個點）

for…of iterator

includes()

some()

every()

filter()

map()

reduce()

1. 擴展操作符

擴展運算符用于把一個數組展開變為一個數組元素序列（一系列逗號隔開的值）。也可以展開對象字面量。

為什么我應該用它？

簡單且快速的方式列出數組元素

同時用于數組和對象

快速且直觀的方式傳遞參數

只需要寫三個點

例子：

假如你想展示一個喜愛的水果列表，但不是通過一個循環函數的方式。你可以用一個擴展操作符，像這樣：

const favoriteFood = ["Pizza", "Fries", "Swedish-meatballs"];

console.log(...favoriteFood);
//Pizza Fries Swedish-meatballs

2. for…of 迭代器

for...of利用循環/迭代器表達式遍歷集合，為你提供了修改特定元素的能力。它可以替代常規的for-loop方式。

為什么我應該用它？

一種簡單的方式添加、更新一個元素

執行計算（累加、相乘）

代碼簡單，可讀性高

例子：

如果你有一個工具箱，你想要展示里面所有的工具。for...of迭代器會讓它變得更簡單。

const toolBox = ["Hammer", "Screwdriver", "Ruler"]
for(const item of toolBox) {
  console.log(item)
}

// Hammer
// Screwdriver
// Ruler

3. Includes() 方法

include()方法被用來檢查數集合中是否包含指定元素，如果存在則返回true，否則返回false。記得，他是區分大小寫的：如果集合中的這個元素是SCHOOL，但你查詢的是school，那么它將會返回false。

為什么我應該用它？

可以構建簡單的查詢代碼塊

一種直觀的方法來確定元素是否存在

它使用條件語句來修改、過濾等等

代碼可讀性高

例子：

假如，無論什么原因，你不知道車庫里有什么車，你需要一個系統檢查你想要的車在不在車庫里。includes()可以拯救你！

const garge = ["BMW", "AUDI", "VOLVO"];
const findCar = garge.includes("BMW");
console.log(findCar);

// true

4. Some() 方法

some()方法檢查在數組中是否存在某些元素，如果存在返回true否則返回false。這跟includes方法有幾分相似，但是參數是一個函數，而不是一個字符串。

為什么我應該用它？

可以確保某些項測試通過

用函數執行條件表達式

使你的代碼更直觀

它非常好用

例子：

假如你是一個酒吧老板，也不在乎誰進入這家酒吧。但是某些人是不允許進來的，因為他們已經喝了很多酒了。下面分別用ES5和ES6檢查他們的不同：

ES5

const age = [16, 14, 18];
age.some(function(person) {
  return person >= 18;
});

// Output: true

ES6

const age = [16, 14, 18];
age.some((person) => person >= 18);
// true

5. Every() 方法

every()方法遍歷數組，檢查數組中的每一項是否都可以通過，如果都通過返回true否則返回false。與some()方法概念有些相似。但是每一項都必須通過條件表達式，否則，它會返回false。

為什么我應該用它？

可以確保所有項測試通過

可以用函數執行條件表達式

使代碼更直觀

例子：

上次你用some()方法讓某些未成年學生進了酒吧，有人舉報了這事，并且警察逮捕了你。這次你害怕還會發生這樣的事情，你將用every()方法確保每一個進來酒吧的人都是滿足年齡限制的。

ES5

const age = [15, 20, 19];
age.every(function(person) {
  return person >= 18;
})

// Output: false

ES6

const age = [15, 20, 19];
age.every((person)=> person >= 18);
//false

6. Filter() 方法

filter()方法會創建一個包含所有滿足條件的元素的新數組。

為什么我應該用它？

可以避免對原始數組的修改

可以讓你過濾掉那些你不需要的元素

讓你的代碼可讀性更高

例子：

假如你只想要大于或者等于30的價格，過濾掉其他價格。

ES5

//array
const prices = [25, 30, 15, 55, 40, 10];

prices.filter(function(price){
  return price >= 30;
})

// Output:?[30, 55, 40]

ES6

const prices = [25, 30, 15, 55, 40, 10];
prices.filter((price) => price >= 30);
// [30, 55, 40]

7. Map() 方法

map()方法跟filter()方法想似，也是會返回一個新數組。但是，唯一的區別是它用于修改數組中的元素。

為什么我應該用它？

可以避免對原始數組的修改

可以修改你想修改的元素

代碼可讀性更高

例子：

假如你有一個商品的價格列表，你的經理要展示一個被征收25%的稅之前的價格列表。map()方法可以幫你實現它。

ES5

const productPriceList = [200, 356, 1500, 5000];
productPriceList.map(function(item){
  return item * 0.75;
})
//?[150, 267, 1125, 3750]

ES6

const productPriceList = [200, 356, 1500, 5000];
productPriceList.map((item) => item * 0.75);
//?[150, 267, 1125, 3750]

8. Reduce() 方法

reduce()方法用來把一個數組轉化為一個int值，一個對象，一個promises串（順序執行的promises）等等。實際上，一個簡單的用例就是對一系列int值求和。簡單來說，它就是把數組中的所有值最終"縮短"為一個值。

為什么我應該用它？

合并計算為一個值

重復執行計算

把對象按照屬性分組

順序執行promises代碼塊

一種快速的執行運算函數的方式

例子：

假如你想得到這一周的消費總和，reduce()可以幫你實。

ES5

const weeklyExpenses = [200, 350, 1500, 5000, 450, 680, 350]
weeklyExpenses.reduce(function(first, last) {
  return first + last;
})
// 8530

ES6

const weeklyExpenses = [200, 350, 1500, 5000, 450, 680, 350]
weeklyExpenses.reduce((first, last) => first + last);
// 8530

原文鏈接：These JavaScript methods will boost your skills in just a few minutes

云服務器 GPU云服務器提高你的python 幾分鐘內一分鐘內 php 一分鐘內

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95069.html

如何在沒有實際項目經驗的情況下找到工作

摘要：對于許多年輕的計算機或相關專業畢業生，在沒有實際項目開發經驗的情況下找到第一份全職工作可能是你在職業生涯中遇到的最大的挑戰。總結畢業后在沒有實際項目開發經驗的情況下找到你的第一份工作是一個艱巨的任務。原文：How to Land a Development Job Without Experience作者：Paddy Sherry譯者：LeviDing聲明：轉載請注明出處。 ??許多...

Invoker 2019-06-27 16:22 評論0 收藏0
如何在沒有實際項目經驗的情況下找到工作

摘要：對于許多年輕的計算機或相關專業畢業生，在沒有實際項目開發經驗的情況下找到第一份全職工作可能是你在職業生涯中遇到的最大的挑戰。總結畢業后在沒有實際項目開發經驗的情況下找到你的第一份工作是一個艱巨的任務。原文：How to Land a Development Job Without Experience作者：Paddy Sherry譯者：LeviDing聲明：轉載請注明出處。 ??許多...

red_bricks 2019-08-29 12:30 評論0 收藏0
如何在沒有實際項目經驗的情況下找到工作

摘要：對于許多年輕的計算機或相關專業畢業生，在沒有實際項目開發經驗的情況下找到第一份全職工作可能是你在職業生涯中遇到的最大的挑戰。總結畢業后在沒有實際項目開發經驗的情況下找到你的第一份工作是一個艱巨的任務。原文：How to Land a Development Job Without Experience作者：Paddy Sherry譯者：LeviDing聲明：轉載請注明出處。 ??許多...

evin2016 2019-08-20 16:07 評論0 收藏0
如何在沒有實際項目經驗的情況下找到工作

摘要：對于許多年輕的計算機或相關專業畢業生，在沒有實際項目開發經驗的情況下找到第一份全職工作可能是你在職業生涯中遇到的最大的挑戰。總結畢業后在沒有實際項目開發經驗的情況下找到你的第一份工作是一個艱巨的任務。原文：How to Land a Development Job Without Experience作者：Paddy Sherry譯者：LeviDing聲明：轉載請注明出處。 ??許多...

Jioby 2019-08-01 16:45 評論0 收藏0
全棧開發：2017年你最好的選擇[翻譯]

摘要：全棧開發是一個學習實現提高的過程。解除對開發人員的限制所有的職業都在持續的進化。哪怕是爆炸和擁擠的印度招聘市場，全棧工程師在年也非常的搶手。印度的創業公司已經開發意識到全棧工程師的重要意義，全棧會越來越重要。在不斷壯大的招聘市場上，最需要的是有非常廣泛技術棧的人。前言敬愛的讀者，大家好。大家經常討論的話題是作為一個軟件工程師是一個持續學習的過程。因為現有的趨勢和技術在軟件領域會很...

fireflow 2019-07-25 11:32 評論0 收藏0