幾分鐘內提升技能的8個 JavaScript 方法
小編推薦: ofollow,noindex">掘金是一個面向程式員的高質量技術社群,從 一線大廠經驗分享到前端開發最佳實踐,無論是入門還是進階,來掘金你不會錯過前端開發的任何一個技術乾貨。
我們今天構建的大多數應用程式都需要進行某種資料收集修改。您最常遇到的常見操作是處理集合中的項。不要再使用 for-loop 迴圈的傳統方式( let i=0; i < value.length; i++
)。
請注意,在 for 迴圈中使用 const
會報一個錯誤。原因是因為它在每次執行期間重新賦值,因此 i
被 i++
修改。所以每當你想到使用 const
或 let
時,問問自己 – 這個值會被重新宣告嗎?如果答案是肯定的,請選擇 let
,如果不是,請選擇 const
。 更多資訊 。
假設您要顯示產品列表並對集合進行分類,過濾,搜尋,修改或更新。或者您可能希望執行快速計算,例如求和,乘法等。實現這一目標的最佳方法是什麼?
也許你不喜歡箭頭功能,你不想花太多時間學習新東西,或者它們與你無關。放心,並不是只有你這樣。我將向您展示如何在 ES5(普通函式)和 ES6(箭頭功能)中實現。
請注意:箭頭函式和函式宣告/表示式不是等效的,不能 盲目替換 。請記住, this
關鍵字在兩者之間的工作方式不同。
我們將要關注的方法有:
- Spread operator(展開操作符)
- for…of 迭代器
- includes()
- some()
- every()
- filter()
- map()
- reduce()
如果您想成為更好的Web開發人員,開始自己的事業,教別人或提高您的開發技能,我將每週釋出最新的關於 Web 開發語言的技術和技巧。
1. Spread operator(展開操作符)
Spread operator(展開操作符)將陣列展開為其對應的元素。它也可以用於物件字面量。
為什麼我應該用它呢?
...
示例:
假如你想展示一個喜愛的水果列表,但不是通過一個迴圈函式的方式。你可以用一個擴充套件操作符,像這樣:
const favoriteFood = ['Pizza', 'Fries', 'Swedish-meatballs']; console.log(...favoriteFood); //Pizza Fries Swedish-meatballs
2. for…of 迭代器
for...of
語句迴圈/遍歷集合,為你提供了修改特定元素的功能。 它取代傳統的 for-loop
方式。
為什麼我應該用它呢?
- 這是新增或更新項的簡單方法
- 執行計算(求和,乘法等)
- 和條件語句結合使用(if,while,switch等)
- 程式碼乾淨,可讀性高
示例:
假設你有一個工具箱,你想要展示裡面所有的工具。 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()
方法相似,但是 some()
方法的引數是一個函式,而不是一個字串。
為什麼我應該用它呢?
- 它確保某些專案通過測試
- 它使用函式執行條件語句
- 使您的程式碼更具宣告性
- 它足夠好用
示例:
假如你是一個俱樂部老闆,並不在乎誰進入這俱樂部吧。但是有些人是不允許進來的,因為他們已經喝了很多酒(我的想象力很好)。檢視以下 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()
方法可用於將陣列轉換為其他內容,可以是整數,物件,promises 鏈(順序執行的promises)等等。出於實際原因,一個簡單的用例是對整數列表求和。簡而言之,它將整個陣列“縮短”為一個你想要的值。
為什麼我應該用它呢?
- 執行計算
- 計算一個值
- 計算重複數
- 按屬性分組物件
- 按順序執行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
希望你的 JavaScript 技能有所提升!