es5~es6

Posted 2020-10-25 Sunsin

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‘;