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
  • 同一个模块如棵加载多次,只执行一次
相关文章
|
6月前
|
JavaScript 前端开发 开发者
ES6的常用新特性17条
ES6,也称为ECMAScript 2015,是JavaScript语言的一个重大更新,它引入了许多新的语法特性。以下是ES6的一些主要语法
|
2天前
|
前端开发
ES6 中常用的新特性
ES6 中常用的新特性
|
3月前
|
JavaScript 前端开发
ES6新特性(一)
ES6新特性(一)
|
3月前
|
JavaScript 前端开发
ES6新特性(二)
ES6新特性(二)
|
存储 JavaScript 前端开发
ES6新特性
ES6新增特性详细内容
|
JavaScript 前端开发 网络架构
关于ES6新特性的总结 1
关于ES6新特性的总结
53 0
|
6月前
|
前端开发
ES6 部分新特性使用
ES6 部分新特性使用
36 0
|
JavaScript 前端开发 开发者
ES6 新特性
这是每个前端开发者都应该掌握的技能。ES6是JavaScript的一个重要的版本升级,它带来了许多新特性和语法糖,让我们的代码更加简洁高效。无论你是新手还是有经验的开发者,掌握ES6都会让你的编码变得更加愉快和高效。那么,让我们开始吧!
|
前端开发
关于ES6新特性的总结 2
关于ES6新特性的总结
40 0
|
Java
es6中简单常用的新特性
es6中简单常用的新特性
54 0