What is the usage of import as in es6

In es6, import as is used to combine the contents exported by several exports into one object and return it; the modularization of ES6 is divided into two modules: export and import. This method can wrap all export contents into the specified In objects, the syntax is "import * as object from...".

The operating environment of this tutorial: Windows 10 system, ECMAScript version 6.0, Dell G3 computer.

What is the usage of import as in es6

ES6, javascript supports module for the first time. The modularization of ES6 is divided into two modules: export (export) and import (import). In projects, we will often see a usage of import * as obj from. This writing method wraps all output into obj objects. inside.

import * as xxx from 'xxx': will combine the contents exported by several exports into one object and return it;

import xxx from 'xxx': (export default Din) will only export this The default object is used as an object

Example one

// index.js
export function fn1(data){
  console.log(1)
}
export function fn2(data){
  console.log(2)
}
import * as Fn from './index.js'
Fn.fn1()  // 1
Fn.fn2()  // 2

Example two

let myName = "Jon";
let myAge = 18;
let myfn = function(){
    return "我是"+myName+"！今年"+myAge+"岁了"
}
export {
    myName as name,
    myAge as age,
    myfn as fn
}

Received code

import {fn,age,name} from "./test.js";
console.log(fn()); //我是Jon！今年19岁了
console.log(age); //19
console.log(name); //Jon

Or write

import * as info from "./test.js"; //通过*来批量接收，as 来指定接收的名字
console.log(info.fn()); //我是Jon！今年18岁了
console.log(info.age); //18
console.log(info.name); //Jon

Example 3

Rename export and import. If the variable names in multiple imported files are the same, naming conflicts will occur. To solve this problem, ES6 provides a method for renaming, which you can do when importing names.

/*************test1.js*****************/
export let myName = "我来自test1.js";
/*************test2.js*****************/
export let myName = "我来自test2.js";
 
/*************index.js****************/
import {myName as name1} from "./test1.js";
import {myName as name2} from "./test2.js";
console.log(name1); //我来自test1.js
console.log(name2); //我来自test2.js

【Related recommendations: javascript video tutorial, web front-end】

The above is the detailed content of What is the usage of import as in es6. For more information, please follow other related articles on the PHP Chinese website!