博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ES6 语法之import export
阅读量:4931 次
发布时间:2019-06-11

本文共 1189 字,大约阅读时间需要 3 分钟。

假设我们有两个js文件: index.jscontent.js,现在我们想要在index.js中使用content.js返回的结果

ES6的写法

//index.jsimport animal from './content' //content.js export default 'A cat'

ES6 module的其他高级用法

//content.jsexport default 'A cat' export function say(){ return 'Hello!' } export const type = 'dog'

上面可以看出,export命令除了输出变量,还可以输出函数,甚至是类(react的模块基本都是输出类)

//index.jsimport { say, type } from './content' let says = say() console.log(`The ${type} says ${says}`) //The dog says Hello

修改变量名

此时我们不喜欢type这个变量名,因为它有可能重名,所以我们需要修改一下它的变量名。在es6中可以用as实现一键换名。

//index.jsimport animal, { say, type as animalType } from './content' let says = say() console.log(`The ${animalType} says ${says} to ${animal}`) //The dog says Hello to A cat

模块的整体加载

除了指定加载某个输出值,还可以使用整体加载,即用星号(*)指定一个对象,所有输出值都加载在这个对象上面。

//index.jsimport animal, * as content from './content' let says = content.say() console.log(`The ${content.type} says ${says} to ${animal}`) //The dog says Hello to A cat

通常星号*结合as一起使用比较合适。

笔者在react项目的第一行就是import * as React from "react" 以前一直不理解这种引入有什么用,学习到了ES6语法以后豁然开朗,

以及明白了

export class ButtonGroup extends React.Component
中的React 就是指把React的整体模块加载然后继承React.Component

转载于:https://www.cnblogs.com/studyhtml5/p/7154169.html

你可能感兴趣的文章
OSI与TCP/IP你了解多少?
查看>>
压缩解压缩相关基础知识
查看>>
javaweb之MVC设计模式
查看>>
[APIO2015]巴厘岛的雕塑
查看>>
sqlserver 存储过程 查询
查看>>
C#对象克隆介绍
查看>>
不用軟體解PPT密碼
查看>>
easyUI combox静态动态联动
查看>>
使用Code First模式开发如何更新数据库(转载)
查看>>
Mybatis实例增删改查(二)
查看>>
linux达人养成计划学习笔记(二)—— 文件查找命令
查看>>
POCO C++库学习和分析 -- 日志 (二)
查看>>
android:inputType参数类型说明
查看>>
jquery选择基础
查看>>
一段个性 Url 验证的 html 部分
查看>>
JAVA- String类练习
查看>>
java 万能转换器 输入SQL 直接得到ArrayList
查看>>
这是给开发者的弥天大谎还是至理名言?
查看>>
虚拟机修改MTU
查看>>
Decimal To Fraction 小数转换成分数
查看>>