Skip to Content
Nextra 4.0 is released 🎉
企业真题xxx物流-前端工程师

xxx物流-前端工程师

1.以下vue代码实现了什么效果, :key起什么作用

<ul>
  <li v-for="item in items" :key="item.id">...</li>
</ul>

此代码实现了 列表渲染 效果，将 items 数组中的每一项渲染为一个列表项。

:key 的作用：

  1. 帮助 Vue 识别哪些元素已更改、已添加或已被删除

    • 通过唯一的 key 值，Vue 可以准确追踪每个元素的变化

  2. 保持组件状态

    • 如果列表项是有状态的组件，使用 key 确保状态与对应数据绑定
// ❌ 不推荐：使用 index 作为 key
<li v-for="(item, index) in items" :key="index">{{ item.name }}</li>
 
// ✅ 推荐：使用唯一 ID 作为 key
<li v-for="item in items" :key="item.id">{{ item.name }}</li>

key 的重要性：

当列表顺序改变或删除项时，使用 index 作为 key 会导致组件状态错乱。使用唯一 ID 可以避免这个问题。

2.box的最终边距是多少?

<style>
  .c1 {
    padding: 10px;
  }
  .c2 {
    padding: 20px;
  }
</style>
<div class="c1">
  <div class="c2">box</div>
</div>

box 的最终边距是 20px（padding）

解释：

padding 是内边距，作用于元素自身，不会叠加或继承。

  • .c1 的 padding: 10px 作用于 .c1 元素本身
  • .c2 的 padding: 20px 作用于 .c2 元素本身（即包含文本 “box” 的容器）
  • 文本 “box” 距离 .c2 的四个边界都是 20px

注意： margin 会合并，但 padding 不会。

3.微信小程序onShow和onLoad有什么区别?

特性onLoadonShow
触发时机页面加载时，只触发一次页面显示时，每次切换到此页面都触发
执行次数1次多次
使用场景初始化数据、获取页面参数刷新数据、重新加载信息
调用顺序先执行后执行
参数接收 options（路由参数）无参数

详细说明：

Page({
  onLoad(options) {
    // 页面首次加载时执行，接收路由参数
    // 获取初始数据，仅执行一次
    const { id } = options;
    this.getList();
  },
  
  onShow() {
    // 页面每次显示时执行
    // 用于刷新数据（用户可能在其他页面修改了数据）
    this.refreshData();
  }
});

4.使用微信官方API批量为多个key设置缓存, 应使用哪个API

答案：wx.setStorageSync() 或 wx.setStorage()（逐个设置）

微信小程序没有专门的”批量设置”API，需要逐个设置。

API特性推荐度
wx.setStorageSync(key, data)同步设置，逐个调用⭐⭐
wx.setStorage()异步设置，逐个调用⭐⭐⭐

推荐做法：使用 Promise.all 批量异步设置

const dataMap = {
  'user': { id: 1, name: 'John' },
  'token': 'abc123',
  'theme': 'dark'
};
 
const promises = Object.entries(dataMap).map(([key, value]) => {
  return new Promise((resolve, reject) => {
    wx.setStorage({
      key,
      data: value,
      success: resolve,
      fail: reject
    });
  });
});
 
Promise.all(promises).then(() => {
  console.log('所有缓存设置成功');
});

使用 async/await 的现代做法：

async function setMultipleStorage(dataMap) {
  for (const [key, value] of Object.entries(dataMap)) {
    await new Promise((resolve, reject) => {
      wx.setStorage({ key, data: value, success: resolve, fail: reject });
    });
  }
  console.log('所有缓存设置成功');
}

5.检查以下小程序代码片段, 是否存在bug或者优化空间? 请直接在上面修改

// ❌ 原始代码（存在多个 Bug）
var that = this;  // ❌ ES5 做法
var obj = JSON.parse(JSON.stringify(wx.getEnterOptionsSync().query));  // ❌ 不必要的深拷贝
var Type = obj.type;
if (Type = 1) {  // ❌ BUG1：赋值 = 而非比较 ===
  wx.setStorageSync('type', Type);
  var haida_OrderNo = obj.hardaOrderNo;
  if (haida_OrderNo != '' && hardaOrderNo != undefined && haida_OrderNo != null) {  // ❌ BUG2：hardaOrderNo 未定义
    that.queryDetail(haida_OrderNo);
  } else {
    return;
  }
}

✅ 修正代码：

const { type, hardaOrderNo } = wx.getEnterOptionsSync().query;
 
if (type === 1 && hardaOrderNo?.trim()) {
  wx.setStorageSync('type', type);
  this.queryDetail(hardaOrderNo);
}

Bug 详解：

Bug原因修复
Type = 1赋值而非比较改为 type === 1
hardaOrderNo != undefined变量名不一致，未定义统一为 hardaOrderNo
var 关键字有变量提升问题改为 const
深拷贝 JSON.parse(JSON.stringify(...))不必要的性能消耗直接使用 query 对象
that = thisES5 遗留做法使用箭头函数或直接 this
haida_OrderNo != ''空格会通过检查使用 ?.trim() 安全检查

6.有三个数组存储水果数据, 一个只装苹果, 一个只装橙子, 一个既有苹果又有橙子。这三个数组贴的标签依次为: 苹果、橙子、苹果和橙子、已知三个标签都标错了, 你只能从一个数组里拿出一件水果来看, 然后确定每个数组正确的标签是什么。请设计Js程序解决该问题。(提示: 从哪个数组里拿水果非常关键)

解题思路：

关键洞察：由于所有标签都标错了，标签为”苹果和橙子”的数组一定不是混合装的。

因此，应该从标签为”苹果和橙子”的数组拿一个水果：

  • 拿到苹果 → 该数组是纯苹果
  • 拿到橙子 → 该数组是纯橙子

Js 实现：

function solveFruitPuzzle() {
  // 初始化三个数组
  const arrays = {
    '苹果': ['苹果', '苹果', '苹果'],
    '橙子': ['橙子', '橙子', '橙子'],
    '苹果和橙子': ['苹果', '橙子', '苹果']  // 混合的
  };
  
  const wrongLabels = ['苹果', '橙子', '苹果和橙子'];
  
  // 关键：从标签为"苹果和橙子"的数组拿一个水果
  const sample = arrays[wrongLabels[2]][0];
  
  console.log(`从 "苹果和橙子" 标签的数组拿到: ${sample}`);
  
  // 根据拿到的水果确定标签
  const correctLabels = {};
  
  if (sample === '苹果') {
    // 标签为"苹果和橙子"的实际是纯苹果
    correctLabels['苹果和橙子'] = '苹果';
    correctLabels['橙子'] = '苹果和橙子';
    correctLabels['苹果'] = '橙子';
  } else {
    // 标签为"苹果和橙子"的实际是纯橙子
    correctLabels['苹果和橙子'] = '橙子';
    correctLabels['苹果'] = '苹果和橙子';
    correctLabels['橙子'] = '苹果';
  }
  
  console.log('\\n正确的标签对应：');
  wrongLabels.forEach(wrongLabel => {
    console.log(`错误标签 "${wrongLabel}" → 正确标签 "${correctLabels[wrongLabel]}"`);
  });
  
  return correctLabels;
}
 
solveFruitPuzzle();

输出结果（拿到苹果的情况）：

从 "苹果和橙子" 标签的数组拿到: 苹果

正确的标签对应：
错误标签 "苹果" → 正确标签 "橙子"
错误标签 "橙子" → 正确标签 "苹果和橙子"
错误标签 "苹果和橙子" → 正确标签 "苹果"

逻辑表：

拿到水果该数组实际类型原标签”苹果”应改为原标签”橙子”应改为原标签”苹果和橙子”应改为
苹果纯苹果橙子苹果和橙子苹果
橙子纯橙子苹果和橙子苹果橙子
Last updated on
xxx网络-前端工程师xxx云-前端工程师