JS中 require 与 import 的区别

简介: JS中 require 与 import 的区别

在 JavaScript 中,有两种不同的模块加载方式:require 和 import。

require 是 CommonJS 的模块加载方式,而 import 是 ES6 中的模块加载方式。

主要区别如下:

  1. 语法不同
  • require 语法:
const module = require('module-name');
  • import 语法:
import module from 'module-name';
  1. 加载方式不同

require 是同步加载模块,而 import 是异步加载模块。

  1. 引入的模块不同

require 会将整个模块的内容全部引入,而 import 只会引入需要的部分内容,可以通过解构赋值等方式选择性地导入。

下面是一个例子:

// test-module.js
module.exports = {
  name: 'test module',
  version: '1.0.0'
};
// main.js
// require
const module1 = require('./test-module.js');
console.log(module1); // { name: 'test module', version: '1.0.0' }
// import
import { name } from './test-module.js';
console.log(name); // test module

可以看到,通过 require 引入的模块是一个对象,包含了整个模块的内容。而通过 import 引入的模块只包含了需要使用的部分内容。

相关文章
|
3月前
|
JavaScript 前端开发 索引
js遍历的方法与区别
js遍历的方法与区别
58 3
|
3月前
|
JavaScript 前端开发 索引
js的循环中foreach、for in和for of的区别
js的循环中foreach、for in和for of的区别
147 0
|
15天前
|
设计模式 JavaScript 前端开发
js中new和object.creat区别
【10月更文挑战第29天】`new` 关键字和 `Object.create()` 方法在创建对象的方式、原型链继承、属性初始化以及适用场景等方面都存在差异。在实际开发中,需要根据具体的需求和设计模式来选择合适的方法来创建对象。
|
2月前
|
前端开发 JavaScript UED
JavaScript防抖和节流的使用及区别
JavaScript防抖和节流的使用及区别
105 57
|
1月前
|
存储 JavaScript 前端开发
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
71 0
JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
|
1月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
16 2
|
1月前
|
JavaScript 前端开发
【JavaScript】let,const和var的区别
总的来说,随着ECMAScript 6(ES6)及后续版本的推广,`let`和 `const`因其增强的块级作用域和对变量行为的更严格控制,逐渐成为现代JavaScript编码实践中推荐使用的变量声明方式。而 `var`由于其历史遗留的局限性,正逐渐被边缘化,但在维护老代码或处理特定兼容性需求时仍需了解。
35 3
|
2月前
|
前端开发 JavaScript 开发者
React 和 Vue.js 框架的区别是什么?
React 和 Vue.js 框架的区别是什么?
|
2月前
|
JavaScript 前端开发
JavaScript中单引号和双引号的效果的一点区别
JavaScript中单引号和双引号的效果的一点区别
|
2月前
|
前端开发 JavaScript API
JavaScript 的宏任务和微任务有什么区别
【9月更文挑战第6天】JavaScript 的宏任务和微任务有什么区别
60 4