JavaScript中的export和import

文章目录

一、前言

要使用一个JavaScript文件自定义一个对象并将其导出,可以按照以下步骤进行:

1.1、创建JavaScript文件

创建一个JavaScript文件,例如myObject.js

1.2、定义自定义对象

myObject.js文件中定义一个自定义对象。可以使用下面的代码作为示例:

javascript 复制代码
// 定义自定义对象
const myObject = {
  name: 'John',
  age: 25,
  sayHello() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
};

// 导出自定义对象
export default myObject;

上述代码中定义了一个名为myObject的对象,并向其添加了nameage属性和sayHello()方法。然后使用export default关键字将该对象导出。

1.3、引入自定义对象

在其他文件中引入这个对象。可以使用以下代码:

javascript 复制代码
// 引入自定义对象
import myObject from './myObject.js';

// 使用自定义对象
console.log(myObject.name); // 输出:John
console.log(myObject.age); // 输出:25
myObject.sayHello(); // 输出:Hello, my name is John and I'm 25 years old.

在上面的代码中,使用import关键字来引入myObject.js文件导出的默认对象。然后就可以使用该对象的属性和方法进行操作。

需要注意的是,在导出自定义对象时可以使用多种方式,例如使用export const myObject = {...}module.exports = {...}等方式。但是在上面的示例中使用了ES6export default语法来导出默认对象,这是一种常见的方式。

二、考察知识点:JavaScript 中的 export

exportES6中的一个关键字,用于将变量、函数、类等导出为模块的接口,供其他模块使用。

当我们在编写模块时,需要向外部暴露一些内容,以便其他模块可以引入并使用。这时就可以使用export关键字来导出需要暴露的内容。

JavaScript 中的export语法有两种形式:命名导出默认导出

2.1、命名导出

命名导出是指通过给变量、函数、类等赋予一个名称,并使用export关键字将其导出。例如:

javascript 复制代码
// 导出变量
export const PI = Math.PI;

// 导出函数
export function sayHello(name) {
  console.log(`Hello, ${name}!`);
}

// 导出类
export class Person {
  constructor(name) {
    this.name = name;
  }
  sayHi() {
    console.log(`Hi, I'm ${this.name}`);
  }
}

上面的代码中分别导出了一个常量PI、一个函数sayHello和一个类Person。在导出时使用export关键字将它们命名为模块的接口,以便其他模块引入并使用。

2.2、默认导出

默认导出是指当模块只需要导出一个变量、函数或类时,可以使用默认导出。需要注意的是,一个模块只能有一个默认导出。例如:

javascript 复制代码
// 导出默认值
export default function add(x, y) {
  return x + y;
}

// 导出默认值
export default class Person {
  constructor(name) {
    this.name = name;
  }
  sayHi() {
    console.log(`Hi, I'm ${this.name}`);
  }
}

// 导出默认值
const obj = {
  name: 'John',
  age: 25
};
export default obj;

上面的代码中分别导出了一个函数add、一个类Person和一个对象obj。在导出时使用export default关键字将它们作为模块的默认接口暴露出去,以便其他模块引入并使用。

另外,在使用导出模块的接口时,可以使用import关键字将模块引入,并通过解构赋值等方式获取需要的接口。例如:

javascript 复制代码
// 引入模块
import { PI, sayHello, Person } from './myModule.js';

// 使用模块接口
console.log(PI); // 输出:3.141592653589793
sayHello('Tom'); // 输出:Hello, Tom!
const person = new Person('John');
person.sayHi(); // 输出:Hi, I'm John

在上面的代码中,使用import关键字将myModule.js模块中的PI常量、sayHello()函数和Person类引入,并分别使用它们。

二、最后

本人每篇文章都是一字一句码出来,希望对大家有所帮助,多提提意见。顺手来个三连击,点赞👍收藏💖关注✨,一起加油☕

相关推荐
~甲壳虫2 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
Cwhat3 分钟前
前端性能优化2
前端
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
别拿曾经看以后~3 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死3 小时前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试3 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人3 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人3 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome