前端面试必备：全方位解析经典笔试题

2023-12-23 07:35:50

破解前端面试中的挑战，把握机遇

在技术瞬息万变的当今时代，前端开发已成为企业数字化转型和用户体验升级的关键角色。为了踏入前端领域的职场大门，求职者需要通过层层面试的考验。本文将深入剖析前端面试中的经典笔试题，助力求职者在竞争激烈的求职市场中脱颖而出，把握机遇。

灵活布局：掌控屏幕空间

问题： 使用 flex 布局实现左侧自适应，右侧定宽的布局效果。

解答：

首先，为父容器设置 flex 布局，指定 flex-direction 为 row。
为左侧子容器设置 flex 属性值为 1，表示可自动调整宽度。
为右侧子容器设置 flex 属性值为 0 和固定宽度，确保其宽度不变。

<div class="container">
  <div class="left-child"></div>
  <div class="right-child"></div>
</div>

.container {
  display: flex;
  flex-direction: row;
}

.left-child {
  flex: 1;
}

.right-child {
  flex: 0;
  width: 200px;
}

数据类型侦探：洞察数据奥秘

问题： 实现一个函数，判断任意数据类型的变量。

解答：

使用 typeof 运算符获取原始数据类型。
利用 switch-case 语句根据原始数据类型判断具体类型。

function isType(data) {
  switch (typeof data) {
    case 'string':
      return 'string';
    case 'number':
      return 'number';
    // 省略其他类型判断
  }
}

二维数组操盘手：纵横掌控数据

问题： 实现二维数组的 getter 和 setter 方法。

解答：

首先定义二维数组 data。
定义 getter 方法，根据行号和列号获取对应值。
定义 setter 方法，根据行号和列号修改对应值。

let data = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];

function getter(row, col) {
  return data[row][col];
}

function setter(row, col, value) {
  data[row][col] = value;
}

数组去重大师：剥离冗余元素

问题： 给定一个数组，其中包含相同值的对象，去除相同对象，仅保留一个。

解答：

将对象转换为 JSON 字符串。
使用 Set 数据结构存储 JSON 字符串。
将 Set 中的元素转换为对象，形成新数组。

let arr = [{name: 'John', age: 20}, {name: 'Mary', age: 25}, {name: 'John', age: 20}, {name: 'Bob', age: 30}];

function uniqueObjects(arr) {
  let set = new Set();
  arr.forEach((obj) => {
    set.add(JSON.stringify(obj));
  });
  let uniqueArr = [];
  set.forEach((str) => {
    uniqueArr.push(JSON.parse(str));
  });
  return uniqueArr;
}

数组对象转树大师：化平铺为层次

问题： 将一维数组对象转换为树形结构。

解答：

将对象转换为数组。
根据对象的 id 和 parentId 构建树形结构。
返回构建好的树形结构。

let arr = [{id: 1, parentId: null}, {id: 2, parentId: 1}, {id: 3, parentId: 2}, {id: 4, parentId: 1}, {id: 5, parentId: 3}];

function arrayToTree(arr) {
  let map = {};
  arr.forEach((obj) => {
    map[obj.id] = obj;
  });
  let tree = [];
  arr.forEach((obj) => {
    if (obj.parentId === null) {
      tree.push(obj);
    } else {
      let parent = map[obj.parentId];
      parent.children = parent.children || [];
      parent.children.push(obj);
    }
  });
  return tree;
}