面经复盘2：百度前端暑期实习 2022-04-10

百度2022春暑期实习，2022-04-10，前端，下午场

需要加强理解：

• CSS：position优先级、垂直水平居中
• 手写：递归回溯相关leetcode（全排列、二叉树）
• React：高阶组件、自定义Hook、Context实现插槽

一面

CSS

垂直居中怎么写 *

参考：https://www.cnblogs.com/qwguo/p/13047176.html

transform

利用transform里头的translateY（改变垂直的位移，如果使用百分比为单位，则是以元素本身的长宽为基准），搭配元素本身的top属性，就可以做出垂直居中的效果，比较需要注意的地方是，子元素必须要加上position:relative，不然就会没有效果喔。

.use-transform{
    width:200px;
    height:200px;
    border:1px solid #000;
}
.use-transform div{
    position: relative;			//!!!
    width:100px;
    height:50px;
    top:50%;					//!!!
    transform:translateY(-50%); //!!!
    background:#095;
}

绝对定位

将上下左右的数值都设为0，再搭配一个margin:auto，就可以办到垂直居中，不过要特别注意的是，设定绝对定位的子元素，其父元素的position必须要指定为relative喔（子绝父相）！而且绝对定位的元素是会互相覆盖的，所以如果内容元素较多，可能就会有些问题。

.use-absolute{
    position: relative;		//!!!
    width:200px;
    height:150px;
    border:1px solid #000;
}
.use-absolute div{
    position: absolute;		//!!!
    width:100px;
    height:50px;
    top:0;					//!!!
    right:0;
    bottom:0;
    left:0;
    margin:auto;			//!!!
    background:#f60;
}

flex

• 使用align-items或align-content的属性，轻轻松松就可以做到垂直居中的效果。

  .use-flexbox{
      display:flex;			//!!!
      align-items:center;		//垂直居中
      justify-content:center;	//水平居中
      width:200px;
      height:150px;
      border:1px solid #000;
  }
  .use-flexbox div{
      width:100px;
      height:50px;
      background:#099;
  }

flex: 1代表什么，默认值是什么 *

• https://zhuanlan.zhihu.com/p/136223806
• 代表三个属性：
  • flex-grow：定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
  • flex-shrink：定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
  • flex-basis：定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
• flex: 1 === flex 1 1 0
• flex默认值是 0 1 auto

padding百分比是基于盒子的width还是height *

• width

• padding的百分比是相对于父元素宽度，

  • 如果父元素有宽度，相对于父元素宽度，
  • 如果没有，找其父辈元素的宽度，均没设宽度时，相对于屏幕的宽度。

position，display: none，float优先级 *

• display: none > position: absolute/fixed > float: 非none
• 

less和sass的区别

• https://www.jianshu.com/p/e3f1fcbbccc3
• 最主要的是编译环境？
  • less：JS，客户端处理，npm
  • sass：ruby，服务器处理

JS

数组用什么方法

• push pop shift unshift forEach map
• shift unshift 干什么的

get和post区别

• 都是明文传输啊都很危险
• 为什么HTTPS安全

跨域失败的请求被谁拦截？*

https://cloud.tencent.com/developer/article/1745763

被浏览器拦截，拦截的是响应不是请求

事件循环

Event Loop

React

说下用过的钩子

useEffect, useState, useRef, useMemo…

说输出

function、var声明提升

(function () {
  show(); //5
  var show = function () {
    console.log(4);
  };
  show(); //4
  function show() {
    console.log(5);
  }
  show(); //4
})();

// 顺序：
// function show(){...} 函数声明优先
// var show
// show = function(){...}

setTimeout，promise

promise微任务插队

手写

一段文字渲染到屏幕，改颜色 *

const result = {
  content: "sdhkjahsdhakhdjksahjs",
  offset: [
    {
      offset: [3, 4],
      color: "red"
    },
    {
      offset: [7, 10],
      color: "yello"
    },
    {
      offset: [12, 14],
      color: "blue"
    }
  ]
};

把content内容按照下标和颜色渲染

思路：先按offset排序，然后遍历，组装成有颜色的span，替换原来的元素，然后拼接成模板字符串什么的加入html

const app = document.getElementById("app");

const result = {
  content: "my name is Kitty Hello Hell no, Bye!",
  offsets: [
    {
      offset: [11, 16],
      color: "blue"
    },
    {
      offset: [3, 7],
      color: "red"
    },
    {
      offset: [17, 22],
      color: "purple"
    },
    {
      offset: [8, 10],
      color: "green"
    }
  ]
};

function showResult(obj) {
  let getSpan = (text, color) => {
    const span = document.createElement("span");
    span.innerHTML = text;
    if (color) span.style.color = color;
    return span;
  };
  let offsets = obj.offsets;
  let renderArr = [];
  offsets.sort((a, b) => a.offset[0] - b.offset[0]);
  // console.log(offsets);
  let preIdx = 0;
  let text = "";
  for (let item of offsets) {
    if (item.offset[0] > preIdx) {
      text = obj.content.slice(preIdx, item.offset[0]);
      renderArr.push(getSpan(text));
    }
    text = obj.content.slice(item.offset[0], item.offset[1]);
    renderArr.push(getSpan(text, item.color));
    preIdx = item.offset[1];

    // console.log(renderArr);
  }
  text = obj.content.slice(preIdx);

  renderArr.push(getSpan(text));
  for (let item of renderArr) {
    app.appendChild(item);
  }
}

showResult(result);

对称二叉树

https://github.com/luryZhu/leetcode-js/issues/16

二面 *

自我介绍

一边手写一边回答问题，全寄

全排列 *

https://github.com/luryZhu/leetcode-js/issues/30

const numbers = [1, 2, 3];

function permute(numbers) {
  const res = [];
  const used = [];
  const len = numbers.length;
  let dfs = (pre) => {
    if (pre.length === len) {
      res.push([...pre]);
      return;
    }
    for (let i = 0; i < len; i++) {
      if (used[i]) continue;
      used[i] = true;
      dfs([...pre, numbers[i]]);
      used[i] = false;
    }
  };
  dfs([]);
  return res;
}

console.log(permute(numbers));

解析URL *

url: https://interview.nowcoder.com/interview/confirm?code=Cq1y2tOP&roundId=3819618 *

不停split

function urlQuery(url) {
  let resObj = {};
  let queries = url.split("?")[1].split("&");
  queries.forEach((item) => {
    let [key, value] = item.split("=");
    resObj[key] = value;
  });
  return resObj;
}

let url =
  "url: https://interview.nowcoder.com/interview/confirm?code=Cq1y2tOP&roundId=3819618";
console.log(urlQuery(url));

reduce拆分递增数组 *

[1,2,3,5,7,9]=>[[1,2,3],[5],[7],[9] *

reudce：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce

function reduceSplit(arr) {
  return arr.reduce((pre, cur) => {
    if (pre.length === 0) {
      return [[cur]];
    }
    console.log("pre", pre);
    let temp = pre.pop();
    if (cur - temp[temp.length - 1] === 1) {
      return [...pre, [...temp, cur]];
    } else {
      return [...pre, [...temp], [cur]];
    }
  }, []);
}

console.log(reduceSplit([1, 2, 3, 5, 7, 10]));

useCountDown *

说一下高阶组件：

• 把组件转换为另一个组件：https://react.docschina.org/docs/higher-order-components.html
• Memo
• useMemo，useCallback使用场景
• 每个组件都要用Memo包吗？不用，渲染开销大的才包，因为缓存也要成本

自定义Hook，实现读秒倒数，例如输入60，每秒-1，最终输出0 *

• 自定义钩子返回什么？什么情况下返回DOM？ *
  • https://blog.csdn.net/qq_34895059/article/details/118913677
  • 一般返回对象、数组之类的
  • 返回DOM节点的情况可能是？组件？判断是否到底，到底返回一个到底了的元素

import "./styles.css";
import { useEffect, useState } from "react";

const useCountDown = (prev) => {
  const [count, setCount] = useState(prev);
  useEffect(() => {
    console.log("countdown!");
    setTimeout(() => {
      if (count > 0) setCount(count - 1);
    }, 1000);
  }, [count]);

  return [count];
};

export default function App() {
  const [count] = useCountDown(10);
  return (
    <div className="App">
      <h1>count</h1>
      <h2>{count}</h2>
    </div>
  );
}

vue插槽 *

说一下Context

• 祖孙、兄弟传值

react怎么实现vue的插槽？

• props.children? 不行，插槽跟顺序相关blabla
• Context实现：https://segmentfault.com/a/1190000019797724

两数之和

leetcode 1：https://luryzhu.github.io/2021/07/21/leetcode/leetcode1/

function twoSum(numbers, target) {
  numbers.sort();
  let map = new Map();
  for (let n of numbers) {
    if (map.has(n)) {
      return [map.get(n), n];
    } else {
      map.set(target - n, n);
    }
  }
  return [];
}

let arr = [3, 4, 5, 6, 8];
console.log(twoSum(arr, 8));

三面

自我介绍

怎么学的前端

• 怎么产生学前端的兴趣

介绍一个最能说的项目

大学里学过什么语言

前端与后端语言、技术栈的区别

• 说了点配环境简单，所见即所得什么的

都是个人项目，有什么团队经验？

• 说了社团经历

反问

• 招100个人怎么安排实习：说是百度联合招聘，会发配到不同部门