【人生第一份offer~】北京京东科技 日常实习一面二面（已OC） 21/12/22&23

北京京东科技 日常实习一面 21/12/22

体验极佳的一次面试！面试官大大贼温柔，循循善诱地帮助我把问题捋出来；

另外问题也都对我这个初学者很友好，超级简单哈哈哈

面试完半个小时二面电话就来了，约到了明天上午十一点🧐

聊项目

• 说下你在这个大型外包项目中负责的内容
• 说下地图中的接口是如何用的

后来才知道，面的这个部门其中一个业务就是为政府做智慧城市相关的业务~真的巧！我最近在忙活的外包项目也是这个主题的说！

CSS

对CSS3动画有了解么

无。面试官大大表示这个是加分项 其实实际开发也用不太上

对盒子模型有了解嘛~

这里我还写过3篇文章嘞~（但是面试时候没想起来XD）

【青训营】做面试题般回顾前端基础知识CSS篇 - 2 CSS盒模型那些有趣的知识点 - 掘金 (juejin.cn)

【青训营】做面试题般回顾前端基础知识CSS篇 - 3 标准盒模型中块元素宽度&总宽度的问题 - 掘金 (juejin.cn)

由box-sizing属性引出的对盒模型的思考 - 掘金 (juejin.cn)

CSS3 中的盒模型有以下两种：标准盒子模型、IE 盒子模型

盒模型都是由四个部分组成的，分别是 margin、border、padding 和 content。

另外我提到了——

标准盒模型和 IE 盒模型的区别在于设置 width 和 height 时，所对应的范围不同：

• 标准盒模型的 width 和 height 属性的范围只包含了 content，
• IE 盒模型的 width 和 height 属性的范围包含了 border、padding 和 content。

可以通过修改元素的 box-sizing 属性来改变元素的盒模型：

• box-sizeing: content-box表示标准盒模型（默认值）
• box-sizeing: border-box表示 IE 盒模型（怪异盒模型）

移动端适配要咋做呢？

【1】使用特殊的布局单位（追问：rem em的区别？）

em 和 rem：它们相对于 px 更具灵活性，它们都是相对长度单位，它们之间的区别：em 相对于父元素，rem 相对于根元素。

二者的详细区别：

• em： 文本相对长度单位。相对于当前对象内文本的字体尺寸。如果当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸(默认 16px)。(相对父元素的字体大小倍数)。
• rem： rem 是 CSS3 新增的一个相对单位，相对于根元素（html 元素）的 font-size 的倍数。作用：利用 rem 可以实现简单的响应式布局，可以利用 html 元素中字体的大小与屏幕间的比值来设置 font-size 的值，以此实现当屏幕分辨率变化时让元素也随之变化。

【经典】子盒子相对于父盒子做水平垂直居中？

抛出之前写得一篇文章 我觉得很好理解&很全面了~

【青训营】做面试题般回顾前端基础知识CSS篇 - 4 弹性布局与经典面试题CSS实现垂直居中 - 掘金 (juejin.cn)

刚才聊到了栅式布局 那么flex都有啥属性呢？

flex布局的概念：

flex 布局的基本概念 - CSS（层叠样式表） | MDN (mozilla.org)

总结几个常用方法：

更改flex方向 flex-direction

用flex-wrap实现多行Flex容器

以上两个属性的简写：简写属性 flex-flow

flex-grow - CSS（层叠样式表） | MDN (mozilla.org)

flex-shrink - CSS（层叠样式表） | MDN (mozilla.org)

flex-basis - CSS（层叠样式表） | MDN (mozilla.org)

当然！这些如果不常用 根！本！记！不！住！

所以就有了下面这个小练习👇

推荐一个5.2Kstars的仓库（截至21/10），在线尝试地址戳这里

然而！在我之前都做了一遍的前提下 在面试时候除了最基础的居中的属性，其他flex相关的属性都没答上来🥺这里就很难受了 所以要时常用啊！

刚才提到了高度塌陷的概念（在垂直居中时候提到的）可以说一下是什么情景 具体怎么解决么？

• 子盒子设置浮动，父盒子可能会高度塌陷
• 给父盒子设置一个overflow:hidden; 这样父盒子就是一个BFC了（挖坑。）高度塌陷消除~

刚才提到了BFC的概念（高度塌陷的时候）简单说一下BFC的作用

这个当时没太说清楚 只是举了个自适应双栏布局的例子（自己挖坑自己跳啊！），查阅下资料——

先来看两个相关的概念：

• Box: Box 是 CSS 布局的对象和基本单位，⼀个⻚⾯是由很多个 Box 组成的，这个 Box 就是我们所说的盒模型。
• Formatting context：块级上下⽂格式化，它是⻚⾯中的⼀块渲染区域，并且有⼀套渲染规则，它决定了其⼦元素将如何定位，以及和其他元素的关系和相互作⽤。

块格式化上下文（Block Formatting Context，BFC）是 Web 页面的可视化 CSS 渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

通俗来讲：BFC 是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发 BFC 的条件，则 BFC 中的元素布局不受外部影响。

追问：说几个创建BFC的条件

• 根元素：body；
• 元素设置浮动：float 除 none 以外的值；
• 元素设置绝对定位：position (absolute、fixed)；
• display 值为：inline-block、table-cell、table-caption、flex 等；
• overflow 值为：hidden、auto、scroll；

追问：BFC的作用

• 解决 margin 的重叠问题：由于 BFC 是一个独立的区域，内部的元素和外部的元素互不影响，将两个元素变为两个 BFC，就解决了 margin 重叠的问题。
• 解决高度塌陷的问题：在对子元素设置浮动后，父元素会发生高度塌陷，也就是父元素的高度变为 0。解决这个问题，只需要把父元素变成一个 BFC。常用的办法是给父元素设置overflow:hidden。（这个就是上面提到的内容）
• 创建自适应两栏布局：可以用来创建自适应两栏布局：左边的宽度固定，右边的宽度自适应。

JS

（2）表示迄今为止在日常实习中遇到了两次

（2）说下JS有哪些数据类型？

Undefined、Null、Boolean、Number、String、Object、Symbol、BigInt。

很有趣的问题！聊聊数组都有哪些API 再拓展开来讲讲 用法

这个问题太有趣了！真的是要多（带着思考地）写（优雅的）代码，才能流利地回答啊！

面试官大大当时提醒了我 reduce concat sort这几个方法（居然没想起来！用的太少了啊还是），其他说得都还算全，这里我根据《JS数据结构与算法（第三版）》再捋一遍！

• 数组的遍历 map forEach（问了这两个的区别 答：一个返回改变后的数组 一个只是单纯遍历）
• 数组的连接 concat
• 数组的排序 sort 还提到了sort中函数的内容
• 数组的归并操作 reduce 这个是面试官大大提醒的 讲了下用reduce算数组之和
• 数组的查找 indexOf(某一个数) find(某一个条件) includes(（是否有这个）数)

• 数组的删除splice与切片（节选一段）slice（这个当时居然忘记了！经常用的明明）
• 数组转字符串 toString join('分隔符')
• 数组的翻转 reverse
• 数组的过滤 filter(输出的元素需要满足的条件)
• 数组是否存在某个值some 是否全为某个值every 这个当时也忘了！
• 填充数组 fill

如何进行Object的值遍历？

Object.values() - JavaScript | MDN (mozilla.org)

这个API很有趣！返回一个给定对象自身的所有可枚举属性值的数组，值的顺序与使用for...in循环的顺序相同

JS如何实现继承呢？

【1】通过原型链

通过原型链实现子类对父类的继承

Child.prototype = new Father();

别忘了修正Child类显示原型的constructor

Child.prototype.constructor = Child

这部分之前写过一篇小结，放到这里，能说出来肯定是加分的！

继承模式

• 原