es6常用特性

一、箭头函数（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>

猜你喜欢