search
HomeWeb Front-endJS TutorialHow to use import in JavaScript?
How to use import in JavaScript?Jan 19, 2019 pm 05:00 PM
import

In ES6, How to use import in JavaScript? objects can be managed through modularization. Modularization can not only reuse functions, but also improve maintainability.

How to use import in JavaScript?

#import is the syntax used to import functions, objects, and initial values ​​exported from a module into another module.

As shown below

import {模块名称} from "需要导入模块的路径名"

How to use import?

This module has default module and named module.

We first load the default export module and the named export module

import {ModuleA, ModuleB} from "modules"; 
import Default from 'modules2';

In the first line, we import the two named modules named Module A and Module B from the modules file .

In the second line, we import the default module from the modules 2 file.

Execute module export

To export functions, objects, and primitive values ​​into modules, you need to use export.

Let’s look at a specific example

Export it as the default module

// alert.js
export default function () {
    alert("default module called!");
};

Named export

// utils.js
export function sum(x, y, z) {
    return x+y+z;
}
 
export function multiply(x, y) {
    return x*y;
}

We can export modules named sum and multiply.

You can use this function by calling the following

import { sum, multiply } from 'utils'; 
console.log(sum(1, 2, 3));
console.log(multiply(5, 8));

The execution result is as follows

->6
->40

This article ends here. For more exciting content, you can pay attention to php Chinese Other related column tutorials on the Internet! ! !

The above is the detailed content of How to use import in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Python 的 import 是怎么工作的?Python 的 import 是怎么工作的?May 15, 2023 pm 08:13 PM

你好,我是somenzz,可以叫我征哥。Python的import是非常直观的,但即使这样,有时候你会发现,明明包就在那里,我们仍会遇到ModuleNotFoundError,明明相对路径非常正确,就是报错ImportError:attemptedrelativeimportwithnoknownparentpackage导入同一个目录的模块和不同的目录的模块是完全不同的,本文通过分析使用import经常遇到的一些问题,来帮助你轻松搞定import,据此,你可以轻松创建属

浅析node中怎么使用import语法浅析node中怎么使用import语法Mar 21, 2023 pm 06:53 PM

node.js支持import语法,很简单一个知识点,但是却能提醒我们从知识误区里走出来,多关注外边的知识世界,不断打开自己的知识边界。

link和import的区别细说:分析它们有何不同?link和import的区别细说:分析它们有何不同?Jan 06, 2024 am 08:19 AM

深入解析:link与import的区别是什么?在开发网页或应用程序时,我们经常需要引入外部的CSS文件或JavaScript库来增强或定制我们的代码。在这个过程中,link和import是两种常用的方法。虽然它们的目的都是引入外部资源,但在具体的使用上存在一些区别。语法和位置:link:使用link标签将外部资源链接到HTML文件中,通常位于HTML文档的头

link标签和import有什么区别link标签和import有什么区别Aug 28, 2023 am 11:19 AM

link标签和import的区别有语法和用途、功能和特性、加载时机、兼容性和支持等。详细介绍:1、语法和用途,link标签是HTML标签,用于在HTML文档中引入外部资源,如CSS样式表、JavaScript脚本、图标等,import是ES6中的模块导入语法,用于在JavaScript文件中引入外部模块;2、功能和特性,link标签可以引入多种资源,如CSS样式表、图标等等。

import和link之间有哪些区别import和link之间有哪些区别Nov 24, 2023 pm 02:15 PM

import和link之间的区别:1、用途和语义;2、加载方式;3、兼容性;4、链接多个样式表;5、媒体类型;6、动态性;7、错误处理;8、嵌套;9、默认样式;10、兼容性考虑;11、性能考虑;12、使用场景。详细介绍:1、用途和语义,link是HTML标签,用于链接到外部的CSS文件或样式表,它通常位于HTML文档的head部分,import是CSS的一部分等等。

对比link和import:它们有哪些差异?对比link和import:它们有哪些差异?Jan 06, 2024 pm 08:23 PM

link与import之争:它们有何不同之处?在开发和编程中,我们经常需要与其他文件或模块进行交互。为了实现这种交互,链接(linking)和导入(importing)是两种常用的方式。然而,许多人可能并不清楚link和import有什么不同之处以及何时使用它们。本文将详细介绍link和import的区别,并提供代码示例。首先,我们来了解link的概念。链接

Python中的模块导入方式有哪些?Python中的模块导入方式有哪些?Oct 20, 2023 am 08:40 AM

Python是一种功能强大的编程语言,通过使用模块,可以将代码组织成可重用的部分。模块是Python程序中的文件,它包含了一组相关的函数、类和变量等。在Python中,有多种方式导入模块,下面将介绍其中的几种常用的导入方式,并给出相应的代码示例。直接导入整个模块:这是最简单的导入方式,通过import关键字后跟模块名即可导入整个模块。然后可以使用模块中的函数

如何解决import包时报Java程序包不存在的问题如何解决import包时报Java程序包不存在的问题Apr 19, 2023 am 10:22 AM

网上有很多解决方式,我想到的都汇总起来了,方便以后查看,你可能采用其中一种就能解决问题,我是用了最后一种才解决。如果你要导入的包在Libraries下都本身一直没有存在,你这时就得看看pom里对应的依赖写的有没有问题,名字版本什么的在使用的仓库中有没有对应的jar包,如果确定没有问题,那么再尝试采取以下的前几种方式解决。1.执行Maven->reloadproject作用:重新导入Maven包2种方式:1.选择Project目录右键->Maven->reloadproject2

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Repo: How To Revive Teammates
4 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: How To Get Giant Seeds
3 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools