【JS語法糖】常見的幾種JS語法糖

二、JS的語法糖

ES6瘋狂給JS,添加語法糖，最常見的ES6語法糖有以下多個（不停更新）

參考鏈接：https://segmentfault.com/a/1190000010159725

總結如下：

###對象字面量的簡寫屬性和計算的屬性名不可同時使用，原因是簡寫屬性是一種在編譯階段的就會生效的語法糖，而計算的屬性名則在運行時才生效；
主要是針對對象的一些簡寫

　　　　1.K和V，重名時，可以簡寫，為一個，這個簡寫的

　　　　2.使用[XXX]來表示動態的屬性

###箭頭函數本身已經很簡潔，但是還可以進一步簡寫；
　　主要是箭頭函數的細分和簡化。

　　1.按參數的個數，0參，1參，N參等等，可以對小括號進行相應的省略或不省略。

　　2.按語句個數，對大括號，進行省略或者不省略。

###解構也許確實可以理解為變量聲明的一種語法糖，當涉及到多層解構時，其使用非常靈活；

　　結構賦值，針對數組和對象，快速賦值。

　　基於快速賦值，還能達到其他的快速目的。

###學會模板字符串的高級用法--標記模板字符串；

　　使用反引號，包裹字符串，加上${XXX}，減少字符串拼接時的混亂

###let,const聲明的變量同樣存在變量提升，理解TDZ機制

　　這兩個是最基礎的。

###SET，map，symbol

三：ES6之前，也有一些語法糖

　　1.對數據類型（現在是9種類型了，3+6）進行轉化的時候。主要是數字和字符串的互轉。

　　　　a-0或者a*1，把a轉成數字

　　　　a+""，把a轉成字符串

　　2.表達式中使用或且（好些沒人使用！）。--叫短路表達式，懶惰表達式等等，我建議叫表達式的語法糖。　

　　　　邏輯賦值。a=b&&c，a=b||c

　　3.三目運算，這個本身，就是挺快的。使用它來代替ifelse，很香

　　4.flag=!flag （交替變化的時候，可以使用這個，讓flag的true和flase值，來回切換）

　　5.如何快速清空一個數組或者對象？

　　　　通過重新復制。直接讓arry=[], 直接讓obj={}

　　6. vue中，click事件的，三目運算表達。

四、常見的語法糖

1、對象字面量

let sex1 = 'man', sex2 = ‘woman’
let sex = {man,woman}

2、箭頭函數

let fun = function(params){}
//可以縮寫成如下 箭頭函數會改變this的指向
let fun= params =>{}
//當參數有兩個及以上時,如下：
let fun= (params1,params2,,,)=>{}

3、數組解構

let arr = ['a','b','c'];
let {a,b} = arr
console.log(a) // a
//數組解構也允許你跳過你不想用到的值，在對應地方留白即可，舉例如下
let {a,,c} = array
console.log(c)  //c

4、函數默認參數

function  getResponse(a,b=0) {
  //常用於請求數據時，設置默認值 
}

5、拓展運算符

function test() {
  return [...arguments]
}
test('a', 'b', 'c') // ['a','b','c']
//擴展符還可以拼合數組
 let all = ['1',...['2','3'],...['4','5'],'6']   // ["1", "2", "3", "4", "5", "6"]

6、模板字符串

let id = '奮斗中的編程菜鳥'
let blog = '博主id是:${a}' // 博主id是是:奮斗中的編程菜鳥

7、多行字符串

//利用反引號實現多行字符串（雖然回車換行也是同一個字符串）
let poem = `A Pledge
    By heaven,
    I shall love you
    To the end of time!
    Till mountains crumble,
    Streams run dry,
    Thunder rumbles in winter,
    Snow falls in summer,
    And the earth mingles with the sky —
    Not till then will I cease to love you!`

8、拆包表達式

const data = {
      a: 'a',
      b: 'b',
      c: 'c'
}
let {a,c} = data
console.log(c); // c

9、ES6中的類

class helloJs{
// 構造方法
  constructor(options = {}, data = []) { 
        this.name = '奮斗中的編程菜鳥'
        this.data = data
        this.options = options
    }
 // 成員方法
    getName() { 
        return this.name
    }
}

10、模塊化開發

// 新建一個util.js 文件夾
let formatTime = date=>{
    ....
}
let endTime = date=>{
    ....
}

module.exports = {
   formatTime,
   endTime,
}
//可以用import {名稱} from '模塊' 
//然后再同級目錄創建一個js文件 引入 util.js
//import {endTime} from 'util'
//或者全部引入
//import util from 'util'