ES6 import、export的写法
ES6 写法 import EXPORT
2023-09-14 09:00:17 时间
大家都知道来到ES6版本,ES就原生支持JS Module的概念。
import和export的写有哪些呢,我们看看
import:
import from 和 var 变量一样,也会存在提升,这意味着可以在 import 之前用 import 进来的东西
import './xxx.js'; // 只会执行import的js文件,但是不会引入任何值 import a, {b, c} from './xxx.js'; // 等价于 import {default as a, b, c} from './xxx.js'; import * as xxx from './xxx.js'; // 作为一个整体加载,结果为{default: xxx, b: xxx, c: xxx}
export:
let a = 123; function addA() { a++; } export default a; // 等价于 export default 123,执行addA不会影响default export {a as default}; // 想执行addA影响到default,只能用as把default作为a的别称 export {a, addA}; // 等价于 export let a = 123; export functin addA(){...}
复合写法:
export {a ,b} from './xxx.js'; // 等效于 import {a, b} from './xxx.js'; export {a, b};
// 整体输出 值得注意的是 export *会把my_module的default给丢掉 export * from 'my_module';
import函数:
因为import xxx from 'xxx'的写法是编译时的语法,没办法动态加载
// 形如这样的写法是会报错的 if (x === 2) { import MyModual from './myModual'; }
为了实现动态加载,我们又有了import函数,跟require相似,不过是异步的
if (condition) { import('moduleA').then(...); } else { import('moduleB').then(...); }
推荐阅读:Module的语法
相关文章
- es6 模板字符串_es6 方法模板渲染
- ES6 模板字符串基本用法[通俗易懂]
- Vue之ES6对象字面量增强写法
- JS与ES6高级编程学习笔记(五)——ECMAScript6 代码组织
- es6之Promise是什么「建议收藏」
- 每天3分钟,重学ES6-ES12(十二)不常用但却常问的迭代器
- ES6【笔记】
- VUE学习笔记——es6对象合并 数组转对象
- 每天3分钟,重学ES6-ES12(六)ES7 ES8 新增内容
- 学会ES6模块化,看这篇就够了
- Es6基本语法
- JS如何定义一个类分别用Es5和Es6来实现
- ES6 javascript 实用开发技巧详解编程语言
- JavaScript语言基础-变量声明var和let和const(ES6特性)详解编程语言
- ES6 destructure assignment 解构赋值详解编程语言
- 尾调用、优化和 ES6