ES6 vs ES5总结

最近半年开始接触前端的项目，虽然之前也多多少少接触过，但也都只是蜻蜓点水，没有完全在意里面的语法和使用的场景。尤其是ES6的出现，自己脑子里的概念还是停留在ES5阶段，所以这篇文章就是帮助自己migrate from ES5 to ES6。

Template literals(模板字面量)

模板字面量不同之处在于可以嵌入表达式和字符，以前我们拼接字符用'+'来拼接，如果字符串过长就会导致很混乱，不太好维护，现在ES6可以使用${}表达式，而且可以避免部分特殊字符(\n、"、'等)的转义

ES5

var name = "Renu";

var age = 9;

console.log ("My name is \" "+ name + " \" "+ " and I 'm " + age + " years old. ")

// My name is "Renu" and I 'm 9 years old.

ES6

var name = "Renu";

var age = 9;

console.log (`My name is'" ${name} "and I'm ${age} years old.`);

// My name is "Renu" and I 'm 9years old.

Function declaration

在ES5中定义function的方法有3种：

function str (arg1, arg2) {console.log ('Renu')}
var str = new Function ("arg1", "arg2", "console.log ('Renu')");
var str = function (arg1, arg2) {console.log ('Renu');}

在ES6中使用arrow function：

var str = (arg1, arg2) => {console.log ('Renu');}

Difference if this

this关键字代表function的上下文，它决定了how you call the function, 而不是how you defined it.

ES5
在function中，this指的是the object that function belong to。

var value = 'window-value';
var showValue = function( scope ){
    console.log( 'this inside ' +  scope + ' is : ', this );
    console.log( this.value );
};
var object = {
    value: 'object-value',
    showValue: showValue
};
showValue( 'window' ); // 输出 window-value
object.showValue( 'object' );  //输出 object-value

匿名函数属于window作用域

var object = {
    provider: 'gmail.com',
    usernames: [ 'mike', 'john', 'nina' ],
    getEmails: function() {
        return this.usernames.map( function( username ){
            return username + '@' + this.provider;
        } );
    }
};
var emails = object.getEmails();
console.log( emails ); //["mike@undefined", "john@undefined", "nina@undefined"]

所以，当在匿名函数中调用 this.porvider的时候，this指向的是window，window.provider没有被定义，所以输出的结果为["mike@undefined", "john@undefined", "nina@undefined"]。如果代码修改为如下，结果就会正确：

var provider = 'yahoo.com';
var object = {
    provider: 'gmail.com',
    usernames: [ 'mike', 'john', 'nina' ],
    getEmails: function() {
        return this.usernames.map( function( username ){
            return username + '@' + this.provider;
        } );
    }
};
var emails = object.getEmails();
console.log( emails ); //["mike@yahoo.com", "john@yahoo.com", "nina@yahoo.com"]

如果想改变function的作用域，可以通过bind方法进行绑定：

var provider = 'yahoo.com';
var object = {
    provider: 'gmail.com',
    usernames: [ 'mike', 'john', 'nina' ],
    getEmails: function() {
        return this.usernames.map( function( username ){
            return username + '@' + this.provider;
        }.bind( this ) );
    }
};
var emails = object.getEmails();
console.log( emails ); //["mike@gmail.com", "john@gmail.com", "nina@gmail.com"]

因为在getEmails方法中，this指的是object，bind(this)实际是把object绑定为匿名函数的作用域

ES6
在arrow function中，{}中的this指的是whatever the value of this inside upper function is。

var provider = 'yahoo.com';
var object = {
    provider: 'gmail.com',
    usernames: [ 'mike', 'john', 'nina' ],
    getEmails: function() {
        return this.usernames.map( ( username ) => {
            return username + '@' + this.provider;
        } );
    }
};
var emails = object.getEmails();
console.log( emails );

在getEmails方法中，this.usernames中的this指的是object，所以在arrow function中{}中的this.provider中的this指的是object。

声明变量

var 允许定义重复的变量名
let 变量名不能重复，且变量可以修改
const 变量名不能重复，且变量不能修改

以及作用域不同

if (true) {
    var i = 0;
}
console.log (i); // 0
if (true) {
    let j = 10;
}
console.log (j); // ReferenceError
if (true) {
    const k = 100;
}
console.log (k); // ReferenceError

Module(模块化)

ES5
按照顺序Require依赖 var myModule = require('./myModule');
ES6
允许在文件中import相应的依赖，或者export依赖 import myModule from './myModule';

Class declaration(声明类)

ES5

var Add = function (arg1, arg2) {
    this.arg1 = arg1;
    this.arg2 = arg2;
};
Add.prototype.calc = function () {
    return this.arg1 + '+' + this.arg2 + '=' + (this.arg1 + this.arg2);
};
var num = new Add (5, 8);
console.log (num.calc ()); // 5 + 8 = 13

ES6

class Add {
    constructor (arg1, arg2) {
        this.arg1 = arg1;
        this.arg2 = arg2;
    }
    calc () {
        return this.arg1 + '+' + this.arg2 + '=' + (this.arg1 + this.arg2);
    }
}
var num = new Add (5, 8);
console.log (num.calc ()); // 5 + 8 = 13

Manipulating objects in ES6 vs ES5

Merge object

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}

Destructuring object

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

Promises vs Callbacks

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')
  }
})

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')
 })

The ES6 promises are better than callback because it allows us to distinguish easily between a success and error, so we don’t have to check it again in our callback function.

后续有新的知识点，会持续更新