2019-02-22 ES6常用新特性

默认参数

ES5中不能直接为函数的参数指定默认值，只能通过以下方式：

function fn1(a,b,c){
    a = a || 1;
    b = b || 1;
    c = c || 1;
    console.log(a+b+c) //6   当传入的值为0或者false时，直接取到后面的值
}
window.onload = function(){
    fn1(0,3,2) 
}

es6可以直接把默认值放在函数申明里

function fn1(a=1,b=1,c=1){
    console.log(a+b+c) 
}
window.onload = function(){
    fn1(0,3,2) //5  
    fn1(0,3) //4  a=0,b=3,c=1(默认值)
    console.log((function fn2(a=1,b=1,c=1){}).length); //0
    console.log((function fn2(a,b=1,c=1){}).length); //1
    console.log((function fn2(a,b,c=1){}).length); //2
}

• 函数的参数在指定默认值之后，函数的length 属性会失真，返回的length 值，是没有指定默认值的参数的个数

ES6语法的好处：
1.简洁
2.阅读代码的人可以看出哪些参数是可以省略的，不用查看函数体或文档
3.有利于将来的代码优化，即使未来的版本即使拿掉这个参数，以前的代码也可以运行
还有参数变量是默认声明的，不能在函数体内部再进行声明。

模板对象

在ES5，我们可以这样组合一个字符串：

var name = 'Your name is ' + first + ' ' + last + '.';
var url = 'http://localhost:3000/api/messages/' + id;

ES6中，我们可以使用新的语法$ {name}，并把它放在反引号里

var name = `Your name is ${first} ${last}. `;
var url = `http://localhost:3000/api/messages/${id}`;

多行字符串

在ES5中，我们不得不使用以下方法来表示多行字符串：

var oUl = document.createElement('ul');
document.body.appendChild(oUl)；
var html =' ';
html += '<li>111哈哈哈哈哈哈哈哈</li>';
html += '<li>222哈哈哈哈哈哈哈哈</li>';
html += '<li>333哈哈哈哈哈哈哈哈</li>';
html += '<li>444哈哈哈哈哈哈哈哈</li>';
oUl.innerHTML = html;                 

ES6中，仅仅用反引号就可以解决了：

var html =`<li>111哈哈哈哈哈哈哈哈</li>
           <li>222哈哈哈哈哈哈哈哈</li>
           <li>333哈哈哈哈哈哈哈哈</li>
           <li>444哈哈哈哈哈哈哈哈</li>`    

块作用域和构造let和const

详见 https://www.jianshu.com/p/7aea6ca4406a

箭头函数

• 可以使用“箭头”（=>）定义函数

用法对比

• 一个参数

//es5
var fn1 = function(a){
    return a
}
console.log(fn1(2)) //2

//es6
var fn1 = a =>a
console.log(fn1(2)) //2

如上所示：a表示函数参数，=>表示函数体，return可以省略，后面的a表示要返回的内容

• 没有参数，需要在箭头前加上小括号

//es5
var fn1 = function(){
   let a = 1
    return a
}
console.log(fn1()) //1

//es6
var fn1 = () =>{
   let a = 1
    return a
}
console.log(fn1()) //1

• 多个参数

//es5
var sum = function(a,b){
    return (a+b)
}
console.log(sum(2,3)) //5

//es6
var sum1 = (a,b) =>{ let c=a+b; let d=a-b; return c+d }
console.log(sum(2,3)) //5

多个参数需要用到小括号()，参数间逗号间隔，函数体内多条语句用块语句{}，块语句的箭头函数不会自动返回值，要用return返回

var userInfo = (name = ' 张三 ', age = 18  , phone = 13965210123 , address = ' 北京市朝阳区 ' )=>{
    return (
      name : name,
      age : age,
      phone : phone,
      address : address,
    )
}
console.log(userInfo()) // name: " 张三 "  age:  18  phone: 13965210123  address: " 北京市朝阳区 " 
console.log(userInfo(false))//name : false  age:  18  phone: 13965210123  address: " 北京市朝阳区 "  
//传入false也生效

返回对象时需要用小括号包起来，因为大括号被占用解释为代码块了

• 事件触发时执行的函数。

document.addEventListener('click', ev => {
    console.log(ev)
})

• 注意点
  1、this指向，指向的是定义时所在的对象，而不是使用时所在的对象。
  在箭头函数中 this 指向是固定的
  https://blog.csdn.net/cataclysm2012/article/details/80350403

Promise 构造函数

• 方法：.then() .catch() .all()等
• 参数：resolve 方法和 reject 方法
• 状态（一旦状态改变，就不会再变，任何时候都可以得到这个结果）
  pending(进行中) -> resolved(已完成)
  pending -> rejected(已失败)
  https://www.cnblogs.com/whybxy/p/7645578.html

参考文档：http://web.jobbole.com/86984/
待续....