ECMAScript 6(简称ES6)是于2015年6月正式发布的JavaScript语言的标准,正式名为ECMAScript 2015(ES2015)。它的目标是使得JavaScript语言可以用来编写复杂的大型应用程序。

另外,一些情况下ES6也泛指ES2015及之后的新增特性,虽然之后的版本应当称为ES7、ES8等。

ES6的新语法

声明变量

let声明变量,const声明常量。

使用了letconst后,只能在其所在作用域中访问相关属性。

块级作用域

外层作用域无法读取内层作用域的变量。内层作用域可以定义外层作用域的同名变量。

下面的函数有两个代码块,都声明了变量n,运行后输出5。这表示外层代码块不受内层代码块的影响。

function f1() {
let n = 5;
if (true) {
let n = 10;
console.log(n);
}
console.log(n); // 5
}
f1()

do表达式

本质上,块级作用域是一个语句,将多个操作封装在一起,没有返回值。使得块级作用域可以变为表达式,也就是说可以返回值,办法就是在块级作用域之前加上do,使它变为do表达式,然后就会返回内部最后执行的表达式的值。

let x = do {
let t = f();
t * t + 1;
};

对象赋值简写

当key和value重名时,可以直接简写为一个。

模板字符串

`${}`
//ES6
const name = 'lux'
console.log(`hello ${name}`) //hello lux 此处使用的是反引号

箭头函数

  1. 省略关键字function,花括号{}=>代替了。这种写法更简洁了。
  2. 优点,就是函数体内的this的指向始终是指向定义它所在的对象,而不会指向调用它的对象,我们知道es5中的函数是谁执行它,它就指向谁。
  3. 有些情况下可以省略return关键字。
  4. 自身没有this,继承上下文的this关键字。
// 常规编写 明确的返回值
let func = (x, y) => {return x + y; };
// 支持使用ES6 rest参数(展开运算符)和默认参数语法:
let demoFun = (param1, param2, ...rest) => { statements }

rest参数搭配的变量是一个数组,该变量将多余的参数放入数组中,多余指的是形参列表中没有罗列出来的参数,且 rest 参数之后不能再有其他参数(即只能是最后一个参数)

当函数有且仅有一个参数的时候,是可以省略掉括号的。

当函数返回有且仅有一个表达式的时候可以省略{}return

//  参数name就没有括号
var people = name => 'hello' + name
// 但是返回一个对象时,函数体外要加圆括号,不然会被解析为代码段
let demoFun = params => ({foo: bar})

Promise

Promise的构造函数接收一个函数参数,并且传入两个参数:resolvereject,分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数。

function runAsync(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('执行完成');
resolve('随便什么数据');
}, 2000);
});
return p; //返回Promise对象
}
runAsync() //执行runAsunc函数

包装好的函数最后,会return出Promise对象,也就是说,执行这个函数我们得到了一个Promise对象。

runAsync().then(function(data){   //调用函数返回值(Promise对象)的then方法,执行操作完成后的动作。
console.log(data)
})

runAsync()的返回上(Promise对象)直接调用then方法,then接收一个参数,是函数,并且会拿到我们在runAsync中调用resolve时传的的参数。运行这段代码,会在2秒后输出“执行完成”,紧接着输出“随便什么数据”。

Promise在功能上和回调函数类似,而Promise的优势在于,可以在then方法中继续写Promise对象并返回,然后继续调用then来进行回调操作。

参考链接

【VUE】看完这篇文章能够了解es6特性和vue基础 - 嗨Sirius - 博客园 (cnblogs.com)

Vue进阶(二十一):ES6 知识储备 - 掘金 (juejin.cn)

JavaScript进阶(二十):精解 ES6 Promise 用法_javascript promise使用-CSDN博客