javascript代碼簡(jiǎn)寫的幾種常用方式匯總
前言
本文主要介紹一些工作中常用的JavaScript編碼技巧。非常有用，建議大家看完趕快實(shí)踐，keep it in your mind!
首先推薦一個(gè)vscode的插件，Quokka.js,調(diào)試代碼神器，插件的作用是：立即執(zhí)行你鍵入的JavaScript代碼或者TypeScript代碼
箭頭函數(shù)
簡(jiǎn)寫規(guī)則：
- 只有一個(gè)參數(shù)，小括號(hào)可以不寫
- 返回值只有一個(gè)，花括號(hào)和return可以不寫
let arr=[1,2,3]
arr.filter((item)=>{
return item >1
})
//只有一個(gè)參數(shù)，小括號(hào)可以不寫
arr.filter(item=>{
return item>1
})
//返回值只有一個(gè)，花括號(hào)和return可以不寫
arr.filter(item=>item>1)
掌握數(shù)組常見(jiàn)操作方法
掌握數(shù)組常見(jiàn)方法，記在腦子里，不要寫的時(shí)候再去看API了，這樣可以有效提升編碼效率，畢竟這些方法每天都在用
- every
- some
- filter
- map
- forEach
- find
- findIndex
- reduce
- includes
掌握字符串常用操作函數(shù)
- trim
- startsWidth
- includes
let str="Hello JueJue "
//包含子串
console.log(str.includes("Hello"))
// 以子串開(kāi)頭
console.log(str.startsWith("Hello"))
// 去除收尾空格
console.log(str.trim())
延展運(yùn)算符
很有用的喲，下面介紹兩個(gè)使用場(chǎng)景：
對(duì)數(shù)組進(jìn)行解構(gòu)
//數(shù)組去重
function removeRepeat(arr){
return [...new Set(arr)]
}
//數(shù)組求最大值
Math.max(...arr)
Math.min(...arr)
對(duì)對(duì)象進(jìn)行解構(gòu)
//react 用于一次傳入多個(gè)屬性
let props={name:'Ben',age:10,sex:0}
const greeting=<Greeting {...props} />
//組合對(duì)象 這種情況可以使用Object.assign代替
let defaultParams={
pageSize:1,
pageNumber:10,
sort:1
}
let reqParams={
...defaultParams,
phone:'15196255885'
}
對(duì)象簡(jiǎn)寫
對(duì)象的key和value同名，可以只寫key,可以少些很多代碼喲
let id,age,sex
let person={
id,
age,
sex
}
解構(gòu)賦值
- 用于函數(shù)參數(shù)
- 用于對(duì)對(duì)象進(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的人一般沒(méi)有類型觀念，對(duì)于Number和String的區(qū)分不太敏感，其實(shí)JS的數(shù)據(jù)類型還是挺重要的，不注意的話就有可能會(huì)出錯(cuò)，所以希望大家記住下面的方法
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代碼簡(jiǎn)寫方式的文章就介紹到這了,更多相關(guān)javascript代碼簡(jiǎn)寫方式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- JavaScript中自定義swiper組件詳解
- JavaScript中箭頭函數(shù)與普通函數(shù)的區(qū)別詳解
- 用JavaScript實(shí)現(xiàn)輪播圖效果
- javascript實(shí)現(xiàn)點(diǎn)擊按鈕切換圖片
- JavaScript判斷是否為數(shù)組的各種方法匯總
- JavaScript實(shí)現(xiàn)煙花特效(面向?qū)ο?
- JavaScript Canvas實(shí)現(xiàn)井字棋游戲
- 詳細(xì)談?wù)凧avaScript中循環(huán)之間的差異
- 13個(gè)JavaScript 一行程序,讓你看起來(lái)就是個(gè)專家
相關(guān)文章
這篇文章主要介紹了微信頭像地址失效踩坑記附帶解決方案，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
JS跨域解決方案之使用CORS實(shí)現(xiàn)跨域
正常使用AJAX會(huì)需要正?？紤]跨域問(wèn)題，所以偉大的程序員們又折騰出了一系列跨域問(wèn)題的解決方案，如JSONP、flash、ifame、xhr2等等。本文給大家介紹JS跨域解決方案之使用CORS實(shí)現(xiàn)跨域，感興趣的朋友參考下吧2016-04-04
echarts餅圖扇區(qū)添加點(diǎn)擊事件的實(shí)例
下面小編就為大家?guī)?lái)一篇echarts餅圖扇區(qū)添加點(diǎn)擊事件的實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
指定區(qū)域的圖片自動(dòng)按比例縮小的js代碼（防止頁(yè)面被圖片撐破）
有時(shí)候我們更新的內(nèi)容，有很多的大圖片，就會(huì)導(dǎo)致頁(yè)面變形或看不到全圖。一般情況我們用css的max-width控制，但有些瀏覽器不支持，我們也可以用js做個(gè)補(bǔ)充2014-02-02
這篇文章主要介紹了Bootstrap Table 刪除和批量刪除的相關(guān)資料,需要的朋友可以參考下2017-09-09
javascript中的void運(yùn)算符語(yǔ)法及使用介紹
void是javascript中的一個(gè)操作符，void會(huì)計(jì)算表達(dá)式的值，但是會(huì)丟棄表達(dá)式的返回值接下來(lái)將詳細(xì)介紹下，感興趣的你可以參考下或許對(duì)你有所幫助2013-03-03
bootstrap table實(shí)現(xiàn)單擊單元格可編輯功能
這篇文章主要為大家詳細(xì)介紹了bootstrap table實(shí)現(xiàn)單擊單元格可編輯功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
from 表單提交返回值用post或者是get方法實(shí)現(xiàn)
from 表單提交的返回值可以用jquery的post或者是get方法去實(shí)現(xiàn)，具體如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-08-08
BootStrap 下拉菜單點(diǎn)擊之后不會(huì)出現(xiàn)下拉菜單(下拉菜單不彈出)的解決方案
最近學(xué)到Bootstrap下拉菜單，學(xué)懂了教程內(nèi)容之后自己敲一個(gè)點(diǎn)擊按鈕底下彈出下拉菜單的小demo，寫完代碼發(fā)現(xiàn)運(yùn)行之后點(diǎn)擊按鈕沒(méi)反應(yīng)，下拉菜單彈不出來(lái)，下面給大家分享下解決方案2016-12-12
淺談js圖片前端預(yù)覽之filereader和window.URL.createObjectURL
下面小編就為大家?guī)?lái)一篇淺談js圖片前端預(yù)覽之filereader和window.URL.createObjectURL。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06