补充了一些之前不太注意到的知识点。参考阮一峰的文章:https://es6.ruanyifeng.com/#docs/module
目录
属性表达式
let propKey = 'foo';
let obj = {
[propKey] : true,
["a" + "bc"] : 123,
}
console.log(obj); //{foo : true , abc : 123}
console.log(obj.foo); //true
console.log(obj['foo']) //true
console.log(obj[propKey]) //true
方法简写
const obj = {
method(){
return "Hello!";
}
}
console.log(obj.method()); //Hello
//等同于
const obj = {
method : function(){
return "Hello!"
}
}
跨模块常量
const声明的常量只在当前代码块有效。如果想设置跨模块的常量(即跨多个文件),或者说一个值要被多个模块共享,可以采用下面的写法:
import()函数和import命令不同
import()函数类似于require(),动态加载,运行时加载,也就是说,什么时候运行到这一句,就会加载指定的模块。import()返回一个 Promise 对象。
===》运用:vue路由的路由懒加载,const course = () => import(/* webpackChunkName: "academy" */ "@/views/academy/course");
import命令和export命令都是编译时加载,ES6 模块的设计思想是尽量的静态化,使得编译时就能确定模块的依赖关系,以及输入和输出的变量。效率高。
es6模块之中,顶层的this关键字返回undefined,而不是指向window。也就是说,在模块顶层使用this关键字,是无意义的。
import()的一些适用场合
(1)按需加载。
import()可以在需要的时候,再加载某个模块。
button.addEventListener('click', event => {
import('./dialogBox.js')
.then(dialogBox => {
dialogBox.open();
})
.catch(error => {
/* Error handling */
})
});
上面代码中,import()方法放在click事件的监听函数之中,只有用户点击了按钮,才会加载这个模块。
(2)条件加载
import()可以放在if代码块,根据不同的情况,加载不同的模块。
if (condition) {
import('moduleA').then(...);
} else {
import('moduleB').then(...);
}
上面代码中,如果满足条件,就加载模块 A,否则加载模块 B。
模块化思想
ES6 将全局方法parseInt()和parseFloat(),移植到Number对象上面,行为完全保持不变。
这样做的目的,是逐步减少全局性方法,使得语言逐步模块化。
Promise
Promise对象在创建之后会立刻执行,因此一般的做法是使用一个函数进行包装,然后return一个promise对象
function betray(){
return new Promise(function(resolve,reject){
...//异步操作
})
}
async
如果在async函数中抛出了错误,则终止错误结果,不会继续向下执行。