ES6 Module 的语法(十二)

ES6(ECMAScript 2015)引入了模块(Modules)的概念,使得JavaScript代码可以更容易地组织和复用。

1. export 关键字

命名导出 (Named Exports)
你可以使用 export 关键字导出多个变量、函数或类。

// module.js
export const name = 'John';
export function greet() {console.log('Hello, ' + name);
}
export class Person {constructor(name) {this.name = name;}
}

默认导出 (Default Export)
每个模块只能有一个默认导出,用 export default 来实现。

// module.js
export default function() {console.log('This is the default export');
}

2. import 关键字

导入命名导出 (Importing Named Exports)
使用 import 关键字可以导入其他模块的命名导出。

// main.js
import { name, greet, Person } from './module.js';console.log(name); // John
greet(); // Hello, John
const person = new Person('Jane');
console.log(person.name); // Jane

导入默认导出 (Importing Default Export)
导入默认导出时,不需要使用大括号。

// main.js
import myFunction from './module.js';myFunction(); // This is the default export

导入所有导出 (Importing All Exports)
可以使用 * as 语法导入一个模块的所有导出,并将其绑定到一个对象上。

// main.js
import * as myModule from './module.js';console.log(myModule.name); // John
myModule.greet(); // Hello, John
const person = new myModule.Person('Jane');
console.log(person.name); // Jane

3. 重新导出 (Re-Exporting)

可以从一个模块中重新导出另一个模块的导出。

// module1.js
export const a = 1;
export const b = 2;// module2.js
export { a, b } from './module1.js';
export const c = 3;// main.js
import { a, b, c } from './module2.js';console.log(a, b, c); // 1 2 3

4. 动态导入 (Dynamic Import)

ES2020引入了动态导入,使用 import() 函数可以在运行时按需加载模块。

// main.js
async function loadModule() {const module = await import('./module.js');module.greet(); // Hello, John
}loadModule();

5. 具有副作用的模块 (Modules with Side Effects)

一些模块在导入时会执行一些代码,这些模块被称为具有副作用的模块。

// sideEffectModule.js
console.log('Module loaded');// main.js
import './sideEffectModule.js'; // Module loaded

6. export 和 import 的高级用法

导出和导入时重命名
可以在导出和导入时使用 as 关键字进行重命名。

// module.js
const name = 'John';
function greet() {console.log('Hello, ' + name);
}
export { name as userName, greet as sayHello };// main.js
import { userName, sayHello } from './module.js';console.log(userName); // John
sayHello(); // Hello, John

导出时使用默认导出和命名导出

// module.js
export const name = 'John';
export default function() {console.log('This is the default export');
}// main.js
import defaultFunction, { name } from './module.js';console.log(name); // John
defaultFunction(); // This is the default export

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

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

相关文章

嵌入式C++、Qt/QML和MQTT:智能工厂设备监控系统的全流程介绍(附代码示例)

1. 项目概述 本项目旨在开发一套先进的智能工厂设备监控系统,集成嵌入式技术、工业通信协议和人机界面等多项技术,实现对工厂设备的全方位实时监控、高精度数据采集和智能化分析。该系统将显著提升工厂设备的运行效率,大幅降低维护成本&…

【第33章】MyBatis-Plus之预防安全漏洞

文章目录 前言一、什么是漏洞?二、如何预防漏洞1.表字段部分2.字段参数/变量部分3. 使用工具类预防 三、关于恶意漏洞的说明总结 前言 软件漏洞可以对系统造成严重危害,如果被人恶意利用,会导致病毒感染、数据泄漏或损坏的风险,还…

基于AT89C51单片机的16×16点阵LED显示器字符滚动显示设计(含文档、源码与proteus仿真,以及系统详细介绍)

本篇文章论述的是基于AT89C51单片机的1616点阵LED显示器字符滚动显示设计的详情介绍,如果对您有帮助的话,还请关注一下哦,如果有资源方面的需要可以联系我。 目录 仿真效果图 仿真图 代码 系统论文 资源下载 设计的内容和要求 熟悉51系…

thinkphp5多层with关联查询错误问题

官方文档 https://www.kancloud.cn/manual/thinkphp5/139045 V5.0.7版本以上,支持使用数组方式定义嵌套预载入,例如下面的预载入要同时获取用户的Profile关联模型的Phone、Job和Img子关联模型数据: $list User::with([profile>[phone,j…

TS类型声明文件(一)如何在ts npm包项目中生成 d.ts 文件

现在TS项目很多,如果你开发的npm包不支持类型声明文件,对使用ts的开发者不太友好,开发者无法获得ts类型提示。如何在自己的 npm 包中自带 .d.ts 文件,以确保使用者不需要额外配置 tsconfig.json 就能获得类型提示,以下…

Python练习题(3)

1.使用requests模块获取这个json文件http://java-api.super-yx.com/html/hello.json 2.将获取到的json转为dict 3.将dict保存为hello.json文件 4.用文件流写一个copy(src,dst)函数,复制hello.json到C:\hello.json import requests import jsondef copy(src, dst):read_file o…

【typedb】例子:药物发现 1: 模式导入

typedb-examples/drug-discovery/ Drug discovery监听0.0.0.0:1729 但这么连接肯定不行: localhost:1729 可以: 一直无法点击schema图标:先创建一个数据库 选中数据库: 选中后就可以了:

我的第128天创作纪念日

🌈个人主页:是店小二呀 🌈C语言笔记专栏:C语言笔记 🌈C笔记专栏: C笔记 🌈初阶数据结构笔记专栏: 初阶数据结构笔记 🌈喜欢的诗句:无人扶我青云志 我自踏雪至山巅 文章…

演示:【Avalonia-Controls】Avalonia皮肤,主题,自定义控件,数据库,系统模块资源库

一、目的:分享一个Avalonia皮肤,主题,自定义控件,数据库,系统模块资源库 开源地址: GitHub - HeBianGu/Avalonia-Controls: Avalonia控件库 Nuget包地址: NuGet Gallery | Packages matchin…

02MFC画笔/画刷/画椭圆/圆/(延时)文字

文章目录 画实心矩形自定义画布设计及使用连续画线及自定义定义变量扇形画椭圆/圆输出颜色文本定时器与定时事件 画实心矩形 自定义画布设计及使用 连续画线及自定义定义变量 扇形 画椭圆/圆 输出颜色文本 定时器与定时事件

大模型时代的目标检测

https://zhuanlan.zhihu.com/p/663703934https://zhuanlan.zhihu.com/p/6637039341.open set/open word/ood 这个任务是指在实际应用上可以检测任何前景物体,但是有些不需要预测类别,只要检测出框就行。在很多场合也有应用场景,有点像类无关…

Memcached vs Redis——Java项目缓存选择

在Java项目开发中,缓存系统作为提升性能、优化资源利用的关键技术之一,扮演着至关重要的角色。Memcached和Redis作为两种流行的缓存解决方案,各有其独特的优势和应用场景。本文旨在通过分析项目大小、用户访问量、业务复杂度以及服务器部署情…

Chubby VS Zookeeper

Chubby 和 Zookeeper 是两种分布式协调服务,主要用于管理分布式系统中的配置、同步和命名等任务。以下是对这两种系统的比较: Chubby 开发者:由 Google 开发和使用,作为其内部服务的一部分。 设计目标:为 Google 的…

ABAP中将采购订单的预制发票过账的BAPI的使用方法

在ABAP中,将采购订单的预制发票过账的BAPI主要是BAPI_INCOMINGINVOICE_POST。这个BAPI用于将之前通过BAPI_INCOMINGINVOICE_PARK等函数创建的预制发票过账到SAP系统中,生成相应的会计凭证。 使用方法 以下是使用BAPI_INCOMINGINVOICE_POST的基本步骤&a…

力扣 爬楼梯

动态规划算法基础篇。 class Solution {public int climbStairs(int n) {int[] f new int[n 1];f[0] 1;f[1] 1;//当爬到n阶楼梯时&#xff0c;可知是由n-1阶或n-2阶楼梯而来for(int i 2; i < n; i) {f[i] f[i - 1] f[i - 2];//后面的每一阶种数由前两个状态得到}ret…

Milvus 核心设计 (3) ---- metric及index原理详解与示例(1)

目录 背景 Floating point embeddings 特点 适用场景 丈量方式 Euclidean distance (L2) Inner product (IP) Cosine similarity (COSINE) 代码写法 索引类型 In-Memory FLAT 索引 IVF_FLAT IVF_FLAT的工作流程 平衡准确性与速度 性能考虑 代码写法 IVF_SQ8 …

栈和队列 OJ (一)

括号匹配问题 题目链接&#xff1a; https://leetcode.cn/problems/valid-parentheses/ 遇到左括号入栈&#xff0c;遇到右括号&#xff0c;我们就出栈看看括号是否匹配 这里要注意如果左括号多于右括号的情况下&#xff0c;字符串循环遍历结束时&#xff0c;栈不为空&#x…

Android --- Kotlin学习之路:自己写一个SDK给别的APP用(暴漏一个接口,提供学生的身高数据)

今天又来肝kotlin了&#xff0c;主题是&#xff1a;用kt写一个SDK给其他人用&#xff0c;这个小技能在项目中会经常用到&#xff0c;应该有很多小伙伴还不会用&#xff0c;不会的请往下看—⬇ 在项目里面新建一个module 选择Android library&#xff0c;然后点击finish就行了 …

React有哪些优点和缺点

React 作为一个广泛使用的 JavaScript 库&#xff0c;在前端开发领域具有显著的优点&#xff0c;但同时也存在一些缺点。以下是对 React 的一些主要优点和缺点的概述&#xff1a; 优点 组件化开发&#xff1a; React 鼓励将 UI 分解为小的、独立的、可复用的组件。这种方式使得…

PostgreSQL UPDATE 命令

PostgreSQL UPDATE 命令 PostgreSQL 是一种功能强大的开源对象关系型数据库管理系统(ORDBMS),它使用并扩展了SQL语言。在处理数据库时,我们经常需要更新现有的记录。在PostgreSQL中,UPDATE命令用于修改表中的现有记录。 基本语法 UPDATE命令的基本语法如下: UPDATE t…