常学常新之es6

补充了一些之前不太注意到的知识点。参考阮一峰的文章：https://es6.ruanyifeng.com/#docs/module

目录

属性表达式

跨模块常量

import()函数和import命令不同

import()的一些适用场合

模块化思想

Promise

async

---

属性表达式

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函数中抛出了错误，则终止错误结果，不会继续向下执行。