拥抱ES6(三)

箭头函数

es6新增的箭头函数是原生function的一种简化，可用来声明函数。

与function的不同点

• 箭头函数的没有自己的this,它依赖外部环境的this,可用于改变this指向。
• 箭头函数使用前必须先定义，且没有arguments参数,但可使用rest参数。
• 不能通过new关键字来调用
• 不能当做Generator函数,不能使用yield关键字

无参情况

//这种大家应该不陌生，传统写法,
var say=function(){
    console.log("你好")
}
say(); //你好
//箭头函数形式
var say=()=>{console.log("你好")}
say(); //你好

---

单参

var say=(name)=>{console.log(name)}
say("冷月心");//冷月心

---

双参

var say=(name,age)=>{console.log(name+","+age)}
say("冷月心",18);//冷月心，18

---

rest

var say=(...rest)=>{console.log(rest[0],rest[1])}
say("冷月心",18);//冷月心 18

---

返回值

• 这两种写法都可以

var add1=(a,b)=>{return a+b;}
var add2=(a,b)=>a+b;
console.log(add1(1,2));//3
console.log(add2(1,2));//3

---

模板字符串

这是一个超级好用的功能，可以简化字符串的拼接。当需要拼接的字符串很多的时候，模板字符串优势明显。

var str="姓名";
var name="高芊";
//old

console.log(str+":"+name)//姓名:高芊

//new 
console.log(`${str}:${name}`)//姓名:高芊

async,await

async,await语法是解决异步问题的终极方案，它在写法上符合开发者的同步编程思维。值得注意的是，await和try catch异常捕获需要写在async标识的函数内部。

import axios from 'axios'

async function getUserInfo(){

 try{

    var res=await axios.post(url);//注意这里 不是then语法了
    console.log(res.data);

 }catch(err){

  console.log(err)
 }
}

getUserInfo()

promise

在异步函数中，return是没用的，只能用回调函数获取异步运行的结果。promise同样是异步问题的解决方案，可以优雅的处理回调嵌套问题。but,相比async await ，promise的链式调用太长也会显得不够优雅。

// 创建一个Promise
var promise = new Promise((resolve, reject) => {
    // do something here ...
    if (success) {
        resolve(value); // 成功时候的处理逻辑
    } else {
        reject(error); //  失败时候的处理逻辑
    }
});

// then调用接受成功和失败两个回调函数
  promise.then(value=> {
      // 成功的回调
  }, error=> {
      //失败的回调
  })
})


// 也可以统一用catch捕获
  promise.then(value=> {
      // 成功的回调
  }).catch(err=>{

   //失败的回调

})

Map

ES6 引入了Map和Set集合，二者大体相似，但Set不存储重复的值。还引入了WeekMap和WeekSet集合，属于弱引用，无效引用会自动被垃圾回收,这里主要介绍Map。

// Map结构
var map = new Map();
var x = { id: 1 },
    y = { id: 2 };

// 设置map数据
map.set(x,'bar');
map.set(y,'foo');

// 获取map数据
console.log(map.get(x));  // bar
console.log(map.get(y));  // foo

// 获取map结构的长度
console.log(map.size);    // 2

// 根据指定键删除map数据
map.delete(x);

// 根据指定的键判断是否存在于map结构中
console.log(map.has(x));  // false

// 遍历map键
for(var key of map.keys()) {
  console.log(key);       // {id:2}
}

// 遍历map值
for(var value of map.values()) {
  console.log(value);     // foo
}

// 遍历map键值对
for(var item of map.entries()) {
  console.log(item[0]);   // y
  console.log(item[1]);   // {id:2}
}

简洁语法

属性名简写

//old 
var name='Tom'
var obj={
    name:name
};
console.log(obj.name)//Tom
//new 
var name='Tom'
var obj={
    name//注意这里
};
console.log(obj.name)//Tom

方法简写

//old
var obj={
    say:function(){
        console.log('hello')
    }
};
obj.say();//hello

//new 
var obj={
    say(){
        console.log('hello')
    }
};
obj.say();//hello

计算属性

//old
var user={
    name:'Tom'
}

//new 

var key='name'
var user={
  [key]:'Tom'
}