ES5和ES6对象导出和导入

时间: 2018-07-18阅读: 2528标签: 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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

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

关闭

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

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

ES6中let变量的特点,使用let声明总汇

ES6中let变量的特点:1.let声明变量存在块级作用域,2.let不能先使用再声明3.暂时性死区,在代码块内使用let命令声明变量之前,该变量都是不可用的,4.不允许重复声明

ES6 Iterators

本文旨在分析理解 Iterators。 Iterators 是 JS中的新方法,可以用来循环任意集合。 在ES6中登场的Iterators。因其可被广泛使用,并且已在多处场景派上用场,

es6 箭头函数的使用总结,带你深入理解js中的箭头函数

箭头函数是ES6中非常重要的性特性。它最显著的作用就是:更简短的函数,并且不绑定this,arguments等属性,它的this永远指向其上下文的 this。它最适合用于非方法函数,并且它们不能用作构造函数。

javascript es6是什么?

ES6就是ECMAScript6是新版本JavaScript语言的标准。已经在2015年6月正式发布了。Mozilla公司将在这个标准的基础上,推出JavaScript 2.0。ECMAScript6在保证向下兼容的前提下

关于ES6的let和const

var存在的问题可以重复声明,无法限制修改,没有块级作用域 (在全局范围内有效),存在变量提升

使用ES6让你的React代码提升到一个新档次

ES6使您的代码更具表现力和可读性。而且它与React完美配合!现在您已了解更多基础知识:现在是时候将你的ES6技能提升到一个新的水平!嵌套props解构、 传下所有props、props解构、作为参数的函数、列表解构

ES6箭头函数(Arrow Functions)

箭头函数中的 this 指向的是定义时的对象,而不是使用时的对象;由于 箭头函数没有自己的this指针,通过 call() 或 apply() 方法调用一个函数时,只能传递参数,他们的第一个参数会被忽略

JS 中的require 和 import 区别

require 和 import 区别:遵循的模块化规范不一样,出现的时间不同。Require是CommonJS的语法,CommonJS的模块是对象,输入时必须查找对象属性。

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

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

点击更多...

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