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 引入的模块只包含了需要使用的部分内容。

相关文章
|
2月前
|
JavaScript 前端开发 索引
js遍历的方法与区别
js遍历的方法与区别
49 3
|
2月前
|
JavaScript 前端开发 索引
js的循环中foreach、for in和for of的区别
js的循环中foreach、for in和for of的区别
116 0
|
28天前
|
前端开发 JavaScript UED
JavaScript防抖和节流的使用及区别
JavaScript防抖和节流的使用及区别
93 57
|
7天前
|
JavaScript 前端开发
【JavaScript】let,const和var的区别
总的来说,随着ECMAScript 6(ES6)及后续版本的推广,`let`和 `const`因其增强的块级作用域和对变量行为的更严格控制,逐渐成为现代JavaScript编码实践中推荐使用的变量声明方式。而 `var`由于其历史遗留的局限性,正逐渐被边缘化,但在维护老代码或处理特定兼容性需求时仍需了解。
13 3
|
15天前
|
JavaScript 前端开发
JavaScript中单引号和双引号的效果的一点区别
JavaScript中单引号和双引号的效果的一点区别
|
18天前
|
前端开发 JavaScript 开发者
React 和 Vue.js 框架的区别是什么?
React 和 Vue.js 框架的区别是什么?
|
1月前
|
前端开发 JavaScript API
JavaScript 的宏任务和微任务有什么区别
【9月更文挑战第6天】JavaScript 的宏任务和微任务有什么区别
25 4
|
18天前
|
JavaScript 前端开发
JS基础 if和switch区别
本文比较了JavaScript中的`if`语句和`switch`语句的区别,并通过示例代码展示了它们的用法,解释了何时使用`if`更合适以及`switch`语句的特点和应用场景。
15 0
|
1月前
|
存储 JavaScript 前端开发
|
2月前
|
JavaScript 前端开发 Java
Java和JavaScript区别与联系
【8月更文挑战第18天】

热门文章

最新文章