目錄

• 前言
• 箭頭函式
  
• 掌握陣列常見操作方法
  
• 延展運算子
  
• 物件簡寫
  
• 解構賦值
• 掌握資料型別轉換的方法
  
• 總結

前言

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

首先推薦一個vscode的外掛，Quokka.,除錯程式碼神器，外掛的作用是：立即執行你鍵入的Script程式碼或者TypeScript程式碼

箭頭函式

簡寫規則：

1. 只有一個引數，小括號可以不寫
2. 返回值只有一個，花括號和return可以不寫

let arr=[1,2,3]

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

//只有一個引數，小括號可以不寫
arr.filter(item=>{
    return item>1
})
//返回值只有一個，花括號和return可以不寫
arr.filter(item=>item>1)

掌握陣列常見操作方法

掌握陣列常見方法，記在腦子裡，不要寫的時候再去看API了，這樣可以有效提升編碼效率，畢竟這些方法每天都在用

• every
• some
• filter
• map
• forEach
• find
• findIndex
• reduce
• includes

掌握字串常用操作函式

• trim
• startsWidth
• includes

let str="Hello JueJue  www.cppcns.com"
//包含子串
consoleqVbLvGdHbz.log(str.includes("Hello"))
// 以子串開頭
console.log(str.startsWith("Hello"))
// 去除收尾空格
console.log(str.trim())

延展運算子

很有用的喲，下面介紹兩個使用場景：

對陣列進行解構

//陣列去重
function removeRepeat(arr){
    return  [...new Set(arr)]
}
//陣列求最大值
Math.max(...arr)
Math.min(...arr)

對物件進行解構

//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,sex
}

解構賦值

• 用於函式引數
• 用於對物件進行解構

可以少些一些程式碼喲

class Spirit{
    constructor({x=0,y=0,w=10,h=10,rotate=0}){//函式引數結構
        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,rotate",x,rotate)
    }
}

掌握資料型別轉換的方法

寫JS的人一般沒有型別觀念，對於Number和String的區分不太敏感，其實JS的資料型別還是挺重要的，不注意的話就有可能會出錯，所以希望大家記住下面的方法

Number和String型別互轉

我一般喜歡使用構造函式轉

Number('001')  //-> 1
String('1')   // ->1

保留n位小數

function cutNumber(value,n=2){//預設保留2位小數
    return Number(value).toFixed(n)
}

總結

到此這篇關於javascript程式碼簡寫方式的文章就介紹到這了,更多相關javascript程式碼簡寫方式內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！