前端面试思维导图-JavaScript

属性

位置

JS区分大小写

标识符（变量/函数/参数等）

注释

严格模式

关键字

保留字

ECMAScript变量是松散类型，可保存任意类型的数据，严格模式下不能定义名为eval或arguments的变量

typeof操作符

instanceof

基本类型（按值访问）

一元操作符

位操作符

数学运算操作符

逻辑运算操作符

赋值

逗号

条件语句

循环语句

with

label

执行环境定义了变量或函数有权访问的其他数据，决定了他们各自的行为，每个执行环境都有一个与之关联的变量对象保存所有的变量和函数

全局执行环境

函数执行环境

作用域链

模仿块级作用域

私有变量

在单纯的函数调用中

在匿名函数中

作为对象的方法调用

作为构造函数调用

apply、call和bind调用

找到var和function关键字，做出对应的提升

按照代码顺序的逻辑，正常进行执行

一组数据和功能的集合

创建对象实例

Object实例属性和方法

创建数组实例

检测数组

属性方法

TypedArray

创建日期实例

日期格式化方法

日期/时间对象的组件方法

正则表达式创建

实例属性

实例方法

局限性

特点

函数声明

函数表达式

参数

内部属性

函数实例的属性

函数实例的方法

递归

闭包

函数柯里化

每当新建一个基本类型值，后台会创建相对应的引用类型实例

String

Boolean

Number

全局对象

方法

属性

window对象

属性

方法

两个指针指向同一个地址，对其中一个对象进行修改，另一个也会同步改变；但两者是不等的；

深复制

浅复制

属性类型

创建对象

继承

全局属性与方法

使用var定义变量是全局变量，但是window对象上定义属性是有区别的

top

top.frames

parent

属性

刷新页面

go(number)

forward()

back()

类型

关系

JS通过Document类型表示文档，在浏览器中，document对象时HTMLDocument实例

特征

子节点

文档信息

查找元素

特殊属性

能力监测

获取节点

编辑节点

移动节点

querySelector()

querySelectorAll()

matchesSelector()

专有扩展

HTML5

DOM2和DOM3

检测要求

可靠的能力监测

冒泡

捕获

DOM事件流

HTML

DOM0

DOM2

IE

跨浏览器

DOM事件对象

IE事件对象

跨浏览器事件对象

UI事件

焦点事件

鼠标与滚轮事件

键盘与文本事件

复合事件

变动事件

HTML5事件

设备事件

触摸与手势事件

DOM

IE

try-catch

抛出错误

错误处理策略

常见错误类型

区分致命错误和非致命错误

控制台输出

记录到当前页面

抛出错误

单一职责原则SRP

开放封闭原则OCP

里氏替换原则LSP

接口隔离原则ISP

依赖倒转原则DIP

单例模式

原型模式

工厂模式

发布订阅模式

观察者模式

沙箱模式

混入模式Mixin

标记清除

v8垃圾回收机制

引用计数

情况

移除事件处理程序

var

let

const

指let和const声明变量之前，该变量都是不可用的，在语法上被称为”暂时性死区“

注意：这意味着typeof不再是一个百分之百安全的操作

没有this

不能作为构造函数，不能使用new操作符

不能绑定arguments

没有原型属性

不能简单返回对象的字面量

不能当做Generator函数，不能使用yield关键字

箭头函数不能换行

不能使用call、apply和bind改变其this值

let s = Symbol(); typeof s // "symbol" s.toString()

入参相同，返回值也不同

Symbol值不能与其他类型值进行运算

可以转化为字符串

description

.for(str)

.keyFor(param)

.match()

.hasInstance()

. isConcatSpreadable()

作为对象属性名

定义一组常量的值，均不相等

消除魔法字符串和魔法数字

let s = new Set(iterator)

.add(value)

.delete(value)

.has(value)

.clear()

.keys()

.values()

.entries()

.forEach()

.size

结构与 Set 类似，也是不重复的值的集合

const set = new Set([ ['foo', 1], ['bar', 2] ]);

.size

.set(key, val)

.get(key)

.has(key)

.delete(key)

.clear()

.keys()

.values()

.entries()

.forEach()

Array

Object

JSON

与Map类似，但是只接受对象/null作为键名

对象都是弱引用，垃圾回收机制不会管你是否在WeakSet里面，没有引用就会立刻回收

创建Promise实例

Promise实例方法

pending

fulfilled

rejected

pending => fulfilled

pending => rejected

class PromiseNew { constructor(fn) { this.state = 'PENDING'; this.doneList = []; this.failList = []; fn(this.resolve.bind(this), this.reject.bind(this)); } // 注册成功处理函数 done(handle) { if (typeof handle === 'function') { this.doneList.push(handle); } else { throw new Error('缺少回调函数'); } return this; } // 注册失败处理函数 fail(handle) { if (typeof handle === 'function') { this.failList.push(handle); } else { throw new Error('缺少回调函数'); } return this; } // 同时注册成功和失败处理函数 then(success, fail) { this.done(success || function () { }).fail(fail || function () { }); return this; } // 一个处理函数注册到成功和失败 always(handle) { this.done(handle || function () { }).fail(handle || function () { }); return this; } // 更新state为：RESOLVED，并且执行成功处理队列 resolve() { this.state = 'RESOLVED'; let args = Array.prototype.slice.call(arguments); setTimeout(function () { this.doneList.forEach((item, key, arr) => { item.apply(null, args); arr.shift(); }); }.bind(this), 200); } // 更新state为：REJECTED，并且执行失败处理队列 reject() { this.state = 'REJECTED'; let args = Array.prototype.slice.call(arguments); setTimeout(function () { this.failList.forEach((item, key, arr) => { item.apply(null, args); arr.shift(); }); }.bind(this), 200); } }

Promise.prototype.all = (values)=>{ return new Promise((resolve,reject)=>{ let resultArr = [] let count = 0 values.forEach((promise,index)=>{ promise.then((value)=>{ resultArr[index] = value if(++count === values.length){ resolve(resultArr) } },reject) }); }); }

function* helloWorldGenerator() { yield 'hello'; yield 'world'; return 'ending'; } var hw = helloWorldGenerator();

class Example { constructor(param) { this.param = param; } }

特点

类的使用

如何继承

子类

prototype

__proto__

写好添加前缀的方法，返回新的路由名称

无法读取非同源网页的cookie、localStorage和IndexedDB

无法接触非同源网页的DOM

无法向非同源地址发送Ajax请求

临时方案

较好方案