JavaScript中的 语法糖 是什么？

专业的解释

在计算机科学中，语法糖(syntactic sugar)是指编程语言中可以更容易的表达一个操作的语法，它可以使程序员更加容易去使用这门语言：操作可以变得更加清晰、方便，或者更加符合程序员的编程习惯。

例如，很多编程语言都提供了引用和更新数组的语法；从本质上讲，数组元素的访问即使如下过程：提供一个数组和下标向量，然后调用函数get_array(Array, vector(i, j))。取而代之的是，很多编程语言都提供了如下语法访问数组元素Array[i, j]。同理，更新数组元素可以表达为set_array(Array, vetor(i, j), value)，但是很多编程语言都提供如下语法更新数组元素Array[i, j] := value。

具体来说，语法糖是指语言中的一个构件，当去掉该构件后并不影响语言的功能和表达能力。例如，C语言中的标记a[i]就是*(a+i)的语法糖。

通俗的解释

加了糖就变甜了，但是性质并没有变，即加糖前和加糖后代码功能是一样的。

加糖后更好吃，代码更流畅，理解更自然

写得爽，看着爽，就像吃了糖。效率高，错误少，老公回家早…

简单的说，语法糖就是一种便捷写法。

我们可以把语法糖理解成汉语中的成语，有时候表达一个意思的时候，你用一个成语来解释，是不是清晰明了多了呢？

JavaScript的语法糖

主要是ES6添加的很多语法糖

 

1.箭头函数

ES6 提供了一种写匿名函数的新方法，即箭头函数。箭头函数不需要使用function关键字，其参数和函数体之间以=>相连接：

//原始
let fun = function(params){}

//可以缩写成如下 箭头函数会改变this的指向
let fun = params =>{}

//当参数有两个及以上时,如下：
let fun = (params1,params2,,,)=>{}

箭头函数看起来类似于传统的匿名函数，他们却具有根本性的不同：

1. 箭头函数不能被直接命名，不过允许它们赋值给一个变量；
2. 箭头函数不能用做构造函数，你不能对箭头函数使用new关键字；
3. 箭头函数也没有prototype属性；
4. 箭头函数绑定了词法作用域，不会修改this的指向。

最后一点是箭头函数最大的特点

2.对象字面量

对象字面量是指以{}形式直接表示的对象
如：

var game = {
  name: 'League of legends',
  year: '2010',
  company: 'Riot Company'
}

一个例子

用ES5：

var listeners = []
function listen() {}
var events = {
  listeners: listeners,
  listen: listen
}

ES6则允许我们简写成下面这种形式：

var listeners = []
function listen() {}
var events = { listeners, listen }

使用对象字面量的简洁写法让我们在不影响语义的情况下减少了重复代码。

这是ES6带来的好处之一，它提供了众多更简洁，语义更清晰的语法，让我们的代码的可读性，可维护性大大提升。

 

3.对象解构

为了更好的描述对象解构如何使用，我们先构建下面这样一个对象

// 描述Bruce Wayne的对象
var character = {
  name: 'Bruce',
  pseudonym: 'Batman',
  metadata: {
    age: 34,
    gender: 'male'
  },
  batarang: ['gas pellet', 'bat-mobile control', 'bat-cuffs']
}

假如现有有一个名为 pseudonym 的变量，我们想让其变量值指向character.pseudonym，使用ES5，你往往会按下面这样做：

var pseudonym = character.pseudonym

ES6致力于让我们的代码更简洁，通过ES6我们可以用下面的代码实现一样的功能：

var { pseudonym } = character

4.数组解构

数组解构的语法和对象解构是类似的。区别在于，数组解构我们使用中括号而非花括号，下面的代码中，通过结构，我们在数组coordinates中提出了变量 x,y 。 你不需要使用x = coordinates[0]这样的语法了，数组解构不使用索引值，但却让你的代码更加清晰。

var coordinates = [12, -7]
var [x, y] = coordinates
console.log(x)
// <- 12