摘要:交換元素利用數(shù)組解構(gòu)來(lái)實(shí)現(xiàn)值的互換調(diào)試我們經(jīng)常使用來(lái)進(jìn)行調(diào)試,試試也無(wú)妨。提供了完整的環(huán)境,并且支持自定義域名指向,動(dòng)態(tài)計(jì)算資源調(diào)整,可以完成各種應(yīng)用的開發(fā)編譯與部署。
7 Hacks for ES6 DevelopersHack #1 交換元素
利用數(shù)組解構(gòu)來(lái)實(shí)現(xiàn)值的互換
let a = "world", b = "hello" [a, b] = [b, a] console.log(a) // -> hello console.log(b) // -> worldHack #2 調(diào)試
我們經(jīng)常使用console.log()來(lái)進(jìn)行調(diào)試,試試console.table()也無(wú)妨。
const a = 5, b = 6, c = 7 console.log({ a, b, c }); console.table({a, b, c, m: {name: "xixi", age: 27}});Hack #3 單條語(yǔ)句
ES6時(shí)代,操作數(shù)組的語(yǔ)句將會(huì)更加的緊湊
// 尋找數(shù)組中的最大值 const max = (arr) => Math.max(...arr); max([123, 321, 32]) // outputs: 321 // 計(jì)算數(shù)組的總和 const sum = (arr) => arr.reduce((a, b) => (a + b), 0) sum([1, 2, 3, 4]) // output: 10Hack #4 數(shù)組拼接
展開運(yùn)算符可以取代concat的地位了
const one = ["a", "b", "c"] const two = ["d", "e", "f"] const three = ["g", "h", "i"] const result = [...one, ...two, ...three]Hack #5 制作副本
我們可以很容易的實(shí)現(xiàn)數(shù)組和對(duì)象的淺拷貝拷貝
const obj = { ...oldObj } const arr = [ ...oldArr ]
拷貝 = 深拷貝 ? 淺拷貝 ?
好像有些朋友對(duì)這里我說的淺拷貝有些質(zhì)疑,我也能理解大家所說的。下面數(shù)組為例:
// 數(shù)組元素為簡(jiǎn)單數(shù)據(jù)類型非引用類型 const arr = [1, 2, 3, 4]; const newArr = [...arr];
// 數(shù)組元素為引用類型 const person01 = {name: "name01", age: 1}; const person02 = {name: "name01", age: 2}; const person03 = {name: "name03", age: 3}; const arr = [person01, person02, person03]; const newArr = [...arr]; console.log(newArr[0] === person01); // true
第二個(gè) demo 就是我想表達(dá)的淺拷貝,若有不同意見歡迎討論~
Hack #6 命名參數(shù)???解構(gòu)使得函數(shù)聲明和函數(shù)的調(diào)用更加可讀
// 我們嘗嘗使用的寫法 const getStuffNotBad = (id, force, verbose) => { ...do stuff } // 當(dāng)我們調(diào)用函數(shù)時(shí), 明天再看,尼瑪 150是啥,true是啥 getStuffNotBad(150, true, true) // 看完本文你啥都可以忘記, 希望夠記住下面的就可以了 const getStuffAwesome = ({id, name, force, verbose}) => { ...do stuff } // 完美 getStuffAwesome({ id: 150, force: true, verbose: true })Hack #7 Async/Await結(jié)合數(shù)組解構(gòu)
數(shù)組解構(gòu)非常贊!結(jié)合Promise.all和解構(gòu)和await會(huì)使代碼變得更加的簡(jiǎn)潔
const [user, account] = await Promise.all([ fetch("/user"), fetch("/account") ])課程推薦
徹底掌握 JS 異步處理 Promise 和 Async-Await
【開發(fā)環(huán)境推薦】Cloud Studio 是基于瀏覽器的集成式開發(fā)環(huán)境,支持絕大部分編程語(yǔ)言,包括 HTML5、PHP、Python、Java、Ruby、C/C++、.NET 小程序等等,無(wú)需下載安裝程序,一鍵切換開發(fā)環(huán)境。 Cloud Studio提供了完整的 Linux 環(huán)境,并且支持自定義域名指向,動(dòng)態(tài)計(jì)算資源調(diào)整,可以完成各種應(yīng)用的開發(fā)編譯與部署。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/92543.html
摘要:每種編程語(yǔ)言都有一些黑魔法或者說小技巧,也不例外,大部分是借助或者瀏覽器新特性實(shí)現(xiàn)。下面介紹的個(gè)實(shí)用小技巧,相信其中有些你一定用過。當(dāng)然不管語(yǔ)言如何變化,我們總能在編程中總結(jié)一些小技巧來(lái)精簡(jiǎn)代碼。 showImg(https://segmentfault.com/img/remote/1460000018902642); 每種編程語(yǔ)言都有一些黑魔法或者說小技巧,JS也不例外,大部分是借...
摘要:數(shù)組去重?cái)?shù)組和布爾有時(shí)我們需要過濾數(shù)組中值為的值例如你可能不知道這樣的技巧是不是很簡(jiǎn)單只需要傳入一個(gè)函數(shù)即可創(chuàng)建一個(gè)空對(duì)象有時(shí)我們需要?jiǎng)?chuàng)建一個(gè)純凈的對(duì)象不包含什么原型鏈等等一般創(chuàng)建空對(duì)象最直接方式通過字面量但這個(gè)對(duì)象中依然存在屬性來(lái)指向等等 數(shù)組去重 var arr = [1, 2, 3, 3, 4]; console.log(...new Set(arr)) >> [1, 2, 3,...
摘要:數(shù)組去重?cái)?shù)組和布爾有時(shí)我們需要過濾數(shù)組中值為的值例如你可能不知道這樣的技巧是不是很簡(jiǎn)單只需要傳入一個(gè)函數(shù)即可創(chuàng)建一個(gè)空對(duì)象有時(shí)我們需要?jiǎng)?chuàng)建一個(gè)純凈的對(duì)象不包含什么原型鏈等等一般創(chuàng)建空對(duì)象最直接方式通過字面量但這個(gè)對(duì)象中依然存在屬性來(lái)指向等等 數(shù)組去重 var arr = [1, 2, 3, 3, 4]; console.log(...new Set(arr)) >> [1, 2, 3,...
摘要:定義變量常量中新增加了和兩個(gè)命令,用于定義變量,用于定義常量。 定義變量/常量 ES6 中新增加了 let 和 const 兩個(gè)命令,let 用于定義變量,const 用于定義常量。兩個(gè)命令與原有的 var 命令所不同的地方在于,let, const 都是塊級(jí)作用域,其有效范圍僅在代碼塊中,實(shí)例如下: //es5 if(1 == 1){ var b = foo; } conso...
摘要:實(shí)用開發(fā)技巧本文只羅列出在開發(fā)過程中相對(duì)實(shí)用的內(nèi)容,并非一個(gè)高大全的文檔,如果希望查閱詳細(xì)的內(nèi)容,可購(gòu)買阮一峰老師所出版的相關(guān)圖書。 Javascript - ES6 javascript 實(shí)用開發(fā)技巧 本文只羅列出在 ES6 開發(fā)過程中相對(duì)實(shí)用的內(nèi)容,并非一個(gè)高大全的文檔,如果希望查閱詳細(xì)的內(nèi)容,可購(gòu)買阮一峰老師所出版的 ES6 相關(guān)圖書。另外阮一峰老師《ECMAScript 6 入...
閱讀 1487·2021-11-24 11:16
閱讀 2689·2021-07-28 12:32
閱讀 2302·2019-08-30 11:22
閱讀 1440·2019-08-30 11:01
閱讀 595·2019-08-29 16:24
閱讀 3547·2019-08-29 12:52
閱讀 1625·2019-08-29 12:15
閱讀 1332·2019-08-29 11:18