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

前言

相信很多人都使用过export、export default、import，然而它们到底有什么区别呢？ 在看他们之间的区别之前，我们先来看看它们的用法。

ES6 import和export的用法

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

ES6在语言规格的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。

ES6模块主要有两个功能：export和import

  • export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口
  • import用于在一个模块中加载另一个含有export接口的模块。

也就是说使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块（文件）。如下(假设a和b文件在同一目录下)

// a.js

var sex="boy";
var echo=function(value){
　　console.log(value)
}
export {sex,echo}
//通过向大括号中添加sex，echo变量并且export输出，就可以将对应变量值以sex、echo变量标识符形式暴露给其他文件而被读取到
//不能写成export sex这样的方式，如果这样就相当于export "boy",外部文件就获取不到该文件的内部变量sex的值，因为没有对外输出变量接口,只是输出的字符串。
// b.js
通过import获取a.js文件的内部变量，{}括号内的变量来自于a.js文件export出的变量标识符。
import {sex,echo} from "./a.js"
console.log(sex) // boy
echo(sex) // boy

a.js文件也可以按如下export语法写，但不如上边直观，不太推荐。

// a.js
export var sex="boy";
export var echo=function(value){
　　console.log(value)
}

//因为function echo(){}等价于 var echo=function(){}所以也可以写成
export function echo(value){
　　　console.log(value)
}

以上是export与module的基本用法，再进行拓展学习

前面的例子可以看出，b.js使用import命令的时候，用户需要知道a.js所暴露出的变量标识符，否则无法加载。可以使用export default命令，为模块指定默认输出，这样就不需要知道所要加载模块的变量名。

//a.js
var sex="boy";
export default sex（sex不能加大括号）
//原本直接export sex外部是无法识别的，加上default就可以了.但是一个文件内最多只能有一个export default。
其实此处相当于为sex变量值"boy"起了一个系统默认的变量名default，自然default只能有一个值，所以一个文件内不能有多个export default。
// b.js
本质上，a.js文件的export default输出一个叫做default的变量，然后系统允许你为它取任意名字。所以可以为import的模块起任何变量名，且不需要用大括号包含
import any from "./a.js"
import any12 from "./a.js"
console.log(any,any12) // boy,boy

ES6中export、import与export default区别

在JavaScript ES6中，export与export default均可用于导出常量、函数、文件、模块等，你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式，将其导入，以便能够对其进行使用，但在一个文件或模块中，export、import可以有多个，export default仅有一个。

具体使用：

1、

//demo1.js
export const str = 'hello world'

export function f(a){
 return a+1
}

对应的导入方式：

//demo2.js
import { str, f } from 'demo1' //也可以分开写两次，导入的时候带花括号

2、

//demo1.js
export default const str = 'hello world'

对应的导入方式：

//demo2.js
import str from 'demo1' //导入的时候没有花括号

总结

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对我们的支持。

赞 (0)

相关推荐

  • 详解nodejs中exports和module.exports的区别

    require 用来加载代码,而 exports 和 module.exports 则用来导出代码.但很多新手可能会迷惑于 exports 和 module.exports 的区别,为了更好的理解 exports 和 module.exports 的关系,我们先来巩固下 js 的基础.示例: app.js var a = {name: 'nswbmw 1'}; var b = a; console.log(a); console.log(b); b.name = 'nswbmw 2'; cons

  • Node.js 中exports 和 module.exports 的区别

    Node.js 中exports 和 module.exports 的区别

    Node.js 中exports 和 module.exports 的区别 require 用来加载代码,而 exports 和 module.exports 则用来导出代码.但很多新手可能会迷惑于 exports 和 module.exports 的区别,为了更好的理解 exports 和 module.exports 的关系,我们先来巩固下 js 的基础.示例: test.js var a = {name: 1}; var b = a; console.log(a); console.log

  • 详解Node.js中exports和module.exports的区别

    详解Node.js中exports和module.exports的区别

    今天看了下node.js的require方法的源码,终于搞清楚exports和module.exports的区别了. 我们知道,node.js的模块暴露有两种方法. 1. 方式一:用exports //a.js exports.log =function (str) { console.log(str); } //b.js var s = require("./a"); s.log("哈哈哈哈"); 2. 方式二:用module.exports //a.js mod

  • node.js中module.exports与exports用法上的区别

    Node.js 引入了模块(Module)概念,一个模块可以通过module.exports 或 exports 将函数.变量等导出,以使其它 JavaScript 脚本通过require() 函数引入并使用. module.exports 初始值为一个空对象 {},所以 exports 初始值也是 {},exports 是指向的 module.exports 的引用,在模块内部大概是这样: exports = module.exports = {}; 举个栗子,在node.js中创建模块非常简

  • nodejs中exports与module.exports的区别详细介绍

    你肯定非常熟悉nodejs模块中的exports对象,你可以用它创建你的模块.例如:(假设这是rocker.js文件) 复制代码 代码如下: exports.name = function() { console.log('My name is Lemmy Kilmister'); }; 在另一个文件中你这样引用 复制代码 代码如下: var rocker = require('./rocker.js'); rocker.name(); // 'My name is Lemmy Kilmiste

  • 浅谈node中的exports与module.exports的关系

    浅谈node中的exports与module.exports的关系

    因为是做前端的,对node的生态一直也比较关注,对于node中对commonJS模块化的实现给了我们很大的方便,之前对于导出的module.exports和exports一直模模糊糊,今天做一个整理 先来个js基础部分的复习 let obj1 = {} let obj2 = obj1 obj2.a = 'a' obj1.b = 'b' console.log(obj1) //{a: 'a', b: 'b'} console.log(obj2) //{a: 'a', b: 'b'} obj2 =

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

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

    前言 最近难得有空,决定开始重新规范的学习一下node编程.但是引入模块我看到用 require的方式,再联想到咱们的ES6各种export .export default. 阿西吧,头都大了.... 头大完了,那我们坐下先理理他们的使用范围. require: node 和 es6 都支持的引入 export / import : 只有es6 支持的导出引入 module.exports / exports: 只有 node 支持的导出 这一刻起,我觉得是时候要把它们之间的关系都给捋清楚了,不

  • seaJs使用心得之exports与module.exports的区别实例分析

    本文实例讲述了seaJs使用心得之exports与module.exports的区别.分享给大家供大家参考,具体如下: 1. exports 是 module.exports 的 辅助对象,exports对外提供api 时需要用return 返回exports 对象 2. module.exports 也可直接向外提供api 参考 : https://github.com/seajs/seajs/issues/242 exports Object exports 是一个对象,用来向外提供模块接口

  • 深入理解node exports和module.exports区别

    我们只需知道三点即可知道 exports 和 module.exports 的区别了: 1.exports 是指向的 module.exports 的引用 2.module.exports 初始值为一个空对象 {},所以 exports 初始值也是 {} 3.require() 返回的是 module.exports 而不是 exports 所以: • 我们通过 var name ='nswbmw'; exports.name = name; exports.sayName =function(

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

    前言 相信很多人都使用过export.export default.import,然而它们到底有什么区别呢? 在看他们之间的区别之前,我们先来看看它们的用法. ES6 import和export的用法 ES6之前已经出现了js模块加载的方案,最主要的是CommonJS和AMD规范.commonjs主要应用于服务器,实现同步加载,如nodejs.AMD规范应用于浏览器,如requirejs,为异步加载.同时还有CMD规范,为同步加载方案如seaJS. ES6在语言规格的层面上,实现了模块功能,而且

  • Vue export import 导入导出的多种方式与区别介绍

    在使用vue导出时会有一个default关键字,下面举例说明下在导出时使用export和export default的对应的imort写法的区别 一.部分导出和部分导入 部分导出和部分导入的优势,当资源比较大时建使用部分导出,这样一来使用者可以使用部分导入来减少资源体积,比如element-ui官方的就推荐使用部分导入来减少项目体积,因为element-ui是一个十分庞大的框架,如果我们只用到其中的一部分组件, 那么只将用到的组件导入就可以了. 1.1部分导出的写法 export functio

  • 浅析Javascript ES6中的原生Promise

    前言 一个 Promise 对象可以理解为一次将要执行的操作(常常被用于异步操作),使用了 Promise 对象之后可以用一种链式调用的方式来组织代码,让代码更加直观.而且由于 Promise.all 这样的方法存在,可以让同时执行多个操作变得简单. Promise的兴起,是因为异步方法调用中,往往会出现回调函数一环扣一环的情况.这种情况导致了回调金字塔问题的出现.不仅代码写起来费劲又不美观,而且问题复杂的时候,阅读代码的人也难以理解. 举例如下: db.save(data, function(

  • JavaScript ES6中的简写语法总结与使用技巧

    ES6为一些已有的功能提供了非破坏性更新,这类更新中的大部分我们可以理解为语法糖,称之为语法糖,意味着,这类新语法能做的事情其实用ES5也可以做,只是会稍微复杂一些.本章我们将着重讨论这些语法糖,看完之后,可能你会对一些你很熟悉的ES6新语法有不一样的理解. JavaScript ES6对象字面量 对象字面量是指以{}形式直接表示的对象,比如下面这样: var book = { title: 'Modular ES6', author: 'Nicolas', publisher: 'O´Reil

  • JavaScript es6中var、let以及const三者区别案例详解

    首先,一个常见的问题是,ECMAScript 和 JavaScript 到底是什么关系?         ECMAScript是一个国际通过的标准化脚本语言.JavaScript由ECMAScript和DOM.BOM三者组成.可以简单理解为:ECMAScript是JavaScript的语言规范,JavaScript是ECMAScript的实现和扩展.         2011 年,ECMAScript 5.1 版发布.之前我们大部分人用的也就是ES5         2015 年 6 月,ECM

  • JavaScript ES6中class定义类实例方法

    JavaScript ES6中class定义类实例方法

    目录 前言 正文 1.声明类的两种方式: 2.class 类的构造函数 3.class中方法定义 3.1 class 中定义普通的实例方法 3.2 class 类中定义访问器方法 3.3 类的静态方法(类方法) 文末 前言 我们会发现,按照之前学习过的构造函数形式创建 类 ,不仅仅和编写普通的函数过于相似,而且代码并不容易理解. 在 ES6(ECMAScript2015)新的标准中使用了class关键字来直接定义类:但是类本质上依然是之前所学习过的构造函数.原型链的语法糖而已.所以学好之前的构造

  • javascript ES6中set集合、map集合使用方法详解与源码实例

    set与map理解 ES6中新增,set集合和map集合就是一种数据的存储结构(在ES6之前数据存储结构只有array,object),不同的场景使用不同的集合去存储数据 set集合 Set 对象允许你存储任何类型的唯一值,无论是原始值或者是对象引用. set集合语法: //创建一个set集合,传参为一个可迭代的对象 const s1 = new Set(iterable); API 名称 类型 简介 Set.add() 原型方法 添加数据 Set.has() 原型方法 判断是否存在一个数据 S

  • JavaScript ES6中CLASS的使用详解

    前言 对于javascript来说,类是一种可选(而不是必须)的设计模式,而且在JavaScript这样的[[Prototype]] 语言中实现类是很蹩脚的. 这种蹩脚的感觉不只是来源于语法,虽然语法是很重要的原因.js里面有许多语法的缺点:繁琐杂乱的.prototype 引用.试图调用原型链上层同名函数时的显式伪多态以及不可靠.不美观而且容易被误解成"构造函数"的.constructor. 除此之外,类设计其实还存在更进一步的问题.传统面向类的语言中父类和子类.子类和实例之间其实是复

  • 详解JavaScript ES6中的模板字符串

    在 ES6 中引入了一种新的字符串字面量 - 模板字符串,除了使用反引号 (`) 表示,它们看上去和普通的字符串没有什么区别.在最简单的情况下,他们就是普通的字符串: context.fillText(`Ceci n'est pas une cha?ne.`, x, y); context.fillText(`Ceci n'est pas une cha?ne.`, x, y); 之所以被称为模板字符串,是因为模板字符串为 JS 引入了简单的字符串插值特性,也就是说,可以方便优雅地将 JS 的值

  • 详解JavaScript ES6中的Generator

    今天讨论的新特性让我非常兴奋,因为这个特性是 ES6 中最神奇的特性. 这里的"神奇"意味着什么呢?对于初学者来说,该特性与以往的 JS 完全不同,甚至有些晦涩难懂.从某种意义上说,它完全改变了这门语言的通常行为,这不是"神奇"是什么呢. 不仅如此,该特性还可以简化程序代码,将复杂的"回调堆栈"改成直线执行的形式. 我是不是铺垫的太多了?下面开始深入介绍,你自己去判断吧. 简介 什么是 Generator? 看下面代码: function* qu

随机推荐