Javascript进阶面试题

本文总结了 Javascript 进阶面试题，包括 WeakMap 和 Map 的区别，实现一个 async/await 等

WeakMap 和 Map 的区别

• WeakMap 只接受对象作为 key，如果设置其他类型的数据作为 key，会报错。
• WeakMap 的 key 所引用的对象都是弱引用，只要对象的其他引用被删除，垃圾回收机制就会释放该对象占用的内存，从而避免内存泄漏。
• 由于 WeakMap 的成员随时可能被垃圾回收机制回收，成员的数量不稳定，所以没有 size 属性。
• WeakMap 没有 clear() 方法
• WeakMap 不能遍历

实现一个 async/await

/**
 * async的执行原理
 * 其实就是自动执行generator函数
 * 暂时不考虑genertor的编译步骤（更复杂）
 */

const getData = () => new Promise((resolve) => setTimeout(() => resolve("data"), 1000));

// 这样的一个async函数 应该再1秒后打印data
async function test() {
  const data = await getData();
  console.log("data: ", data);
  const data2 = await getData();
  console.log("data2: ", data2);
  return "success";
}

// async函数会被编译成generator函数 (babel会编译成更本质的形态，这里我们直接用generator)
function* testG() {
  // await被编译成了yield
  const data = yield getData();
  console.log("data: ", data);
  const data2 = yield getData();
  console.log("data2: ", data2);
  return "success";
}

function asyncToGenerator(generatorFunc) {
  return function () {
    const gen = generatorFunc.apply(this, arguments);

    return new Promise((resolve, reject) => {
      function step(key, arg) {
        let generatorResult;
        try {
          generatorResult = gen[key](arg);
        } catch (error) {
          return reject(error);
        }

        const { value, done } = generatorResult;

        if (done) {
          return resolve(value);
        } else {
          return Promise.resolve(value).then(
            function onResolve(val) {
              step("next", val);
            },
            function onReject(err) {
              step("throw", err);
            }
          );
        }
      }
      step("next");
    });
  };
}

const testGAsync = asyncToGenerator(testG);
testGAsync().then((result) => {
  console.log(result);
});

@bebel/runtime 的实现代码如下，可在 asyncToGenerator.js 查看源代码

function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
  try {
    var info = gen[key](arg);
    var value = info.value;
  } catch (error) {
    reject(error);
    return;
  }

  if (info.done) {
    resolve(value);
  } else {
    Promise.resolve(value).then(_next, _throw);
  }
}

export default function _asyncToGenerator(fn) {
  return function () {
    var self = this,
      args = arguments;
    return new Promise(function (resolve, reject) {
      var gen = fn.apply(self, args);

      function _next(value) {
        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
      }

      function _throw(err) {
        asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
      }

      _next(undefined);
    });
  };
}

浮点数在内存是如何存储

Javascript 语言使用的是 IEEE754 （二进制浮点数算术标准） 的浮点数存储，分为三部分，分别是 符号位（Sign)，指数位（Exponent），尾数位（Fraction）。

浮点数存储到内存中需要经过三次转换

• 将浮点数转换成二进制
• 用科学计数法表示二进制浮点数
• 计算指数偏移后的值

举个例子 🍠 ，浮点数 19.625 用 float 是如何存储的？

• 将浮点数转换成二进制：10011.101（将 19.625 整数部分采用除 2 取余，小数部分采用乘 2 取整法）；
• 用科学计数法表示二进制浮点数：1.0011101*2^4；
• 计算指数偏移后的值：127 + 4 = 131 （10000011）；
• 拼接综上所述，float 类型的 19.625 在内存中的值为：0 - 10000011 - 001 1101 0000 0000 0000 0000。

为什么 0.1 + 0.2 不等于 0.3？

0.1 转二进制为 0.0001100110011001...(无限循环)

0.2 转二进制为 0.0011001100110011...(无限循环)

两个二进制数相加，结果为 0.0100110011001100110011001100110011001100110011001100，转成十进制为 0.30000000000000004，所以不等于 0.3。

如何解决这个问题？

推荐两个库，分别是 Math.js 或者 big.js

实现一个模板字符串的替换

例如有这个模板

const template = "前端面经的地址是{{ url }}，请记住{{ name }}";

1. 使用正则表达式获取模板中的变量

const reg = /\{\{(.*?)\}\}/g;

2. 使用 replace 来替换

template.replace(reg, (match, key) => {
  return data[key];
});

最终版本

function renderTpl(template, data) {
  const reg = /\{\{(.*?)\}\}/g;
  return template.replace(reg, (match, key) => {
    return data[key.trim()];
  });
}

const template = "前端面经的地址是{{ url }}，请记住{{ name }}";
const data = {
  url: "https://www.1024nav.com",
  name: "1024nav",
};
renderTpl(template, data);