距2019年底还有不到50天，马上又到了要为跳槽面试做准备的时候。
使用箭头函数应该注意什么？ 介绍下set、map的区别？ promise构造函数是同步执行还是异步执行，那么then方法呢？
ECMAScript 6（以下简称ES6）是 JS 语言的下一代标准，已经在2015年6月正式发布了。它的目标，是使得 JS 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。接下来咱们来看看 20 道棘手的面试题，通过做题，顺带提升一下咱们的 JS 的技能。
问题1：可以解释一下 ES5 和ES6的区别吗?
主题: JavaScript 难度: ⭐⭐⭐
以下是ES5和ES6之间的一些主要区别：
箭头函数和字符串插值
const greetings = (name) => { return `hello ${name}`;}
const：const 表示无法修改变量的原始值。需要注意的是，const表示对值的常量引用，咱们可以改变被引用的对象的属性值，但不能改变引用本身。
const names = []
names.push("jin")
console.log(names.length === 1) //true
names = ["steve", "jion"] // error块作用域：ES6 中 let, const 会创建块级作用域，不会像 var 声明变量一样会被提升。
默认参数：默认参数使咱们可以使用默认值初始化函数。当参数省略或 undefined 时使用默认参数值。
function multipty (a, b = 2 ){return a + b}multipty(5) // 7
类定义与继承
ES6 引入了对类(class关键字)、构造函数(constructor关键字)和 extend 关键字(用于继承)的语言支持。
for-of 运算符
for...of 语句创建一个遍历可迭代对象的循环。
展开操作符
const obj1 = { a: 1, b: 2 }
const obj2 = { a: 2, c: 3, d: 4}
const obj3 = {...obj1, ...obj2}Promises: Promises 提供了一种机制来处理异步操作的结果和错误。可以使用回调来完成相同的事情，但是Promises 通过方法链接和简洁的错误处理来提高可读性。
const isGreater = (a, b) => {return new Promise((resolve, reject) =>{if(a > b){resolve(true)}else{reject(false)}})}isGreater(1,2).then( res =>{console.log("greater")}).catch(err =>{console.log(error)})
模块导出
const myModule = { x: 1, y: () => { console.log('This is ES5') }}
export default myModule;
和导入
import myModule from './myModule';
问题 2：什么是 IIFE (立即调用的函数表达式)
主题: JavaScript 难度: ⭐⭐⭐
IIFE是一个立即调用的函数表达式，它在创建后立即执行
(function iife(){
console.log("hello")
})();
// 输出 hello常常在使用此模式避免全局变量污染的问题，应为在立即执行函数里，其作用域之外是不可见的。
问题 3：何时在 ES6 中使用箭头函数？
主题: JavaScript 难度: ⭐⭐⭐
在全局作用域内和
Object.prototype属性中使用function。为对象构造函数使用
class。其它情况使用箭头函数。
使用箭头函数的好处
作用域安全性:当箭头函数被一致使用时，所有东西都保证使用与根对象相同的
this。如果一个标准函数回调与一堆箭头函数混合在一起，那么作用域就有可能变得混乱。紧凑性:箭头函数更容易读写。
清晰度:使用箭头函数可明确知道当前
this指向。
问题 4:将 Symbol 引入ES6 的目的是什么？
主题: JavaScript 难度: ⭐⭐⭐
Symbol 是一种新的、特殊的对象，可以用作对象中惟一的属性名。使用 Symbol 替换string 可以避免不同的模块属性的冲突。还可以将Symbol设置为私有，以便尚无直接访问Symbol权限的任何人都不能访问它们的属性
。
Symbol 是JS新的基本数据类型。与number、string和boolean 原始类型一样，Symbol也有一个用于创建它们的函数。与其他原始类型不同，Symbol没有字面量语法。创建它们的唯一方法是使用以下方法中的Symbol构造函数
let symbol = Symbol();
问题 5: 在 ES6 中使用展开(spread)语法有什么好处? 它与剩余(rest)语法有什么不同？
主题: JavaScript 难度: ⭐⭐⭐
ES6 的展开语法在以函数形式进行编码时非常有用，因为咱们可以轻松地创建数组或对象的副本，而无需求助于Object.create，slice或库函数。Redux 和rx.js项目中经常使用此特性。
function putDookieInAnyArray(arr) {return [...arr, 'dookie'];}const result = putDookieInAnyArray(['I', 'really', "don't", 'like']);// ["I", "really", "don't", "like", "dookie"]const person = {name: 'Todd',age: 29,};const copyOfTodd = { ...person };
ES6 的 rest 语法提供了一种捷径，其中包括要传递给函数的任意数量的参数。
就像展开语法的逆过程一样，它将数据放入并填充到数组中而不是展开数组，并且它在函数变量以及数组和对象解构分中也经常用到。
function addFiveToABunchOfNumbers(...numbers) {return numbers.map(x => x + 5);}const result = addFiveToABunchOfNumbers(4, 5, 6, 7, 8, 9, 10);// [9, 10, 11, 12, 13, 14, 15]const [a, b, ...rest] = [1, 2, 3, 4]; // a: 1, b: 2, rest: [3, 4]const { e, f, ...others } = {e: 1,f: 2,g: 3,h: 4,}; // e: 1, f: 2, others: { g: 3, h: 4 }
问题 6: ES6 类和 ES5 函数构造函数有什么区别？
主题: JavaScript 难度: ⭐⭐⭐
// ES5 Function Constructorfunction Person(name) {this.name = name;}// ES6 Classclass Person {constructor(name) {this.name = name;}}
对于简单的构造函数，它们看起来非常相似。
构造函数的主要区别在于使用继承。如果咱们创建一个继承Person类的Student子类并添加一个studentId字段，以下是两种方式的使用：
// ES5 Function Constructorfunction Student(name, studentID) {// 调用你类的构造函数以初始化你类派生的成员。Person.call(this. name)// 初始化子类的成员。this.studentId = studentId}Student.prototype = Object.create(Person.prototype)Student.prototype.constructor = Student// ES6 Classclass Student extends Person {constructor(name, studentId) {super(name)this.studentId = studentId}}
在 ES5 中使用继承要复杂得多，而且 ES6 版本更容易理解和记住。
问题 7: .call 和 .apply 区别是啥？
主题: JavaScript 难度: ⭐⭐⭐
.call和.apply均用于调用函数，并且第一个参数将用作函数中this的值。但是，.call将逗号分隔的参数作为下一个参数，而.apply将参数数组作为下一个参数。简单记忆法：C用于call和逗号分隔，A用于apply和参数数组。
function add(a, b) {return a + b;}console.log(add.call(null, 1, 2)); // 3console.log(add.apply(null, [1, 2])); // 3
web前端培训：http://www.baizhiedu.com/web2019
