实用的几个JS新特性(es 2016)

在Chrome 55下测试,可用。

1.箭头函数(arrow function)

以前写的匿名函数是这样的 function(){},

现在可以简单写成这样()=>{}

如果直接return,没有复杂的过程,甚至可以写成 x=>x+1,实际上相当于 

function (x){
  return x+1
}

箭头函数有一个特点,就是this无法更改,箭头函数的this就是当前上下文的this不会变,比如以前setTimeout,需要用外面的this,各种不方便,需要自己去想办法改变this,现在不用了,用箭头函数,this就是setTimeout的上下文的this。

var a={b:function(){setTimeout(()=>{console.log(this)},100)}}

a.b()  //{b:func}

var a={b:function(){setTimeout(function(){console.log(this)},100)}}

a.b() // window

2.数组的includes,filter

['a','b'].includes('a') // true

['a','b'].includes('c') // false

C#的Linq,查询数据非常方便,现在有了箭头函数,JS也能看起来有点linq的影子了,比如下面这个例子

var a = [1,2,3,4,5,6,7,8]
var b = a.filter(s=>s>5)
console.log(b)  //[6,7,8]

3.幂运算的简化写法

Math.pow(x,y)可以简写成 x**y

Math.pow(3,3) // 27

3**3 //27

4.async和await可以试用了(从chrome 55开始)

async/await是用来取代设计糟糕,晦涩难懂的promise的。async/await是更理想的解决回调地狱的方案。async/await使得异步中的异常可以轻松的解决。比promise又显著的减少代码量。

5.字符串格式化(变量带入)

之前的JS,字符串标记仅有单引号和双引号,两者作用并无二致。

现在加入了新的字符串标记  `    ,撇号与单双引号的最大区别是可以在字符串中使用变量和表达式。

例如原来的  "The area of a circle radius 4 is " + Math.PI * 4 * 4 现在就可以写成

`The area of circle radius is ${Math.PI*4*4}`

把表达式写在${}中,即可将运算结果直接放到字符串里。

 2019-01-07 Updated:

6.变量解构赋值(这里只说交换变量这种用法)

ES6加入了变量解构赋值的语法,会非常的方便,比如:

let [a,b,c] = [1,2,3]   //  等价于a=1,b=2,c=3

于是以前的变量交换,就有了新的写法,以前需要用第三个变量来缓存结果,或者使用一种非常诡异且难以理解的N次或运算,现在不需要了,靠着新的解构赋值语法,只要一句话就能完成变量交换

var a=1,b=2;
[a,b] = [b,a];
console.log(a,b);   //  a == 2, b == 1
原文地址:https://www.cnblogs.com/easyc/p/es_2016_new_useful_features.html