es6的新特性使用

简介: 使用命令有: export、import 、export default

使用


命令有: exportimportexport default

文件a.js

export a = 1
export b = 2

相当于

const a = 1;
const b = 2;
export { a, b }

在文件b.js中引入

import { a, b } from './a.js'

引入是重命名

import { a as reA, b as reB } from './a.js' // reA reB是重命名的变量

整体引入:

import * as all from './a.js'
all.a // 1
all.b // 2
// all 相当于{ a, b }

export default默认输出


export default导出的模块在引入时可以自定义命名

export default function() {
...
}

依然用import 引入,但是不用{},且可以自定义变量名

import name from './a.js'
name()

从一个模块导入,然后再导出

// 写法一:
import { a, b } from './a.js'
export { a, b }
// 写法二:
export { a, b } from './a.js'
// 改名导出
export { a as reA, b } from './a.js'
// 整体导出
export * from './a.js'

在浏览器中使用module


将script标签的type设为module即可

<!-- 方法一 -->
<script type="module" src="./a.js"></script>
<!-- 方法二 -->
<script type="module">
import { a } from './a.js'
</script>

其中:

  • type="module"的script内写的代码是在当前作用域,不是在全局。
  • 模块内自动采用严格模式
  • 顶层的this指向undefined
  • 同一个模块如棵加载多次,只执行一次
相关文章
|
1月前
|
JavaScript 前端开发 开发者
ES6的常用新特性17条
ES6,也称为ECMAScript 2015,是JavaScript语言的一个重大更新,它引入了许多新的语法特性。以下是ES6的一些主要语法
|
12天前
|
JavaScript 前端开发 开发者
es6的新特性
es6的新特性
19 7
|
8月前
|
存储 JavaScript 前端开发
ES6新特性
ES6新增特性详细内容
|
8月前
|
JavaScript 前端开发 网络架构
关于ES6新特性的总结 1
关于ES6新特性的总结
30 0
|
4月前
|
前端开发
ES6 部分新特性使用
ES6 部分新特性使用
13 0
|
7月前
|
JavaScript 前端开发 开发者
ES6 新特性
这是每个前端开发者都应该掌握的技能。ES6是JavaScript的一个重要的版本升级,它带来了许多新特性和语法糖,让我们的代码更加简洁高效。无论你是新手还是有经验的开发者,掌握ES6都会让你的编码变得更加愉快和高效。那么,让我们开始吧!
|
8月前
|
前端开发
关于ES6新特性的总结 2
关于ES6新特性的总结
23 0
|
8月前
|
Java
es6中简单常用的新特性
es6中简单常用的新特性
35 0
|
9月前
|
前端开发 JavaScript
es6的8条新特性总结
es6的8条新特性总结
108 0
|
前端开发 JavaScript 网络架构
ES6的新特性
const 和 let let: 声明在代码块内有效的变量。
109 0