跳到主要内容

JavaScript 常见问题

  • Promise 在创建时便会请求,而不是在 then 时请求 - eager eval

内存泄露

  • 常见场景
    1. 全局变量
    2. 闭包
    3. DOM
    4. 定时器
    5. EventListener
    6. console.log

Membrane

  • isolate two object graphs
  • 影响实现的 GC 逻辑

tbody to array

Array.prototype.map.call($0.querySelectorAll('tr'), ($tr) =>
Array.prototype.map.call($tr.querySelectorAll('td'), ($td) => $td.innerText),
);

NaN self compare

const a = Number('a');
console.log(a === a); // false

Primitive vs Object

  • Primitive
    • primitive value, primitive data type
    • 不是对象,没有方法,不可变
    • 7 种类型 - string, number, bigint, boolean, undefined, symbol, null
    • 除了 null 和 undefined 都有封装类型 - String, Number, BigInt, Boolean, Symbol
  • Object
    • 非 Primitive
    • 集成自 Object.prototype
    • Object.create(null)
    • JS 中 数组为对象
  • typeof
    • 会返回 function, undefined, object, string, number, boolean, bigint, symbol
    • typeof null 会返回 object
// 最简单直接判断
typeof obj === 'object' && obj !== null;

// 判断是否为对象 - 非 Prim
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object
function isObject(obj) {
return obj === Object(obj);
}

// 在 Object.prototype, Object.create(null) 返回 false
val instanceof Object;
// null 返回 true
typeof val === 'object';

substr vs substring

  • substr(startPos, newLen)
    • 废弃
  • substring(startPos, endPos)
    • substr(startPos, newLen) -> substring(startPos, startPos+newLen)

Performance

TypeError: Function.prototype.toString requires that 'this' be a Function

Function.prototype.toString 方法中 this 不是函数则会异常。

Object.create(null)

  • {}Object.create(Object.prototype)
    • 继承 Object
    • hasOwnProperty
    • isPrototypeOf
    • propertyIsEnumerable
    • toString/toLocaleString
    • valueOf
  • Object.create(null) - 不继承任何方法
    • 作为 Map 使用
console.assert(!Object.create(null).hasOwnProperty); // 不存在
console.assert({}.hasOwnProperty); // 存在

String({}); // 有 toString 方法
String(Object.create(null)); // 失败 - 不可以转 string
// throws error: Cannot convert object to primitive value

ArrayBuffer vs Blob

  • ArrayBuffer
    • 通用数据 - 内存
    • 通过 DataView/TypedArray 可操作
  • Blob
    • 类似文件 - 可能在磁盘
    • 不可变
    • 可创建 URL - window.URL.createObjectURL()

  • Blob -> ArrayBuffer
    • FileReader.readAsArrayBuffer()
  • ArrayBuffer -> Blob
    • new Blob(arrayBuffer)

Promise.race vs Promise.any vs Promise.allS vs Promise.allSettled

完成/fulfilled = resolve or reject

  • Promise.race
    • 任意一个 Promise 成功/resolve or 失败/reject
  • Promise.any
    • 任意一个 Promise 成功
    • 所有失败返回 AggregateError
  • Promise.all
    • 所有 Promise 成功
    • 一个失败则返回失败
  • Promise.allSettled
    • 所有 Promise 完成/fulfilled
    • 不区分成功失败
    • 返回所有结果
    • {status:'reject'|'resolve',reason}

polyfill vs ponyfill

  • polyfill - 修改全局对象
    • 补丁
    • 为旧浏览器提供新特性
  • ponyfill - 不修改全局对象
    • 为新特性提供旧浏览器支持
    • 通过引入新库实现
// ponyfill
const exports = {};

// polyfill
for (const prop in exports) {
if (Object.prototype.hasOwnProperty.call(exports, prop)) {
Object.defineProperty(globals!, prop, {
value: exports[prop as keyof typeof exports],
writable: true,
configurable: true,
});
}
}