【JS语法糖】常见的几种JS语法糖

一、语法糖含义

语法糖（Syntactic sugar），也译为糖衣语法

指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，在不改变其所在位置的语法结构前提下但是更方便程序员使用。

通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。

“语法糖”这个词绝非贬义词，它可以给我们带来方便，是一种便捷的写法，编译器会帮我们做转换；而且可以提高开发编码的效率，在性能上也不会带来损失。

 

二、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'