ES6：什么是语法糖

语法糖

前言：

学习ES6的小伙伴应该都会遇到这个问题：什么是语法糖？ 今天我就遇到了这个问题。查询了其定义后却也只得到了下面这段文字的描述：

语法糖（Syntactic sugar），也译为糖衣语法，是由英国计算机科学家彼得·约翰·兰达（Peter J. Landin）发明的一个术语，指计算机语言中添加的某种语法，这种语法对语言的功能并没有影响，但是更方便程序员使用。通常来说使用语法糖能够增加程序的可读性，从而减少程序代码出错的机会。

然而看了之后知晓其定义了却还不知道什么是语法糖，为此我又去找了好多大神的文章。

总结就是：语法糖是方便程序员写代码的一些语法，如果没有语法糖，也不影响你写代码。

举例说明：

1.ES6中的箭头函数

​ 学习ES6的小伙伴们都不会陌生箭头函数吧？省略了function关键字，形参只有一个时可以省略()，当代码体只有一句时，{}也可以省略，并且自动作为return语句。

//原本定义函数的方式
function (){};
//箭头函数
()=>{}

2.对象字面量

​ 创建对象时，ES5中有些特定时候的属性名=属性值，在ES6中，这种属性名=属性值的情况就可以直接简写。这种简洁的写法可以使我们在不影响语义的前提下，减少重复代码。

//ES5
var name = 'cxk'
var age = 38
var obj = {
    name:name,
    age:age
}
//ES6
var name = 'cxk'
var age = 38
var obj = {
    name,
    age
}

3.解构

把数组和对象的数据，赋值给变量，称为变量的解构赋值。

3.1数组的解构赋值数组是有序的，看位置

let [a,b,c]=[10,20,30];

3.2对象的结构赋值对象是无序的，看键名

let {b,a}={a:10,b:20};

4.类的创建和继承

​ 在ES5中类的创建和继承是很麻烦的一件事，而ES6中却方便了很多：

//ES5代码过于繁琐，直接上ES6代码
//ES6中可以用class和extends关键字
class Person{
    constructor(name,age){
        this.name = name
        this.age = age
    }
    running(){
        console.log(`${this.name} run~`);
    }
    studying(){
        console.log(`${this.name} study~`);
    }
}

class Student extends Person{
    constructor(name,age,no){
        super(name,age)//super方法处理父类继承的参数
        this.no = no
    }
    playing(){
        console.log(`${this.name} play~`);
    }
    running(){
        super.running()//重写running方法
        console.log('let is go');
    }
}

总的来说：ES6中这些简便的写法都可以被称为语法糖。语法糖就是为了方便程序员写代码，减少代码的重复性、提高可读性、提升编写效率的一种语法。