阿里-阿里妈妈-实习 · 第 1 轮 · 一面

Fri, 27 Jun 2025 06:04:12 +0000

← 已是第一轮 · 返回本次面经 · 第 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 轮 · 二面

Fri, 27 Jun 2025 06:04:12 +0000

← 第 1 轮 · 返回本次面经 · 已是最后一轮 →

本轮要点： 本次面试主要考察校招生的基础内容

本轮共 9 道题。答案默认折叠，便于先自行作答。

1. Flex布局中flex-grow与flex-shrink的计算规则？

题目要点

CSS布局。

参考答案

在Flex布局中，flex-grow和flex-shrink属性用于控制子元素在可用空间内的扩展和收缩行为。它们的计算规则如下：

flex-grow：
1. 定义：定义项目的扩展比例，即项目在主轴方向上可占有的额外空间的比例。
2. 计算规则：剩余空间按项目flex-grow值的比例分配。如果所有项目的flex-grow值之和大于1，则按比例分配；如果小于1，则先分配剩余空间。
3. 示例：如果有两个子元素，flex-grow分别为1和2，总剩余空间为300px，则第一个子元素获得100px，第二个获得200px。
flex-shrink：
1. 定义：定义项目的收缩比例，即项目在主轴方向上需要收缩时的比例。
2. 计算规则：当总项目大小超过容器可用空间时，项目按flex-shrink值的比例收缩。收缩的最小尺寸受min-width或min-height限制。
3. 示例：如果有两个子元素，flex-shrink分别为1和2，总超出行空间为100px，则第一个子元素收缩约33.33px，第二个收缩约66.66px。
完整计算步骤：
1. 计算总可用空间：容器主轴长度减去所有项目初始尺寸（flex-basis或未设置时的内容尺寸）。
2. 判断剩余空间：
  1. 若剩余空间为正，按flex-grow分配扩展空间。
  2. 若剩余空间为负，按flex-shrink分配收缩空间。
3. 计算比例：每个项目的比例为flex-grow或flex-shrink值除以所有项目对应值之和。
4. 分配空间：按比例将剩余空间分配或从项目中扣除。
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. 函数工厂

闭包用于创建返回函数的函数，这些返回的函数可以维持状态。

阿里-阿里妈妈-实习 on Last Stand

阿里-阿里妈妈-实习 · 第 1 轮 · 一面

1. 实现第一个元素不移动后续元素与左边相隔8px（:not(:first-child）

题目要点

2. 写一个防抖

题目要点

3. 讲讲你的项目难点

题目要点

阿里-阿里妈妈-实习 · 第 1 轮 · 二面

1. Flex布局中flex-grow与flex-shrink的计算规则？

题目要点

2. 讲一下js闭包

题目要点

什么是闭包

闭包的应用场景

1. 数据封装和隐私

应用

2. 函数工厂