蚂蚁支付宝事业线前端一面

面试官打电话说聊一聊，自我介绍完后，悄咪咪的给我邮箱发了一封邮件，叫我做题，好家伙
第一题，合并两个升序链表

第二题

const data = [
  { userId: 8, title: "title1" },

  { userId: 11, title: "other" },

  { userId: 15, title: null },

  { userId: 19, title: "title2" },
];

/* 查找数组中，符合 where 条件的数据，并根据 orderBy 指定的条件进行排序 */

const result = find(data)
  .where({
    title: /\d$/, // 这里意思是过滤出数组中，满足title字段中符合正则 /\d$/ 的项
  })
  .orderBy("userId", "desc"); // 这里的意思是对数组中的项按照 userId 进行倒序排列

console.log(result.value); // 返回 [{ userId: 19, title: 'title2'}, { userId: 8, title: 'title1' }];

// find 函数的类型定义如下

// interface IFindResult {

//  /* 当前结果 */

//  value: Array<{ [key: string]: string | number }>;

//  /* 出现多个字段的条件采用交集，即全满足的筛选 */

//  where(conditions: { [key: string]: RegExp }): IFindResult;

//  /* 支持针对单一字段做升降序 */

//  orderBy(key: string, order: 'desc' | 'asc'): IFindResult;

// }

// type IFind = (arr: Array<{ [key: string]: string | number }>) => IFindResult;

function find(data) {
  return {
    where(condition) {
      this.value = data.filter((item) => {
        for (let key of Object.keys(condition)) {
          if (condition[key].test(item[key])) return item;
        }
      });

      return this;
    },

    orderBy(key, order) {
      if (order === "desc" || order === "asc")
        this.value.sort((a, b) =>
          order === "asc" ? a[key] - b[key] : b[key] - a[key]
        );

      return this;
    },

    value: data,
  };
}

第三题，部门分级关系

// 以下数据结构中，id 代表部门编号，name 是部门名称，parentId 是父部门编号，为 0 代表一级部门，现在要求实现一个 convert 方法，把原始 list 转换成树形结构，parentId 为多少就挂载在该 id 的属性 children 数组下，结构如下：

// 原始 list 如下

let list = [
  { id: 1, name: "部门A", parentId: 0 },
  { id: 2, name: "部门B", parentId: 0 },
  { id: 3, name: "部门C", parentId: 1 },
  { id: 4, name: "部门D", parentId: 1 },
  { id: 5, name: "部门E", parentId: 2 },
  { id: 6, name: "部门F", parentId: 3 },
  { id: 16, name: "部门L", parentId: 3 },
  { id: 7, name: "部门G", parentId: 2 },
  { id: 8, name: "部门H", parentId: 4 },
];

const result = convert(list);
console.log(result);
// 转换后的结果如下

// let result = [
//   {
//     id: 1,
//
//     name: "部门A",
//
//     parentId: 0,
//
//     children: [
//       {
//         id: 3,
//
//         name: "部门C",
//
//         parentId: 1,
//
//         children: [
//           {
//             id: 6,
//
//             name: "部门F",
//
//             parentId: 3,
//           },
//           {
//             id: 16,
//
//             name: "部门L",
//
//             parentId: 3,
//           },
//         ],
//       },
//
//       {
//         id: 4,
//
//         name: "部门D",
//
//         parentId: 1,
//
//         children: [
//           {
//             id: 8,
//
//             name: "部门H",
//
//             parentId: 4,
//           },
//         ],
//       },
//     ],
//   },
// ];

function convert(list, id = 0) {
  let res = [];
  for (let i = 0; i < list.length; i++) {
    if (list[i].parentId === id) {
      res.push(list[i]);
      list[i].children = convert(list, list[i].id);
    }
  }
  return res;
}

第四题，Promise串行执行

// 实现 `chainPromise` 函数
// 请在不使用 `async` / `await` 语法的前提下完成
// 完成promise的串行执行

function getPromise(time) {
  return new Promise((resolve, reject) => {
    setTimeout(Math.random() > 0.5 ? resolve : reject, time, time);
  });
}

function chainPromise(arr) {
  let res = [];
  return new Promise((resolve, reject) => {
    arr
      .reduce((pre, cur) => {
        return getPromise(pre)
          .then((result) => {
            res.push(result);
            return getPromise(cur);
          })
          .catch((err) => {
            res.push(err);
            return getPromise(cur);
          });
      })
      .then((result) => {
        res.push(result);
      })
      .catch((err) => {
        res.push(err);
      })
      .finally(() => {
        resolve(res);
      });
  });
}

let time = [2000, 4000, 3000, 1000];
let res = chainPromise(time);
//等待10s后输出结果
res.then(console.log);

计算机网络OSI七层模型分别是什么，主要作用？
ARP与RARP协议
- ARP：根据IP地址查找MAC地址
- RARP：根据MAC地址查找IP地址
数据库的索引是什么？
- 索引基本上是用来存储列值的数据结构，这使查找这些列值更加快速
数据库的事务是什么？
- 所谓的事务，它是一个操作序列，这些操作要么都执行，要么都不执行
- 具备原子性，一致性啥的
多对多关系如何建表？
- 最常见的做法就是建立一张中间关系表b，关联另外两张表a和c的主键
- 或者用外键？？？
进程与线程的区别？
虚拟内存是什么？
宏任务与微任务以及事件循环
浏览器渲染页面的过程？
script标签，包含async属性的script标签，包含defer属性的script标签对文档渲染有啥影响？
css是否阻塞页面的解析和渲染？
requestAnimationFrame与requestIdleCallback分别是什么？
requestAnimationFrame的执行时机？
- 在浏览器的下一次重排重绘前执行响应回调
requestIdleCallback的执行时机？
- requestIdleCallback利用的是帧的空闲时间执行，如果浏览器任务繁忙，可能回调一直不会执行
什么情况会导致浏览器繁忙？
- 可能是微任务耗时过长，因为微任务后进行dom渲染，导致每一帧的时间片不够（猜了下）
dom渲染，宏任务，微任务的先后顺序
- 先执行微任务，再是dom渲染，最后是宏任务
vuex包括什么，怎么实现状态管理？
vue项目基于的webpack配置？
- vue-loader解析vue文件
- css预处理器或者ts需要单独配置
- 可以通过vue-cli创建配置好的vue项目
tree-shaking是什么，使用需要注意什么？
模块化方案，esmodule、amd、umd、cmd、commonjs分别是什么，说清楚
反问