知乎面试

记录一下我人生的第一次前端面试吧，知乎前端日常实习 3-7下午三点到四点

CSS部分

常用的选择器有哪些？(我是傻逼，太紧张了乱说一通)

常用的选择器包括标签选择器、类选择器、ID选择器、后代选择器、子元素选择器、相邻兄弟选择器、通用选择器和属性选择器等

权重

CSS的权重是指在样式冲突时，某一条样式被应用的优先级。权重值的计算方式是根据选择器的类型和数量来确定的。选择器的权重值从高到低为：!important > 行内样式 > ID选择器 > 类选择器、属性选择器和伪类选择器 > 标签选择器和伪元素选择器。具体来说，ID选择器的权重值为100，类选择器、属性选择器和伪类选择器的权重值为10，标签选择器和伪元素选择器的权重值为1。在样式冲突时，权重值高的样式会覆盖权重值低的样式。

比如我想隐藏一个元素应该怎么办呢？这里我回答了visibility和display，还自作聪明的说了z-index，自己给自己挖了坑

使用display属性：设置元素的display属性为none，这样元素在页面上不会占用任何空间，同时也不会对其他元素产生影响。

使用visibility属性：设置元素的visibility属性为hidden，这样元素在页面上不可见，但仍然占用空间。

使用opacity属性：设置元素的opacity属性为0，这样元素在页面上不可见，但仍然占用空间。

使用position属性：将元素的position属性设置为absolute或fixed，然后将元素移动到屏幕外或者使其超出容器的范围之外，这样元素在页面上不可见，但仍然占用空间。

使用z-index属性：将元素的z-index属性设置为负值，这样元素在页面上不可见，但仍然占用空间。

使用clip属性：将元素的clip属性设置为一个矩形区域，这样元素只会显示矩形区域内的部分，其余部分会被裁剪掉。

接着上面的继续问，比如我想要一个元素，既不会被移除，但又要被隐藏(这里我回答的是visibility，但面试官不满意，让我想想其他的方法) 最后说的方法是将其移除视窗外，或者直接缩小到不可见(这个方法确实出乎我的意料)

使用position属性：将元素的position属性设置为absolute或fixed，然后将元素移动到屏幕外或者使其超出容器的范围之外，这样元素在页面上不可见，但仍然占用空间。

css当中如果出现了两个一样的类定义，你如何避免冲突(有点太紧张了，就说的是scoped进行样式隔离，然后又按照自己的记忆随便回答了个外部引入的方式，结果把面试官弄笑了，唉)

优先级：CSS中每个选择器都有一个优先级，可以通过优先级来确定哪个样式定义将被应用。如果两个类定义中的样式相冲突，可以通过调整优先级来解决冲突。

父元素选择器：可以使用父元素选择器来限定样式的范围，从而避免冲突。比如，如果两个类定义中的样式都应用到某个父元素的不同子元素上，可以使用父元素选择器来限定样式的范围，从而避免冲突。

命名空间：可以使用命名空间来区分不同模块或组件的样式定义，从而避免冲突。比如，可以为不同模块或组件的类定义添加不同的命名空间前缀，从而将它们区分开来。

scoped样式：可以使用scoped样式来将样式限定在特定的组件或模块中，从而避免与其他组件或模块的样式冲突。scoped样式是一种Vue框架提供的特殊样式，可以通过在style标签中添加scoped属性来实现。

后面的有点记不清楚了

JavaScript部分

问我基本数据类型和引用数据类型(这里大意了，说的很快，可能没说全面。。。)

基本数据类型：Undefined null Boolean number string

引用数据类型：object array function

问我es6里的新引入的东西，这里面试官想让我说map forEach，我说了箭头函数那些，他就鼓励我继续说下去，结果大脑当机了没想到这些
问我map和forEach的区别，我又乱回答了一通，js基础真的太差了我，唉

map()和forEach()都是JavaScript数组对象的方法，用于遍历数组。它们的区别在于返回值和使用方式。

forEach()方法会对数组的每个元素执行一次回调函数，没有返回值，仅仅是遍历数组。
arr = [1, 2, 3, 4];
arr.forEach((num) => {
  console.log(num * 2);
});
// 输出2 4 6 8
map()方法会对数组的每个元素执行一次回调函数，并将回调函数的返回值组成一个新的数组返回，不会修改原数组。
arr = [1, 2, 3, 4];
const newArr = arr.map((num) => {
  return num * 2;
});
console.log(newArr); // 输出[2, 4, 6, 8]
因此，如果我们想对数组进行遍历并执行一些操作，可以使用forEach()方法；如果我们需要在遍历数组的同时生成一个新的数组，可以使用map()方法。

记不清楚了后面，反正回答的有点差

Vue部分

面试官本身是react的，不是很清楚vue，就让我介绍vue，我就说了Vue的一些特点和react的区别之类的
然后问我Vue双向绑定之类的，我就又讲了一些底层的东西
问我接触过react没，我回答没😢

项目部分

我这次能拿到这个面试完全看的是组件库的项目，面试官似乎对我组件库的项目很感兴趣

就说为什么我的button按钮那里不进行一个直接的映射，而是还需要进行调用颜色，我说这部分实现遇见了bug
项目的组件还是太少了
用过git吗？给我介绍一下，我就开始介绍了，又给自己挖了坑，提到了git merge，然后问我如何切换分支，我说不会，只能硬着头皮说自己项目没分支，面试官看上去很惊讶😢

手撕js部分

没有我背的八股js，直接哭死

实现了将一个由键值对对象组成的数组转换成一个键为对象中key属性值、值为value属性值的对象

function change(arr) {
    return arr.reduce((pre, { key, value }) => {
        pre[key] = value;
        return pre
    }, {})
}

let a = change([{ key: 'a', value: '1' }, { key: 'b', value: '2' }])
console.log(a)

我直接不会，然后面试官教我怎么实现

反问

我第一次面试，所以我感觉很烂，您觉得怎么样呢，还有后续吗？

我感觉还行，但你的js部分可能还不是很好🥹😭感觉很阳光开朗

知乎的技术栈是什么呢？

大部分是react，有一些是Vue

请问你们的组件是直接用现成的还是自己弄呢？

b端的话会自己弄，c端需要很多自己定义样式的地方，大都手搓

好的，没有了，谢谢您

好的

总结

自己太紧张了，很多地方发挥的很失败，面试没准备好，在面试的时候我才在搭建环境，自己的js基础太差了，git命令也很差，需要恶补一下，知乎的寄了，接下来加油吧！

知乎前端日常实习面试