ES5和ES6对象导出和导入

时间: 2018-07-18阅读: 3110标签: es6

import ... form...替代 require()

  1. //不接收对象
  2. require:require('s.css'); //(es5)
  3. improt 's.css' //(es6)
  4. //接收对象
  5. var o = require('s.js'); //es(5)
  6. import o form s.js //(es6)


对象的写法

  1. 导出一个模块对象(es5):
  2. module.exports={
  3. add:add,
  4. sub:sub
  5. }
  6. 导出一个模块对象(es6):
  7. module.exports={
  8. add,
  9. sub
  10. }
  11. 注意:上es6这种写法属性名和属性值变量是同一个,否则要分开写
  12. module.exprots={
  13. addFn:add,
  14. sub
  15. }


一个对象中方法的写法

  1. //es5
  2. module.exports={
  3. addFun:function(x,y){
  4. return x+y;
  5. }
  6. }
  7. //es6
  8. module.exports={
  9. addFun(x,y){
  10. return x+y;
  11. }
  12. }


导出对象

  1. calc.js中有两个函数
  2. function add(){}
  3. function sub(){}
  4. //写法一
  5. es5写法:
  6. module.exports.add = add;
  7. module.exports.sub = sub;
  8. es6写法:
  9. exprot function add(){}
  10. exprot function sub(){}
  11. 使用:
  12. var calc = require('./calc.js');
  13. //写法二
  14. es5:
  15. module.exports = {add:add,sub:sub};
  16. es6:
  17. exprot default{
  18. add,sub
  19. }
  20. //表示取得calc.js中所有暴露出来的对象(es6)
  21. import calc from './calc.js'
  22. //只获取到calc.js中的add方法(按需获取)
  23. import {add} from './calc.js'


用export 和import 的写法注意点

  1. 1、如果模块中使用 export default {}

只能通过 import 对象名称 from '模块路径' 

不能通过 import {对象名称} from '模块路径' 


  1. 2、如果使用 import {对象名称} from '模块路径' 导出具体某个对象或者方法名称

需要单独导出对象或者方法:  

export function add(){}
export function sub(){}

使用:

import {add, sub} from '模块路径

直接使用 add,sub方法

注意:不能直接使用 import 对象名称 from '模块路径'


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

链接: http://www.fly63.com/article/detial/938

es6-快速掌握Proxy、Reflect

ES6新增的代理和反射为开发者提供了拦截并向基本操作嵌入额外行为的能力。具体地说,可以给目标对象定义一个关联的代理对象,而这个代理对象可以作为抽象的目标对象来使用。在对目标对象的各种操作影响目标对象之前

ES6新特性:JavaScript中内置的延迟对象Promise

利用Promise是解决JS异步执行时候回调函数嵌套回调函数的问题, 更简洁地控制函数执行流程;通过new实例化Promise, 构造函数需要两个参数

ES6 中的一些技巧,使你的代码更清晰,更简短,更易读!

ES6 中的一些技巧:模版字符串、块级作用域、Let、Const、块级作用域函数问题、扩展运算符、函数默认参数、解构、对象字面量和简明参数、动态属性名称、箭头函数、for … of 循环、数字字面量。

异步神器async-await

ES5的回调使我们陷入地狱,ES6的Promise使我们脱离魔障,终于、ES7的async-await带我们走向光明。今天就来学习一下 async-await。

对ES6的yield示例分析

这里主要是对yield关键字的,yield实际上可以看作是一种新的中断机制,大家都知道javascript函数执行是顺序的,中途没有暂停,等待消息只能通过回调或者settimeout等延迟检查来完成。

基于ES6的tinyJquery

Query作为曾经Web前端的必备利器,随着MVVM框架的兴起,如今已稍显没落。用ES6写了一个基于class简化版的jQuery,包含基础DOM操作,支持链式操作...

ES6的Map和Set的使用,以及weakMap的一点理解

Map可以用来存储键值对,在一定程度上扩展了Object的内容。在插入内容时,map实例会维护插入顺序,遍历出来的顺序是插入顺序,而object的遍历顺序可能不是插入顺序。所以下面三个方法作用是合object中一样的

ES6深度解析:Generators

这是一只会说话的猫的一些代码,可能是当今互联网上最重要的一种应用。它看起来有点像一个函数,对吗?这被称为生成器-函数,它与函数有很多共同之处。但你马上就能看到两个不同之处。

ES6新特性:JavaScript中的Reflect对象

Reflect这个对象在我的node(v4.4.3)中还没有实现, babel(6.7.7)也没有实现 ,新版本的chrome是支持的, ff比较早就支持Proxy和Reflect了,要让node支持Reflect可以安装harmony-reflect ;

es6 Reflect对象

Reflect是ES6为操作对象而提供的新API,而这个API设计的目的只要有:将Object对象的一些属于语言内部的方法放到Reflect对象上,从Reflect上能拿到语言内部的方法。如:Object.defineProperty,修改某些object方法返回的结果。让Object的操作都变成函数行为。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!