theme: cyanosis

highlight: androidstudio

JavaScript

数据类型

JS数据类型

检测数组类型

js console.log(变量 instanceof Array / 变量.constructor === Array / Array.isArray(变量) )

包装对象

Number、String、Boolean这三个原生对象在一定条件下自动转为对象 自动转换生成的包装对象是只读的,无法修改

函数的定义方式

  • 自定义函数:function fn(){}
  • 匿名函数:var fn = function(){}
  • 构造函数:var fn = new function(){}

    <script>中defer和async的区别

script标签中defer和async的区别.png

垃圾回收机制(GC)

  • 标记清除
  • 引用计数

    常见的内存泄露

  1. 闭包
  2. 定时器setInterval()
  3. jQuery里对 DOM 的引用
  4. 控制台日志 console.error
  5. 彼此引用的对象产生的循环(需要手动断开引用) 解决方法:
  6. 重复测试单一脚本
  7. 在开发者工具里手动GC
  8. 借助浏览器的任务管理器分析内存占用

JS继承的方式

  1. 原型链继承
  2. 构造继承
  3. 实例继承
  4. 拷贝继承
  5. 组合继承
  6. 寄生组合继承

    让事件实现先冒泡后捕获的效果

mermaid graph TD 给同一个元素绑定两个&nbspaddEventListener --> 给第一个&nbspaddEventListener&nbsp设置成冒泡-->给第二个&nbspaddEventListener&nbsp设置成捕获

mouseover、mouseout与mouseenter、mouseleave

  • mouseover、mouseout:当鼠标移入、移出元素或其子元素都会触发事件,所以有一个重复触发(冒泡)的过程
  • mouseenter、mouseleave:只有当鼠标移入、移出元素本身(不包含元素的子元素)会触发事件,也就是没有一个重复触发(冒泡)的过程

    原型链

遍历一个实例的属性时,先遍历实例对象上的属性,再遍历它的原型对象,一直遍历到Object image.png

判断一个对象arr是否Array

  1. arr instanceof Array (但是跨 frame 对象构建的场景下会失效)

  2. Object.prototype.toString.call(arr) === '[object Array]';

Object 对象

严格模式

严格模式.png

ES6

call、apply、bind

相同点:都是改变this指向

不同点: - call调用的是单个参数,apply调用的是参数数组 - call、apply 是立即调用;bind 是返回对应函数,便于稍后调用

var、let、const区别

var、let、const区别.png

new的执行过程 / 创建模拟对象

mermaid graph TD 在内存中创建新的空对象-->this&nbsp指向这个新对象-->执行构造函数方法&nbsp&nbsp给新对象添加属性方法-->返回这个新对象 (因此构造函数无需 return )

Set、WeakSet、Map和WeakMap

Set:对象允许存储任何类型的唯一值,无论是原始值或者是对象引用

WeakSet:成员都是对象;成员都是弱引用,可以被垃圾回收机制回收,可以用来保存 DOM 节点,不容易造成内存泄漏;

Map:本质上是键值对的集合,类似集合;可以遍历,方法很多,可以跟各种数据格式转换

WeakMap:只接受对象最为键名(null 除外),不接受其他类型的值作为键名;键名是弱引用,键值可以是任意的,键名所指向的对象可以被垃圾回收, 此时键名是无效的;不能遍历,方法有 get、set、has、delete

| | Set |WeakSet|Map|WeakMap | --- | --- |---|---|--- | 成员 | 唯一、无序 |都是对象|键值对的集合 |能否遍历|√|×|√|×|

call、apply、bind的区别

都是改变this指向

call 调用的是单个参数,apply 调用的是参数数组

call、apply 是立即调用;bind 是返回对应函数,便于稍后调用

this 绑定的优先级

new > bind > call=apply > obj.func() > 默认绑定

改变 this 指向

  1. 箭头函数
  2. new实例化对象
  3. call、apply、bind 4. js var _this = this;

Promise.all

  • 返回所有 Promise(p1,p2,p3) 实例的新 Promise
  • 当所有 Promise 实例都变成 fulfilled 状态,新 Promise 的状态才是 fulfilled 状态,并且返回所有 promise 实例的 resolve value 数组
  • 如果有一个 Promise 实例状态是 rejected 状态,则新 Promise 的状态是 rejected,返回第一个 promise reject 的 reason

    Promise.allSettled

  • 返回所有 Promise(p1,p2,p3) 实例的新 Promise
  • 返回所有 Promise 实例执行结果数组

    Promise.race

返回 Promise(p1,p2,p3) 最先执行的 Promise 实例的 value 或者 reason,不论 fulfilledrejected 状态。

Promise.any

返回 Promise(p1,p2,p3) 状态最先变成的 fulfilled 实例的 value,如果 p1,p2,p3 最终状态都是 reject 则返回 All promises were rejected

(推荐一位UP主,视频真的很风趣幽默、通俗易懂,我也是看他的视频学到了很多~)