ES6——import和export的用法（8种）

最新推荐文章于 2024-05-08 20:46:07 发布
最新推荐文章于 2024-05-08 20:46:07 发布
阅读量3k 收藏 3
点赞数
分类专栏： ES6 文章标签： html css ES6
原文链接：https://blog.csdn.net/qq_34093387/article/details/120648927?spm=1001.2014.3001.5501
版权

转载链接

import和export的方法是基于服务器端环境方可使用可以启动服务器

下面是安装以及使用步骤：

1、安装php应用程序

安装包可自行从外面下载

2、提前安装了phpstudy 安装好之后会有一个www文件夹  

3、把内容放入该文件夹中我的文件夹叫exportandimport  

 4、里面有一个index.js 和一个index.html  

 把下方的源代码粘贴到对应的文件中即可

使用方法：

输入网址： http://localhost/exportandimport即可打开

打开控制台查看是否成功：

 

 下面是index.html 和 index.js 的八种用法

index.html部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="module">
			import {a} from './index.js'
			console.log(a)
			
		/*第二种情况: import {a,b,c} from './index.js'
			console.log(a)
			console.log(b)
			console.log(c) */
			
		/*第三种情况函数的导入:  import {add} from './index.js'	
		console.log(add(1,2)) */
		
		/*第四种不想暴露js中的变量名: import {x,y,z} from './index.js'	
		console.log(x)
		console.log(y)
		console.log(z) */
		
		/*第五种联合导出1: import {a,add} from './index.js'	
		console.log(a)
		console.log(add(1,2)) */
		
		/* 第五种联合导出2: import {a,add} from './index.js'
		console.log(a)
		console.log(add(1,2)) */
		
		/*第六种情况 export default : import a from './index.js'
		console.log(a)
		a可以使用别名b或者其他别名
		import b from './index.js'
		console.log(b) */
		
		/* 第六种情况 export default复杂结构:import a from './index.js'
		console.log(a.logo); */
		
		/* 第七种方法：import {Person} from './index.js'
		var p = new Person()
		p.run() 
		
		
		 import Person from './index.js'
		 var p = new Person()
		 p.run()*/
		
		/*第八种方法： import * as aaa from './index.js'
		console.log(aaa.flag)
		console.log(aaa.name) */
		</script>
		
	</body>
</html>

index.js部分

// 第一种情况 
export let a = 'Lee';
 
/*第二种情况 var a ='Lee';var b ='李';var c = 'web';
export {a,b,c} */
 
/*第三种情况函数的导出 export function add(a,b){
    return a+b;
} */
 
/* 第四种不想暴露js中的变量名 var a ='Lee';var b ='李';var c = 'web';
 export {
	 a as x,
	 b as y,
	 c as z
 } */
 
 
/*第五种联合导出1 export var a ='Lee';
export function add(a,b){
    return a+b;
} */
/*第五种联合导出2  var a ='Lee';
function add(a,b){
    return a+b;
} 
export {a,add} */
 
/* 第六种情况 export default :
var a = 'Lee';
export default a; */
 
/*第六种情况复杂结构 export default {
	logo: 'UNI-ADMIN',
	navBar: {
		active: '0',
		list: [{
				name: "首页",
				subActive: '0',
				submenu: [{
						icon: "el-icon-s-home",
						name: "后台首页",
						pathname:"index"
					},
					{
						icon: "el-icon-picture",
						name: "相册管理",
						pathname:"image"
					},
					{
						icon: "el-icon-s-claim",
						name: "商品列表",
						pathname:"shop_goods_list"
					}
				]
			},
			{
				name: "商品",
				subActive: '0',
				submenu: [{
					icon: "el-icon-s-claim",
					name: "商品列表",
					pathname:"shop_goods_list"
				}]
			},
			{
				name: "订单"
			},
			{
				name: "会员"
			},
			{
				name: "设置"
			},
		]
	}
} */
 
 
/*第七种方法： export class Person{
  run(){
    console.log("奔跑");
  }
}
class Person{
  run(){
    console.log("奔跑");
  }
}
export default Person
 */
 
/* 第八种方法： let name = '小明'
var flag = true
export {
  flag,name
} */

Southern Wind
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6导入导出import | export | export default-使用案例
JackieDYH的博客
05-16 2574
总体上区分两大规范CommonJS模块规范和ES6模块规范 require: node 和 es6 都支持的引入 export / import : 只有es6 支持的导出引入 module.exports / exports: 只有 node 支持的导出 Node里面的模块系统遵循的是CommonJS规范。 CommonJS定义的模块分为: 模块标识(module)、模块定义(exports) 、模块引用(require) 按照模块化开发时，每一个JS文件都是一个自己的空间，有单独的模块作用域..
ES6的export和import
weixin_42349568的博客
09-29 1385
一个js文件，可以理解成一个模块，这个模块可以被任意其他的模块引入。但文件模块被引入后，其内的东西，都是在自己的作用域中，主动发起引入行为的那个文件，虽然获取到了被引入的对象，但是并不能访问作用域里的东西，所以提供了export，来决定一个模块对外暴露什么东西。然后使用import来引入。export的作用，是在这个文件对象中添加属性，export出来的东西，全部会添加到文件对象中。export default 的作用，是给文件对象的default属性，添加值。
Web前端最全JavaScript进阶（十四）：详解 ES6 中的 export 和 import，附详细答案解析
2401_84446610的博客
05-08 688
计时器浏览器定位和导航浏览历史浏览器和屏幕信息对话框错误处理作为window对象属性的文档元素thisfn.callerprotectedstaticinterface其中，尤其需要注意this的限制。ES6 模块之中，顶层的this指向undefined，即不应该在顶层代码使用this。
expor和import的用法
weixin_30925411的博客
07-31 530
1.Export 模块是独立的文件，该文件内部的所有的变量外部都无法获取。如果希望获取某个变量，必须通过export输出 // profile.js export var firstName = 'Michael'; export var lastName = 'Jackson'; export var year = 1958; 或者用更好的方式：用大括号指定要输出的...
es6动态模块import()
qq_37312180的博客
03-11 2951
import命令会被 JavaScript 引擎静态分析，先于模块内的其他语句执行（import命令叫做“连接” binding 其实更合适）。上面代码中，引擎处理import语句是在编译时，这时不会去分析或执行if语句，所以import语句放在if代码块之中毫无意义，因此会报句法错误，而不是执行时错误。也就是说，import和export命令只能在模块的顶层，不能在代码块之中（比如，在if代码块之中，或在函数之中）。这样的设计，固然有利于编译器提高效率，但也导致无法在运行时加载模块。
ES6 - import/export [如何动态导入模块] - 学习/实践
william_n的博客
01-22 8658
1.应用场景 主要用于学习, 使用ES6的导入导出模块, 以及动态导入的用法. 2.学习/操作 1.文档阅读 https://es6.ruanyifeng.com/#docs/module //Module 的语法 2.整理输出 TBD 动态导入模块, 有时要根据环境不同, 动态导入[是否导入, 或不同]模块, ES6的解决方案: ES2020提案引入import()函数，支持动态加载模块。 Note: ...
ES6新特性之模块Module用法详解
08-30
总结来说，ES6模块系统通过`export`和`import`关键字提供了强大的模块管理能力，使得JavaScript代码可以更好地组织和复用。这种静态化的模块系统不仅解决了JavaScript的模块化问题，还提升了代码的可维护性和性能，...
前端技术栈: css和ES6
最新发布
06-19
6. **模块**：import和export关键字引入和导出模块，实现代码组织和复用。 7. **Promise**：处理异步操作的新方法，解决回调地狱问题，引入了链式调用的概念。 8. **生成器（Generator）**：用于创建迭代器，允许...
es6学习资料.zip
07-21
**模块系统**是ES6的一大亮点，使用`import`和`export`关键字，我们可以按需导入和导出功能，提高了代码的组织性和重用性。例如`export default`用于导出默认功能，`export const`和`export function`则用于导出常量...
es6-template
05-02
在 JavaScript 的 ES6（ECMAScript 2015）版本中，引入了一种新的字符串表示方式——模板字符串，它以反引号（`）包围，提供了一种更方便的字符串插值方法，极大地提高了代码的可读性和简洁性。这个模板被称为“es6-...
es6-5
02-11
模块化是ES6的重要革新之一，通过`import`和`export`关键字，我们可以编写模块化的代码，实现代码的组织和重用。相比于之前的CommonJS和AMD模块规范，ES6模块更符合静态类型语言的思维，更利于静态分析和优化。 ES6...
ES6模块化的import和export用法方法总结
11-30
ES6之前已经出现了js模块加载的方案，最主要的是CommonJS和AMD规范。commonjs主要应用于服务器，实现同步加载，如nodejs。AMD规范应用于浏览器，如requirejs，为异步加载。同时还有CMD规范，为同步加载方案如seaJS。 ES6在语言规格的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。 ES6模块主要有两个功能：export和import export用于对外输出本模块（一个文件可以理解为一个模块）变量的接口 import用于在一个模块中加载另一个含有export接口的模块。 也就
ESModule-import用法
往事不回头,余生不将就
10-22 8907
画龙点睛
JS中export怎么用
Learn-anything.cn
11-20 7557
一、export 用法 有两种不同的导出方式：命名导出和默认导出。命名导出可以导出多个接口，而默认导出，只能导出一个。 1、命名导出： 导入时，必须使用导出接口的名字。 // 导出事先定义的特性 export { myFunction，myVariable }; // 导出单个特性（可以导出var，let，const,function,class） export let myVariable = Math.sqrt(2); export function myFunction() { ... };
element-ui后台管理系统学习(4)-分离全局配置文件
从零出发
09-12 571
在项目中很多地方的基础信息是固定的，这个时候我们便可以进行全局配置。方法很简单，就是新建js文件，导出，挂在到Vue原型上面即可。代码如下： 第1步：新建src/config/config.js。 export default { logo:'element-admin', navBar: { active: "0", list: [ ...
【ES6】Module 语法（import 和 export）
qq_45677671的博客
09-29 570
文章目录一、import export（导入导出）1.1、基本用法1.2、扩展用法（`as` 和 `*`）1.3、注意事项二、export default（导入导出）2.1、基本使用2.2、混合使用 一、import export（导入导出） 一个模块就是一个独立的文件。该文件内部的所有变量，外部无法获取。如果你希望外部能够读取模块内部的某个变量，就必须使用export关键字输出该变量 使用export命令定义了模块的对外接口以后，其他 JS 文件就可以通过import命令加载这个模块。 1.1、基
Module 的语法
weixin_44954172的博客
12-13 252
Module 的语法 在 ES6 之前，社区制定了一些模块加载方案，最主要的有 CommonJS 和 AMD 两种。前者用于服务器，后者用于浏览器。ES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器通用的模块解决方案。 ES6 模块的设计思想是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。C...
ES6 中import 命令
妖怪的博客
01-13 1734
ES6 中引入了模块功能，模块功能主要由两个命令构成：export和import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。
Es6模块化Export和import用法大全
parade岁月的博客
05-15 2185
概念 export和import是ES6模块中的两个命令:export 用于从模块中导出实时绑定的函数、对象或原始值，以便其他程序可以通过 import使用它们。 ES6中export和import一般的用法有两种 命名导出（Named exports） 默认导出（Default exports） 命名导出（Named exports） 就是每一个需要导出的数据类型都要有一个name，统一引入一定要带有{}，即便只有一个需要导出的数据类型。这种写法清爽直观，是推荐的写法 //------ lib.js
javascript es6中export、import与export default的用法和区别
06-06
在JavaScript ES6中，用export、import和export default关键字可以实现模块化编程。 export关键字用于导出一个或多个模块，可以导出变量、函数、对象等内容。 import关键字用于引入一个或多个模块，由于导出的内容...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值