首页 > 其他分享 >ES6的导入和导出

ES6的导入和导出

时间:2022-11-04 16:04:31浏览次数:255  
标签:ES6 console log default 导出 导入 export import

按照模块化开发时,每一个JS文件都是一个自己的空间,有单独的模块作用域

1.export的基本使用 统一导出

export导出:

let name = "小明";
let age = "20";
function sum(num1,num2){
    return num1+num2;
}
// 大括号内的变量名,必须跟 export 对外接口的变量名一致
export{name,age,sum} // 导出

import导入:

// 大括号内的变量名,必须跟 export 对外接口的变量名一致
import {name,age,sum} from "导出文件的地址"

console.log(name); //小明
console.log(age); //20
console.log(sum(1,2)); //3

2.export的基本使用 单独导出

export let num1 = 1000;

import {num1 } from "导出文件的地址"

console.log(num1 ); //1000;

3.导出函数、类

// 导出函数
export function sum(num1,num2){
    return num1+num2;
}

import {sum} from "导出文件的地址"

console.log(sum(1,2)); //3

// 导出类
export class Person{
    run(){
        console.log("在奔跑");
  }
}

// 导入类
import {Person} from "导出文件的地址"
const P = new Person();
P.run(); //在奔跑

4.export default

  • 某些时候,一个模块包含某个功能,我们并不希望给这个功能命名,而是让导入者可以自己来命名,这个时候就可以用export default
  • 在同一个模块中只能有一个export default

此时可以自定义导入变量的名字,下面的案例中,就可以自定义address的名字

  • 当使用default时,import后面不需要大括号,直接默认导入default后面的变量,且可以自定义名字
//导出
var address = "北京市";
export default address;

//导入
import addr from "导出文件的地址" //函数在加载时,可以以任意名字来加载
console.log(addr) //北京市

//导出函数
export default function(value){ // 此时函数未命名
    console.log(value)
}
//导入
import addr from "导出文件的地址" //函数在加载时,可以以任意名字来加载
console.log(addr('你好啊'); ); /// 此时返回‘你好啊’

//注意:一次只能导出一个,多个可以放在对象中
function mapFilter(){
    console.log('111')
}
function mapModule(){
    console.log('222')
}
var obj={
    mapFilter,
    mapModule,
}
export default obj  

import obj from '@/导出文件地址'   es6导入

5.统一全部导入

import {age,name,age} from "导出文件地址"

import * as aaa from "导出文件地址",console.log(aaa.age);

6.export default 和 export 区别

1、export与export default均可用于导出常量、函数、文件、模块等
2、你可以在其它文件或模块中通过import+(常量 | 函数 | 文件 | 模块)名的方式,将其导入,以便能够对其进行使用
3、在一个文件或模块中,export、import可以有多个,export default仅有一个
4、通过export方式导出,在导入时要加{ },export default则不需要

标签:ES6,console,log,default,导出,导入,export,import
From: https://www.cnblogs.com/Sultan-ST/p/16858112.html

相关文章

  • 我用EasyExcel优化了公司的导出(附踩坑记录)
    背景介绍最近要改一个导出的功能,在原有的基础上,在导出一份明细数据,要求导出内容加在原有excel的第二个sheet上。考虑到数据量还比较大,干脆引入阿里的EasyExcel来做......
  • Android 使用 unity 导出obb包
    1.通过unity导出包含obb的工程。2.按照google官方给定的obb命名方式,已经存放路径进行操作​​Obb命名方式​​命名方式:[main|patch]。<扩展版本>。<程序包名称>.obbeg......
  • 在PetaLinux工程中导出所有关键模块代码
    PetaLinux工程会自动下载代码并编译。很多时候,工程师需要修改代码,加入调试信息。使用下列脚本,可以一次性导出所有关键模块的代码。脚本中,为了保持兼容性,导出了MPSoC和Vers......
  • (笔记)ROS2:ament_cmake类型功能包导入消息接口三步骤
     一、三个步骤1.在CMakeLists.txt中导入,具体是先find_packages再ament_target_dependencies。2.在packages.xml中导入,具体是添加depend标签并将消息接口写入。3.......
  • 【HMS Core】华为分析SDK如何申请数据导出功能?
    1、问题描述项目中集成了华为分析SDK,现在有一个需求,想要申请数据导出功能,申请页面提示数据导出功能目前仅对部分邀请伙伴开放,需要通过在线提单的方式申请开通此功能,那么具体......
  • 从生产环境中导出 dml 语句
    在使用数据库的时候,想生产环境的数据导出为dml,无奈网上没有找到合适的方案,一水儿说的都是导出dump关键是这不是我想要的啊,我要的是dml啊。没办法,只能曲线救国般地,拼接s......
  • 纯前端实现后端给数据进行文件导出——angular里面的使用
    interfacedataList{cmd_cnt:number;risk_name:string;user_cnt:number;risk_type:string;}listOfData:dataList[]=[];dataObj:any={title:['风险名称',......
  • ES6扩展运算符的常用场景
    对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中1、复制数组或者对象此方法只能是第一层数据的拷贝,多层数据该方法失效,因为是浅拷贝const......
  • mysql 导入问题排查
    ERR]2006-MySQLserverhasgoneaway--查询最大数showglobalvariableslike'max_allowed_packet';--临时设置setglobalmax_allowed_packet=1024*1024*512;......
  • kindeditor实现导入word并将内容显示到编辑器中
    ​ 项目需求可发布文章需求涉及到富文本编辑器经过查阅我选择了较为简便不需要后端支持可独立完成的tinymce框架官方文档也是相当完整虽然都是全英文但是有强大的......