在es6新特性中,在定义变量的时候统统使用let来代替var就好了,const则很直观,用来定义常量,即无法被更改值的变量。
2. 箭头函数
ES6中新增的箭头操作符=>简化了函数的书写。操作符左边为输入的参数,而右边则是进行的操作以及返回的值,这样的写法可以为我们减少大量的代码,看下面的实例:
let arr = [6, 8, 10, 20, 15, 9];
arr.forEach((item, i) => console.log(item, i));
let newArr = arr.filter((item) => (item<10)); console.log(newArr);
上面代码转为js格式:
var arr = [6, 8, 10, 20, 15, 9];
arr.forEach(function(item, i) {
return console.log(item, i);
});
var newArr = arr.filter(function(item) {
return (item < 10);
});
console.log(newArr);
3.字符串模版
ES6中允许使用反引号 ` 来创建字符串,此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}。看一下实例就会明白了:
let num = Math.random();
console.log(`your num is ${num}`);
4.解构
若一个函数要返回多个值,常规的做法是返回一个对象,将每个值做为这个对象的属性返回。在ES6中,利用解构这一特性,可以直接返回一个数组,然后数组中的值会自动被解析到对应接收该值的变量中。我们来看例子:
function getVal() {
return [1, 2];
var [x,y] = getVal();
console.log('x:'+x+', y:'+y);
5.默认参数
现在可以在定义函数的时候指定参数的默认值了,而不用像以前那样通过逻辑或操作符来达到目的了。
function sayHello(name){
var name=name||'tom';
console.log('Hello '+name);
function sayHello2(name='tom'){
console.log(`Hello ${name}`);
sayHello();
sayHello('jarson');
sayHello2();
sayHello2('jarson');
注意: sayHello2(name='tom')这里的等号,意思是没有传这个参数,则设置默认值,而不是给参数赋值的意思。
6.async和await
async和await是es6新增的js特性。字面意思来理解,async是异步的意思,await是等待的意思,等待异步代码执行完成。它们可以让我们更简单高效的处理异步操作。下面一起来探究async和await吧
async
async是加在函数前面的,用来定义这个函数是异步函数
特性1:自动将常规函数转换成Promise,返回值也是一个Promise对象
特性2:不会阻塞后面代码的执行
可以看到async把函数变成了异步函数,异步函数不影响同步代码的执行
特性3:如果async 函数中有返回一个值 ,当调用该函数时,内部会调用Promise.solve() 方法把它转化成一个promise 对象作为返回。如果函数内部抛出错误呢? 那么就会调用Promise.reject() 返回一个promise 对象
await
await是等待的意思,它后面可以放任何表达式,不过我们更多的是放一个返回promise 对象的表达式
特性1:await 关键字只能放到async 函数里面
特性2:await 放置在Promise调用之前,await 强制后面点代码等待,直到Promise对象resolve,得到resolve的值作为await表达式的运算结果
await的用法则相对简单了许多,他后面需要是一个Promise对象,如果不是则会被转成Promise对象。
只要其中一个如果Promise对象变为reject状态,那么整个async函数都会中断操作。如果状态是resolve,那么他的返回值则会变成then里面的参数