`
huangyongxing310
  • 浏览: 495932 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

es6 import 与 export

 
阅读更多
es6 import 与 export


ES6把js文件当做模块处理

导出一个变量
写法1
var name = "Amy";
export {name};

写法2
var name = "Amy";
export {name as anotherName};

写法3
export var name = "Amy";


//export输出的是接口,变量(不能是具体的值)

导入变量
import {name} from 'test'

//针对导入写法2
import {anotherName} from 'test'


导出一组变量
//test.js
var name = "Amy";
var age = "20";
export {name, age};


//写法2
export {name};
export {age};



导入一组变量
//写法1
import {name, age} from 'test'

//写法2
import * as test from 'test'
test.name;

//写法3 module指令 (等同于写法2)
module test from 'test'
test.name;


导出函数
export function f1() {...};


导出默认模块
默认模块只能有一个,export default只是输出一个叫default的变量,所以default后接任何变量名,都视为匿名
//test.js
export default function f1() {...};

//写法2
function f1() {...}
//不用加花括号{},export default f1是将f1赋值给default
export default f1;


导入默认模块
//不用加花括号{}
import f1 from 'test'


同时导出非默认和默认模块
//test.js
var name = "Amy";
var age = 20;
export default name;
export {age};


同时导入非默认和默认模块
import name, {age} from 'test'

总结
import
非默认模块加花括号 import {notDefaultName} from 'fileName'
默认模块不加花括号 import defaultName from 'fileName'
export
非默认模块加花括号 export {notDefaultName} 或 导出声明 export var a = 0
默认模块不加花括号 export default defaultName,实质导出变量default

均可用于导出常量、函数、文件、模块等






分享到:
评论

相关推荐

    JavaScript ES6中export、import与export default的用法和区别

    ES6 import和export的用法 ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范。commonjs主要应用于服务器,实现同步加载,如nodejs。AMD规范应用于浏览器,如requirejs,为异步加载。同时还有CMD规范...

    ES6模块化的import和export用法方法总结

    ES6 模块化的 import 和 export 用法方法总结 ES6 模块化是 JavaScript 语言中的一种模块管理机制,它提供了 import 和 export 两个关键字,用于实现模块之间的依赖关系和变量共享。本文将从 ES6 模块化的基本概念...

    浅谈es6中export和export default的作用及区别

    与之相反,`export default` 只能用于导出单个默认成员。这意味着一个文件只能有一个默认导出,但是导入时可以给它指定任何名字。比如: ```javascript // 导出默认对象 export default function myDefaultFunction...

    ES6模块import导入导出export.md

    es6 语法 模块化 适合框架开发的小白

    前端开源库-babel-preset-import-export

    这个预设主要关注`import`和`export`语句,它们是ES6模块系统的关键部分,用于在不同文件之间共享代码。 ### 1. ES6 模块系统 在ES6中,`import` 和 `export` 提供了一种模块化的方式,使开发者能够组织代码,避免...

    前端开源库-import-export

    "import-export" 提供了在Node.js环境中使用ECMAScript 6(ES6)的导入/导出语法的能力,使得代码更加简洁且易于管理。本文将深入探讨前端开源库"import-export"及其在实际应用中的使用方法。 首先,让我们理解一下...

    前端开源库-babel-plugin-import-export-rename

    **前端开源库-babel-plugin-import-export-rename** 在前端开发中,我们经常使用各种JavaScript库和框架,而这些库和框架通常需要通过`import`和`export`语句进行模块化管理。`babel-plugin-import-export-rename`...

    ES6使用export和import实现模块化的方法

    然而,随着ES6(ECMAScript 2015)的发布,JavaScript语言本身开始内置支持模块化,通过`export`和`import`关键字实现。 ### 1. 模块化的好处 模块化是前端工程化的重要组成部分,它带来了诸多优势: - **避免...

    ES6 模块化(Module)export和import详解

    但随着ES6的发布,`export`和`import`关键字为我们提供了原生的模块支持,使得代码可以更清晰地划分,更容易维护和复用。 1. `export`: `export`用于导出模块中的变量、函数或类,让其他模块可以引用。主要有两种...

    MEVN-ES6-Template:使用ES6 importexport语法的MEVN堆栈模板

    MEVN-ES6-模板使用ES6导入/导出语法的MEVN堆栈模板。设置github操作自动客户端构建工作流。 只需将“ NAME”和“ EMAIL”添加到“设置/秘密”即可。 工作流设置为删除先前的/ server / public文件夹并构建新的客户端...

    node.js的exports、module.exports与ES6的export、export default深入详解

    export / import : 只有es6 支持的导出引入 module.exports / exports: 只有 node 支持的导出 这一刻起,我觉得是时候要把它们之间的关系都给捋清楚了,不然我得混乱死。话不多少,咱们开干!! node模块 Node...

    ES6新特性:使用export和import实现模块化详解

    ES6 新特性:使用 export 和 import 实现模块化详解 在 ES6 之前,前端开发使用 RequireJS 或 SeaJS 等模块化库来实现模块化,这些库基于 AMD 或 CMD 规范。然而,ES6 新特性中已经自带了模块化功能,我们可以直接...

    gulp-es6-module-to-closure:编译 importexport => goog.requiregoog.provide

    gulp-es6-module-to-closure 编译 ES6 import/export => Google Closure goog.require/goog.provide 注意:为了支持 ES6 特性,引入了一些特殊规则。 请参见下面的示例,尤其是当您使用现有代码中的翻译库时。安装...

    详解ES6 export default 和 import语句中的解构赋值

    在ES6中,`export default` 和 `import` 语句中的解构赋值是现代JavaScript模块系统的重要组成部分。它们允许我们更简洁、更灵活地组织和使用代码。以下是关于这些概念的详细解释: 1. **`export default`**: - ...

    使用ES6新特性开发微信小程序(7)

    在ES6之前,社区制定了一些模块加载方案,最主要的有CommonJS和...模块功能主要由两个命令构成:export和import。export命令用于用户自定义模块,规定对外接口;import命令用于输入其他模块提供的功能,同时创造命名空

    webpack+es6 基础使用

    学习Webpack与ES6的结合使用,你需要理解模块化概念,掌握`export`和`import`的用法,同时了解Webpack的基本配置和工作流程。这将帮助你更好地组织前端代码,提高开发效率,并为后续进阶学习如代码分割、热模块替换...

Global site tag (gtag.js) - Google Analytics