如何准备面试？

未来几个月内，将迎来一波人才合理流动。

没有面试成功的面试经验却来分享面试，估计也只有我能做这样的事情了哈哈。我现在只是在为了面试而准备，在准备的过程中无意间发现自己还有很多不懂的地方，所以拿出来说一说写一写。题外话，无论你是否有或者在看机会，我们都应该保持两个月一次的被面试，是让我们保持对行情的了解，对知识的进一步学习。更是一次学习交流的机会，让我们不在局限于目前工作

为什么要了解浏览器工作原理？

前端，不管是pc端还是移动端，都是在最终要在浏览器上面运行展示的。所以我们首先应该了解的是浏览器的工作原理，前端借助于浏览时引擎而展示，如果我们连最基础浏览器工作原理都不太明白，那么我们如何进行性能优化？如何提高用户体验？如何将我们的工作做到极致？你可能会告诉我网上有很多性能优化的方案，随便找找复制粘贴就好的，是的完全可以这样，没有任何问题。早期的我就是这样的，那时候的我可能是并没有想再前端这个行业长久发展，只是想混口饭吃，混过面试。但是在实际的工作中，我发现了项目的问题，当你请求一个网页，从请求到页面渲染要等上30s，你就知道项目项目优化的重要性，等等。现在的我想在前端这个行业走的更久，更远，或许已经是一种追求了。所以我想和你说去了解了解浏览器的工作原理吧？我自己不太懂，来不来这么好的文章，我推荐一篇，我自己觉得写的好不错的

zhuanlan.zhihu.com/p/47407398

好好利用开发工具

前面我说到了了解浏览器工作原理，我假设你已经了解了浏览器工作原理了，那么接下来我们就可以有针对性开展进行网页的性能。网上说了那么多可以优化的方案，我们可以一一尝试一下，是的，完全没有任何问题。但是如果你想更加精确准确的了解到底是哪里耗时多，影响了最终的展示？想对症下药的话，我建议你还是好好利用开发工具，开发工具精确无误告诉你哪里需要优化，可以进行如何优化。不一定会比网上好，但是一定不会差。我不会写一篇文章告诉你如何利用开发工具，我写不来那么好的文章，这东西有时效性，我建议你去看官方文档，人家写的比我好多了，管用还是实时更新的

developers.google.com/web/tools/c…

说说我刷的面试题

我是在准备面试，是在准备哟，而不是已经面试了。多么希望自己要不要面试直接入职呀！欢迎有经验的评论指点，好让我顺利面试完，入职公司。哈哈前面说了那么多废话，好好利用开发工具，了解浏览器工作原理，这些可能面试观都不会问你。

伪类

在写样式的时候，或许还用 class ,id，但是在我的工作中我很少用到 id ，用 class 用的多，但是有时候会词穷，不知道要写怎么语义话的名字。这时候我喜欢用伪类，方便。伪类和伪元素是有区别的，不要混淆。

p:first-child => 表示在一组兄弟元素中的第一个元素。

p:nth-child(1) => 这个 CSS 伪类首先找到所有当前元素(p)的子元素底下的第一个

我用这两个用的比较多，所以就直说他了，你想要了解更多，看文档

developer.mozilla.org/zh-CN/docs/…

重绘和回流（重排）

不同的人会给不同的组合，但是实际上却就是一个意思，网上也有很多很不错的答案来解释，我就不一一贴链接了，就说说自己最简单粗暴的理解

重绘：页面属性发生变化（只影响外观，不影响布局），比如颜色改变，不影响布局吧

重排（回流）：页面结构发生变化（会发生很昂贵的代价，影响布局），比如宽度改变要影响布局吧

++之前和++之后的区别

a++ : 先用a的原值，然后a加1；

++a ：先给a加1，然后用a的新值

[] == [] //false，都是对象，长得一样，可是确引用了不同的地址，所以不相等 [] == ![] //true，这个解释就好像有点麻烦了，![]会转化为一个boolean进行比较。所以就相等了，上面都是我自己瞎扯的，可以自行https://www.google.com/ 或者https://www.baidu.com
['1','2','3'].map(parseInt)？？ [1, NaN, NaN] 应该是和 parseInt() 的第二个参数有关系 parseInt 的基数 radix，导致出现超范围的 radix 赋值和不合法的进制解析，才会返回 NaN。
let a = {},b={key:1},c={key:2}; a[b] = 123; a[c] = 456; a[b]?? 答案：a[b] = 456 因为b，c是变量,a[b],a[c]相当于a[object object],所以是引用了同一段地址
多个数组合并之后去重

建议自己先写然后在看我的

利用对象属性的唯一性去重

function uniqueArray(arr,...rest){
        let array = arr.concat(...rest)
        let obj = {}
        let result = []
        array.forEach(item=>{
          obj[item]?'':obj[item]=true && result.push(item)
        })
    return result
      }
  uniqueArray([1,2],[3,4,2],[9,0,2])
复制代码

function uniqueArray(arr,...rest){
        let array = arr.concat(...rest)
        let obj = {}
        return array.reduce((pre,next)=>{
          obj[next]?'':obj[next]=true&&pre.push(next)
          return pre
        },[])
      }
  uniqueArray([1,2],[3,4,2],[9,0,2])
复制代码

数组方法去重

function uniqueArray(arr,...rest){
      let array = arr.concat(...rest)
      let uniqueArray = []
  array.forEach((item,index)=>{
    if(array.indexOf(item)==index){
      uniqueArray.push(item)
    }
  })
  return uniqueArray
    }
uniqueArray([1,2],[3,4,2],[9,0,2])
复制代码

es6 去重

function uniqueArray(arr,...rest){
      let array = arr.concat(...rest)
     let map = new Map()
  array.forEach(item=>{
    if(!map.has(item)){
      map.set(item,item)
    }
  })
  console.log(map.values())
  return [...map.values()]
    }
uniqueArray([1,2],[3,4,2],[9,0,2])
复制代码

这道题很基础，但是我去觉得他涉及到的知识面不少，还可以扩展

扩展，数组对象根据指定的属性去重？确保唯一性？？？这个可以自己思考，利用上面的方法可实现，这个是上面的升级版。贴一个我以前写的链接

juejin.im/post/5bc897…

数组的 reduce

之前没怎么用 reduce ，不知道原来 reduce 可有这么强大，上面尝试之后，去了解了一下 reduce 的文档，贴链接

developer.mozilla.org/zh-CN/docs/…

如果你看链接，就不要看我接下来的废话了

二维数组转化为一维数组

[[2,3],[4,5],[0]].reduce((prev,next)=>{
    return prev.concat(next)
},[])
复制代码

计算数组中每个元素出现的次数

var names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice'];

var countedNames = names.reduce(function (allNames, name) { 
  if (name in allNames) {
    allNames[name]++;
  }
  else {
    allNames[name] = 1;
  }
  return allNames;
}, {});
复制代码

按属性对 object 分类节

var people = [
  { name: 'Alice', age: 21 },
  { name: 'Max', age: 20 },
  { name: 'Jane', age: 20 }
];

function groupBy(objectArray, property) {
  return objectArray.reduce(function (acc, obj) {
    var key = obj[property];
    if (!acc[key]) {
      acc[key] = [];
    }
    acc[key].push(obj);
    return acc;
  }, {});
}

var groupedPeople = groupBy(people, 'age');
复制代码

数组去重

let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
let result = arr.sort().reduce((init, current)=>{
    if(init.length===0 || init[init.length-1]!==current){
        init.push(current);
    }
    return init;
}, []);
复制代码

好了，暂时就先写到这里了，以后在慢慢更。最近在准备面试应该有很多要慢慢写的

我也不例外的在准备，看是否有更好的机会。（打一个小广告，18届毕业生，工作一年，熟悉使用vue，想知道更多找我呀！目前在看是否有合适的机会，如果有，请推荐 github.com/sunseekers 哈哈

为什么要了解浏览器工作原理？

好好利用开发工具

说说我刷的面试题

猜你喜欢