es6重难点

es6重难点总结归纳

2018已经成为过去，2019年最重要的事就是换工作，换工作，换工作！！！得不到的永远在骚动，从去年的一些面试试水来看，各大厂的面试要求那是万变不离其中，进行自我总结了一下，无非就是以下知识点：

• 调用堆栈
• 作用域闭包
• this全面解析
• 深浅拷贝的原理
• 原型prototype
• 事件机制、Event Loop
• Promise机制
• async / await原理、
• 防抖/节流原理
• 模块化详解
• es6重难点、
• 浏览器熏染原理
• webpack配置(原理)
• 前端监控
• 跨域和安全
• 性能优化（webpack打包优化, http缓存，浏览器缓存，csnd服务器）
• VirtualDom原理、Diff算法、
• 数据的双向绑定

今天我在这里和各位看官一起探讨学习一下 es6 的重难点，es6 在过去的一年里可以说是站在风口浪尖上的猪，没有一家公司的面试官不涉猎这本葵花宝典，不需要全部都弄通透和明白，一些高逼格好用语法，就可以让我们的代码变得高大上，今天我们来聊一聊 所谓 es6 的重难点:

let 和 const **

let 和 const 都是用来声明变量的命令，用法和var差不多，区别：

• let 声明的变量只能在命令所在的代码块内有效
• const 一般用来声明常量，且不可改变

let 和 const 具体使用参见添加链接描述
这里我只强调几个点：

• let 存在暂时性死区(未声明先使用会报错)
• 不允许重复声明(这个实际生产中还是蛮有用的)
• 存在块级作用域
• const 声明的变量不是完全不能改动，如果是引用类型的值，eg: const arr = [1,2,3] arr[0] = 10; 只要引用的地址不被重新修改，是可以任意修改引用类型数据的值的，基本类型的值是不可以进行修改的

console.log(a) // 不存在变量声明提升
let a = 123
// 面试相关
 (function () {
    let arr = [];
    for (let i=0;; i< 3;i++) { // for循环作用域
      // 循环体内部作用域
      arr.push(function () {
        console.log(i)
      })
    }
    arr[0](); // 3
    arr[1](); // 3
    arr[2](); // 3
  })()

面试相关：let 和 const 的区别？
const 使用来声明常量，不可以进行修改，如果你这样回答就中计了。本质还是和数据类型有关

解构赋值 **

• 数组的解构赋值
  数组的结构赋值不过多介绍，没什么可讲的，意义队形就好

eg: let [a,b,c] = [1,2,3]

当数据多了，看起来不是那么清晰明了,个人比较喜欢

eg: let a=1, b=2, c=3;

默认值也是很简单的

• 这里需要注意的是，只有赋值为undefined 或者 不赋值 的情况下，默认值才会生效

let [x = 1] = [undefined];
x // 1
let [x = 1] = [null];
x // null

• 对象的结构赋值

let { foo, bar } = { foo: "aaa", bar: "bbb" };
foo // "aaa"
bar // "bbb"
// 实际上是
let { foo: foo, bar: bar } = { foo: "aaa", bar: "bbb" };
当键值和键名一样的时候，就可以省略，这个在一等功名中早有领略其风骚
let arr = {
	goToUserDetail() {},
}

更高逼格点的用法参见

了解了数组的对象的结构赋值，我们即将进入正题，来看看函数参数的结构赋值，这个可是屡试不爽，在根据不同参数请求接口的时候特别好使

函数解构赋值***

在讲解函数的结构赋值之前，我们先来看看函数的默认值

// 参数y的默认值为 ’World‘
function log(x, y = 'World') {
  console.log("x=" + x, "y=" + y)
}
log('Hello') // x=Hello y=World
log('Hello', 'China') // x=Hello y=China
log('Hello', '') // x=Hello y= ''
log('Hello', undefined) // x=Hello y=World
log('Hello', null) // x=Hello y=null
// 对比以上输出结果可以知道，只有在参数为undefined的情况下，默认值才会生效

需求：

如果现在我想在不改变上面代码的情况下，调用log(‘9999’)，输出 x = undefined, y = 9999，上面的代码明显不符合需求，这时候就不得不提到对象的结构赋值了

function log({x, y} = {x : undefined, y : 'World'}) {
  console.log("x=" + x, "y=" + y)
}
log({y : 9999}) // x = undefined, y = 9999

function move({x = 0, y = 0} = {}) {
  return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, 0]
move({}); // [0, 0]
move(); // [0, 0]

将上面略做修改

function move({x, y} = { x: 0, y: 0 }) {
  return [x, y];
}
move({x: 3, y: 8}); // [3, 8]
move({x: 3}); // [3, undefined]
move({}); // [undefined, undefined]
move(); // [0, 0]

再修改

function move({x, y}) {
  return [x, y];
}
console.log(move({ x: 3, y: 8 })); // [3, 8]
console.log(move({ x: 3 })); // [3, undefined]
console.log(move({})); // [undefined, undefined]
console.log(move()) //  Cannot destructure property `x` of 'undefined' or 'null'.

函数的reset参数**

函数reset参数参见
这里几个注意的知识点就是

1、 rest 参数搭配的变量是一个数组，该变量将多余的参数放入数组中。
2、rest 参数之后不能再有其他参数（即只能是最后一个参数）

function push(array, ...items) {
  console.log(array, items)
}
push(4, 1, 2, 3) // 4, [1, 2, 3]   后面没有正常匹配的多余的参数放入一个数组

function push(array, ...items, last) {
  console.log(array, items, last)
}
push(4, 1, 2, 3) // Rest parameter must be last formal parameter

上面代码，除了第一个参数正常匹配，其余的参数放入了一个数组，所以last相当于并没有传入，在函数内部是无法获取到last变量的

箭头函数 ***

这个同样不赘述，依然是参见阮大大的 es6入门 唯一要注意的一点是，箭头函数没有自己的 this，都是继承而来，具体参见博客 this全面解析

尾调用优化 **

es6入门 关于尾调用优化，铭记一点就是：函数的最后一步 只能是 调用另一个函数（不能是赋值操作，不能是还有下一步操作，也不可以没有return 值）

// 以下三种情况，都不属于尾调用
// 情况一
function f(x){
  let y = g(x);
  return y;
}
// 情况二
function f(x){
  return g(x) + 1;
}
// 情况三
function f(x){
  g(x);
}

上面代码中，情况一是调用函数g之后，还有赋值操作，所以不属于尾调用，即使语义完全一样。情况二也属于调用后还有操作，即使写在一行内。情况三等同于下面的代码。

function f(x){
  g(x);
  return undefined;
}

• 尾调用不一定出现在函数尾部，只要是最后一步操作即可。

function f(x) {
  if (x > 0) {
    return m(x)
  }
  return n(x);
}

数组的扩展、对象的扩展 **

数组的扩展添加链接描述、对象的扩展添加链接描述 都是在 es5 的基础上新增的一些 API ，参见文档就好，比较简单

Promise 机制

先附上一片面试官眼中的 promise
接下来我们浅谈一下promise实现的原理

我们知道 Promise 有三种状态，pending（进行中）、fulfilled（已成功）和rejected（已失败），而且接受一个函数参数，且该函数有两个参数

function Promise(excutor) {
  let self = this
  self.status = 'pending'
  self.value = null
  self.reason = null
  self.onFulfilledCallbacks = []
  self.onRejectedCallbacks = []
  // 什么时候调用，什么时候改变状态，且状态不可逆
  function resolve(value) {
    if (self.status === 'pending') {
      self.value = value
      self.status = 'fulfilled'
      // 以下方法会在先调用then回调之后，在resolve的时候执行
      self.onFulfilledCallbacks.length && self.onFulfilledCallbacks.forEach(item => item())
    }
  }

  function reject(reason) {
    if (self.status === 'pending') {
      self.reason = reason
      self.status = 'rejected'
      self.onFulfilledCallbacks.length && self.onRejectedCallbacks.forEach(item => item())
    }
  }
  try {
    excutor(resolve, reject) // 构造函数传进来的函数
  } catch (err) {
    reject(err)
  }
}

Promise.prototype.then = function (onFulfilled, onRejected) {
  let self = this
  if (self.status === 'fulfilled') {
  // 返回新的Promise
    return new Promise((resolve, reject) => {
      try {
        let x = onFulfilled(self.value)
        // then 的回调也有可以返回一个Promise
        (x instanceof Promise) ? x.then(resolve, reject) : resolve(x)
      } catch (err) {
        reject(err)
      }
    })
  }
  if (self.status === 'rejected') {
    return new Promise((resolve, reject) => {
      try {
        let x = onRejected(self.reason)
        (x instanceof Promise) ? x.then(resolve, reject) : resolve(x)
      } catch (err) {
        reject(err)
      }
    })
  }
  if (self.status === 'pending') {
    return new Promise((resolve, reject) => {
      self.onFulfilledCallbacks.push(() => {
        let x = onFulfilled(self.value)
        (x instanceof Promise) ? x.then(resolve, reject) : resolve(x)
      })
      self.onRejectedCallbacks.push(() => {
        let x = onRejected(self.reason)
        (x instanceof Promise) ? x.then(resolve, reject) : resolve(x)
      })
    })
  }
}

Promise.prototype.catch = function (fn) {
  return this.then(null, fn)
}

class继承****

参见 读懂class继承

Set 和 Map 数据结构【待更新】

Promise【待更新】

async 【待更新】

模块化详解 【待更新】