博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
es5~es6
阅读量:5332 次
发布时间:2019-06-15

本文共 2477 字,大约阅读时间需要 8 分钟。

1.用箭头函数减少代码(相信你在Vue已经看到了)

ES5:function greetings (name) { return 'hello ' + name}ES6:const greetings = (name) => {  return 'hello $ {name}';      }

 

主要区别,表现在不需要使用function关键字来定义函数。

 

另一种ES6定义函数的方法:

const greetings = name => 'hello $ {name}';

 

1.如果你的函数只有一个参数,那么你可以围绕参数直接丢掉圆括号“()”

2.另一件事情就是,不用编写return关键字来返回值,因为在ES6中,如果你不在函数体内写入函数体,计算表达式会自动返回。

 

 

2.在ES6和ES5中操作对象

 

... 替代 Object.assign

ES5:var obj1 = {a:1,b:2} var obj2 = {a:2,c:3,d:4} var obj3 = Object.assign(obj1,obj2)ES6: const obj1 = {a:1,b:2} const obj2 = {a:2,c:3,d:4} const obj3 = {... obj1,... obj2}

 

ES5我们必须合并使用Object.assign()两个对象作为输入的对象并输出合并的对象。

 

提取多个值

ES5:var obj1 = {a:1,b:2,c:3,d:4} var a = obj1.a var b = obj1.b var c = obj1.c var d = obj1.dES6:const obj1 = {a:1,b:2,c:3,d:4} const {   a,  b,  c,  d } = obj1

 

对象引入的新功能

ES5:var a = 1 var b = 2 var c = 3 var d = 4var obj1 = {a:a,b:b,c:c,d:d}ES6:var a = 1 var b = 2 var c = 3 var d = 4var obj1 = {a,b,c,d} //必须保持参数一致

 

3.Promises 与 回调

 

 ES5中编写异步函数

ES5:function isGreater (a, b, cb) {    var greater = false  if(a > b) {    greater = true  }  cb(greater)}isGreater(1, 2, function (result) {  if(result) {    console.log('greater');  } else {    console.log('smaller')  }}) //上面我们定义了一个名为的函数isGreater ,它有三个参数a ,b与cb 。当执行该功能时检查是否a大于b,并使该greater变量true ,如果不是greater停留false 。之后,isGreater调用回调函数cb并将该greater变量作为参数传递给函数。 //在下一段代码中,我们称该isGreater函数将它传递给我们a并b与我们的回调函数一起传递。里面的回调函数我们检查结果是否是true,false并根据它显示消息。 ES6:const isGreater = (a, b) => { return new Promise ((resolve, reject) => {  if(a > b) {   resolve(true)  } else {   reject(false)  } })}isGreater(1, 2) .then(result => {    console.log('greater') }) .catch(result => {    console.log('smaller') }) //ES6 Promises 允许我们resolve和reject一个请求。每当我们解决一个请求时,它会调用提供的回调函数,then并且每当我们拒绝一个请求时,它就会调用catch回调函数。 //ES6 Promises 比回调更好,因为它允许我们轻松地区分a 成功了或者是a 失败了,所以我们不必再次检查回调函数中的内容。
 

 

4.导出和导入模块(Vue用的很多吧!)

 

导出模块

ES5:var myModule = {    x: 1,    y: function() { console.log('This is ES5') }}module.exports = myModule;ES6:const myModule = { x: 1, y: () => { console.log('This is ES6') } }export default myModule;

ES6相对于ES5,增加了可读性,更人性化了。

 

导入模块

ES5:var myModule = require('./myModule');ES6:import myModule from './myModule';

 

 

 export default

ES5:/*使用默认值 export default导出某个模块时,将导入这样一个模块下面这行代码意味着类似这样的内容,我们默认导出了一个模块,所以我们必须在源文件中导入整个模块*/import myModule from './myModule';ES6:/*为我们提供了导出多个(import)或单个(export)模块以及变量的能力*/export const x = 1;export const y = 2;export const z = 'String';ES6是这样的:import {x, y, z} from './myModule';

 

 

 

转载于:https://www.cnblogs.com/cisum/p/8480026.html

你可能感兴趣的文章
XML学习笔记(二)-- DTD格式规范
查看>>
IOS开发学习笔记026-UITableView的使用
查看>>
[转载]电脑小绝技
查看>>
windos系统定时执行批处理文件(bat文件)
查看>>
thinkphp如何实现伪静态
查看>>
BZOJ 2243: [SDOI2011]染色( 树链剖分 )
查看>>
BZOJ 1925: [Sdoi2010]地精部落( dp )
查看>>
c++中的string常用函数用法总结!
查看>>
界面交互之支付宝生活圈pk微信朋友圈
查看>>
[DLX精确覆盖+打表] hdu 2518 Dominoes
查看>>
SuperMap iServerJava 6R扩展领域开发及压力测试---判断点在那个面内(1)
查看>>
Week03-面向对象入门
查看>>
一个控制台程序,模拟机器人对话
查看>>
web.xml 中加载顺序
查看>>
pycharm激活地址
查看>>
hdu 1207 四柱汉诺塔
查看>>
Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇——纯前端多页面)
查看>>
display:none与visible:hidden的区别
查看>>
我的PHP学习之路
查看>>
【题解】luogu p2340 奶牛会展
查看>>