首页 > 其他分享 >ES6 exports 与 import 使用

ES6 exports 与 import 使用

时间:2024-04-06 12:01:09浏览次数:28  
标签:ES6 exports default 导出 js export 模块 import

基本用法

基本用法

模块导入导出各种类型的变量,如字符串数值函数

  • 导出的函数声明与类声明必须要有名称(export default命令另外考虑)。
  • 不仅能导出声明还能导出引用(例如函数)。
    -export命令可以出现在模块的任何位置,但必需处于模块顶层。
  • import命令会提升到整个模块的头部,首先执行。
  • 在创建JavaScript模块时,export用于从模块中导出实时绑定的函数、对象或原始值,以便其他程序可以通过import使用它们。
  • 被导出的绑定值依然可以在本地进行修改。
    在使用import进行导入时,这些绑定值只能被导入模块所读取,但在export导出模块中对这些绑定值进行修改,所修改的值也会实时地更新。

exports

ES6模块只支持静态导出,只可以在模块的最外层作用域使用export,不可在条件语句与函数作用域中使用。

Named exports (命名导出)

这种方式主要用于导出多个函数或变量,明确知道导出的变量名称。
使用:只需要在变量或函数面前加export关键字即可。
使用场景:比如utils、tools、common 之类的工具类函数集,或者全站统一变量等。

1.export 后面不可以是表达式,因为表达式只有值,没有名字。
2.每个模块包含任意数量的导出。

lib.js

export const sqrt = Math.sqrt;
export function square(x){
   return x*x;
}
export function diag(x,y){
   return sqrt(square(x) + square(y));
}
// index.js 使用方式1
import { square, diag } from 'lib';
console.log(square(11)); // 121

// index.js 使用方式2
import * as lib from 'lib';
console.log(lib.square(11)); // 121

简写格式,统一列出需要输出的变量,例如上面的lib.js可以改写成:

// lib.js
const sqrt = Math.sqrt;
function square(x) {
    return x * x;
}
function add (x, y) {
    return x + y;
}
export { sqrt, square, add };

Default exports (默认导出)

这种方式主要用于导出类文件或一个功能比较单一的函数文件;
使用:只需要在变量或函数前面加 export default 关键字即可。

  • 使用default导出,导入式不需要加{},一般不建议使用默认导出,默认导出会使程序员随意命名变量。如果要使用默认导入,最好与文件的模块名字相关联。
  • 每个模块最多只能有一个默认导出;
  • 默认导出可以视为名字是default的模块输出变量;
  • 默认导出后面可以是表达式,因为它只需要值。

导出一个值:

export default 123;

导出一个函数:

// myFunc.js
export default function () { … };
// index.js
import myFunc from ‘myFunc’;
myFunc();

导出一个类:

// MyClass.js
class MyClass{
constructor() {}
}

export default MyClass;
// 或者
export { MyClass as default, … };
// index.js
import MyClass from ‘MyClass’;

export default 与 export 的区别:

  • 不需要知道导出的具体变量名;
  • 导入【import】时不需要 { } 包裹;

Combinations exports (混合导出)

混合导出是 Named exports 和 Default exports 组合导出。
混合导出后,默认导入一定放在命名导入前面;

  • 导入默认接口不需要使用{},导入普通接口需要使用{}

// lib.js
export const myValue = ‘’;
export const MY_CONST = ‘’;
export function myFunc() {

}
export function* myGeneratorFunc() {

}

export default class MyClass {

}
// index.js
import MyClass, { myValue, myFunc } from ‘lib’

Re-exporting (别名导出)

一般情况下,export 导出的变量名是原文件中的变量名,但也可以用 as 关键字来指定别名。这样做是为了简化或者语义化 export 的函数名。

同一个变量允许使用不同名字输出多次

// lib.js
function getName() {

};
function setName() {

};

export {
getName as get,
getName as getUserName,
setName as set
}

Module Redirects (中转模块导出)

为了方便使用模块导入,在一个父模块中“导入-导出”不同模块。简单来说:创建单个模块,集中多个模块的多个导出。
使用:使用 export from 语法实现;

export * from ‘lib’; // 没有设置 export default
export * as myFunc2 from ‘myFunc’; // 【ES2021】没有设置 export default
export { default as function1, function2 } from ‘bar.js’;

上述例子联合使用导入和导出:

import { default as function1, function2 } from ‘bar.js’;
export { function1, function2 };

尽管此时 export 与 import 等效,但以下语法在语法上无效:

import DefaultExport from ‘bar.js’; // 有效的
export DefaultExport from ‘bar.js’; // 无效的

正确的做法是重命名这个导出:

export { default as DefaultExport } from ‘bar.js’;

Import

  • import 有提升效果,会提升整个模块到头部首先执行,所以不可放在判断语句表达式中
  • import 会加载执行的模块,多个相同的import只会执行一次

// Named imports
import { foo, bar as b } from ‘./some-module.mjs’;

// Namespace import
import * as someModule from ‘./some-module.mjs’;

// Default import
import someModule from ‘./some-module.mjs’;

// Combinations:
import someModule, * as someModule from ‘./some-module.mjs’;
import someModule, { foo, bar as b } from ‘./some-module.mjs’;

// Empty import (for modules with side effects)
import ‘./some-module.mjs’;

export 与 import 的复合写法

  • 在一个模块之中,先输入后输出同一个模块,import语句可以与export语句写在一起

export { foo, bar } from ‘my_module’; // 先输入foo, bar模块再输出

  • 想要输出默认模块,使用as关键字即可

export { es6 as default } from ‘./someModule’;

注意

  • export命令规定的是对外的接口,必须与模块内部的变量建立一一对应关系。
  • export default命令其实只是输出一个叫做default的变量,所以它后面不能跟变量声明语句。【和export是有点相反的
  • 命令可以出现在模块的任何位置,只要处于模块顶层就可以。如果处于块级作用域内,就会报错

标签:ES6,exports,default,导出,js,export,模块,import
From: https://blog.csdn.net/2301_80244491/article/details/137289731

相关文章

  • ES6数组中删除指定元素
    ES6数组中删除指定元素 知识点:ES6从数组中删除指定元素findIndex()方法返回数组中满足提供的测试函数的第一个元素的索引。否则返回-1。arr.splice(arr.findIndex(item=>item.id===data.id),1) http://louiszhai.github.io/2017/04/28/array/1:js中的spli......
  • 在 ES6 中,for...of 和 for...in 讲解
    在ES6中,for...of 和 for...in 是两种用于遍历不同数据结构的循环结构。它们各自有不同的用途和适用场景。for...offor...of 循环用于遍历可迭代对象(包括Array、Map、Set、String、TypedArray、函数的arguments对象等等)的值。语法for(variableofiterable){/......
  • Vite 在一个特殊的 import.meta.env 对象上暴露环境变量。这里有一些在所有情况下都可
    .env文件Vite使用dotenv从你的环境目录中的下列文件加载额外的环境变量: .env#所有情况下都会加载.env.local#所有情况下都会加载,但会被git忽略.env.[mode]#只在指定模式下加载.env.[mode].local#只在指定模式下加载,但会......
  • ImportError: DLL load failed while importing _cext: 找不到指定的模块
    网上搜索说,这个错误表明Python在尝试导入名为_cext的扩展模块时失败了,这通常是因为它依赖的某些动态链接库(DLL)文件无法被正确加载。这可能是因为相应的DLL文件不存在于预期的位置,或者系统缺少运行该DLL所必需的其他依赖项。在一个帖子中看到通过pipinstallmsvc-runtime可以即......
  • import 模块导入
    ★方式一:fromxximportyy导入方式frominfoimportredis_store使用说明【理解】:相当于在本地定义一个变量redis_store指向info模块中redis_store的值,对本地的redis_stone直接进行赋值,只会修改本地变量redis_store的指向,并不会修改info模块中redis_store的值;这......
  • ES6 reduce方法:示例与详解、应用场景
    还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,echarts等技术开发,欢迎加底部微信(gis-dajianshi),一起交流。No.内容链接1Openlayers【入门教程】-......
  • 【Python BUG】ImportError: /usr/lib/x86_64-linux-gnu/libstdc++.so.6: version `CX
    报错ImportError:/usr/lib/x86_64-linux-gnu/libstdc++.so.6:version`CXXABI_1.3.9‘notfound背景开发的一个python预测程序(算法分析+应用服务),在原本的linux服务器下配置了开发环境,打包后在另一台凝思服务器解压,发现报错。应该是linux系统之间存在差异,动态库缺失......
  • A Person Who Is Important to Me
    ......
  • Someone important to me
    ......
  • a person important to me
    ......