• 技术文章 >web前端 >前端问答

    import as在es6中的用法是什么

    长期闲置长期闲置2022-04-25 17:19:54原创322

    在es6中,import as用于将若干export导出的内容组合成一个对象返回;ES6的模块化分为导出与导入两个模块,该方法能够将所有的导出内容包裹到指定对象中,语法为“import * as 对象 from ...”。

    本教程操作环境:windows10系统、ECMAScript 6.0版、Dell G3电脑。

    import as在es6中的用法是什么

    ES6,javascript第一次支持了module。ES6的模块化分为导出(export)与导入(import)两个模块,其中在项目中,我们会经常看到一种用法import * as obj from,这种写法是把所有的输出包裹到obj对象里。

    import * as xxx from ‘xxx’: 会将若干export导出的内容组合成一个对象返回;

    import xxx from ‘xxx’:(export default Din)只会导出这个默认的对象作为一个对象

    示例一

    // 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

    示例二

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

    接收的代码

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

    或者写成

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

    示例三

    重命名export和import,如果导入的多个文件中,变量名字相同,即会产生命名冲突的问题,为了解决该问题,ES6为提供了重命名的方法,当你在导入名称时可以这样做。

    /*************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

    【相关推荐:javascript视频教程web前端

    以上就是import as在es6中的用法是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:ES6
    上一篇:es6二维数组怎么转一维数组 下一篇:html5的div一行可以放两个吗
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• es6怎么判断数组是否重复• es6怎么将数字转为字符串• es6怎么求两个数组的交集• es6中用什么导入资源• sort排序是es6中的吗
    1/1

    PHP中文网