面试宝典之ES6知识点

前言

在现代 JavaScript 开发中，ECMAScript 6（ES6）已经成为了开发者们的标配，它引入了许多令人期待的语言特性，使得JavaScript的编程体验更加强大、灵活和现代化。对于准备面试或提升自身技能的开发者而言，熟练掌握ES6是至关重要的一环。

本篇面试宝典将深入剖析ES6中的关键知识点，涵盖了箭头函数、解构赋值、let 和 const、Promise、模板字符串、类与继承、模块化等重要概念。我们将通过简单易懂的例子、清晰的解释，帮助你更好地理解和掌握 ES6 的精髓，为你在面试时的表现提供有力的支持。

无论你是初学者还是经验丰富的开发者，这份宝典都将为你提供深入浅出的ES6学习之路，助你在JavaScript的世界中游刃有余。让我们一同探索ES6的奥秘，迎接更高级别的JavaScript开发挑战！

1. var、let 及 const 区别

首先，我们来了解提升（hoisting）的概念。在使用var声明变量时，存在提升的情况。例如：

console.log(a); // undefined
var a = 1;

这是因为变量声明被提升，实际执行时相当于：

var a;
console.log(a); // undefined
a = 1;

对于let和 const，它们引入了块级作用域，解决了var的一些问题。使用let和const声明的变量不会在声明前被访问，存在暂时性死区。例如：

console.log(b); // ReferenceError: b is not defined
let b = 2;

另外，let 和const不会像var一样将变量挂载到全局对象上，而是在块级作用域内有效。同时，使用const声明的变量不能再次赋值。

涉及面试题：

• 什么是提升？
• 什么是暂时性死区？
• var、let 及 const 区别？

2. 原型继承和 Class 继承

在JavaScript中，虽然有class语法，但本质上并不存在类，class 只是语法糖，其背后仍然是基于原型的继承。

2.1 原型继承

组合继承是最常用的继承方式：

function Parent(value) {
  this.val = value;
}

Parent.prototype.getValue = function() {
  console.log(this.val);
};

function Child(value) {
  Parent.call(this, value);
}

Child.prototype = new Parent();

const child = new Child(1);

child.getValue(); // 1
console.log(child instanceof Parent); // true

组合继承通过在子类构造函数中调用父类构造函数，并通过改变子类的原型为父类的实例来实现继承。但这样会导致子类原型上多了不需要的父类属性，存在内存上的浪费。

2.2 Class 继承

ES6 引入了class语法，使得继承更加直观和易用：

class Parent {
  constructor(value) {
    this.val = value;
  }

  getValue() {
    console.log(this.val);
  }
}

class Child extends Parent {
  constructor(value) {
    super(value);
  }
}

const child = new Child(1);

child.getValue(); // 1
console.log(child instanceof Parent); // true

class 实际上是在原型基础上的一层封装，它使得继承更加直观。

涉及面试题：

• 原型如何实现继承？
• Class 如何实现继承？
• Class 本质是什么？

3. 模块化

使用模块化可以解决命名冲突、提高代码复用性和可维护性的问题。在早期，立即执行函数是实现模块化的一种常见方式：

(function(globalVariable){
   globalVariable.test = function() {}
   // ... 声明各种变量、函数都不会污染全局作用域
})(globalVariable);

此外，AMD 和 CMD 也是模块化的方案，而在Node.js中，CommonJS 是常见的模块管理方式：

// CommonJS
// a.js
module.exports = {
    a: 1
}
// or 
exports.a = 1

// b.js
var module = require('./a.js')
console.log(module.a); // log 1

ES6 引入了原生的模块化方案：

// ES Module
// a.js
export const a = 1;

// b.js
import { a } from './a.js';
console.log(a); // 1

涉及面试题：

• 模块化的优势是什么？

3.1 立即执行函数

在早期的JavaScript中，使用立即执行函数实现模块化是一种常见的手段。通过函数作用域，解决了命名冲突和全局污染的问题：

(function(globalVariable){
   globalVariable.test = function() {}
   // ... 声明各种变量、函数都不会污染全局作用域
})(globalVariable);

涉及面试题：

• 立即执行函数的作用是什么？

3.2 AMD 和 CMD

虽然 AMD（Asynchronous Module Definition）和 CMD（Common Module Definition）已经相对较少使用，但了解它们的特性也是必要的。它们是用于浏览器端模块化的方案。

// AMD
define(['./a', './b'], function(a, b) {
  // 加载模块完毕可以使用
  a.do();
  b.do();
});
// CMD
define(function(require, exports, module) {
  // 加载模块
  // 可以把 require 写在函数体的任意地方实现延迟加载
  var a = require('./a');
  a.doSomething();
});

涉及面试题：

• AMD 和 CMD 的特性

4. Proxy

ES6 引入的Proxy对象用于创建一个对象的代理，从而实现对对象的拦截和自定义行为。Proxy 可以用于实现许多高级特性，如数据响应式。以下是一个简单的例子：

let handler = {
  get: function(target, property, receiver) {
    console.log(`Getting ${property}`);
    return Reflect.get(target, property, receiver);
  },
  set: function(target, property, value, receiver) {
    console.log(`Setting ${property} = ${value}`);
    return Reflect.set(target, property, value, receiver);
  }
};

let obj = new Proxy({}, handler);
obj.name = "John"; // Setting name = John
console.log(obj.name); // Getting name

Proxy 可以捕获对象的各种操作，如读取属性、设置属性等，为开发者提供了更多的控制力。

涉及面试题：

• Proxy 可以实现什么功能？

5. map, filter, reduce

这三个数组方法是在ES5中引入的，但在ES6中得到了进一步的强化和普及。

5.1 map

map 方法创建一个新数组，其结果是对原数组中的每个元素调用提供的函数进行处理。

let array = [1, 2, 3];
let mappedArray = array.map(value => value * 2);
console.log(mappedArray); // [2, 4, 6]

5.2 filter

filter 方法创建一个新数组，其中包含通过所提供函数实现的测试的所有元素。

let array = [1, 2, 4, 6];
let newArray = array.filter(item => item !== 6);
console.log(newArray); // [1, 2, 4]

5.3 reduce

reduce 方法用于将数组中的元素通过提供的函数逐个累积为单个值。

const arr = [1, 2, 3];
const sum = arr.reduce((acc, current) => acc + current, 0);
console.log(sum); // 6

涉及面试题：

• map、filter、reduce 各自有什么作用？

6. Map、WeakMap、Object 区别

这三者都是用于存储键值对的容器，但在使用场景和特性上存在一些差异。

6.1 Object

Object 的键只能为字符串或者符号。
Object 是无序的，属性的顺序不受保证。
Object 的键值对是显式的，可以通过Object.keys()获取所有键。

6.2 Map

Map 的键可以是任意类型。
Map 是有序的，键值对的顺序与插入顺序一致。
Map 是可迭代的，可以直接进行遍历。

let map = new Map();
map.set("a", 1);
map.set("b", 2);
for (let [key, value] of map) {
  console.log(key, value);
}

6.3 WeakMap

WeakMap 的键只能是对象。
WeakMap 是弱引用，不会阻止被引用对象被垃圾回收。
WeakMap 没有迭代方法，不能直接遍历。

let weakMap = new WeakMap();
let obj = {};
weakMap.set(obj, "some value");

涉及面试题：

• Map、WeakMap、Object 的区别是什么？

原文链接

面试宝典之ES6知识点