前端场景面试题汇总：业务实战、代码示例与回答思路

function parseCents(value) {
  if (typeof value !== 'string' || !/^\d+(\.\d{1,2})?$/.test(value)) {
    throw new TypeError('金额必须是最多两位小数的非负字符串');
  }
  const [whole, fraction = ''] = value.split('.');
  return BigInt(whole) * 100n + BigInt(fraction.padEnd(2, '0'));
}

function formatCents(value) {
  const sign = value < 0n ? '-' : '';
  const cents = value < 0n ? -value : value;
  return `${sign}${cents / 100n}.${String(cents % 100n).padStart(2, '0')}`;
}

const total = parseCents('0.10') + parseCents('0.20');
console.assert(total === 30n);
console.assert(formatCents(total) === '0.30');
console.assert(formatCents(parseCents('19.99') * 3n) === '59.97');

const broken = JSON.parse('{"orderId":9007199254740993}');
console.assert(String(broken.orderId) === '9007199254740992');
console.assert(!Number.isSafeInteger(broken.orderId));

const response = '{"orderId":"9007199254740993"}';
const order = JSON.parse(response);
if (typeof order.orderId !== 'string') throw new TypeError('订单号协议错误');

const cached = JSON.parse(JSON.stringify(order));
const search = new URLSearchParams({ orderId: cached.orderId });
console.assert(cached.orderId === '9007199254740993');
console.assert(search.get('orderId') === order.orderId);
console.assert(BigInt(order.orderId) === 9007199254740993n);

function parseBookingDate(value) {
  if (typeof value !== 'string') throw new TypeError('日期必须是字符串');
  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
  if (!match) throw new Error('使用 YYYY-MM-DD');
  const [year, month, day] = match.slice(1).map(Number);
  const leap = year % 4 === 0 && (year % 100 !== 0 || year % 400 === 0);
  const days = [31, leap ? 29 : 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
  if (year < 1 || month < 1 || month > 12 || day < 1 || day > days[month - 1]) {
    throw new RangeError('日期不存在');
  }
  return value;
}
console.assert(parseBookingDate('2024-02-29') === '2024-02-29');
let rejected = false;
try { parseBookingDate('2026-02-29'); } catch { rejected = true; }
console.assert(rejected);

const segments = new Intl.Segmenter('zh-CN', { granularity: 'grapheme' });
function preview(text, budget) {
  if (!Number.isInteger(budget) || budget < 0) throw new RangeError('预算无效');
  if (budget === 0) return '';
  const parts = [];
  for (const { segment } of segments.segment(text)) {
    parts.push(segment);
    if (parts.length > budget) return parts.slice(0, budget - 1).join('') + '…';
  }
  return parts.join('');
}
console.assert(preview('前端🙂很好', 3) === '前端…');
console.assert(preview('前端🙂', 3) === '前端🙂');
console.assert(preview('👨‍👩‍👧‍👦好吗', 2) === '👨‍👩‍👧‍👦…');
console.assert(preview('文本', 0) === '');

const recommended = [
  { id: 'a', price: 30 }, { id: 'b', price: 10 }, { id: 'c', price: 20 }
];
function viewProducts(products, mode) {
  if (mode === 'recommended') return [...products];
  const direction = mode === 'price-desc' ? -1 : 1;
  return [...products].sort((a, b) => direction * (a.price - b.price));
}
const priced = viewProducts(recommended, 'price-asc');
console.assert(priced.map(x => x.id).join(',') === 'b,c,a');
console.assert(recommended.map(x => x.id).join(',') === 'a,b,c');
console.assert(viewProducts(recommended, 'recommended')[0].id === 'a');

function comparePrice(a, b) {
  if (!Number.isFinite(a.price) || !Number.isFinite(b.price)) {
    throw new TypeError('价格尚未规范化');
  }
  if (a.price !== b.price) return a.price < b.price ? -1 : 1;
  return a.id < b.id ? -1 : a.id > b.id ? 1 : 0;
}
const a = { id: 'a', price: 20 };
const b = { id: 'b', price: 10 };
const c = { id: 'c', price: 20 };
console.assert(comparePrice(a, b) === 1);
console.assert(comparePrice(b, a) === -1);
console.assert(comparePrice(a, a) === 0);
console.assert([c, a, b].sort(comparePrice).map(x => x.id).join(',') === 'b,a,c');

const defaults = { theme: { color: 'blue' }, links: [{ title: '首页', href: '/' }] };
function createTenant(base) {
  return { theme: { ...base.theme }, links: base.links.map(link => ({ ...link })) };
}
const tenantA = createTenant(defaults);
const tenantB = createTenant(defaults);
tenantA.theme.color = 'red';
tenantA.links[0].title = '甲首页';
console.assert(defaults.theme.color === 'blue');
console.assert(tenantB.theme.color === 'blue');
console.assert(defaults.links[0].title === '首页');
console.assert(tenantA.theme !== tenantB.theme);

function mergeContacts(records) {
  const byId = new Map();
  for (const record of records) {
    const previous = byId.get(record.id);
    if (!previous || record.version > previous.version) {
      byId.set(record.id, { ...record });
    }
  }
  return [...byId.values()];
}
const result = mergeContacts([
  { id:'a', version:1, name:'甲旧' }, { id:'b', version:1, name:'乙' },
  { id:'a', version:3, name:'甲新' }, { id:'a', version:2, name:'迟到旧值' }
]);
console.assert(result.map(x=>x.id).join() === 'a,b');
console.assert(result[0].name === '甲新');