摘要:不幸的是,它們不能很好地處理非基本類型的數組。還可以接受第二個參數,作用類似于數組的方法,用來對每個元素進行處理,將處理后的值放入返回的數組。
為了保證的可讀性,本文采用意譯而非直譯。
想閱讀更多優質文章請猛戳GitHub博客,一年百來篇優質文章等著你!
這些技巧可能大家大部分都用過了,如果用過就當作加深點映像,如果沒有遇到過,就當作學會了幾個技巧。
1. 確保數組值使用 grid ,需要重新創建原始數據,并且每行的列長度可能不匹配, 為了確保不匹配行之間的長度相等,可以使用Array.fill方法。
let array = Array(5).fill(""); console.log(array); // outputs (5) ["", "", "", "", ""]2. 獲取數組唯一值
ES6 提供了從數組中提取惟一值的兩種非常簡潔的方法。不幸的是,它們不能很好地處理非基本類型的數組。在本文中,主要關注基本數據類型。
const cars = [ "Mazda", "Ford", "Renault", "Opel", "Mazda" ] const uniqueWithArrayFrom = Array.from(new Set(cars)); console.log(uniqueWithArrayFrom); // outputs ["Mazda", "Ford", "Renault", "Opel"] const uniqueWithSpreadOperator = [...new Set(cars)]; console.log(uniqueWithSpreadOperator);// outputs ["Mazda", "Ford", "Renault", "Opel"]3.使用展開運算符合并對象和對象數組
對象合并是很常見的事情,我們可以使用新的ES6特性來更好,更簡潔的處理合并的過程。
// merging objects const product = { name: "Milk", packaging: "Plastic", price: "5$" } const manufacturer = { name: "Company Name", address: "The Company Address" } const productManufacturer = { ...product, ...manufacturer }; console.log(productManufacturer); // outputs { name: "Company Name", packaging: "Plastic", price: "5$", address: "The Company Address" } // merging an array of objects into one const cities = [ { name: "Paris", visited: "no" }, { name: "Lyon", visited: "no" }, { name: "Marseille", visited: "yes" }, { name: "Rome", visited: "yes" }, { name: "Milan", visited: "no" }, { name: "Palermo", visited: "yes" }, { name: "Genoa", visited: "yes" }, { name: "Berlin", visited: "no" }, { name: "Hamburg", visited: "yes" }, { name: "New York", visited: "yes" } ]; const result = cities.reduce((accumulator, item) => { return { ...accumulator, [item.name]: item.visited } }, {}); console.log(result); /* outputs Berlin: "no" Genoa: "yes" Hamburg: "yes" Lyon: "no" Marseille: "yes" Milan: "no" New York: "yes" Palermo: "yes" Paris: "no" Rome: "yes" */4. 數組 map 的方法 (不使用Array.Map)
另一種數組 map 的實現的方式,不用 Array.map。
Array.from 還可以接受第二個參數,作用類似于數組的map方法,用來對每個元素進行處理,將處理后的值放入返回的數組。如下:
const cities = [ { name: "Paris", visited: "no" }, { name: "Lyon", visited: "no" }, { name: "Marseille", visited: "yes" }, { name: "Rome", visited: "yes" }, { name: "Milan", visited: "no" }, { name: "Palermo", visited: "yes" }, { name: "Genoa", visited: "yes" }, { name: "Berlin", visited: "no" }, { name: "Hamburg", visited: "yes" }, { name: "New York", visited: "yes" } ]; const cityNames = Array.from(cities, ({ name}) => name); console.log(cityNames); // outputs ["Paris", "Lyon", "Marseille", "Rome", "Milan", "Palermo", "Genoa", "Berlin", "Hamburg", "New York"]5. 有條件的對象屬性
不再需要根據一個條件創建兩個不同的對象,可以使用展開運算符號來處理。
nst getUser = (emailIncluded) => { return { name: "John", surname: "Doe", ...emailIncluded && { email : "john@doe.com" } } } const user = getUser(true); console.log(user); // outputs { name: "John", surname: "Doe", email: "john@doe.com" } const userWithoutEmail = getUser(false); console.log(userWithoutEmail); // outputs { name: "John", surname: "Doe" }6. 解構原始數據
有時候一個對象包含很多屬性,而我們只需要其中的幾個,這里可以使用解構方式來提取我們需要的屬性。如一個用戶對象內容如下:
const rawUser = { name: "John", surname: "Doe", email: "john@doe.com", displayName: "SuperCoolJohn", joined: "2016-05-05", image: "path-to-the-image", followers: 45 ... }
我們需要提取出兩個部分,分別是用戶及用戶信息,這時可以這樣做:
let user = {}, userDetails = {}; ({ name: user.name, surname: user.surname, ...userDetails } = rawUser); console.log(user); // outputs { name: "John", surname: "Doe" } console.log(userDetails); // outputs { email: "john@doe.com", displayName: "SuperCoolJohn", joined: "2016-05-05", image: "path-to-the-image", followers: 45 }7. 動態屬性名
早期,如果屬性名需要是動態的,我們首先必須聲明一個對象,然后分配一個屬性。這些日子已經過去了,有了ES6特性,我們可以做到這一點。
const dynamic = "email"; let user = { name: "John", [dynamic]: "john@doe.com" } console.log(user); // outputs { name: "John", email: "john@doe.com" }8.字符串插值
在用例中,如果正在構建一個基于模板的helper組件,那么這一點就會非常突出,它使動態模板連接容易得多。
const user = { name: "John", surname: "Doe", details: { email: "john@doe.com", displayName: "SuperCoolJohn", joined: "2016-05-05", image: "path-to-the-image", followers: 45 } } const printUserInfo = (user) => { const text = `The user is ${user.name} ${user.surname}. Email: ${user.details.email}. Display Name: ${user.details.displayName}. ${user.name} has ${user.details.followers} followers.` console.log(text); } printUserInfo(user); // outputs "The user is John Doe. Email: john@doe.com. Display Name: SuperCoolJohn. John has 45 followers."交流
干貨系列文章匯總如下,覺得不錯點個Star,歡迎 加群 互相學習。
https://github.com/qq44924588...
我是小智,公眾號「大遷世界」作者,對前端技術保持學習愛好者。我會經常分享自己所學所看的干貨,在進階的路上,共勉!
關注公眾號,后臺回復福利,即可看到福利,你懂的。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/105227.html
摘要:在本文中,我將分享一些有用的技巧和技巧,它們代表了我在學習過程中的關鍵進展。當用戶將鼠標懸停在上面時,圖像會稍微放大,但其尺寸保持不變。為了達到這個效果,需要用標簽包裹標簽。的范圍是從到,其中從白色變為黑色。 CSS是一種獨特的語言。乍一看,這似乎很簡單,但是,某些在理論上看起來很簡單的效果在實踐中往往不那么明顯。 在本文中,我將分享一些有用的技巧和技巧,它們代表了我在學習CSS過程中...
摘要:在本文中,我將分享一些有用的技巧和技巧,它們代表了我在學習過程中的關鍵進展。當用戶將鼠標懸停在上面時,圖像會稍微放大,但其尺寸保持不變。為了達到這個效果,需要用標簽包裹標簽。的范圍是從到,其中從白色變為黑色。 CSS是一種獨特的語言。乍一看,這似乎很簡單,但是,某些在理論上看起來很簡單的效果在實踐中往往不那么明顯。 在本文中,我將分享一些有用的技巧和技巧,它們代表了我在學習CSS過程中...
摘要:本周于上海閉幕,掘金和知乎上都有對應的實錄和問答,但會議的視頻目前都還沒放出來,有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主,有業界大牛,也有小鮮肉,也有國外美女。 CSS 樣式書寫規范最佳實踐 本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范,可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...
摘要:本周于上海閉幕,掘金和知乎上都有對應的實錄和問答,但會議的視頻目前都還沒放出來,有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主,有業界大牛,也有小鮮肉,也有國外美女。 CSS 樣式書寫規范最佳實踐 本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范,可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...
摘要:本周于上海閉幕,掘金和知乎上都有對應的實錄和問答,但會議的視頻目前都還沒放出來,有心的同學如果找到了歡迎分享。建議中英文對照閱讀。英文原文前端獨立技術博客推薦推薦一些現在還在堅持原創的博主,有業界大牛,也有小鮮肉,也有國外美女。 CSS 樣式書寫規范最佳實踐 本文的所列是實踐當中得出的一套比較不錯的 CSS 書寫規范,可以結合自身團隊發展出一套適合自己業務的規范。 CSS中的字體與排版...
閱讀 3448·2019-08-30 15:55
閱讀 2050·2019-08-30 15:44
閱讀 1453·2019-08-30 12:47
閱讀 740·2019-08-30 11:05
閱讀 1629·2019-08-30 10:54
閱讀 654·2019-08-29 16:07
閱讀 3566·2019-08-29 14:17
閱讀 2221·2019-08-23 18:31