个人前端2019面试指引

时间 2019-12-01

标签个人前端面试指引栏目快乐工作繁體版

原文原文链接

固然也能够看个人 github 的 issues 欢迎 star!css

前言

其实，如今已经总结的够多了，你们能够看看：html

可是看过了仍是很容易就忘了，仍是得本身敲一遍好。就总结一些本身有问题的地方吧前端

本身遇到以及整理的一些点：react

1. this 的指向：

const a = {
  count:1,
  b:{
    count: 2,
    getCount: function(){
      console.log(this.count);
    }
  }
}

const getb = a.b.getCount
console.log(getb())
console.log(a.b.getCount()) // 这里要注意不要被迷惑了 
复制代码

理解的话，首先要明确的是 this 是在函数里面，在函数调用时动态指定的，指向当前函数（方法）的执行栈（上下文）。能够查看理解 JavaScript 中函数调用和 thiswebpack

2. 正则匹配判断

一个字符串只由[](){}这几种构成，要求写一个函数 isMatch(str) 匹配以下格式（1）({[())]} （2）([{({[]})})] ，结果返回 booleangit

分析：要求有两个github

它们是成对出现的
[{(分别都是在 }])的前面后来的代码实现：

function updateStr(str, reg) {
  let isLoop = true;
  let result = str;
  while (isLoop) {
    result = result.replace(reg, (val, str1, str2) => {
      val = val.substring(1, val.length - 1);
      return val;
    });
    if (!reg.test(result)) {
      isLoop = false;
    }
  }
  return result;
};

function isMatch(str) {
  const reg1 = /(\()[\{\}\(\[\]]*(\))/; // 每次匹配一个 (),而后去除
  const reg2 = /(\{)[\(\)\{\[\]]*(\})/;// 每次匹配一个 {},而后去除
  const reg3 = /(\[)[\[\(\)\{\}]*(\])/;// 每次匹配一个 [],而后去除
  const REGS = [reg1, reg2, reg3];
  const result = REGS.reduce((total, reg, index) => {
    return updateStr(total, reg);
  }, str);
  return !result;
}

// 测试
let strArray = ['}([(())]){', '{[{([(())])})', '{{[[{([(())])}))'];
let result = strArray.map(val => {
  return isMatch(val);
});
console.log(result);


<!--固然在 LeetCode 上也有相似的题目，经过栈的特性来解决的-->
// https://leetcode.com/problems/valid-parentheses/submissions/1
function isMatch(str) {
  let map = {
    '(': -1,
    ')': 1,
    '[': -2,
    ']': 2,
    '{': -3,
    '}': 3
  };
  let stack = [];
  for (let i =0; i < str.length; i++){
    if(map[str[i]] < 0){
      stack.push(str[i]);
    }else{
      let last = stack.pop();
      if(map[last] + map[str[i]] !==0) return false;
    }
  } 
  return stack.length <= 0;
}

复制代码

3. 实现一个 LazyMan 的对象

要求以下web

LazyMan('Tony');
// Hi I am Tony

LazyMan('Tony').sleep(10).eat('lunch');
// Hi I am Tony
// 等待了10秒...
// I am eating lunch

LazyMan('Tony').eat('lunch').sleep(10).eat('dinner');
// Hi I am Tony
// I am eating lunch
// 等待了10秒...
// I am eating diner

LazyMan('Tony').eat('lunch').eat('dinner').sleepFirst(5).sleep(10).eat('junk food');
// Hi I am Tony
// 等待了5秒...
// I am eating lunch
// I am eating dinner
// 等待了10秒...
// I am eating junk food
复制代码

关键点：面试

实现一个事件队列，每次 shift() 调用一个
链式调用

答案算法

4. 将一维数组经过 pid 转成多维数组：

要求：

const previous = [{
    name: "1",
    id: 1,
    pid: 0
  },
  {
    name: "2",
    id: 2,
    pid: 1
  },
  {
    name: "3",
    id: 3,
    pid: 2
  }]
  
  const result = [{
    name: "1",
    id: 1,
    pid: 0,
    children:[{
         name: "2",
        id: 2,
        pid: 1
    }]
  },{
    name: "3",
    id: 3,
    pid: 2  
  }
  ]
复制代码

要点：

递归
判断每个 item 是否属于 tree 中元素
找到它的 parent，并把 item 添加到它的 children 中，返回一个新的 tree

其实就是树的不一样表现形式

代码实现能够看这里 codesandbox.io/s/nw5xlozk6…

5. 模拟实现加法器

2个正整数字符串的相加，即 '1'+'19' --> '20',注意考虑超长字符串相加

思路：

超级长，不能用 parseInt，它有最大值的限制 Number.MAX_VALUE

JavaScript 类型系统——Number 数字类型

模拟实现一个十进制的加法器
能够扩展支持任意进制的运算

6. AMD，CMD，CommonJs，ES6 Module：解决原始无模块化的痛点

AMD：requirejs 在推广过程当中对模块定义的规范化产出，提早执行，推崇依赖前置
CMD：seajs 在推广过程当中对模块定义的规范化产出，延迟执行，推崇依赖就近
CommonJs：模块输出的是一个值的 copy，运行时加载，加载的是一个对象（module.exports 属性），该对象只有在脚本运行完才会生成
ES6 Module：模块输出的是一个值的引用，编译时输出接口，ES6 模块不是对象，它对外接口只是一种静态定义，在代码静态解析阶段就会生成。

7. HTTP 缓存有哪几种？

关键： ETag、CacheControl、Expires 参考 HTTP缓存控制小结

8. 一些 webpack -- 按需加载？构建速度？

参考

9. 翻转二叉树

JavaScript 二叉搜索树以及实现翻转二叉树

10. 本身遇到的css梳理

11. js 基础梳理 -- 冴羽大大的blog

12. web 安全

13. 静态资源放置于独立域名之下

启用新的一级域名，每次请求浏览器不会携带cookie。这对于cookie内容比较大，而且流量大的网站会省去很多宽带费用。同时这也解惑了为何不用二三级域名。
动静分离。静态资源与动态内容分离，有利于部署于CDN，减轻web服务器压力
HTTP协议对同一个域名的同时下载线程数有限制。主要是为了优化下载速度，防止同一域名下下载线程数过多，致使下载速度变慢。各个浏览器都会遵照这个规定，可是限制的数目可能不一致。基于这个缘由，可将资源部署于不一样的域名，以达到最大化并发下载。
静态资源独立部署，为全局产品服务。这属于业务划分的范畴了。好比taobao.com和tmll.com都会用到tbcdn.cn上的静态资源，这些资源没必要从属于某个产品。
接第4点缘由，有利于最大化利用客户端缓存。好比访问taobao.com，缓存了tbcdn.cn上的某个js文件，以后再访问tmll.com时，也用到此js文件，没必要再从tbcdn.cn上下载，直接用客户端缓存便可。

同时，就已经减轻了每台服务器的压力，服务器越多，每一个服务器压力就越小

13. react 相关

查看个人博客

总结

平时学习就要多假设一下，为何会这样，若是换成那个（那里）又会怎么样，这二者比较起来有什么不一样！总之要多总结回顾，你会有不同的感觉

还在更新当中，若是有错误，欢迎指正

参考

木易杨说的【半月刊】前端高频面试题及答案汇总
zhuanlan.zhihu.com/p/32911022