JavaScript ES6+

我在准备ME.IO JS 聚会上的演讲时写了这篇文章，我认为分享它很好，因为它可以帮助或指导那些搜索或阅读它的人。

JavaScript 历史：

1995 年：JavaScript 诞生，名为 LiveScript
1997年：ECMAScript 标准建立
1999 年：ES3 发布，IE5 风靡一时
2000–2005：XMLHttpRequest（又名 AJAX）在 Outlook Web Access（2000 年）和 Oddpost（2002 年）、Gmail（2004 年）和 Google Maps（2005 年）等应用中开始流行。
2009 年：ES5 发布（这是我们大多数人现在使用的），包含 forEach、Object.keys、Object.create 和标准 JSON
2015 年：ES6/ECMAScript2015 发布；它主要包含语法糖，因为人们无法就更具突破性的内容达成一致
2016 年：ES7，2017 年：ES8，2018 年：ES9…ES.Next

代码要点链接：

10 个 ES6 特性：

我不会在这篇文章中介绍所有 JS ES6+ 功能，我将介绍 IMO 的前 10 个功能 :) - 请随时发表评论、讨论并提出更多建议。

1. ES6 中的默认参数

// ES5
var link = function (height, color, url) {
    var height = height || 50
    var color = color || 'red'
    var url = url || 'http://google.com'
    ...
}

// ES6
var link = function(height = 50, color = 'red', url = 'http://google.com') {
  ...
}

2. ES6 中的模板字面量

// ES5
var name = 'Your name is ' + first + ' ' + last + '.'
var url = 'http://localhost:3000/api/messages/' + id

// ES6
var name = `Your name is ${first} ${last}.`
var url = `http://localhost:3000/api/messages/${id}`

3. ES6 中的多行字符串

// ES5
var roadPoem = 'Then took the other, as just as fair,\n\t'
    + 'And having perhaps the better claim\n\t'
    + 'Because it was grassy and wanted wear,\n\t'
    + 'Though as for that the passing there\n\t'
    + 'Had worn them really about the same,\n\t'

var fourAgreements = 'You have the right to be you.\n\
    You can only be you when you do your best.'

// ES6
var roadPoem = `Then took the other, as just as fair,
    And having perhaps the better claim
    Because it was grassy and wanted wear`

var fourAgreements = `You have the right to be you.
    You can only be you when you do your best.`

4. ES6 中的解构赋值

// ES5
var data = $('body').data() // data has properties house and mouse
var house = data.house
var mouse = data.mouse

// ES6
var {house, mouse} = $('body').data() // we'll get house and mouse variables

// ES5
var jsonMiddleware = require('body-parser').json
var body = req.body, // body has username and password
  username = body.username,
  password = body.password

// ES6
var {json: jsonMiddleware} = require('body-parser')
var {username, password} = req.body

// ES6
var [col1, col2]  = $('.column'),
  [line1, line2, line3, , line5] = file.split('\n')

// ES6
const myObject = {
  one:   'a',
  two:   'b',
  three: 'c'
};
const { one, two, three } = myObject;
// one = 'a', two = 'b', three = 'c'

// ES6
const myObject = {
  one:   'a',
  two:   'b',
  three: 'c'
};
const { one: first, two: second, three: third } = myObject;
// first = 'a', second = 'b', third = 'c'

5. ES6 中增强的对象字面量

// ES5
function getLaptop(make, model, year) {
    return { make: make, model: model, year: year }
}
getLaptop("Apple", "MacBook", "2015");// {make: "Apple", model: "MacBook", year: "2015"}

// ES6 
function getLaptop(make, model, year) {
    return { make, model, year }
}
getLaptop("Apple", "MacBook", "2015"); // {make: "Apple", model: "MacBook", year: "2015"}

// ES5
function getLaptop(make, model, year) {
    return {
       sayModel : function() {
            return model;
        }
    }
}
getLaptop("Apple", "MacBook", "2015").sayModel(); //"MacBook"

// ES6
function getLaptop(make, model, year) {
    return{
        sayModel() {
            return model;
        }
    }
}
getLaptop("Apple", "MacBook", "2015").sayModel(); //"MacBook"

// ES5 
var key1 = 'one',
  obj = {
    two: 2,
    three: 3
  };
obj[key1] = 1;
// obj.one = 1, obj.two = 2, obj.three = 3

// ES6
const key1 = 'one',
  obj = {
    [key1]: 1,
    two: 2,
    three: 3
  };
// obj.one = 1, obj.two = 2, obj.three = 3

// ES6
const i = 1,
  obj = {
    ['i' + i]: i
  };
console.log(obj.i1); // 1

// ES6
const i = 2,
  obj = {
    ['mult' + i]: x => x * i
  };

console.log( obj.mult2(5) ); // 10

ES2018（ES9）Rest/Spread 属性

const myObject = { a: 1, b: 2, c: 3 };
const { a, ...x } = myObject;
// a = 1, x = { b: 2, c: 3 }

restParam({ a: 1, b: 2, c: 3 });
function restParam({ a, ...x }) {
  // a = 1
  // x = { b: 2, c: 3 }
}

const obj1 = { a: 1, b: 2, c: 3 },
  obj2 = { ...obj1, z: 26 };
// obj2 is { a: 1, b: 2, c: 3, z: 26 }

ES2018（ES9）rest/spread 属性支持不完整，但在 Chrome、Firefox 和 Node.js 8.6+ 中可用。

6. ES6 中的箭头函数

主要优点：无需绑定“this”

// ES5 Callback functions with dynamic context
var _this = this
$('.btn').click(function(event){
  _this.sendData()
})

// ES6 Callback functions with dynamic context
$('.btn').click((event) =>{
  this.sendData()
})

var cat = {  
  lives: 9,  
  jumps: () => {  
    this.lives--;  
  }  
}

// implicit return
() => 42
// In fact, you don’t even need the parentheses!
_ => 42
x => 42  || (x) => 42
// explict return
var addValues = (x, y) => {  
  return x + y  
}
// wrap in parentheses to return object literal 
x =>({ y: x })

var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9']
var messages = ids.map(function (value) {
  return "ID is " + value // explicit return
})

var ids = ['5632953c4e345e145fdf2df8','563295464e345e145fdf2df9']
var messages = ids.map(value => `ID is ${value}`) // implicit return

7. ES6 中的 Promise

Promise表示异步操作的最终结果。Promise的
实现有很多，只是语法略有不同。例如 q、bluebird、deferred.js、vow、avow、jquery deferred 等等，ES6 有一个标准Promise实现。

setTimeout(function(){
  console.log('Yay!')
}, 1000)

var wait1000 =  new Promise((resolve, reject)=> {
  setTimeout(resolve, 1000)
}).then(()=> {
  console.log('Yay!')
})

setTimeout(function(){
  console.log('Yay!')
  setTimeout(function(){
    console.log('Wheeyee!')
  }, 1000)
}, 1000)

var wait1000 =  ()=> new Promise((resolve, reject)=> {setTimeout(resolve, 1000)})

wait1000()
  .then(function() {
    console.log('Yay!')
    return wait1000()
  })
  .then(function() {
    console.log('Wheeyee!')
  })

8. 块级作用域构造 Let 和 Const

let将作用域限制在块内。Vars是函数作用域，const它是不可变的，也是块作用域，就像let

function calculateTotalAmount (vip) {
  var amount = 0
  if (vip) {
    var amount = 1
  }
  { // more crazy blocks!
    var amount = 100
    {
      var amount = 1000
      }
  }  
  return amount
}
console.log(calculateTotalAmount(true))
// The result will be 1000

function calculateTotalAmount (vip) {
  var amount = 0 // probably should also be let, but you can mix var and let
  if (vip) {
    let amount = 1 // first amount is still 0
  } 
  { // more crazy blocks!
    let amount = 100 // first amount is still 0
    {
      let amount = 1000 // first amount is still 0
      }
  }  
  return amount
}
console.log(calculateTotalAmount(true))
// The result will be 0

function calculateTotalAmount (vip) {
  const amount = 0  
  if (vip) {
    const amount = 1 
  } 
  { // more crazy blocks!
    const amount = 100 
    {
      const amount = 1000
      }
  }  
  return amount
}
console.log(calculateTotalAmount(true))
// The result will be 0

9. ES6 中的类

class baseModel {
  // default params
  constructor(options = {}, data = []) { // class constructor
    this.name = 'Base'
    this.url = 'http://azat.co/api'
    this.data = data
    this.options = options
  }
  // no need function keyword and ":"
  getName() { // class method
    console.log(`Class name: ${this.name}`)
  }
}

class AccountModel extends baseModel {
  constructor(options, data) {
    super({private: true}, ['32113123123', '524214691']) //call the parent method with super
     this.name = 'Account Model'
     this.url +='/accounts/'
   }

  get accountsData() { //calculated attribute getter
    // ... make XHR
    return this.data
  }
}

let accounts = new AccountModel(5)
accounts.getName()
console.log('Data is %s', accounts.accountsData)

Class name: Account Model
Data is %s 32113123123,524214691

10. ES6 中的模块

ES6 之前，JavaScript 不支持原生模块。后来人们提出了 AMD、RequireJS、CommonJS 和其他一些替代方案。现在有了带有import和export操作数的模块。

// ES5 `module.js`
module.exports = {
  port: 3000,
  getAccounts: function() {
    ...
  }
}

// ES5 `main.js`
var service = require('module.js')
console.log(service.port) // 3000

// ES6 `module.js`
export var port = 3000
export function getAccounts(url) {
  ...
}

// ES6 file `main.js`
import {port, getAccounts} from 'module'
console.log(port) // 3000
// OR
import * as service from 'module'
console.log(service.port) // 3000

如果您有任何其他有用的想法或建议来提高生产力或保持您的系统保持最新，我很乐意听到并分享，请随时在评论中留下它或@meabed

祝你编码愉快🤞

文章来源：https://dev.to/meabed/javascript-es6-1n21