送給 ES6 開發者的7個 hack
關注原來的 JavaScript hacks,上面有一些新的好東西。2018 使用 JavaScript 寫程式碼真的又變得有意思了!
Hack #1 — 交換變數
使用陣列結構來交換值
let a = 'world', b = 'hello' [a, b] = [b, a] console.log(a) // -> hello console.log(b) // -> world // 是的,很神奇
Hack #2 — 使用解構的 Async/Await
再說一遍,陣列結構真的很棒。通過和 async/await 以及 promise 結合可以讓複雜的流程變得簡單。
const [user, account] = await Promise.all([ fetch('/user'), fetch('/account') ])
Hack #3 — 除錯
對於那些喜歡使用 console.logs 來除錯的人來說,現在有一些特別酷的(並且我也聽說過 console.table):
const a = 5, b = 6, c = 7 console.log({ a, b, c }) // 輸出優雅的物件: // { // a: 5, // b: 6, // c: 7 // }
Hack #4 — 一行搞定一切
對於陣列操作,語法可以非常緊湊
// 尋找最大值 const max = (arr) => Math.max(...arr); max([123, 321, 32]) // outputs: 321 // 對陣列求和 const sum = (arr) => arr.reduce((a, b) => (a + b), 0) sum([1, 2, 3, 4]) // output: 10
Hack #5 — 陣列拼接
擴充操作符可以用來代替 concat:
const one = ['a', 'b', 'c'] const two = ['d', 'e', 'f'] const three = ['g', 'h', 'i'] // 老方法 #1 const result = one.concat(two, three) // 老方法 #2 const result = [].concat(one, two, three) // 新方法 const result = [...one, ...two, ...three]
Hack #6 — 克隆
輕鬆克隆陣列和物件:
const obj = { ...oldObj } const arr = [ ...oldArr ]
注意:這會產生一個淺克隆。
Hack #7 — 命名引數
通過結構讓函式以及函式函式呼叫更具有可讀性:
const getStuffNotBad = (id, force, verbose) => { ...do stuff } const getStuffAwesome = ({ id, name, force, verbose }) => { ...do stuff } // 在程式碼的其它某個地方... 到底什麼是 true, true? getStuffNotBad(150, true, true) // 在程式碼的其他某個地方.. I ❤ JS!!! getStuffAwesome({ id: 150, force: true, verbose: true })
已經全部知道了?
你是一個真正的黑客,讓我們繼續在 Twitter上的談話你還可以看看我的 Torii 教學,我們讓“SaaS 頭痛”消失。
譯者:neal1991
相關文章
- 7 個給新手 Java 開發者的提示Java
- [譯] 三個歎為觀止的ES6 Array hack
- 給遊戲開發者們的 7 個製作建議遊戲開發
- 給新手 Java 開發者的 7 點提示Java
- 送給前端開發者的一份新年禮物前端
- 送給當代軟體開發者的咒語:"Write Less Code"
- 推薦給開發者的11個PHP框架PHP框架
- 給Apple Watch開發者的8個貼士APP
- JS 開發者必須知道的十個 ES6 新特性JS
- JavaScript 開發者必備的7個資源JavaScript
- JavaScript開發者值得收藏的 7 個資源JavaScript
- 推薦給開發者的20個優秀PHP框架PHP框架
- 給Android應用開發者的十個建議Android
- WEB開發者必備的7個JavaScript函式WebJavaScript函式
- 送給寫小程式的你。
- 給 Java 開發者的 10 個大資料工具和框架Java大資料框架
- 寫給開發者:記錄日誌的10個建議
- 寫給Git初學者的7個建議Git
- 7個Web開發者高階外掛Web
- 給PHP開發者的建議PHP
- [譯]7個ES6程式設計小技巧程式設計
- 招聘優秀開發者的7個簡單原則
- 給獨立遊戲開發者掌握社交渠道的5個建議遊戲開發
- 給遊戲引擎開發者的 64 個建議(1):客戶端遊戲引擎客戶端
- ie6,ie7,ff的css相容hack寫法CSS
- Git 12 歲了,送給你 12 個 Git 使用技巧Git
- 20個為前端開發者準備的文件和指南(7)前端
- 寫給 Node.js 學徒的 7 個建議Node.js
- 給年輕程式設計師的7個建議程式設計師
- 我們整理了20個Python專案,送給正在求職的你Python求職
- 送一個記憶體洩漏給 2016 的記幾記憶體
- [譯] 寫給前端開發者的 GraphQL 指南前端
- [自譯]給Web開發者的VR指南WebVR
- 給 Android 開發者的 RxJava 詳解AndroidRxJava
- 給 JavaScript 開發者的十款有用的工具JavaScript
- CSS hackCSS
- 福利來啦,送給大家一個小遊戲的原始碼,不要錯過喲遊戲原始碼
- 一份送給Java初學者的指南Java