# ES6 学习

# ES6 模块化

# 什么是ES6模块化

在ES6模块化规范诞生前,JavaScript社区已经尝试并提出AMD（浏览器端）、CMD（浏览器端）、CommonJS（服务器端）等模块化规范
但是存在一定的差异性和局限性、并不是浏览器与服务器通用的模块化标准，增加了学习难度和开发成本
大一统的ES6模块化规范诞生

# 什么是ES6模块化规范

每个js文件都是一个独立的模块
导入其它模块成员使用import关键字
向外共享模块成员使用export关键字

# ES6模块化的基本语法

默认导出与默认导入
按需导出与按需导入
直接导入并执行模块中代码

# 1. 默认导出与默认导入

默认导出语法export default 默认导出的成员
默认导入语法 import 接收名称 from '模块标识符'
注意： 每个导出模块只允许使用唯一的一次export default

// xxx.js 导出文件
let n1 = 20
let a = "xxx"
function name() {
  console.log("name");
}
export default {
  n1,
  name
}
// 注意 a没有导出

// xxx.js 导入文件
import test from './test.js'
console.log("测试导入的js文件:", test);

// 用 node xxx.js 运行
// 输出的结果是：（只有导出的内容 a不包括）
测试导入的js文件: { n1: 20, name: [Function: name] }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# 2. 按需导出与导入

导出 export
导入 import { xxx } from '模块标识符'
注意：

每个模块可以使用多次按需导出
按需导入的成员名称必须和按需导出的名称保持一致
按需导入时，可以使用as关键字进行重命名
按需导入可以和默认导入一起使用

// xxx.js 导出文件
export let a = 'xxx'
export let m = 10
export function show() {}

// 按需导入可以和默认导入一起使用
export default {
  m
}

// xxx.js 导入文件
import { a as str1, show } from './anxudaoruE.js'

import test from './anxudaoruE.js'

console.log('导入的:', str1)
// 输出的结果是：
导入的: xxx { m: 10 }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 3. 直接导入并执行模块中代码

// xxx.js文件
for (let index = 0; index < 5; index++) {
  console.log(index)
}

// xxx.js 导入的文件
import './daima.js'

// 结果 就是直接允许导入文件的代码
0 1 2 3 4

1
2
3
4
5
6
7
8
9
10

# Promise

为了解决回调地狱的问题，ES6中新增了Promise的概念

# Promise 基本概念

Promise 是一个构造函数

创建Promise实例： const p = new Promise()
new 出来的Promise实例对象，代表一个异步操作

← javaScript Web APIs 使用记录 →