ES6语法糖

这是之前学ES6做的学习笔记中的一部分，还请辩证看待。想了解更多关于ES6的，感觉阮一峰老师写的《ES6入门》挺详细，还有网上也有很多牛人翻译了很多优质的笔记，可以上简书看看、很多论坛也有资料，如果能读懂ES6英文版的那更好，锻炼了你的英文水平又更精准的学ES6。如果学习React、或者Vue，ES6很重要。‘’q(·^o^·)p‘’

ES6语法糖

一、什么是语法糖？

刚开始听到这个名字的时候，原谅我孤陋寡闻，只知道简写之类的，专业名词真的不懂。然后百度了一下,名字还是蛮新奇的‘^^’`。

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

实际上从面向过程到面向对象也是一种语法糖，C语言可以通过它的指针、类型转换，结构体实现面向对象的编程风格，但是C++更进一步的推广了这种风格，更加易用，不过到了C#把OO的风格发挥得淋漓尽致。OO的编程风格对于面向过程来说是不是一种语法糖呢？如果生硬地照此理解，只有计算机硬件指令才不算语法糖，而其他一切利用编译器、汇编器将代码抽象，和自然语言更相近的手段都算语法糖。

ES6为一些已有的功能提供了非破坏性更新，这类更新中的大部分我们可以理解为语法糖，称之为语法糖，意味着，这类新语法能做的事情其实用ES5也可以做，只是会稍微复杂一些。

二、对象字面量

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

var student = {
    name: 'vita',
    stuID: 12,
}

三、属性的简洁表示法：

ES5中：

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

ES6中

var listeners = [];
function listen(){}
var events = {listeners,listen} //这样就减少了重复的代码

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

四、可计算的属性名

允许使用可计算的属性名，在ES5中可以给对象添加属性名为变量的属性,ES6中，对象字面量可以使用 计算属性名，把任何表达式放在中括号中，表达式的运算结果将会是对应的属性名。 **注意：**简写属性和计算属性名不可同时使用。

方法定义的简写

ES6的对象字面量方法简写允许省略对象方法的function关键子以及方法后面的冒号，例如：

var person = {
    on: function(name,age){
        ....
    }
}

var person= {
    on(name,age){...}
}

五、箭头函数几种简写形式及使用注意事项

1、JS声明的普通函数，一般有函数名，参数，函数体

• 普通匿名函数则没有函数名，但是通常会被赋值给一个

• 变量/属性，有时还会被直接调用：
  var example = function(event){}

• ES6中匿名函数的写法–>箭头函数。箭头函数不需要使用function关键字，其参数和函数体之间以 => 相连接
  var exmaple =(parametrs)=>{}

2、箭头函数与传统明明函数的区别：

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

3、词法作用域

在箭头函数的函数体内使用this， arguments,super等都指向包含箭头函数的上下文，箭头函数本身不产生新的上下文。

注意：箭头函数的作用域不能通过.call 、apply,bind等语法来改变，这使得箭头函数的上下文将永久不变。

六、简写的箭头函数

1、当参数只有一个的时候，可以省略箭头函数参数两侧的括号

  var double = value => {
  return value * 2
}

2、对只有单行表达式且该表达式的值为返回值的箭头函数来说，表征函数体的{}可以省略，return关键字可以省略，会静默返回该单一表达式的值

var double = (value) => value * 2

3、上面两种的合并

var double = value =>value * 2

1、简写箭头函数带来的一些问题

当简写函数返回值为一个对象时，需要用小括号括起你想返回的对象。否则浏览器会把对象的{}解析成箭头函数函数体的开始和结束标记。

//正确的使用形式
var obj = () =>({modular:'es6'})

[1,2,4].map(value =>{number:value}) //没有小括号会把{}当做函数执行体 --> [undefined, undefined, undefined]
[1,2,4].map(value =>({number:value})) //[{number:1},{number:2},{number：4}]

2、该何时使用箭头函数？

ES6不一定比ES5好，是否使用主要看其能否改善代码的可读性和可维护型，箭头函数也并非适用于所有情况。

如果你想完全控制你的函数中的this，使用箭头函数是简是简洁的，采用函数式编程也是如此。

[1,2,3,4]
  .map(value => value * 2)
  .filter(value => value > 2)
  .forEach(value => console.log(value)); 
    //打印
        4
        6
        8

七、几种不同的解构赋值

1、对象解构

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

有一个名有pseudonym的变量，要让它指向character.preudonym，
使用ES5

 var presudonym = character.preudonym

使用ES6

    var {presudonym} =character

1、对象解构花括号内使用逗号可以声明多个变量

var {presudonmy, name} = character

2、也可以混用解构和常规的自定义变量。

    var {presudonmy} = character, two = 2

3、解构允许我们使用别名。只需要在变量名后面加上:即可

var {presudonmy: alias} = character
console.log(alias); //'Batman'

4、解构值可以是对象

var {metadata:{gender}} = character

5、使用解构，可以赋别名，无论单层还是多层解构。这样我们可以通过简洁的方法修改子属性的名称

var {metadata:{gender: characterGender}} = character

6、解构中，如果声明了一个右边对象不存在的属性，会得打undefined

ES5中，未经声明就被调用的值也会得到 undefined

var {t} = character
console.log(t);//undefined

对于多层解构，如果一个属性不存在，然后继续多层解构，那么程序就会抛出异常。好比你调用undefined或者null的属性会出现异常

 var {t { aa}} = character
 //  Exception
 var {message} = null
  // Exception

解构可以添加默认值，如果右侧不存在对应的值，默认值就会生效。默认值可以是数值，字符串，函数，对象，也可以是某一个已经存在的变量

var {boots = {size : 10}} = character; // {size: 10}

转换成ES5是

var _character = character,
_character$boots = _character.boots,
boots = _character$boots === undefined ? { size: 10 } : _character$boots;

7、对象解构同样支持计算书姓名，但是必须添加别名，因为计算属性允许任何类型表达式，不使用别名，浏览器解析时会有问题

var{['boo' + 'ts']: characterBoots} = character
console.log(characterBoots) //true

八、数组解构

1、数组解构使用的是中括号[]

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

2、数组解构允许你跳过不想用到的值，在对应地方留白即可：

var name = ['vt','fr','LL'];
var[firstname,,lastName] = names
console.log(lastName) //"LL"

3、数组解构同样允许你添加默认值

var name = ['vt','fr','LL'];
var[firstname = 'vita',,lastName = 'Lin'] = names
console.log(lastName) //"Lin"

4、使用解构，交换两个变量

var left = 5, right = 7;
[left, right] = [right, left]

九、函数默认参数

1、箭头函数同样支持默认值，注意！！当只有一个参数，给参数添加默认值，参数部分一定要用小括号() 括起来

2、箭头函数可以给任何位置的任何参数添加默认值

function sumOf(a = 1,b = 2,c = 3){
return a+b+c
}
console.log(sumOf(undefined,undefined,4)) // <- 1 + 2+ 4

3、函数参数解构

通过函数参数解构，可以解决JS中存在的一个问题，解决传入的参数只包含一个属性，另外一个会失效的问题

function carFactory({ brand = 'Volkswagen', make = 1999 }) {
  console.log(brand)
  console.log(make)
}
carFactory({ make: 2000 })
// <- 'Volkswagen'
// <- 2000

这样做还存在一定的问题，调用函数时，如果参数为空，即carFactory函数将抛出异常。这种问题可以通过下面的方法来修复

  function carFactory({
    brand = 'Volkswagen',
    make = 1999
  } = {}){
    console.log(brand)
    console.log(make)
  }
  carFactory() 
  // <- 'Volkswagen'
    // <- 2000

上面代码添加了一个空对象作为options的默认值，当函数调用时，如果参数为空，会自动以{}作为参数

4、解构使用示例

当一个函数的返回值为对象或则数组时，使用解构，可以非常简介的获取返回对象中某个属性的值。 比如 下面的例子，函数 getValue()返回了一系列的值，如果我们只想用其中的 x、y,可以这样写，解构帮助我们避免了很多中间变量的使用，提高代码的可读性

  function getValue(){
        return {x: 10, y: 22, z: -1,type:'3d'}
  }
  var {x,y} = getValue()