关闭

ES5和ES6对象导出和导入

时间: 2018-07-18阅读: 2919标签: 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 系列之私有变量的实现

在阅读 《ECMAScript 6 入门》的时候,零散的看到有私有变量的实现。旨在加深 ES6 部分知识点的理解,重点讲解块级作用域、标签模板、箭头函数、Symbol、Set、Map 以及 Promise 的模拟实现、模块加载方案、异步处理等内容

commonjs 与 es6相关Module语法的区别

export 在接口名字与模块内部的变量之间建立了一一对应的关系,export输出的接口; export的写法,除了像上面这样,还有另外一种。export命令除了输出变量,还可以输出函数或类(class)。

js解构赋值,关于es6中的解构赋值的用途总结

ES6中添加了一个新属性解构,允许你使用类似数组或对象字面量的语法将数组和对象的属性赋给各种变量。用途:交换变量的值、从函数返回多个值、函数参数的定义、提取JSON数据、函数参数的默认值...

ES6中的函数(函数参数、默认值、箭头函数)

数参数也可以解构赋值。函数参数可以设置默认值,可以预设实参。函数参数的默认值可以是函数调用。箭头函数的语法:参数=>函数体箭头函数的this是固定的,指向了父级作用域的this。箭头函数没有arguments,可以用rest参数代替。

ES6迭代器精炼讲解

Iterator 是 ES6 引入的一种新的遍历机制,迭代器有两个核心概念:迭代器是一个统一的接口,它的作用是使各种数据结构可被便捷的访问,它是通过一个键为Symbol.iterator 的方法来实现。

ES6新的变量声明方式

在ES6之前,JavaScript是没有块级作用域的,如果在块内使用var声明一个变量,它在代码块外面仍旧是可见的。ES6规范给开发者带来了块级作用域,let和const都添加了块级作用域,使得JS更严谨和规范。

详解JavaScript模块化开发require.js

js模块化的开发并不是随心所欲的,为了便于他人的使用和交流,需要遵循一定的规范。目前,通行的js模块规范主要有两种:CommonJS和AMD

es6中const定义的属性是否可以改变_为什么有人说const并非一定为常量

const是用来定义常量的,而且定义的时候必须初始化,且定义后不可以修改。const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。

ES6新特性:JavaScript中的Map和WeakMap对象

Map对象是一种有对应 键/值 对的对象, JS的Object也是 键/值 对的对象 ;ES6中Map相对于Object对象有几个区别:

你真的了解ES6的Set,WeakSet,Map和WeakMap吗?

之前在学习 ES6 的时候,看到 Set 和 Map,不知道其应用场景有哪些,只觉得很多时候会用在数组去重和数据存储,后来慢慢才领悟到 Set 是一种叫做集合的数据结构,Map 是一种叫做字典的数据结构。

点击更多...

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