JavaScript-es6-新版语法-export-import

文章目录

    • 1.export
    • 2.import
    • 3.export default 命令
    • 4.总结

在JavaScript ES6中,export与export default均可用于导出常量、函数、文件、模块等。模块功能主要由两个命令构成:export和import。export命令用于规定模块的对外接口,import命令用于输入其他模块提供的功能。

1.export

一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。

一个模块就是一个独立的文件。该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量。

//a.js
export var str = "export的内容";
export var year = 2019;
export function message(sth) {return sth;
}

除了上述的写法,还有一种推荐使用的,因为这样就可以在脚本尾部,一眼看清楚输出了哪些变量。

//a.js
var str = "export的内容";
var year = 2019;
function message(sth) {return sth;
}
export {str, year, message}

通常情况下,export输出的变量就是本来的名字,但是可以使用as关键字重命名。

//a.js
var str = "export的内容";
var year = 2019;function message(sth) {return sth;
}export {str as newname1,year as newname2,message as newname3
};

2.import

使用export命令定义了模块的对外接口以后,其他 JS 文件就可以通过import命令加载这个模块。

//b.js
import { str,year, message } from './a';
//也可以分开写两次,导入的时候带花括号,将每个变量函数名写清楚

上面代码的import命令,用于加载a.js文件,引入后便可以在b.js文件中使用a.js文件中的变量、函数或类等。import命令接受一对大括号,里面指定要从其他模块导入的变量名。大括号里面的变量名,必须与被导入模块(a.js)对外接口的名称相同。
如果想为输入的变量重新取一个名字,import命令要使用as关键字,将输入的变量重命名。

//b.js
import {str as newname1,year as newname2,message as newname3
} from './a';

import后面的from指定模块文件的位置,可以是相对路径,也可以是绝对路径,.js后缀可以省略。如果只是模块名,不带有路径,那么必须有配置文件,告诉 JavaScript 引擎该模块的位置。

//import引入一个依赖包,不需要相对路径。
import axios from 'axios';
//import 引入一个自己写的js文件,是需要相对路径的。
import AppService from './appService';

3.export default 命令

export default命令用于指定模块的默认输出。显然,一个模块只能有一个默认输出,因此export default命令只能使用一次。所以,import命令后面才不用加大括号,因为只可能唯一对应export default命令。一个文件内不能有多个export default。

//a.js
const str = "export default的内容";
export default str//在另一个文件中的导入方式:
//b.js 
import StrFile from 'a';
//导入的时候没有花括号
//本质上,a.js文件的export default输出一个叫做default的变量,然后系统允许你引入的时候为它取任意名字。

4.总结

export与export default均可用于导出常量、函数、文件、模块等。
在一个文件或模块中,export、import可以有多个,export default仅有一个。
通过export方式导出,在导入时要加{ },export default则不需要,并可以起任意名称。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/105597.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

接口测试文档

接口测试的总结文档 第一部分:主要从问题出发,引入接口测试的相关内容并与前端测试进行简单对比,总结两者之前的区别与联系。但该部分只交代了怎么做和如何做?并没有解释为什么要做? 第二部分:主要介绍为什…

鸿蒙tabbar ArkTS

鸿蒙tabbar ArkTS 做了仿照现在应用的做了一个tabbar。 官方文档地址 参考文档 tabbar 其中有个比较重要的点是,对image资源的引用问题。 资源相关说明 图片是resources目录下的base目录下的。 media目录下的图片的资源不能添加文件夹,只能是文件&a…

树模型(一)孤立森林

孤立森林(Isolation Forest)算法是西瓜书作者周志华老师的团队研究开发的算法,一般用于结构化数据的异常检测。 异常的定义 针对于不同类型的异常,要用不同的算法来进行检测,而孤立森林算法主要针对的是连续型结构化…

适用于 Golang 的任务调度程序 AGScheduler

以前一直使用 Python 的任务调度库 APScheduler(支持任务持久化,支持多种存储方式),但由于没有找到和它功能和使用方式类似的 Golang 库,所以模仿 APScheduler 3.x 写了个简易版本的 AGScheduler。 AGScheduler Advan…

近地面无人机植被定量遥感与生理参数反演

目录 专题一 近十年近地面无人机植被遥感文献分析、传感器选择、观测方式及质量控制要点 专题二 辐射度量与地物反射特性 专题三 无人机遥感影像辐射与几何处理 专题四 光在植被叶片与冠层中的辐射传输机理及平面模型应用 专题五 植被覆盖度与叶面积指数遥感估算 更多应用…

【LeetCode】21. 合并两个有序链表

1 问题 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1: 输入:l1 [1,2,4], l2 [1,3,4] 输出:[1,1,2,3,4,4] 示例 2: 输入:l1 [], l2 [] 输出&…

【Node.js】路由

基础使用 写法一: // server.js const http require(http); const fs require(fs); const route require(./route) http.createServer(function (req, res) {const myURL new URL(req.url, http://127.0.0.1)route(res, myURL.pathname)res.end() }).listen…

毕业设计选题Java+springboot校园新闻资讯系统源码 开题 lw 调试

💕💕作者:计算机源码社 💕💕个人简介:本人七年开发经验,擅长Java、Python、PHP、.NET、微信小程序、爬虫、大数据等,大家有这一块的问题可以一起交流! 💕&…

HT for Web (Hightopo) 使用心得(3)- 吸附与锚点

吸附与锚点是 HT for Web 中两个比较重要的概念。这两个概念在执行交互和动画时会经常被用到。 吸附,顾名思义,是一个节点吸附到另一个节点上。就像船底的贝类一样,通过吸附到船身,在船移动的时候自己也会跟着移动;而…

Oracle update 关联更新优化方法

关联更新顾名思义就是指,更新的数据从关联的表中获取并update到目标表。并且该SQL将会是一个天然的嵌套循环。有两种优化思路解决: 1、PLSQL 根据rowid更新 是否需要加order by rowid的考量: 如果buffer cache足够大,能够放得下要…

蓝桥杯双周赛算法心得——三带一(暴力枚举)

大家好,我是晴天学长,枚举思想,需要的小伙伴可以关注支持一下哦!后续会继续更新的。 1) .三带一 2) .算法思路 1.通过Scanner读取输入的整数n,表示接下来有n个字符串需要处理。 2.使用循环遍历每个字符串:…

华为端到端战略管理体系(DSTE开发战略到执行)的运作日历图/逻辑图及DSTE三大子流程介绍

华为端到端战略管理体系(DSTE开发战略到执行)的运作日历图/逻辑图及DSTE三大子流程介绍 本文作者 | 谢宁,《华为战略管理法:DSTE实战体系》、《智慧研发管理》作者 添加图片注释,不超过 140 字(可选&#…

VUE 弹出输入框

html代码: 主要是设置一个按钮,绑定点击事件 <el-button size="mini" @click="addOrganization(row)">新增</el-button>JS代码: 下面是element-ui的代码,里面有邮箱格式匹配公式,应该以后还会用到 element-ui的链接附上&#

es6(三)—— set(集合) 和map的使用

ES6的系列文章目录 第一章 Python 机器学习入门之pandas的使用 文章目录 ES6的系列文章目录一、set&#xff08;集合&#xff09;0. 定义1. 基本使用2.常用方法&#xff08;1&#xff09;代码&#xff08;2&#xff09;效果&#xff08;3&#xff09;遍历 二、map0. 定义1. 基…

Stable Diffusion绘图,lora选择

best quality, ultra high res, (photorealistic:1.4), 1girl, off-shoulder white shirt, black tight skirt, black choker, (faded ash gray hair:1), looking at viewer, closeup <lora:koreandolllikeness_v20:0.66> 最佳品质&#xff0c;超高分辨率&#xff0c;&am…

【C++】继承 -- 详解

一、继承的概念及定义 1、继承的概念 继承 (inheritance) 机制是面向对象程序设计使代码可以复用的最重要的手段&#xff0c;它允许程序员在保 持原有类特性的基础上进行扩展&#xff0c;增加功能&#xff0c;这样产生新的类&#xff0c;称派生类。 继承呈现了面向对象 程序设…

极限号可以拿到函数的内部吗?【复合函数中极限的进入】

极限号无脑直接拿进来 1.1 如果f&#xff08;极限值&#xff09;在该点连续&#xff0c;ojbk&#xff0c;拿进来。 1.2 如果f&#xff08;极限值&#xff09;不存在或不连续&#xff0c;不能拿进来&#xff0c;出去。

【操作系统】磁臂黏着现象

文章目录 什么是磁臂黏着&#xff1f;为什么 FCFS&#xff08;First Come First Service&#xff09; 可以避免磁臂黏着&#xff1f;为什么 scan&#xff0c;cscan 会产生磁臂黏着&#xff1f;为什么 NsetpScan 可以避免磁臂黏着&#xff1f;NScan 原理简介NScan 避免磁臂黏着的…

【React】03-React面向组件编程2

文章目录 2.6. 组件的生命周期2.6.1. 效果2.6.2. 理解2.6.3. 生命周期流程图(旧)2.6.4. 生命周期流程图(新)2.6.5. 重要的勾子2.6.6. 即将废弃的勾子2.6.7 getSnapshotBeforeUpdate 2.7. 虚拟DOM与DOM Diffing算法2.7.1. 效果2.7.2. 基本原理图 2.6. 组件的生命周期 2.6.1. 效…

【VASP】POSCAR文件

【VASP】POSCAR文件 前言 一、4个常用的输入文件INCAR、POSCAR、POTCAR、KPOINTS INCAR: 计算任务类型是什么&#xff1f;怎么计算&#xff1f; KPOINTS: 包含了倒易空间点网格的坐标和权重。 POSCAR: 包含元胞的原子坐标信息以及初始速度等信息。 POTCAR: 超软赝势或PAW势函数…