3-10 基础面试题

1. arr.filter(Boolean) 的结果是

[0, 1, 2, 3, -1, null, "", 3, 5, 7].filter(Boolean);

等同与

[0, 1, 2, 3, -1, null, "", 3, 5, 7].filter((item) => Boolean(item));

3. 有没有写过 koa 中间件，请你描述下 洋葱模型?

深入浅出 Koa 的洋葱模型 : https://juejin.cn/post/7012031464237694983

4. 使用 js 实现一个 for 循环

function each(arr, callback) {
  let count = 0;
  const total = arr.length;
  const thank = () => {
    callback(count, arr[count]);
    count++;
    if (count < total) {
      thank();
    }
  };
  thank();
}
each([1, 2, 3, 4], (i, val) => console.log(i, val));

5. form-data、x-www-form-urlencoded、raw、binary 的区别

form-data:

1. 它会将表单的数据处理为一条消息，以标签为单元，用分隔符分开
2. 既可以上传键值对，也可以上传文件。
3. 当上传的字段是文件时，会有 Content-Type 来说明文件类型；content-disposition，用来说明字段的一些信息；

x-www-form-urlencoded:

1. 将表单内的数据转换为键值对, 常用于表单提交

raw：

1. 可以上传任意格式的文本，可以上传 text、json、xml、html 等

binary：

1. 相当于 Content-Type:application/octet-stream,从字面意思得知，只可以上传二进制数据，通常用来上传文件，由于没有键值，所以，一次只能上传一个文件

6. 获取对象属性名集合有哪些方式?

1. Object.keys()

2. Object.getOwnPropertyNames()

3. Reflec.ownKeys()

4. 函数方法

function keys(obj) {
  let res = [];
  for (let i in obj) {
    res[i] = i;
  }
  return res;
}

7. session storage 和 local storage 的区别？

https://segmentfault.com/a/1190000017155151

1. 生命周期
   localStorage 的生命周期是永久的，关闭页面或浏览器之后 localStorage 中的数据也不会消失。
   localStorage 除非主动删除数据，否则数据永远不会消失。
   sessionStorage 的生命周期是仅在当前会话下有效。sessionStorage 在关闭了浏览器窗口后就会被销毁
2. 存储大小
   5MB
3. 存储位置
   localStorage 和 sessionStorage 都保存在客户端，不与服务器进行交互通信
4. 存储内容类型
   localStorage 和 sessionStorage 只能存储字符串类型，对于复杂的对象可以使用 ECMAScript 提供的 JSON 对象的 stringify 和 parse 来处理
5. 获取方式
   localStorage：window.localStorage
   sessionStorage：window.sessionStorage
6. 应用场景
   localStorage：常用于长期登录（+判断用户是否已登录），适合长期保存在本地的数据
   sessionStorage：敏感账号一次性登录

8. 下面会输出什么?

https://segmentfault.com/a/1190000041028659

var x = 1;
function f(
  x,
  y = function () {
    x = 3;
    console.log(x);
  }
) {
  console.log(x);
  var x = 2;
  y();
  console.log(x);
}
f();
console.log(x);

10. forEach 解决异步问题

题：最希望测试得到的结果是 等待 1 秒 打印 1 等待 2 秒打印 2 ，但是目前来看并没有出现延迟等待的效果

fun([
  () => console.log("start"),
  () => sleep(1000),
  () => console.log("1"),
  () => sleep(2000),
  () => console.log("2"),
  () => sleep(3000),
  () => console.log("end"),
]);

// sleep 是一个延迟函数
function sleep(ms) {
  return new Promise((reslove) => {
    setTimeout(reslove, ms);
  });
}

// 异步代码同步执行的解决方案 有 Promise 和 async await 两种
async function fun(arr) {
  // why? 为什么会不等待呢？
  if (Array.isArray(arr)) {
    arr.forEach(async (element) => {
      await element();
    });
  }
}

fun();

解：

// 异步代码同步执行的解决方案 有 Promise 和 async await 两种
async function fun(arr) {
  // why? 为什么会不等待呢？
  // 异步代码同步执行，就需要放置在一个async await 函数中
  if (Array.isArray(arr)) {
    // arr.forEach(async element => {
    //     await element()
    // })
    // why? 为什么forEach 不行?
    // 解：forEach 内部的回调函数，在遍历的过程中，相当于每次都要重新的执行这个函数，也就是说你有多少个元素，就会有多少个 async 回调执行，完全不是我们想要的形式就在一个async 中去同步执行 异步任务
    // TODO: 这种形式就成功延迟了
    for (let index = 0; index < arr.length; index++) {
      await arr[index]();
    }
  }
}

fun();

11. 保留指定小数位

let num = 5.123456;
num.toPrecision(3); // 5.12

12. 将一个二维由的数组，转成对象的键值对

const data = [
  { key: "alan", value: 12 },
  { key: "mike", value: 18 },
];

// 就这句话，换行主要是为了看清楚，可以不换
const result = Object.fromEntries(data.map(({ key, value }) => [key, value]));

console.log(result); // {alan: 12, mike: 18}