专业的解释

在计算机科学中，语法糖(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,,,)=>{}

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

箭头函数不能被直接命名，不过允许它们赋值给一个变量；
箭头函数不能用做构造函数，你不能对箭头函数使用new关键字；
箭头函数也没有prototype属性；
箭头函数绑定了词法作用域，不会修改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

语法糖是什么？（ES6的一些小笔记）相关推荐

ES6新特性_ES6语法糖_class静态成员---JavaScript_ECMAScript_ES6-ES11新特性工作笔记034
再来看一下class的静态成员可以看到上面是es5的写法,我们写了个Phone这个函数,相当于一个类然后给这个Phone类添加了change这个方法, 然后我们创建了Phone这个实例对象. 然后 ...
JavaScript中的语法糖是什么？
专业的解释在计算机科学中,语法糖(syntactic sugar)是指编程语言中可以更容易的表达一个操作的语法,它可以使程序员更加容易去使用这门语言:操作可以变得更加清晰.方便,或者更加符合程序员的 ...
小哥哥小姐姐，来尝尝 Async 函数这块语法糖
编者注:众所周知,JS 最大的特性就是异步,异步提高了性能但是却给我们编写带来了一定困难,造就了令人发指的回调地狱.为了解决这个问题,一个又一个的解决方案被提出来.今天我们请来了 <JavaSc ...
JavaScript 精选：哪些能提高开发效率的es6 新语法糖
文章目录一 ECMAScript 相关介绍 1 什么是 ECMA 2 什么是 ECMAScript 3 什么是 ECMA-262 4 谁在维护 ECMA-262 5 为什么要学习 ES6 6 ES6 ...
ES6新特性_ES6语法糖class介绍与初体验_就是个语法糖而已---JavaScript_ECMAScript_ES6-ES11新特性工作笔记033
然后我们看es6中的class,es6中引入这个class这个概念,为了让js的写法更加的面向对象,写起来方便好理解一些. 其实就是个语法糖而已,他的这个功能,es5的语法都能实现. . 可以看看e ...
为什么说ES6的class是语法糖?
0. 前言我们带着问题去阅读本文: 为什么说ES6的class是语法糖? class是原型的语法糖吗? 那又是如何使用原型来实现class这一语法糖的呢? 1. 基于Prototype的OOP 先来 ...
知道尤雨溪为什么要放弃 $ 语法糖提案么？
前言最近看到一篇文章: <最新,Vue 中的响应性语法糖已废弃> 本文标题中的 $ 语法糖指的就是上文中的响应式语法糖 (Reactivity Transform),那为什么不写 Rea ...
笔记,前端重点 js,es6,vue2,vue3,小程序...... (记得收藏)
------------vue2 部分面试题--------# (1)防抖:就是将一段时间内连续的多次触发转化为一次触发. (2)节流:减少一段时间内触发的频率区别:两者区别在于函数节流是固定时间做 ...
vue3.0语法糖及ref、reactive、toRef、toRefs的区别
vue3.0语法糖前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家. 1.什么是setup语法糖起初 ...

语法糖是什么？（ES6的一些小笔记）