码迷,mamicode.com
首页 > 其他好文 > 详细

es6常用特性

时间:2019-09-02 18:58:04      阅读:77      评论:0      收藏:0      [点我收藏+]

标签:list   回调   方式   不同   wait   ||   deluser   var   data   

一、箭头函数(Arrow Functions)

1、定义

a => a+b;//也可以写成 (a,b) => a+b

这相当于:

 function (a,b) {
        return a+b
    };

箭头函数实际上就是用‘=>’代替了关键字function。

2、this指向问题

箭头函数与普通函数this指向是不同的,普通函数中this指向的就是使用这个函数的对象,而箭头函数this指向的就是定义时所在的window对象。

 //普通函数中this指的就是当前使用它的对象,也就是P对象
    var P={
        name:‘p‘,
        f:function () {
            console.log(this) //{name: "p", f: ƒ}
        }

    };

//在普通函数中定义箭头函数,this指向的仍旧是P对象
  var P={
    name:‘p‘,
    f:function () {
      window.addEventListener(‘click‘,() =>{
        console.log(this)  //this指的是P对象 {name: "p", f: ƒ}
      })
    }

  };

    p=P.f();

箭头函数指向的就是当前所在的window对象。

  var P={
    name:‘p‘,
    f:()=> {
      console.log(this)//Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
    }

  };

  p=P.f()

3、对象的单体模式

上面可以看出,箭头函数比普通函数方便,但是存在的问题就是thsi指向的问题,那么如何将它的this指向与普通函数一样呢?可以使用对象的单体模式。

//对象的单体模式
    var P={
        name:‘p‘,
        f(){
            console.log(this)//{name: "p", f: ƒ},this指向的就是P对象
        }

    };
    p=P.f()

二、async函数

async使异步任务的处理方式变成线性,异步代码变得更容易,更具可读性,比如普通函数:

deluser(context,object){   
  
    axios.get(‘...‘) .then((response) => { // handle success }) .catch((error) => { // handle error }) .finally(() => { // always executed });
}

很明显,这种需要进行回调函数,可读性相对差些。而使用async函数

    async delUser(context, object) {
      
      const res = await axios.delete(`crm/user/${object.userId}`);//返回的结果使用res进行接收

      }
    },

一个异步函数由两部分构成:

(1)以async为前缀

(2)在异步函数内使用await关键字调用异步操作函数,注意await的位置

异步函数遇到await关键字暂停,直到执行axios请求后再执行下面的操作。

三、解构

1、定义

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。

以前,为变量赋值,只能直接指定值。

let a = 1;
let b = 2;

现在,可以这样使用:

let [a, b,] = [1, 2 ];

2、嵌套对象解构

这个可以对后台返回的数据进行结构,包括嵌套对象以及数组:

response = {"data": ser.data, 
    "meta": {
                "message": "用户创建成功", 
"code": 2000}}        

对返回的data进行解构:

 const {data, meta: {message, code}} = res.data;

四、默认和剩余参数

1、默认参数

 之前使用默认值创建参数:

function f1(x,y){

     var x = x || 10
     var y = y || 10
  
     return x * y

}

在es6中支持这种方式创建默认值参数:

function f1(x=10,y=10){

     return x * y

}

2、剩余参数

ES6中支持将函数参数转换成数组的形式。

  function f2(...theNumbers){
    
// get the sum of the array elements
    console.log(theNumbers)  //[1,2,3,4]
    
    return theNumbers

  }
  
  f2(1,2,3,4,)

  通过在命名参数前添加3个点 ...,在该位置和之后输入到函数中的参数将自动转换为数组。Rest parameters 只能应用于函数的参数的第一个子集,像如下情形,它只会将参数从第二个开始转换为数组:

  function f2(x, ...theNumbers){

  // get the sum of the array elements
    console.log(x) //1
      console.log(theNumbers)  //[2,3,4]

      return theNumbers

    }

    f2(1,2,3,4,)

五、模板字符串

传统的 JavaScript 语言,输出模板通常是这样写的:

<script>

  var a =1,b=2;

  var str="num is" + a +","+"num is" + b; //num is1,num is2
  console.log(str)

</script>

这种方式很明显繁琐,es6提供了模板字符串的功能:

<script>
    var a =1,b=2;
    var str=`num is ${a},num is ${b}`; //使用${}渲染值,`是键盘左上角esc键下边的键
    console.log(str)

</script>

 

es6常用特性

标签:list   回调   方式   不同   wait   ||   deluser   var   data   

原文地址:https://www.cnblogs.com/shenjianping/p/11446013.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!