JavaScript面试题:请解释ES5和ES6的不同点

话题: JavaScript 难度: ⭐⭐⭐

• ECMAScript 5 (ES5): 第5个ECMAScript版本，于2009年标准化。该标准几乎所有的浏览器都完全支持。
• ECMAScript 6 (ES6)/ECMAScript 2015 (ES2015): 第6个ECMAScript版本，于2015年标准化。目前各大浏览器还只是部分支持。

接下来介绍它们主要的区别：

• 箭头函数和字符串嵌入：

const greetings = (name) => {
      return `hello ${name}`;
}
复制代码

甚至：

const greetings = name => `hello ${name}`;
复制代码

• 常量声明(Const): 如同其它编程语言中的常量一样，但又有不同。这里的const代表了constant reference。也就是说，你可以修改其指向的对象的值。但是你不能修改其reference的值。

const NAMES = [];
NAMES.push("Jim");
console.log(NAMES.length === 1); // true
NAMES = ["Steve", "John"]; // error
复制代码

• 块作用域变量：ES6中的新关键字let允许允许开发者将变量的作用域限定在块级别。不会像var一样变量提升。
• 参数默认值：允许在函数定义的时候指定默认的值。

// Basic syntax
function multiply (a, b = 2) {
     return a * b;
}
multiply(5); // 10
复制代码

• 类定义和继承

ES6开始支持定义类(使用class关键字)，构造函数(使用constructor关键字)，和extend关键字来实现继承。

• for-of操作

for...of语句用来迭代访问一个对象的所有属性。

• Spread操作符：用于对象合并

const obj1 = { a: 1, b: 2 }
const obj2 = { a: 2, c: 3, d: 4}
const obj3 = {...obj1, ...obj2}
复制代码

• Promise: Promises提供了一个处理异步操作的方法。你可以用回调函数来实现，但是Promise更加简洁和可读。

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')
 })
复制代码

• 模块的export和import。

const myModule = { x: 1, y: () => { console.log('This is ES5') }}
export default myModule;
复制代码

import myModule from './myModule';