es5~es6
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
函数将它传递给我们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';
es5~es6的更多相关文章
- Atitit js版本es5 es6新特性
Atitit js版本es5 es6新特性 Es5( es5 其实就是adobe action script的标准化)1 es6新特性1 Es5( es5 其实就是adobe action scrip ...
- 简述ES5 ES6
很久前的某一天,一位大神问我,你知道ES6相对于ES5有什么改进吗? 我一脸懵逼的反问,那个啥,啥是ES5.ES6啊. 不得不承认与大神之间的差距,回来深思了这个问题,结合以前的知识,算是有了点眉目. ...
- React/React Native的 ES5 ES6 写法对照
ES5 ES6 模块 var React = require("react-native); var { Image, Text, View } = React; import Re ...
- Atitit js es5 es6新特性 attilax总结
Atitit js es5 es6新特性 attilax总结 1.1. JavaScript发展时间轴:1 1.2. 以下是ES6排名前十的最佳特性列表(排名不分先后):1 1.3. Es6 支持情况 ...
- 【转】React Native中ES5 ES6写法对照
很多React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component),然而网上搜到的很多教程和例子都是 ...
- 【ES5 ES6】使用学习
[ES5 ES6]使用学习 转载: ============================================================= 1.Promise 2.下划线转驼峰,驼 ...
- JavaScript Learning Paths(ES5/ES6/ES-Next)
JavaScript Learning Paths(ES5/ES6/ES-Next) JavaScript Expert refs https://developer.mozilla.org/en-U ...
- React Native 的ES5 ES6写法对照表
模块 引用 在ES5里,如果使用CommonJS标准,引入React包基本通过require进行,代码类似这样: //ES5 var React = require("react" ...
- ES5/ES6的区别研究(ECMAScript)
我所理解的概念应该是语法的区别和特性的区别 这里是ECMAScript的解析http://baike.baidu.com/item/ECMAScript 参考: (ES6)http://es6.rua ...
- React/React Native 的ES5 ES6写法对照表
//es6与es5的区别很多React/React Native的初学者都被ES6的问题迷惑:各路大神都建议我们直接学习ES6的语法(class Foo extends React.Component ...
随机推荐
- PyTorch如何构建深度学习模型?
简介 每过一段时间,就会有一个深度学习库被开发,这些深度学习库往往可以改变深度学习领域的景观.Pytorch就是这样一个库. 在过去的一段时间里,我研究了Pytorch,我惊叹于它的操作简易.Pyto ...
- 失误1: 把i放到循环体内部,i++失效
54 while($lines_num_of_whole_table>=1){ 55 my $i = 1; ...
- 前端学习日记-vue cli3.0环境搭建
卸载老版本的 vue-cli : npm uninstall vue-cli -g 安装新版本的 : npm install -g @vue/cli --安装新版本cli 同时nodeJS 要更新至 ...
- Android流行界面结构——Fragment通过ViewPager(带指示器)嵌套Fragment结构的创建方法详解
原创文章,转载请注明出处http://www.cnblogs.com/baipengzhan/p/6287213.html 当前Android流行界面结构的一种——Fragment通过ViewPage ...
- HDU-1297-Children’s Queue
Children’s Queue 这道题是排序问题,可以用递归方法解决. 计算F(n): 一:当最后一个是男孩M时候,前面n-1个随便排出来,只要符合规则就可以,即是F(n-1): 二:当最后一个是女 ...
- 11. GLOBAL_VARIABLES 与 SESSION_VARIABLES
11. GLOBAL_VARIABLES 与 SESSION_VARIABLES 注意 从MySQL 5.7.6开始,show_compatibility_56系统变量的值会影响此处描述的表中的可用信 ...
- docker的网络(基础)
Docker的网络子系统是可插拔的,使用驱动程序.默认情况下存在多个驱动程序,并提供核心网络功能: bridge:docker默认的网络驱动.如果未指定驱动程序,则这是需要创建的网络类型.当应用程序在 ...
- dell服务器快速设置idrac
前提:将服务器专用的idrac网络接口,连接到网络上 1.登录到服务器(即被监控的服务器). 2.安装客户端工具 yum install OpenIPMI OpenIPMI-devel OpenI ...
- tiny4412学习笔记-将uboot、zImage、文件系统烧到emmc中 (转)
http://blog.chinaunix.net/uid-30025978-id-4788683.html 1.首先还是要将u-boot写入SD卡中从SD卡启动. 使用读卡器将SD插入电脑中,使用u ...
- python_OS 模块
os模块 用于提供系统级别的操作 os.getcwd() # 获取当前工作目录,即当前python脚本工作的目录路径 os.chdir("dirname") # 改变当前脚本工作目 ...