欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

javascript代碼簡(jiǎn)寫(xiě)的幾種常用方式匯總

 更新時(shí)間：2021年08月22日 11:31:14   作者：_紅領(lǐng)巾  
任何一種編程語(yǔ)言的簡(jiǎn)寫(xiě)小技巧都是為了幫助你寫(xiě)出更簡(jiǎn)潔、更完善的代碼,讓你用更少的編碼實(shí)現(xiàn)你的需求,這篇文章主要給大家介紹了關(guān)于javascript代碼簡(jiǎn)寫(xiě)的幾種常用方式,需要的朋友可以參考下

前言

本文主要介紹一些工作中常用的JavaScript編碼技巧。非常有用，建議大家看完趕快實(shí)踐，keep it in your mind!

首先推薦一個(gè)vscode的插件，Quokka.js,調(diào)試代碼神器，插件的作用是：立即執(zhí)行你鍵入的JavaScript代碼或者TypeScript代碼

箭頭函數(shù)

簡(jiǎn)寫(xiě)規(guī)則：

  1. 只有一個(gè)參數(shù)，小括號(hào)可以不寫(xiě)
  2. 返回值只有一個(gè)，花括號(hào)和return可以不寫(xiě)
let arr=[1,2,3]

arr.filter((item)=>{
    return item >1
})

//只有一個(gè)參數(shù)，小括號(hào)可以不寫(xiě)
arr.filter(item=>{
    return item>1
})
//返回值只有一個(gè)，花括號(hào)和return可以不寫(xiě)
arr.filter(item=>item>1)

掌握數(shù)組常見(jiàn)操作方法

掌握數(shù)組常見(jiàn)方法，記在腦子里，不要寫(xiě)的時(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)寫(xiě)

對(duì)象的key和value同名，可以只寫(xiě)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ù)類(lèi)型轉(zhuǎn)換的方法

寫(xiě)JS的人一般沒(méi)有類(lèi)型觀念，對(duì)于Number和String的區(qū)分不太敏感，其實(shí)JS的數(shù)據(jù)類(lèi)型還是挺重要的，不注意的話就有可能會(huì)出錯(cuò)，所以希望大家記住下面的方法

Number和String類(lèi)型互轉(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)寫(xiě)方式的文章就介紹到這了,更多相關(guān)javascript代碼簡(jiǎn)寫(xiě)方式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論