ES6——进阶

蔚落 2022-06-10 14:18 186阅读 0赞

import export

//假设我们有两个js文件: index.js和content.js,现在我们想要在index.js中使用content.js返回的结果，我们要怎么做呢？
    
    //content.js
    export default 'A cat'    
    export function say(){
        return 'Hello!'
    }    
    export const type = 'dog' 
    
    //index.js
    import animal, { say, type } from './content'  
    let says = say()
    console.log(`The ${type} says ${says} to ${animal}`)  //The dog says Hello to A cat
    
    //修改变量名
    //此时我们不喜欢type这个变量名，因为它有可能重名，所以我们需要修改一下它的变量名。在es6中可以用as实现一键换名。
    import 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
    
    //模块的整体加载
    //除了指定加载某个输出值，还可以使用整体加载，即用星号（*）指定一个对象，所有输出值都加载在这个对象上面。
    import 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
    
    //上面的content.js一共输出了三个变量（default, say, type）,假如我们的实际项目当中只需要用到type这一个变量，
    //其余两个我们暂时不需要。我们可以只输入一个变量(目前无论是webpack还是browserify都还不支持这一功能)：
    import { type } from './content'

希望更全面了解es6伙伴们可以去看阮一峰所著的电子书[ECMAScript 6入门][ECMAScript 6]

[ECMAScript 6]: http://es6.ruanyifeng.com/

发表评论取消回复

表情：

评论列表（有 0 条评论，186人围观）

还没有评论，来说两句吧...

相关阅读

相关 ES进阶教程

1.分片Shards 一个索引可以存储超出单个结点硬件限制的大量数据,es提供了将索引划分为多份的能力,每一份都称之为分片.当创建索引时,可以指定想要的分片数量.每个分片

男娘i/ 2024年03月31日 12:16/ 0 赞/ 88 阅读

相关 IPv6进阶：VRRP6实验配置

实验拓扑 ![7523aff7d8b1bf83dea42f3283f55092.png][] 实验需求 R1、R2连接在同一台二层交换机上；在R1、

青旅半醒/ 2023年10月07日 21:38/ 0 赞/ 24 阅读

相关 IPv6进阶：IPv6基础配置实验

实验拓扑 ![ab1c8ccea76562f98f175e3d8493d667.png][] PC属于VLAN10，网关在Switch上； Switch使用

柔情只为你懂/ 2023年10月07日 21:38/ 0 赞/ 20 阅读

相关 vue进阶实战 vue进阶课程 vue进阶

每个章节都有对接的文章链接 1. r e f s ， refs， refs，parent，$children 基础使用：参考vue官方文档 $refs 父

骑猪看日落/ 2022年12月22日 11:27/ 0 赞/ 363 阅读

相关 JavaScript进阶(8)-ES6简介及新增let和const关键字

![20201114123647219.gif][] 目录 1 什么是ES6 1.1 ECMAScript 1.2 ECMAScript版本 1.3 各版本浏览器对E

小鱼儿/ 2022年12月21日 03:21/ 0 赞/ 141 阅读

相关爬虫教程（ 6 ） --- 爬虫进阶、扩展

1. 前言 1. 先看一个最简单的爬虫。 import requests url = "http://www.cricode

Myth丶恋晨/ 2022年11月27日 06:47/ 0 赞/ 2634 阅读

相关 ReactNative进阶（二十八）：ES6 Symbol用法

文章目录什么是Symbol? 应用场景注意事项 -------------------- 什么是Symbol? `S

我就是我/ 2022年10月20日 13:45/ 0 赞/ 232 阅读

相关 ES6——进阶

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

蔚落/ 2022年06月10日 14:18/ 0 赞/ 187 阅读

相关 springmvc进阶（6）：springmvc运行流程

借用一下尚硅谷的PPT图片 ![这里写图片描述][70] [70]: /images/20220523/bc69755c24a543c7891a03ae89df801a

逃离我推掉我的手/ 2022年05月23日 02:16/ 0 赞/ 227 阅读

相关前端进阶（十四）ES6+版本新特性

> ES全称ECMAScript，ECMAScript是ECMA制定的标准化脚本语言。目前JavaScript使用的ECMAScript版本为[ECMA-417][]。关

痛定思痛。/ 2022年02月20日 00:45/ 0 赞/ 175 阅读