ES6标准---【八】【学习ES6看这一篇就够了！！！】

news2024/11/15 11:42:55

目录

前言

export命令

输出变量

输出函数/类

export中的as别名

export必须一一对应

 export接口的响应性

 注意

import命令

import命令的语法

import命令里的as别名

import的只读性

import命令具有提升性

import的一些约定

import的静态执行

import的唯一执行性

模块的整体加载

方法一

方法二

注意

export default命令

export default语法

export default的另类输出

export与import的复合写法

跨模块常量

前言

ES6标准---【一】【学习ES6看这一篇就够了！！】_es6学习-CSDN博客

ES6标准---【二】【学习ES6看这一篇就够了！！】_es6中的includes-CSDN博客

ES6标准---【三】【学习ES6看这一篇就够了！！！】-CSDN博客

ES6标准---【四】【学习ES6标准看这一篇就够了！！！】_es6 有arguments 吗-CSDN博客

ES6标准---【五】【看这一篇就够了！！！】-CSDN博客

ES6标准---【六】【学习ES6标准看这一篇就够了！！！】-CSDN博客

ES6标准---【七】【学习ES6标准看这一篇就够了！！！】-CSDN博客

export命令

export命令用于规定模块的对外接口

一个模块是一个独立的文件，该文件内部的所有变量，外部无法获取

如果想要外部能够读取模块内部的某个变量(函数、类)，就必须使用export关键字输出该变量(函数、类)

输出变量

// profile.js
// 第一种写法
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

// profile.js
// 第二种写法
// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export { firstName, lastName, year };

在实际中，我们应优先使用第二种写法，这种写法可以一眼看出究竟输出了哪些变量

输出函数/类

输出函数/类直接export函数名/类名即可

function v1() { ... }
function v2() { ... }
export {v1,v2,v3};
  • 一个例子
// profile.js
function test1() {
    console.log("hello,this istest1");
}
export {test1};

// 测试html
<body>
	<script type="module">
		import {test1} from "./JS/profile.js"
		test1();
	</script>
</body>

效果：

​

export中的as别名

通常情况下，export输出的变量/函数/类，是它们的名字，但是也可以使用as关键字重命名

function v1() { ... }
function v2() { ... }
export {
  v1 as streamV1,
  v2 as streamV2,
  v2 as streamLatestVersion
};

使用as关键字，重命名v1和v2函数的“对外接口名”

  • 外部调用需要使用“对外接口名”
  • 重命名后v2可以用不同的名字输出两次(但是调用两个“对外接口名”都是指v2函数)

export必须一一对应

export命令规定的是“对外接口名”，必须与模块内部的变量建立一一对应的关系

// 报错
export 1;
// 报错
var m = 1;
export m;

// 三种正确的写法
// 方法一
export var m = 1;
// 方法二
var m = 1;
export {m};
// 方法三
var m = 1;
export {m as n};

// 报错
function f() {}
export f;
// 正确
export function f() {};
// 正确
function f() {}
export {f};

 export接口的响应性

export语句输出的接口，与其对应的值是动态绑定关系(某个变量的值在export输出后，如果改变了值，那么外部接口调用的值也是改变的)

即：“通过该接口，可以取到模块内部实时的值”

export var foo = 'bar';
setTimeout(() => foo = 'baz', 500);
  • 上面代码变量foo的值，在500ms之后变成baz，下面是一个例子
// profile.js
export var data = 1;
setTimeout(() => data = 2,1000);

// 测试html
<body>
	<script type="module">
		import {data} from "./JS/profile.js"
		setInterval(() => console.log(data), 500);
	</script>
</body>

效果：

​

 注意

export命令(包括后面的import命令)可以出现在模块的任何位置，只要处于模块顶层就可以

如果处于块级作用域(if语句、for语句、函数等等)，就会报错

function test() {
    import {data} from "./JS/profile.js" //报错
}

效果：

​

import命令

import命令用于接收. >
?" 用export命令定义了模块的对外接口后，其它JS/HTML文件就可以通过import命令使用这个模块

//profile.js
var x = 1,y = 2,z = 3;
export {x,y,z};

//main.js
import {x,y,z} from "./JS/progile.js";
console.log("x+y+z =",x+y+z);

​

import命令的语法

import语法：

import {变量a,变量b...} from "url"

其中，url可以是：

  • 绝对路径
  • 相对路径

import命令里的as别名

import与export一样，允许对接收到的的输出接口(也叫import的输入接口)起一个别名

import {x as m} from "./JS/profile.js";
  • 起别名后，原先的名字不可以使用
import {x as m} from "./JS/profile.js";

console.log(x);    //报错,as别名后，原先的名字不能使用
console.log(m);    //正确

import的只读性

import命令输入的“变量”、“函数”、“类”都是只读的，不允许在外部修改它们的值

import {x as m} from "./JS/profile.js";
m = 10;    //报错,不允许在外部修改它的值
  • 但是如果变量是一个“对象”，改写变量的属性，是允许的
  • 尽管对象的属性可以改写，但是不建议这样做，不利于排错，因此全部归类为“只读的”是比较稳妥的办法

import命令具有提升性

import命令具有提升效果，会提升到整个模块的头部，首先执行

原因是：“import命令是编译阶段运行的，在代码运行之前”

下面的代码不会报错，因为import命令具有提升效果

foo();
import { foo } from 'my_module';

import的一些约定

import的静态执行

import是静态执行，所以不能使用表达式和变量(即：只有在运行时才能得到结果的语法结构)

// 报错
import { 'f' + 'oo' } from 'my_module';
// 报错
let module = 'my_module';
import { foo } from module;
// 报错
if (x === 1) {
  import { foo } from 'module1';
} else {
  import { foo } from 'module2';
}

import的唯一执行性

如果多次重复加载“相同的一个js文件”，那么只会执行一次，而不会执行多次

import { foo } from 'my_module';
import { bar } from 'my_module';
// 等同于
import { foo, bar } from 'my_module';

模块的整体加载

除了指定加载某个具体的值，我们还可以整体加载一整个js文件(类似于ES6以前使用script导入一整个js文件)，用星号【*】指定一个对象，所有js文件的输出值都在这个对象里面

例如，要整体导入一个“profile.js”文件，可以有两个方法

方法一

手动指定profile.js文件中所有的变量、函数、类

// profile.js
var a = 1;
function myFunction () {
    conosle.log("这里是myFunction()");
}
export {a,myFunction};

//main.js 在这里加载这个模块
import {a,myFunction} from "./JS/profile.js";

console.log("a的值为:",a);
myFunction();

方法二

使用星号【*】导入

// profile.js
var a = 1;
function myFunction () {
    conosle.log("这里是myFunction()");
}
export {a,myFunction};

//main.js 在这里加载这个模块
import * as profile from "./JS/profile.js";

console.log("a的值为:",profile.a);
profile.myFunction();

注意

虽然使用星号整体导入一整个js文件并把这个文件赋值给一个对象，但是这个对象却不能添加、修改、删除属性，即这个对象是“只读的”

下面的写法都是不允许的：

import * as profile from "./JS/profile.js";

//下面两行都是不允许的
profile.a = 2;
profile.otherFunction = function() {};

export default命令

使用import命令时，用户需要知道“输出接口名”，否则无法加载

为此，我们引入export default命令，使用该命令可以不必在意“输出接口名”，直接上手！！

export default的默认输出是一个函数或变量

export default语法

export default function () {...};

export default 变量;

// profile.js
export default function () {
    console.log("这里是default function()");
}

其他模块加载该模块时，import命令可以为该匿名函数指定任意名字(自取)

// main.js
import importFunction from './JS/profile.js';
importFunction();

效果：

​

需要注意的是，导入默认函数，import后面不必再加“花括号”

  • export default命令也可以用在非匿名函数前，不过此时非匿名函数名在外部是无效的，加载时，视同匿名函数加载
// export-default.js
export default function foo() {
  console.log('foo');
}
// 或者写成
function foo() {
  console.log('foo');
}
export default foo;

export default的另类输出

本质上，export default就是输出一个叫做“default”的变量或方法，然后系统允许你为它设置任意名字

因此，下面的写法是有效的：

// modules.js
function add(x, y) {
  return x * y;
}
export {add as default};
// 等同于
// export default add;
// app.js
import { default as foo } from 'modules';
// 等同于
// import foo from 'modules';
  • export export后面不能跟变量声明语句
// 正确
export var a = 1;
// 正确
var a = 1;
export default a;
// 错误
export default var a = 1;
  • 我们可以直接将一个值直接写在export default之后
// 正确
export default 42;
// 报错
export 42;
  • export default也可以用来输出类
// MyClass.js
export default class { ... }
// main.js
import MyClass from 'MyClass';
let o = new MyClass();

export与import的复合写法

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

export { foo, bar } from 'my_module';
// 可以简单理解为
import { foo, bar } from 'my_module';
export { foo, bar };

注意【重要】：

  •  foo和bar并没有被导入当前模块，只是相当于对外转发了这两个接口，导致当前模块不能直接使用“foo”和“bar”

模块的接口改名和整体输出，也可以用这种写法：

// 接口改名
export { foo as myFoo } from 'my_module';
// 整体输出
export * from 'my_module';

默认接口的写法：

转发默认接口，需要添加“花括号”

export { default } from 'foo';

具名接口改为默认接口的写法：

export { es6 as default } from './someModule';
// 等同于
import { es6 } from './someModule';
export default es6;

默认接口改为具名接口：

export { default as es6 } from './someModule';

转发一整个js文件：

export * as ns from "mod";
// 等同于
import * as ns from "mod";
export {ns};

注意：使用“export *”会忽略default方法

跨模块常量

const声明的常量只在当前代码块有效，如果想设置跨模块的常量(即跨多个文件)，或者说一个值要被多个模块共享，可以采用下面的写法：

// constants.js 模块
export const A = 1;
export const B = 3;
export const C = 4;
// test1.js 模块
import * as constants from './constants';
console.log(constants.A); // 1
console.log(constants.B); // 3
// test2.js 模块
import {A, B} from './constants';
console.log(A); // 1
console.log(B); // 3
  • 如果要使用的常量非常多，可以搭建一个专门的“constants”目录，将各种常量写在不同的文件里面，保存在该目录下：
// constants/db.js
export const db = {
  url: 'http://my.couchdbserver.local:5984',
  admin_username: 'admin',
  admin_password: 'admin password'
};
// constants/user.js
export const users = ['root', 'admin', 'staff', 'ceo', 'chief', 'moderator'];
  • 然后将这些文件输出的常量，合并在一个js文件里：
// constants/myindex.js
export {db} from './db';
export {users} from './users';
  • 使用的时候，直接加载这个js文件即可：
// script.js
import {db, users} from './constants/myindex.js';

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

windows查找端口号被占用

windows查找端口号被占用

在很多开发的时候&#xff0c;可能端口号有被占用的情况&#xff0c;导致项目打不开。 用下面这个命令即可&#xff1a; 比如我的3000端口被占用&#xff0c;我找找哪个进程在占用我的3000端口号
阅读更多...
SVM原理

SVM原理

SVM 这里由于过了很长时间 博主当时因为兴趣了解了下 博主现在把以前的知识放到博客上 作为以前的学习的一个结束 这些东西来自其他资料上 小伙伴看不懂英文的自行去翻译下吧 博主就偷个懒了 多维空间和低维空间 不一样的分法&#xff0c;将数据映射到高维 &…
阅读更多...
【电路笔记】-运算放大器比较器

【电路笔记】-运算放大器比较器

运算放大器比较器 文章目录 运算放大器比较器1、概述2、表示2.1 同相比较器2.2 反相比较器3、临界点转换4、施密特触发器4.1 同相触发器4.2 反相触发器4.3 应用5、总结1、概述 在前面的大多数运算放大器文章中，电路都有一个到反相输入的反馈环路。 这种设计是最常见的，因为它…
阅读更多...
汇总区间计算

汇总区间计算

给定一个 无重复元素 的 有序 整数数组 nums 。 返回 恰好覆盖数组中所有数字 的 最小有序 区间范围列表 。也就是说&#xff0c;nums 的每个元素都恰好被某个区间范围所覆盖&#xff0c;并且不存在属于某个范围但不属于 nums 的数字 x 。 列表中的每个区间范围 [a,b] 应该按…
阅读更多...
感知笔记：ROS 视觉- 跟随红球

感知笔记：ROS 视觉- 跟随红球

- 目录 - 如何在 ROS 中可视化 RGB 相机。如何作为机器人切换主题。如何创建 blob 检测器。如何获取要跟踪的颜色的颜色编码。如何使用 blob 检测数据并移动 RGB 相机以跟踪 blob。 机器人技术中最常见的传感器是不起眼的 RGB 摄像头。它用于从基本颜色跟踪&#xff08;blob 跟…
阅读更多...
Vue2接入高德地图API实现搜索定位和点击获取经纬度及地址功能

Vue2接入高德地图API实现搜索定位和点击获取经纬度及地址功能

目录 一、申请密钥 二、安装element-ui 三、安装高德地图依赖 四、完整代码 五、运行截图 一、申请密钥 登录高德开放平台&#xff0c;点击我的应用&#xff0c;先添加新应用&#xff0c;然后再添加Key。 如图所示填写对应的信息&#xff0c;系统就会自动生成。 二、安装…
阅读更多...
python-奖金/贪心的小明

python-奖金/贪心的小明

一&#xff1a;奖金 题目描述 企业发放的奖金根据利润提成。利润低于或等于 100000 元的&#xff0c;奖金可提 10%&#xff1b; 利润高于 100000 元&#xff0c;低于 200000 元&#xff08; 100000<I≤200000&#xff09;时&#xff0c;低于 100000 元的部分按 10% 提成&…
阅读更多...
二叉树的链式结构和递归程序的递归流程图

二叉树的链式结构和递归程序的递归流程图

二叉树的链式存储结构是指&#xff0c;用链表来表示一棵二叉树&#xff0c;即用链来指示元素的逻辑关系。 通常的方法是链表中每个结点由三个域组成&#xff0c;数据域和左右指针域&#xff0c;左右指针分别用来给出该结点左孩子和右孩子所在的链结点的存储地址 。链式结构又分…
阅读更多...
一个基于VB的期刊信息管理系统

一个基于VB的期刊信息管理系统

一个基本的期刊信息管理系统的示例&#xff0c;使用 Visual Basic (VB.NET) 编写。这个示例将展示如何创建一个简单的期刊信息管理系统&#xff0c;其中包括添加、查看、编辑和删除期刊的功能。 系统需求 添加期刊&#xff1a;允许用户输入期刊的信息&#xff08;如标题、作者…
阅读更多...
面试官问：你如何处理与同事或上级的分歧？【无标题】

面试官问：你如何处理与同事或上级的分歧？【无标题】

面试官问&#xff1a;你如何处理与同事或上级的分歧&#xff1f; 当面试官问你如何处理与同事或上级的分歧&#xff0c;其实面试官的目的是评估你的沟通技巧、冲突解决能力和团队合作的能力。在一起共事&#xff0c;就一定有分歧发生&#xff0c;有争执是正常的&#xff0c;关…
阅读更多...
OpenCV 1

OpenCV 1

前言&#xff1a;开新坑辽&#xff0c;&#xff0c; 目录 计算机眼中的图像 视频的读取与处理 ROI区域 边界填充 数值计算 腐蚀操作 膨胀操作 开运算与闭运算 梯度计算 礼貌与黑帽 Sobel算子 梯度计算方法 scharr与laplacian 计算机眼中的图像 灰色图片&#xff0…
阅读更多...
ROS第四梯：ROS项目中添加自定义类

ROS第四梯：ROS项目中添加自定义类

第一步&#xff0c;ROS项目结构介绍 工作空间中包含一个名为pcl_ros_test的功能包&#xff0c;其中main.cpp是原有项目自带的&#xff0c;接下来以CommonAlg自定义类添加为例进行介绍。 第二步&#xff1a;头文件CommonAlg.h创建和编写&#xff0c;并保存在include/pcl_ros_tes…
阅读更多...
达梦数据库导入xml迁移到达梦数据库大文件导致中断问题解决方案记录？

达梦数据库导入xml迁移到达梦数据库大文件导致中断问题解决方案记录？

问题&#xff1a;我将同事给我的xml文件迁移到盗梦数据库&#xff0c;xml文件大约2G&#xff0c;在导入过程中&#xff0c;总是导入一半都不到就失败了。 原因&#xff1a;我的原因是我的电脑的系统的运行内存是16G的&#xff0c;后来我发现在没导入之前&#xff0c;其他进程已…
阅读更多...
GUI编程18：文本框、密码框、文本域

GUI编程18：文本框、密码框、文本域

视频链接&#xff1a;20、文本框、密码框、文本域_哔哩哔哩_bilibilihttps://www.bilibili.com/video/BV1DJ411B75F?p20&vd_sourceb5775c3a4ea16a5306db9c7c1c1486b5 1.文本框 示例代码&#xff1a; package com.yundait.lesson06;import javax.swing.*; import java.a…
阅读更多...
初始分布式系统和Redis特点（

初始分布式系统和Redis特点（

&#xff08;一&#xff09;认识redis Redis是一个开源&#xff08;BSD许可&#xff09;&#xff0c;内存存储的数据结构服务器&#xff0c;可用作数据库&#xff0c;高速缓存和消息队列代理。它支持字符串、哈希表、列表、集合、有序集合&#xff0c;位图&#xff0c;hyperlog…
阅读更多...
『功能项目』QFrameWorkBug修改器界面【65】

『功能项目』QFrameWorkBug修改器界面【65】

我们打开上一篇64QFrameWork道具栏物品生成的项目&#xff0c; 本章要做的事情是做一个道具bug调试面板&#xff0c;可以增加主角属性&#xff0c;可以增加道具的功能 首先创建一个空物体&#xff08;钉子&#xff09; 按住Alt键将空物体钉到左侧 重命名为Left 创建Button、Im…
阅读更多...
基于SpringBoot+Vue的企业会议室预定管理系统

基于SpringBoot+Vue的企业会议室预定管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于JavaSpringBootVueMySQL的…
阅读更多...
Qt实战案例（60）——利用QTimer类实现实时时间功能

Qt实战案例（60）——利用QTimer类实现实时时间功能

目录 一、项目介绍二、项目基本配置三、UI界面设置四、主程序实现4.1 widget.h头文件4.2 widget.cpp源文件 五、效果演示 一、项目介绍 本文介绍利用QTimer类实现实时时间功能并在状态栏中进行显示。 二、项目基本配置 新建一个Qt案例&#xff0c;项目名称为“TimeTest”&am…
阅读更多...
阿里通义千问开源Qwen2.5系列模型：Qwen2-VL-72B媲美GPT-4

阿里通义千问开源Qwen2.5系列模型：Qwen2-VL-72B媲美GPT-4

通义千问团队近日重磅宣布&#xff0c;继其Qwen2模型发布仅三个月后&#xff0c;再次推出Qwen家族的全新成员——Qwen2.5系列语言模型&#xff0c;并已全面开源。这次开源行动堪称史上规模之最&#xff0c;涵盖了通用型Qwen2.5&#xff0c;以及专为编程和数学领域打造的Qwen2.5…
阅读更多...
如何使用ssm实现基于ssm框架的车辆出租管理系统+vue

如何使用ssm实现基于ssm框架的车辆出租管理系统+vue

TOC ssm643基于ssm框架的车辆出租管理系统vue 第1章 绪论 1.1 课题背景 二十一世纪互联网的出现&#xff0c;改变了几千年以来人们的生活&#xff0c;不仅仅是生活物资的丰富&#xff0c;还有精神层次的丰富。在互联网诞生之前&#xff0c;地域位置往往是人们思想上不可跨域…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023