【前端知识体系复习】ES6

前端知识体系复习

ES2015/ES6

箭头函数

const a = () => {}

可以引出的一个问题便是与传统函数的区别

this:

箭头函数没有this指向，指向上一级执行上下文

声明：

普通函数会有声明提升，但是箭头函数没有

构造：

箭头函数不能作为构造函数来使用

class 类

基于原型对象模式的语法糖

增强的对象字面量

const obj = {
    // 以及废除，虽然有的浏览器仍然支持但是不建议使用
    // 可参考[MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/proto)
    __proto__:xxxobj,
    handler:{
        get(){},
        set(){}
    }
    toString(){}
}

模板字符串

const a = `
123 ${vari}
`

解构

[a,b] = [b,a]

默认值 Rest Spread

//函数默认值
function fun(a = 12,b){
	...
}
function fun2(a,...b){
	return a*b.length
}
// 在一个函数调用中把一个数组变成连续的参数。并将尾部参数绑定到一个数组—— Rest
fun2(2,'hello',true) === 6

function fun3(a,b,c){
	return a+b+c
}
fun3(...[1,2,3]) === 6

变量 、常量 let const

let 无法重复声明 const声明必须初始值

迭代器 for…of…

使用迭代器实现斐波那契

一些内置类型自带迭代器行为：Array,TypeArray,String,Map,Set MDN

const fibonacci = {
    [Symbol.iterator](){
        let pre = 0,cur = 1
        return {
            next(){
                [pre,cur] = [cur,cur+pre]
                return {
                    done:false,
                    value:cur
                }
            }
            
        }
    }
}

for(i of fibonacci){
   // xxx
}

生成器

生成器是迭代器的子类型，包括额外的 next 和 throw，使用 function* 和 yield 简化了迭代器的编写，一个以 function* 声明的函数会返回一个生成器实例

const fibonacci = {
    [Symbol.iterator]:function*(){
        let pre = 0,cur = 1
        while(true){
           	[pre,cur] = [cur,cur+pre]
            yield cur
        }
    }
}

for(i of fibonacci){
   // xxx
}

Unicode

支持完整的Unicode编码

"\u{20BB7}" === "𠮷"

ESM 模块化

export const a = 10
export function fun(){}

import {a,fum} from './utils'

// extra
export default xxx
import * as xx from './'

Map Set WeakMap WeakSet

MDN

针对Map实现的两个很大缺点

1：赋值、搜索都是O（n）的时间复杂度，都需要遍历全部数组

2：可能导致内存泄漏，因为数组一直引用着每个键和值 使得垃圾回收算法不能回收处理他们，即使没有其他任何的引用存在

WeakMap 持有的是弱引用，意味着没有其他引用时垃圾回收机制可以正确的进行，

WeakMap 这样的弱引用意味着其key时不可枚举的

WeakMap的应用可以在vue源码中体现，用来做每个target对象的缓存

垃圾回收机制：

垃圾回收机制就是为了防止内存泄漏

知乎

标记清除：当变量进入环境时被标记为‘进入’，离开时标记为‘离开’，垃圾回收机制回收‘离开’标记

引用计数：声明一个变量并将一个引用类型赋值给他，引用类型计数+1，当计数为0时，释放计数为0所占的内存。

引用计数的缺陷：当循环引用的时候，无法回收

如下：

function fun(){
    const a = {}
    const b = {}
    a.foo = b
    b.foo = a
}

每次调用fun，a 和 b 的的计数都为2，这部分内存永远不会回收释放，即造成内存泄漏

分配内存的情况：{} 、[]、 function(){}

Object优化：

最大限度实现对象重用，避免new {}来创建新的内存空间

Array优化：

arr.length = 0 ，而不是 arr = []，[]本身也是一个数组开辟了一小块内存地址

Function优化：

动态创建function会产生内存垃圾例如return function 这样动态创建方法的实例

引起内存泄漏的可能

1、意外的全局变量，因为全局变量并不会被回收，使用严格模式可以避免

（附加：严格模式）：严格模式下无法意外创建变量，引起静默失败的赋值操作（不可写、只读、不可拓展的新属性）抛出异常（例如给NaN赋值，非严格模式下不会出现任何问题），函数参数名唯一、… MDN

2、闭包引起的内存泄漏，将事件处理函数定义在外部，解除闭包,或者在定义事件处理函数的外部函数中，删除对应的引用

3、未清理的DOM元素，手动删除

4、 遗忘的定时器或者回调，在定时器和回调当中有引用，手动删除定时器

。。。

Proxy

代理使创建的对象具有目标对象的全部可用行为。 可用于拦截、对象虚拟化、 记录/归档等

var handler =
{
  // target.prop
  get: ...,
  // target.prop = value
  set: ...,
  // 'prop' in target
  has: ...,
  // delete target.prop
  deleteProperty: ...,
  // target(...args)
  apply: ...,
  // new target(...args)
  construct: ...,
  // Object.getOwnPropertyDescriptor(target, 'prop')
  getOwnPropertyDescriptor: ...,
  // Object.defineProperty(target, 'prop', descriptor)
  defineProperty: ...,
  // Object.getPrototypeOf(target), Reflect.getPrototypeOf(target),
  // target.__proto__, object.isPrototypeOf(target), object instanceof target
  getPrototypeOf: ...,
  // Object.setPrototypeOf(target), Reflect.setPrototypeOf(target)
  setPrototypeOf: ...,
  // for (let i in target) {}
  enumerate: ...,
  // Object.keys(target)
  ownKeys: ...,
  // Object.preventExtensions(target)
  preventExtensions: ...,
  // Object.isExtensible(target)
  isExtensible :...
}

vue3 响应式原理依赖于此

Symbol

唯一的基本数据类型

二进制 八进制字面量

为二进制（b）和八进制（o）增加了两种新的数字字面量。

0b111110111 === 503 // true
0o767 === 503 // true

Subclassable Built-ins

Array，Date 还有Dom可以子类化

一些 Math + Number + String + Array + Object APIs

Number：isNaN,isInteger…

String: includes,repeat

Array:from,of,fill,find,findIndex,entries,keys,values

Object: assign

bigint

Promise

function timeout(duration = 0){
    return new Promise((resolve,reject) => {
        setTimeout(resolve,deration)
    })
}

Reflect Api

为对象提供一些方法，方法集和Proxy类似，Reflect 不是函数对象所以没有构造函数，同时Reflect中的所有方法都是static，这意味着这和Math类似。