阿里-阿里妈妈-实习

← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 本次面试主要考察校招生的基础内容 本轮共 13 道题。答案默认折叠，便于先自行作答。 1. 实现第一个元素不移动后续元素与左边相隔8px（:not(:first-child） 题目要点 CSS选择器与布局。 参考答案 要实现第一个元素不移动，后续元素与左边相隔8px，可以使用CSS中的:not(:first-child)选择器来选择除第一个元素外的所有同级元素，并为其设置左边距。这在布局中非常有用，可以避免对第一个元素应用不必要的样式。以下是一个示例： <div class="container"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> <div class="item">Item 4</div> </div> .container { display: flex; } .item:not(:first-child) { margin-left: 8px; } 在这个示例中，.item:not(:first-child)选择器匹配了所有带有item类的元素，除了第一个元素。然后，我们通过margin-left: 8px为这些元素设置了左边距，使它们与左边的元素相隔8px。第一个元素不会受到影响，因此不会产生左边距，从而实现了题目要求的布局效果。这种技术在创建水平排列的元素时非常有用，例如导航栏或标签页，可以确保第一个元素与容器的边缘对齐，而后续元素之间保持一致的间距。 2. 写一个防抖 题库原题：实现 debounce（防抖）函数 题目要点 触发高频时间后n秒内函数只会执行一次,如果n秒内高频时间再次触发,则重新计算时间。 参考答案 触发高频时间后n秒内函数只会执行一次,如果n秒内高频时间再次触发,则重新计算时间。 const debounce = (fn, time) => { let timeout = null; return function() { clearTimeout(timeout) timeout = setTimeout(() => { fn.apply(this, arguments); }, time); } }; 防抖常应用于用户进行搜索输入节约请求资源，window触发resize事件时进行防抖只触发一次。 3. 讲讲你的项目难点 题目要点 项目经验与问题解决能力。 ...

← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： 本次面试主要考察校招生的基础内容 本轮共 9 道题。答案默认折叠，便于先自行作答。 1. Flex布局中flex-grow与flex-shrink的计算规则？ 题目要点 CSS布局。 参考答案 在Flex布局中，flex-grow和flex-shrink属性用于控制子元素在可用空间内的扩展和收缩行为。它们的计算规则如下： flex-grow： 定义：定义项目的扩展比例，即项目在主轴方向上可占有的额外空间的比例。 计算规则：剩余空间按项目flex-grow值的比例分配。如果所有项目的flex-grow值之和大于1，则按比例分配；如果小于1，则先分配剩余空间。 示例：如果有两个子元素，flex-grow分别为1和2，总剩余空间为300px，则第一个子元素获得100px，第二个获得200px。 flex-shrink： 定义：定义项目的收缩比例，即项目在主轴方向上需要收缩时的比例。 计算规则：当总项目大小超过容器可用空间时，项目按flex-shrink值的比例收缩。收缩的最小尺寸受min-width或min-height限制。 示例：如果有两个子元素，flex-shrink分别为1和2，总超出行空间为100px，则第一个子元素收缩约33.33px，第二个收缩约66.66px。 完整计算步骤： 计算总可用空间：容器主轴长度减去所有项目初始尺寸（flex-basis或未设置时的内容尺寸）。 判断剩余空间： 若剩余空间为正，按flex-grow分配扩展空间。 若剩余空间为负，按flex-shrink分配收缩空间。 计算比例：每个项目的比例为flex-grow或flex-shrink值除以所有项目对应值之和。 分配空间：按比例将剩余空间分配或从项目中扣除。 flex属性：flex是flex-grow、flex-shrink和flex-basis的简写形式。例如，flex: 1 1 0表示flex-grow: 1、flex-shrink: 1、flex-basis: 0。这在等比例分配剩余空间时非常有用。 2. 讲一下js闭包 题库原题：说说你对闭包的理解，以及闭包使用场景 题目要点 什么是闭包 简单理解就是函数中嵌套函数。我们都知道局部变量我们是无法访问的，但是通过闭包可以做到。 // 正常访问 var lan = 'zh'; function hello(){ var name = '前端未来'; } console.log(name)//很明显'undefined' // 换成闭包 function hello(){ var name = '前端未来'; function demo(){ console.log(name)//打印：前端未来 } } 闭包的应用场景 1. 数据封装和隐私 闭包可以用来封装数据和功能，创建具有私有变量和公共接口的模块。 应用 创建具有私有状态的模块或对象。 2. 函数工厂 闭包用于创建返回函数的函数，这些返回的函数可以维持状态。 ...