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.d ES6: 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 = 4
var obj1 = {a:a,b:b,c:c,d:d} ES6: var a = 1
var b = 2
var c = 3
var d = 4
var 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函数将它传递给我们ab与我们的回调函数一起传递。里面的回调函数我们检查结果是否是truefalse并根据它显示消息。 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 允许我们resolvereject一个请求。每当我们解决一个请求时,它会调用提供的回调函数,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';

es5~es6的更多相关文章

  1. Atitit js版本es5 es6新特性

    Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...

  2. 简述ES5 ES6

    很久前的某一天,一位大神问我,你知道ES6相对于ES5有什么改进吗? 我一脸懵逼的反问,那个啥,啥是ES5.ES6啊. 不得不承认与大神之间的差距,回来深思了这个问题,结合以前的知识,算是有了点眉目. ...

  3. React/React Native的 ES5 ES6 写法对照

      ES5 ES6 模块 var React = require("react-native); var { Image, Text, View } = React;   import Re ...

  4. Atitit js es5 es6新特性 attilax总结

    Atitit js es5 es6新特性 attilax总结 1.1. JavaScript发展时间轴:1 1.2. 以下是ES6排名前十的最佳特性列表(排名不分先后):1 1.3. Es6 支持情况 ...

  5. 【转】React Native中ES5 ES6写法对照

    很多React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教程和例子都是 ...

  6. 【ES5 ES6】使用学习

    [ES5 ES6]使用学习 转载: ============================================================= 1.Promise 2.下划线转驼峰,驼 ...

  7. JavaScript Learning Paths(ES5/ES6/ES-Next)

    JavaScript Learning Paths(ES5/ES6/ES-Next) JavaScript Expert refs https://developer.mozilla.org/en-U ...

  8. React Native 的ES5 ES6写法对照表

    模块 引用 在ES5里,如果使用CommonJS标准,引入React包基本通过require进行,代码类似这样: //ES5 var React = require("react" ...

  9. ES5/ES6的区别研究(ECMAScript)

    我所理解的概念应该是语法的区别和特性的区别 这里是ECMAScript的解析http://baike.baidu.com/item/ECMAScript 参考: (ES6)http://es6.rua ...

  10. React/React Native 的ES5 ES6写法对照表

    //es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...

随机推荐

  1. HTML基础(一)

    什么是HTMLHTML Hypertext Markup Language:即超文本标记语言 HTML特点 1.HTML不需要编译,直接由浏览器执行 2.HTML文件是一个文本文件 3.HTML文件必 ...

  2. TWaver可视化编辑器的前世今生(二)3D编辑器

    接着昨天的继续说哈. 作为一款高效.轻量.自带编辑功能小组件,TWaver Java在电信网管界一炮而红,在各大运营商的OSS,BSS,NMS系统中随处可见. 采用了TWaver图形组件的上海世博会监 ...

  3. NOIp2018 提高组初赛试题参考答案

  4. Hibernate-03

    目的:表操作(表维护) 一.一对一(略过) 二.一对 1.建表原则:在多的一方创建外键指向一的一方的外键 2.建表:实体中添加 商品实体表: private Set<User> user ...

  5. MariaDB数据库(二)

    1. MariaDB数据类型 MariaDB数据类型可以分为数字,日期和时间以及字符串值. 使用数据类型的原则:够用就行,尽量使用范围小的,而不用大的. 1.1  常用的数据类型 整数:int,bit ...

  6. 如何用纯 CSS 创作一个金属光泽 3D 按钮特效

    效果预览 在线演示 按下右侧的"点击预览"按钮在当前页面预览,点击链接全屏预览. https://codepen.io/zhang-ou/full/MGeRRO 可交互视频教程 此 ...

  7. java环境配置—配置Tomcat8环境

    先安装JDK,配置好jdk环境后再配置Tomcat 8 配置环境变量: TOMCAT_HOME:D:\Program Files\apache-tomcat-8.0.28 CATALINA_HOME: ...

  8. HDU 4436 str2int

    str2int Time Limit: 3000ms Memory Limit: 131072KB This problem will be judged on HDU. Original ID: 4 ...

  9. sql通配符+sql中查询条件包含下划线等通配符的写法

    一.SQL 通配符 在搜索数据库中的数据时,SQL 通配符可以替代一个或多个字符. SQL 通配符必须与 LIKE 运算符一起使用. 在 SQL 中,可使用以下通配符: 通配符 描述 % 替代一个或多 ...

  10. HDU 4334 5-sum

    题目大意: 从5个集合中个选取一个数出来,使5个数相加之和为0 , 判断是否存在这种可能 因为集合数目最多200,那么200^3 = 8000000 , 那么这里很明显要把5个数拆成2个和3个计算,因 ...