javascript代碼簡寫的幾種常用方式匯總
前言
本文主要介紹一些工作中常用的JavaScript編碼技巧。非常有用,建議大家看完趕快實踐,keep it in your mind!
首先推薦一個vscode的插件,Quokka.js,調(diào)試代碼神器,插件的作用是:立即執(zhí)行你鍵入的JavaScript代碼或者TypeScript代碼
箭頭函數(shù)
簡寫規(guī)則:
- 只有一個參數(shù),小括號可以不寫
- 返回值只有一個,花括號和return可以不寫
let arr=[1,2,3] arr.filter((item)=>{ return item >1 }) //只有一個參數(shù),小括號可以不寫 arr.filter(item=>{ return item>1 }) //返回值只有一個,花括號和return可以不寫 arr.filter(item=>item>1)
掌握數(shù)組常見操作方法
掌握數(shù)組常見方法,記在腦子里,不要寫的時候再去看API了,這樣可以有效提升編碼效率,畢竟這些方法每天都在用
- every
- some
- filter
- map
- forEach
- find
- findIndex
- reduce
- includes
掌握字符串常用操作函數(shù)
- trim
- startsWidth
- includes
let str="Hello JueJue " //包含子串 console.log(str.includes("Hello")) // 以子串開頭 console.log(str.startsWith("Hello")) // 去除收尾空格 console.log(str.trim())
延展運算符
很有用的喲,下面介紹兩個使用場景:
對數(shù)組進(jìn)行解構(gòu)
//數(shù)組去重 function removeRepeat(arr){ return [...new Set(arr)] } //數(shù)組求最大值 Math.max(...arr) Math.min(...arr)
對對象進(jìn)行解構(gòu)
//react 用于一次傳入多個屬性 let props={name:'Ben',age:10,sex:0} const greeting=<Greeting {...props} /> //組合對象 這種情況可以使用Object.assign代替 let defaultParams={ pageSize:1, pageNumber:10, sort:1 } let reqParams={ ...defaultParams, phone:'15196255885' }
對象簡寫
對象的key和value同名,可以只寫key,可以少些很多代碼喲
let id,age,sex let person={ id, age, sex }
解構(gòu)賦值
- 用于函數(shù)參數(shù)
- 用于對對象進(jìn)行解構(gòu)
可以少些一些代碼喲
class Spirit{ constructor({x=0,y=0,w=10,h=10,rotate=0}){//函數(shù)參數(shù)結(jié)構(gòu) this.x=x this.y=y this.w=w this.h=h this.rotate=rotate } draw(){ const {x,y,w,h,rotate}=this console.log("draw -> x,y,w,h,rotate", x,y,w,h,rotate) } }
掌握數(shù)據(jù)類型轉(zhuǎn)換的方法
寫JS的人一般沒有類型觀念,對于Number和String的區(qū)分不太敏感,其實JS的數(shù)據(jù)類型還是挺重要的,不注意的話就有可能會出錯,所以希望大家記住下面的方法
Number和String類型互轉(zhuǎn)
我一般喜歡使用構(gòu)造函數(shù)轉(zhuǎn)
Number('001') //-> 1 String('1') // ->1
保留n位小數(shù)
function cutNumber(value,n=2){//默認(rèn)保留2位小數(shù) return Number(value).toFixed(n) }
總結(jié)
到此這篇關(guān)于javascript代碼簡寫方式的文章就介紹到這了,更多相關(guān)javascript代碼簡寫方式內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript 彈出的窗口返回值給父窗口具體實現(xiàn)
這篇文章主要介紹了javascript 彈出的窗口返回值給父窗口具體實現(xiàn),有需要的朋友可以參考一下2013-11-11簡易版本JSON.stringify的實現(xiàn)及其六大特性詳解
最近做項目發(fā)現(xiàn)JSON.stringify()使用場景真的挺多,我們都知道JSON.stringify()的作用是將JavaScript對象轉(zhuǎn)換為JSON字符串,下面這篇文章主要給大家介紹了JSON.stringify的實現(xiàn)及其六大特性的相關(guān)資料,需要的朋友可以參考下2021-10-10js實現(xiàn)類似新浪微博首頁內(nèi)容漸顯效果的方法
這篇文章主要介紹了js實現(xiàn)類似新浪微博首頁內(nèi)容漸顯效果的方法,實例分析了漸顯效果的實現(xiàn)要點與方法,非常具有實用價值,需要的朋友可以參考下2015-04-04javascript實現(xiàn)復(fù)選框超過限制即彈出警告框的方法
這篇文章主要介紹了javascript實現(xiàn)復(fù)選框超過限制即彈出警告框的方法,涉及復(fù)選框及警告框的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02