ES5和ES6对象导出和导入

时间: 2018-07-18阅读: 369标签: 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 '模块路径'


es6 Reflect对象

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

ES6 系列之私有变量的实现

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

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

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

在使用es6语法class的时候,babel到底做了什么?

自从有了webpack之后,我们这些jscoder似乎得到了前所未有的解放,箭头函数,对象解构,let,const关键字,以及class、extends等等,webpack会帮我们把这些es6代码转换成浏览器能够识别的es5代码,那么有多少人真正的看过,babel转换之后的代码呢?

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

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

Rest/Spread 属性_探索 ES2018 和 ES2019

Rest/Spread 属性:rest操作符在对象解构中的使用。目前,该操作符仅适用于数组解构和参数定义。spread操作符在对象字面量中的使用。目前,这个操作符只能在数组字面量和函数以及方法调用中使用。

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

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

基于ES6的tinyJquery

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

ES6 Decorator_js中的装饰器函数

ES6装饰器(Decorator)是一个函数,用来修改类的行为 在设计阶段可以对类和属性进行注释和修改。从本质上上讲,装饰器的最大作用是修改预定义好的逻辑,或者给各种结构添加一些元数据。

ES6的7个实用技巧

ES6的7个实用技巧包括:1交换元素,2 调试,3 单条语句,4 数组拼接,5 制作副本,6 命名参数,7 Async/Await结合数组解构

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

广告合作文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯