`

es6 中的export

 
阅读更多
https://juejin.im/post/5998625f518825244d20327c

什么是模块

自动运行在严格模式下并且没有办法退出运行的 JavaScript 代码。在模块的顶部, this 的值是 undefined;模块不支持 HTML 代码风格的代码注释。模块仅导入和导出你需要的绑定。

导出

用 export 导出


// 导出数据
export const NAME = "柚子";

  // 这个 age 变量是此模块私有的
let age = 18;

  // 导出函数
export function add(a, b) {
     return a + b;
}

function subtract(a, b) {
     return a - b
}
  // 导出引用
export subtract;
任何未显式到处的变量、函数或类都是模块私有的,外部无法访问。

导入

用 import 导入

语法:

import { NAME, add, subtract } from './example.js';
// 此语句的含义是,从 example.js 文件中导入需要的标识符。
// 可以导入一个或多个

add(1, 2) // 3

NAME = 1; // 抛错,不能给导入的绑定重新赋值
导入整个模块

    import * as example from './example.js';

    cconsole.log(example.NAME); // 柚子
    example.add(1, 2) // 3
这种导入格式被称为命名空间导入;在 example.js 文件中不存在 example 对象,所以它作为 example.js 中所有导出成员的命名空间对象而被创建。

  import { NAME } from './example.js';
  import { add } from './example.js';
  import { subtract } from './example.js';
不管 import 语句中把一个模块写了几次,该模块都只对执行一次。

注意: export 语句不允许出现在 if 语句中,也不能在一条语句中使用 import,只能在顶部使用它。

if(isTrue) {
     export add; // 这样写会报错
}
function importSomething() {
     import { add } from './example.js'; // 这样写会报错
}
重命名

通过 as 关键字来指定函数在模块外应该被叫做什么名字

// example.js
function sum(a, b) {
    return a + b
}
export { sum as add }; // 这里 sum 是本地名称,add 是导出时使用的名称

// app.js
import { add } from './example.js';
// 在导入的时候,必须要使用 add
// example.js
export function sum(a, b) {
    return a + b
}

// app.js
import { sum as add } from './example.js';
// 在导入时用 add 来重命名 sum

add(1, 2) // 3
默认值

每个模块只能有一个默认的导出值。
default 表示这是一个默认的导出。

// 导出默认值
export default function(a, b) {
    return a + b;
}
也可以是:

// 导出默认值
function sum(a, b) {
    return a + b;
}
export default sum;
如果要导入默认值的话,就不能加中括号了:

import sum from './example.js';
如果文件中既有默认值,也有非默认值:

export let age = 18;

export default function(a, b) {
     return a + b;
}
那么导入的时候就需要这样写:

import add, { age } from './example.js';
// 在 import 语句中,默认值必须排在非默认值之前
结尾

所以,看完了上面的解析之后,现在知道下面的写法是什么意思了吧。

import React, { Component, PropTypes } from 'react';

export default class App extends Component {

}
分享到:
评论

相关推荐

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

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

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

    在ES6(ECMAScript 2015)中,`export` 和 `export default` 是两种用于模块化的导出语法,它们允许开发者在JavaScript文件中定义并共享代码。这两个关键字虽然都用于导出模块,但它们有明显的差异,下面我们将深入...

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

    通过这些例子,我们可以看到`export`和`import`在ES6模块化中的核心作用。了解并熟练运用这些概念,对于提升JavaScript开发效率和代码质量至关重要。记住,模块化不仅是技术上的改进,更是软件工程理念的体现,有助...

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

    但是引入模块我看到用 require的方式,再联想到咱们的ES6各种export 、export default。 阿西吧,头都大了…. 头大完了,那我们坐下先理理他们的使用范围。 require: node 和 es6 都支持的引入 export / import : ...

    cjs2es6export:将 CommonJS 模块赋值转换为 ES6 模块导出语句

    cjs2es6export 将 CommonJS/ 分配的子集转换为声明。 用法: var cjs2es6export = require('cjs2es6export'); var src = "module.exports = function() { return 42; };" var newSrc = cjs2es6export(src); // ...

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

    解构赋值 有如下 config 对象 const config = { host: 'localhost', port: 80 } 要获取其中的 host 属性 ...export default { host: 'localhost', port: 80 } 在 app.js 中 import config.js // app.j

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

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

    JavaScript(ES6新增、W3C、MDN)最新参考手册.zip

    - 这可能是一份全面的JavaScript语言参考,包含从基础到高级的各个层面,包括变量、数据类型、控制流、函数、对象、闭包,以及ES6的新增特性,如let和const变量声明、解构赋值、Promise、模块系统(import/export)...

    ES6_es6_

    以上是ES6中的核心特性,学习和掌握这些知识点能够帮助开发者编写更现代、更健壮的JavaScript代码。在实际开发中,理解并熟练运用这些特性,可以提高代码质量和开发效率。同时,不断关注和学习新的JavaScript特性和...

    阮一峰es6教程文档源码

    1. **箭头函数**:箭头函数是ES6中的一种新语法,它使得函数的定义更加简洁。例如,`const add = (x, y) => x + y;`。箭头函数没有自己的`this`值,它会继承外层作用域的`this`,这对于处理回调函数或事件处理程序中...

    es6入门.zip

    以上只是 ES6 中部分关键特性的介绍,实际学习中还需要深入理解迭代器、Proxy、Reflect、尾调用优化等其他概念。这个 ES6 入门教程将详细讲解这些内容,帮助你快速掌握 ES6 的核心知识,提升编程能力。无论你是初学...

    es6 阮一峰

    《ES6 阮一峰》是一本详细解读ECMAScript 6(也称为ES2015)标准的中文指南,由知名前端开发者阮一峰编写。...同时,书中还可能涵盖了ES6标准的其他细节和最佳实践,帮助读者在实际项目中更好地应用这些新特性。

    深入浅出ES6

    - **模块化**:ES6引入了真正的模块支持,通过`import`和`export`关键字来组织和管理代码,这对于构建大型应用尤其有用。 - **类与继承**:虽然关于ES6中引入类特性存在争议,但它确实提供了一种更直观的方式来实现...

    linux-ES6中的跨平台linux命令.zip

    这个名为“linux-ES6中的跨平台linux命令.zip”的压缩包很可能是关于如何在ES6环境中利用JavaScript编写可移植的Linux命令的教程或代码示例集合。 首先,我们要理解Linux命令的本质。Linux命令是通过shell(如bash...

    es6常用方法.txt

    es6的常用方法,es6初学者可以看下:关于箭头函数与function的区别,reduce() 方法说明及应用,export 与import是es6中新增模块功能最主要的两个命令,es6基础系列二:Number

    es6学习资料.zip

    **ES6,全称ECMAScript 2015,是JavaScript语言的一个重大更新版本,...以上只是ES6众多特性中的一部分,通过深入学习这两份学习资料,你将能全面理解ES6的精髓,并在实际开发中熟练运用,提升JavaScript编程的水平。

Global site tag (gtag.js) - Google Analytics