Yuka 3 面 & Makuhara 3 面 & Shangtang 1 面 & WXG 1 面

1. 请尽可能详细地说明，微信小程序或H5开发中需要注意的事项。你的回答中不要写出示例代码。

在微信小程序和H5开发中，有许多需要注意的事项，以下是一些关键点：

微信小程序开发注意事项

1. 遵守微信平台规则：

   • 确保小程序内容和功能符合微信的规范和政策。
   • 定期检查微信官方文档，了解最新的规则变化。

2. 用户体验优化：

   • 设计简洁直观的用户界面。
   • 优化页面加载速度，减少用户等待时间。
   • 提供清晰的导航和反馈机制。

3. 性能优化：

   • 合理使用缓存，减少不必要的网络请求。
   • 避免内存泄漏，及时释放不再使用的资源。
   • 使用分包加载策略，加快小程序启动速度。

4. 安全性考虑：

   • 对用户输入进行严格验证和过滤，防止XSS攻击。
   • 使用HTTPS协议传输数据，保障数据安全。
   • 保护用户隐私，不泄露敏感信息。

5. 兼容性问题：

   • 测试不同设备和微信版本的兼容性。
   • 注意适配屏幕尺寸和分辨率。

6. 支付与交易安全：

   • 集成微信支付时，遵循相关安全规范。
   • 确保交易流程的安全性和可追溯性。

7. 更新与维护：

   • 定期更新小程序，修复已知bug和安全漏洞。
   • 监控用户反馈，及时响应和处理问题。

8. 推广与合规：

   • 制定合理的推广策略，遵守广告法等相关法律法规。
   • 不得进行虚假宣传或不正当竞争。

H5开发注意事项

1. 响应式设计：

   • 设计应适应不同屏幕尺寸和设备类型。
   • 使用媒体查询和弹性布局来实现响应式效果。

2. 性能优化：

   • 压缩图片和代码，减少页面体积。
   • 利用浏览器缓存机制，提高重复访问速度。
   • 避免阻塞渲染的资源加载。

3. 跨浏览器兼容性：

   • 测试并确保在主流浏览器中的表现一致。
   • 处理各浏览器的特性差异和bug。

4. SEO友好性：

   • 合理设置网页标题、描述和关键词。
   • 使用语义化的HTML标签，提升可读性。
   • 构建良好的网站结构和内部链接。

5. 用户体验关注：

   • 提供流畅的交互体验和快速的反馈响应。
   • 设计易于理解和操作的界面元素。

6. 安全性防护：

   • 加强表单验证，防范恶意提交。
   • 实施CSRF保护措施，确保数据安全。
   • 定期检查和更新依赖库以修补安全漏洞。

7. 移动端优化：

   • 考虑触控操作，优化触摸目标的大小和间距。
   • 减少移动端的页面加载时间。

8. 持续迭代与维护：

   • 根据用户反馈和市场变化不断优化产品。
   • 跟踪技术发展，及时采纳新的最佳实践。

总之，在微信小程序和H5开发过程中，开发者需要综合考虑用户体验、性能、安全性和合规性等多个方面，以确保产品的稳定运行和良好口碑。

2. 请尽可能详细地说明，作为一名前端开发工程师，交互和技术哪个更重要？可以结合toB和toC分别说明。你的回答中不要写出示例代码。

作为一名前端开发工程师，在评估交互和技术的重要性时，需要认识到这两者是相辅相成的，并且其相对重要性会根据业务场景（如ToB或ToC）的不同而有所变化。以下是对这一问题的详细分析：

通用观点

交互设计的重要性：

• 交互设计关注用户如何与产品进行互动，直接影响用户体验。
• 良好的交互设计能够引导用户高效完成任务，减少错误操作，提升满意度和忠诚度。
• 在产品同质化严重的市场中，出色的交互设计可能成为产品的核心竞争力。

技术实现的重要性：

• 技术是实现交互设计的基石，决定了产品的功能边界和性能表现。
• 先进的技术可以支撑更复杂的业务逻辑和更高的用户体验标准。
• 技术的稳定性和可扩展性对于长期维护和迭代至关重要。

ToB（面向企业）场景

交互设计的侧重点：

• 在ToB场景中，交互设计需要注重业务流程的高效性和易用性。
• 界面应直观展示数据信息和操作步骤，便于企业用户快速上手并提升工作效率。
• 考虑到企业用户的多样性和专业性，交互设计需具备一定的灵活性和可定制性。

技术实现的侧重点：

• ToB应用往往涉及大量数据处理和复杂的业务逻辑，因此技术的稳定性和性能尤为关键。
• 需要确保数据的安全传输和存储，满足企业级应用的高标准要求。
• 技术架构应具备良好的扩展性，以适应企业不断变化的业务需求和发展规模。

ToC（面向消费者）场景

交互设计的侧重点：

• 在ToC市场，交互设计更侧重于吸引用户注意力和提升使用乐趣。
• 界面需简洁美观，符合目标用户的审美习惯和使用习惯。
• 交互设计应能够激发用户的探索欲望，促进产品的自发传播和口碑营销。

技术实现的侧重点：

• ToC应用通常面临海量用户的高并发访问，因此技术需具备出色的并发处理能力。
• 快速响应的用户体验至关重要，技术实现需优化页面加载速度和交互响应时间。
• 利用新技术和创新点来打造独特的用户体验，从而在竞争激烈的市场中脱颖而出。

综合结论

综上所述，在ToB场景中，由于更强调业务流程的高效稳定与安全性，技术实现往往占据相对更重要的地位；而在ToC场景下，交互设计对于吸引和留住用户、提升品牌影响力则具有更为显著的作用。然而，这并不意味着可以忽视另一方面的重要性——优秀的ToB产品同样需要良好的交互设计来提升用户体验，而ToC产品在追求创新交互的同时，也离不开坚实的技术支撑。

因此，作为前端开发工程师，应根据具体业务场景和项目需求，在交互设计与技术实现之间找到恰当的平衡点，并持续学习和探索两者之间的最佳融合方式。

3. 假设你是正在面试前端开发工程师的候选人，面试官让你详细讲一讲你看重的公司文化有哪些方面？

在面试前端开发工程师的候选人时，如果面试官询问我看重的公司文化有哪些方面，我会这样回答：

我看重的公司文化方面

1. 创新驱动：

   • 我非常看重一个鼓励创新和实验的公司文化。在这样的环境中，员工可以*地提出新想法，并有机会将这些想法转化为实际的产品或功能。创新不仅能推动公司持续进步，也能激发个人的工作热情和成就感。

2. 团队协作：

   • 团队合作是成功的关键。我倾向于加入那些强调跨部门协作和沟通的公司。在这样的文化中，团队成员相互支持，共同解决问题，能够更高效地完成任务，并且创造出更好的工作成果。

3. 持续学习：

   • 技术领域日新月异，因此我非常重视一个支持持续学习和职业发展的公司文化。公司是否提供培训机会、是否有知识分享的氛围，以及是否鼓励员工自我提升，这些都是我非常关注的点。

4. 开放透明：

   • 一个开放透明的公司文化能够增强员工的信任感和归属感。我喜欢那种信息共享、决策过程透明的环境，这样可以让每个人都清楚公司的目标和方向，从而更好地对齐自己的工作重点。

5. 工作与生活平衡：

   • 在追求职业发展的同时，我也非常注重个人生活的质量。因此，我倾向于选择那些重视员工福利、提倡弹性工作时间以及关注员工身心健康的公司。

6. 认可与激励：

   • 我希望在一个能够认可员工努力并提供相应激励的公司工作。无论是通过物质奖励还是精神鼓舞，适当的认可都能极大地提升员工的工作积极性和满意度。

7. 责任与担当：

   • 我看重那些强调个人责任和团队责任感的公司文化。在这样的环境中，每个人都明白自己的工作对整体目标的重要性，并愿意为此承担责任。

综上所述，我认为一个理想的公司文化应该是创新驱动的、注重团队协作的、支持持续学习的、开放透明的、兼顾工作与生活的、懂得认可与激励的，以及强调责任与担当的。这样的文化不仅能促进公司的长期发展，也能为员工提供一个充满成长机会和幸福感的工作环境。

4. 假设你是正在面试前端开发工程师的候选人，面试官让你详细讲一讲你在腾讯公司实习期间开发腾讯视频小程序的过程和收获感悟？

在面试前端开发工程师的候选人时，如果面试官询问我在腾讯公司实习期间开发腾讯视频小程序的过程和收获感悟，我会这样回答：

开发腾讯视频小程序的过程

项目启动阶段：

• 在项目开始时，我参与了需求分析和产品设计讨论，明确了小程序的功能目标和用户需求。
• 学习并熟悉了腾讯小程序的开发框架和工具链，包括微信开发者工具的使用。

开发实施阶段：

• 我负责了部分前端界面的开发和优化工作，确保界面设计符合用户体验标准。
• 在开发过程中，我积极与团队成员沟通协作，共同解决遇到的技术难题。
• 进行了多次代码审查和性能测试，以确保代码质量和小程序的稳定运行。

测试上线阶段：

• 参与了小程序的内部测试和用户测试，收集反馈并及时调整优化产品。
• 协助完成了小程序的上线发布工作，并监控上线后的运行情况。

收获感悟

技术能力提升：

• 通过实际项目开发，我对小程序开发有了更深入的理解和实践经验。
• 掌握了更多前端性能优化和跨平台开发的技巧。

团队协作意识：

• 学会了如何在团队中有效沟通和协作，共同推进项目进度。
• 意识到了团队合作对于项目成功的重要性。

解决问题能力：

• 在面对开发过程中的挑战时，我学会了如何分析问题并找到合适的解决方案。
• 培养了独立思考和快速学习的能力。

职业发展规划：

• 这次实习让我更加明确了自己的职业兴趣和发展方向。
• 我深刻体会到了前端开发在实际业务场景中的应用价值。

综上所述，我在腾讯公司实习期间不仅提升了自身的专业技能，还收获了宝贵的团队协作经验和解决问题的能力。这段经历对我未来的职业生涯发展具有重要意义，并为我今后的学习和工作奠定了坚实的基础。

5. 请尽可能详细地说明，前端如何获取一个对象的值。你的回答中不要写出示例代码。

在前端开发中，获取一个对象的值可以通过多种方式实现，具体取决于对象的类型和结构。以下是几种常见的方法：

1. 点表示法（Dot Notation）

点表示法是最直接和常用的方式，适用于对象属性名是简单标识符（不包含特殊字符、空格等）的情况。

let value = object.propertyName;

2. 方括号表示法（Bracket Notation）

方括号表示法更加灵活，可以使用变量或表达式来访问属性名，适用于属性名包含特殊字符或需要动态确定的情况。

let value = object['propertyName'];

3. 使用 Object.keys() 和 Object.values()

Object.keys() 方法返回一个包含对象所有可枚举属性名的数组，而 Object.values() 方法返回一个包含对象所有可枚举属性值的数组。

let keys = Object.keys(object); // 获取所有属性名
let values = Object.values(object); // 获取所有属性值

4. 使用 for...in 循环

for...in 循环可以遍历对象的所有可枚举属性。

for (let key in object) {
    if (object.hasOwnProperty(key)) {
        let value = object[key];
        // 处理每个属性值
    }
}

5. 使用 Object.entries()

Object.entries() 方法返回一个包含对象所有可枚举属性的键值对数组。

let entries = Object.entries(object); // 获取所有键值对
for (let [key, value] of entries) {
    // 处理每个键值对
}

6. 使用解构赋值（Destructuring Assignment）

解构赋值是一种简洁的方式来提取对象中的属性值，并将其赋值给变量。

let { propertyName1, propertyName2 } = object;

7. 使用 Reflect.get()

Reflect.get() 是一个内置的反射方法，可以用来获取对象的属性值，并且可以处理一些特殊情况，如访问器属性（getter/setter）。

let value = Reflect.get(object, 'propertyName');

注意事项

• 在使用点表示法时，属性名必须是有效的标识符。
• 方括号表示法可以使用变量或表达式来动态获取属性名。
• 在遍历对象属性时，通常需要检查属性是否属于对象本身，以避免继承属性的影响。
• 解构赋值适用于一次性提取多个属性值的场景。

通过这些方法，前端开发者可以根据具体需求灵活地获取对象的值。

6. 请尽可能详细地说明，用TypeScript写出深拷贝递归算法。

在TypeScript中实现深拷贝的递归算法，我们需要考虑以下几点：

1. 基本类型直接赋值：对于原始类型（如number、string、boolean等），可以直接赋值。
2. 复杂类型递归拷贝：对于对象和数组，需要递归地进行深拷贝。
3. 循环引用处理：需要检测和处理可能存在的循环引用，以避免无限递归。
4. 特殊类型处理：如Date、RegExp等内置对象，需要特殊处理。

以下是一个详细的TypeScript深拷贝递归算法实现：

function deepClone<T>(obj: T, hash = new WeakMap()): T {
    // 基本类型直接返回
    if (obj === null || typeof obj !== 'object') {
        return obj;
    }

    // 处理循环引用
    if (hash.has(obj)) {
        return hash.get(obj);
    }

    // 初始化拷贝对象
    let cloneObj: any;

    // 处理特殊类型
    if (obj instanceof Date) {
        cloneObj = new Date(obj.getTime());
    } else if (obj instanceof RegExp) {
        cloneObj = new RegExp(obj);
    } else if (Array.isArray(obj)) {
        // 处理数组
        cloneObj = [];
    } else {
        // 处理普通对象
        cloneObj = Object.create(Object.getPrototypeOf(obj));
    }

    // 记录当前对象，防止循环引用
    hash.set(obj, cloneObj);

    // 递归拷贝属性
    for (const key in obj) {
        if (obj.hasOwnProperty(key)) {
            cloneObj[key] = deepClone(obj[key], hash);
        }
    }

    return cloneObj;
}

详细说明

1. 基本类型处理：

   if (obj === null || typeof obj !== 'object') {
       return obj;
   }
   

   如果obj是基本类型或null，直接返回。

2. 循环引用处理：

   if (hash.has(obj)) {
       return hash.get(obj);
   }
   

   使用WeakMap来记录已经拷贝过的对象，防止无限递归。

3. 特殊类型处理：

   if (obj instanceof Date) {
       cloneObj = new Date(obj.getTime());
   } else if (obj instanceof RegExp) {
       cloneObj = new RegExp(obj);
   }
   

   对于Date和RegExp对象，创建新的实例进行拷贝。

4. 数组和对象处理：

   if (Array.isArray(obj)) {
       cloneObj = [];
   } else {
       cloneObj = Object.create(Object.getPrototypeOf(obj));
   }
   

   对于数组，创建一个新的空数组；对于普通对象，创建一个新的空对象，并继承原对象的原型。

5. 递归拷贝属性：

   for (const key in obj) {
       if (obj.hasOwnProperty(key)) {
           cloneObj[key] = deepClone(obj[key], hash);
       }
   }
   

   遍历对象的每个属性，递归调用deepClone进行深拷贝。

使用示例

interface Person {
    name: string;
    age: number;
    hobbies: string[];
    address: {
        city: string;
        zip: string;
    };
}

const person: Person = {
    name: "John",
    age: 30,
    hobbies: ["reading", "traveling"],
    address: {
        city: "New York",
        zip: "10001"
    }
};

const clonedPerson = deepClone(person);
console.log(clonedPerson);

通过这种方式，我们可以确保在TypeScript中实现一个健壮且类型安全的深拷贝函数。

7. 请尽可能详细地说明，前端中的map和object的区别？你的回答中不要写出示例代码。

在前端开发中，Map和Object都是用于存储键值对的数据结构，但它们之间存在一些关键的区别。以下是对这两个数据结构的详细比较：

1. 键的类型

Object：

• 在Object中，键必须是字符串或符号（Symbol）类型。
• 非字符串类型的值在作为键使用时，会被隐式转换为字符串。

Map：

• Map允许使用任意类型的值作为键，包括函数、对象、基本类型等。
• 这种灵活性使得Map在某些场景下更加适用，尤其是当需要使用复杂对象作为键时。

2. 键的顺序

Object：

• 在ES5及之前的版本中，Object的键是无序的。
• 从ES6开始，规范中明确了Object的键按照插入顺序进行排列，但在实际实现中可能存在差异。
• 注意，某些JavaScript引擎可能不完全遵循这一规范。

Map：

• Map中的键值对始终按照插入顺序进行排序。
• 这使得Map在迭代时能够保持一致的顺序，便于依赖顺序的场景。

3. 性能

Object：

• 对于简单的键值对操作（如查找、添加、删除），Object通常具有较好的性能。
• 当对象变得非常大时，性能可能会下降，尤其是在频繁进行增删操作时。

Map：

• Map在处理大量数据时可能表现出更好的性能，尤其是在频繁增删键值对的场景下。
• Map的内部实现通常更优化，能够高效地管理键值对。

4. 内置方法

Object：

• Object提供了一些内置方法，如hasOwnProperty()、isPrototypeOf()等，用于检查对象属性。
• 可以通过Object.keys()、Object.values()和Object.entries()等方法获取对象的键、值和键值对。

Map：

• Map拥有一系列专门的方法，如set()、get()、has()、delete()和clear()等，用于操作键值对。
• 此外，Map还提供了size属性来快速获取键值对的数量。

5. 序列化与反序列化

Object：

• Object可以很容易地通过JSON.stringify()进行序列化，并通过JSON.parse()进行反序列化。
• 注意，在序列化过程中，函数和某些特殊类型的值（如undefined）会被忽略或转换为null。

Map：

• Map本身不支持直接通过JSON.stringify()进行序列化，因为其键可以是任意类型。
• 若要将Map转换为可序列化的格式，通常需要先将其转换为普通对象或其他可序列化的结构。

6. 遍历方式

Object：

• 遍历Object通常使用for...in循环，但需要注意它会遍历原型链上的属性。
• 可以结合hasOwnProperty()方法来确保只遍历对象自身的属性。

Map：

• Map提供了专门的迭代器方法，如keys()、values()和entries()，用于遍历键、值和键值对。
• 这些方法返回的迭代器可以直接在for...of循环中使用，使得遍历更加直观和简洁。

综上所述，Map和Object各有优缺点，在选择使用哪种数据结构时，应根据具体需求和场景进行权衡。

8. 请用TypeScript写代码尽可能详细地说明，useRef实现对useCallback的引用，从而使得useCallback不需要写依赖项数组。并详细说明useCallback和useMemo的底层原理是什么？

在TypeScript中，useRef、useCallback和useMemo是React提供的几个重要的Hooks API。下面我将首先展示如何使用useRef来实现对useCallback的引用，从而避免显式地写出依赖项数组。然后，我会详细解释useCallback和useMemo的底层原理。

使用useRef引用useCallback

通常，useCallback需要一个依赖项数组来确保其返回的函数在依赖项变化时重新创建。但有时，我们可能希望避免这种行为，即无论依赖项如何变化，回调函数都保持不变。这时，我们可以使用useRef来存储上一次的回调函数，并在每次渲染时比较新旧回调函数是否相同。

import { useRef, useCallback } from 'react';

function useStableCallback<T extends (...args: any) => any>(callback: T): T {
  const ref = useRef<T>(callback);

  // 在每次渲染时，如果callback变化了，则更新ref.current
  if (ref.current !== callback) {
    ref.current = callback;
  }

  // 返回一个稳定的回调函数引用
  return useCallback((...args: Parameters<T>) => ref.current(...args), []);
}

useCallback和useMemo的底层原理

useCallback

useCallback的底层原理主要基于React的Fiber架构和Hooks的内部实现。其大致流程如下：

1. 创建阶段：当组件首次渲染时，useCallback会创建一个新的函数实例，并将其存储在内部的缓存中。

2. 更新阶段：在后续的渲染过程中，如果依赖项数组没有变化，useCallback会直接返回之前缓存的函数实例，而不是创建一个新的。

3. 依赖追踪：React内部使用一种称为“effect list”的机制来追踪每个Hook的依赖项。当依赖项发生变化时，React会重新运行对应的effect（在这里就是useCallback）。

4. 性能优化：通过避免不必要的函数重新创建，useCallback有助于减少子组件的不必要渲染，从而提高应用性能。

useMemo

useMemo的底层原理与useCallback类似，但它是用于缓存计算结果的。其关键点如下：

1. 计算与缓存：当组件首次渲染时，useMemo会根据提供的计算函数生成一个结果，并将其存储起来。

2. 依赖检查：在后续的渲染中，如果依赖项没有变化，useMemo会直接返回之前缓存的结果，而不是重新执行计算函数。

3. 惰性初始化：useMemo支持惰性初始化，即只有在真正需要结果时才会执行计算函数。

4. 内存管理：React会在适当的时机清理不再需要的memoized值，以避免内存泄漏。

总的来说，useCallback和useMemo都是利用React的内部机制来实现对函数和计算结果的缓存，从而优化组件的渲染性能。它们通过精确地追踪和管理依赖项来确保只在必要时进行更新。

9. 请尽可能详细地说明，React18新增了哪些新特性或hooks？useTransition和createPortal是什么？你的回答中不要写出示例代码。

React 18引入了一系列新特性和改进，其中最引人注目的包括并发模式（Concurrent Mode）及相关的新Hooks。以下是对React 18新增特性的详细说明，以及对useTransition和createPortal的解释。

React 18 新增特性

1. 并发模式（Concurrent Mode）：

   • 并发模式是React 18的核心特性，它允许React同时准备多个版本的UI，从而提高应用的响应性和性能。
   • 这一模式通过引入时间切片（Time Slicing）和优先级调度（Priority Scheduling）来优化渲染过程。

2. 新的Hooks：

   • useTransition：

     • useTransition允许开发者区分紧急和非紧急的UI更新。
     • 它返回一个状态对象，表示过渡是否正在进行，以及一个启动过渡的函数。
     • 这有助于在处理复杂交互时保持界面的流畅性。

   • useDeferredValue：

     • useDeferredValue用于延迟更新某个值，直到更紧急的更新完成。
     • 它可以帮助减少不必要的渲染，特别是在处理大量数据或复杂计算时。

3. 自动批处理（Automatic Batching）：

   • React 18现在会在事件处理程序和钩子中自动批处理多个状态更新，以减少渲染次数。
   • 这一改进提升了性能，并简化了状态管理的复杂性。

4. 新的服务器渲染API：

   • 引入了renderToPipeableStream等新的服务器渲染API，支持流式传输渲染结果。
   • 这有助于提升大型应用的加载速度和性能。

5. 兼容性改进：

   • React 18在保持向后兼容的同时，对内部架构进行了优化，以支持更广泛的场景和应用类型。

useTransition

useTransition是React 18引入的一个新Hook，用于管理并发模式下的UI更新。其主要特点包括：

• 区分优先级：能够明确区分哪些更新是紧急的（如用户输入），哪些可以稍后处理（如数据加载）。
• 状态管理：返回一个包含isPending（表示过渡是否正在进行）等属性的状态对象，以及一个触发过渡的函数。
• 优化用户体验：通过延迟非紧急更新，确保关键交互的即时响应，从而提升整体用户体验。

createPortal

虽然createPortal并非React 18的新特性，但它在React应用中仍具有重要地位，并经常与并发模式等新特性结合使用。createPortal的主要作用是：

• 跨DOM层级渲染：允许将子节点渲染到存在于父组件以外的DOM节点中。
• 解耦UI结构：有助于实现更灵活的组件布局和样式隔离，特别是在处理模态框、悬浮层等场景时。
• 性能优化：通过减少不必要的DOM嵌套和重渲染，提升应用的渲染效率。

总的来说，React 18通过引入并发模式及相关的新Hooks，显著提升了应用的响应性和性能。同时，这些新特性也为开发者提供了更强大的工具来构建复杂且高效的用户界面。

10. TypeScript 类型体操实现Partial和Partial的递归实现

/**
 * Make all properties in T optional
 */
type Partial<T> = {
    [P in keyof T]?: T[P];
};

在TypeScript中，Partial是一个内置的映射类型，用于将一个类型的所有属性变为可选。如果想要实现一个递归的Partial，即不仅使顶层属性可选，还使嵌套对象的属性也变为可选，可以通过类型体操来实现。

以下是如何使用TypeScript类型体操来实现Partial以及递归的RecursivePartial：

实现 Partial

TypeScript 已经提供了 Partial 类型，但为了演示类型体操，我们可以自己实现一个简化版的 Partial：

type MyPartial<T> = {
    [P in keyof T]?: T[P];
};

这个 MyPartial 类型会将传入类型 T 的每个属性都变为可选。

实现递归的 RecursivePartial

要实现一个递归的 Partial，我们需要对上面的 MyPartial 进行扩展，使其能够处理嵌套的对象类型：

type RecursivePartial<T> = {
    [P in keyof T]?: T[P] extends object ? RecursivePartial<T[P]> : T[P];
};

这个 RecursivePartial 类型的工作原理如下：

• 对于 T 中的每个属性 P，它都会检查该属性的值类型 T[P]。
• 如果 T[P] 是一个对象类型（包括数组和函数，因为它们也是对象），那么它会递归地应用 RecursivePartial。
• 如果 T[P] 不是对象类型，那么它就保持原样。

这样，无论是顶层属性还是嵌套对象的属性，都会被变为可选。

示例

假设有以下类型定义：

interface Address {
    city: string;
    zip: number;
}

interface User {
    name: string;
    age: number;
    address: Address;
}

使用 RecursivePartial 后：

type PartialUser = RecursivePartial<User>;

PartialUser 的类型将会是：

{
    name?: string;
    age?: number;
    address?: {
        city?: string;
        zip?: number;
    };
}

这样，PartialUser 中的所有属性，包括嵌套在 address 对象中的属性，都变成了可选的。

11. 正则表达式的先行断言(lookahead)和后行断言(lookbehind)

https://www.runoob.com/regexp/regexp-syntax.html

https://www.runoob.com/w3cnote/reg-lookahead-lookbehind.html

12. 请尽可能详细地说明，301和302状态码的应用场景？前端和后端遇到这种情况应该怎么做？你的回答中不要写出示例代码。

301和302状态码是HTTP协议中用于表示重定向的两种状态码，它们各自具有特定的应用场景，并且在前端和后端遇到这些状态码时，需要采取相应的处理措施。以下是对这两种状态码的详细说明：

一、301状态码

应用场景：

1. 永久重定向：

   • 当网站进行域名更换或页面结构重大调整时，为了确保用户能够继续访问到正确的内容，可以使用301状态码将旧地址永久重定向到新地址。

2. 优化SEO：

   • 通过301重定向，可以将一个页面的权重和排名转移到另一个页面，有助于搜索引擎优化（SEO），避免重复内容对排名的影响。

3. 资源整合：

   • 在网站改版或合并时，可以使用301将多个旧页面统一指向一个新的页面，实现资源的有效整合。

前端处理：

• 前端通常无需特别处理301状态码，因为浏览器会自动跟踪重定向并加载最终的目标页面。
• 可以通过浏览器的开发者工具查看网络请求，确认重定向是否成功以及最终的URL。

后端处理：

• 后端在设置301重定向时，需要明确指定目标URL，并确保该重定向是永久性的。
• 应在服务器配置文件（如Apache的.htaccess或Nginx的nginx.conf）中设置301重定向规则。
• 同时，要注意避免循环重定向的发生，确保重定向链路的正确性。

二、302状态码

应用场景：

1. 临时重定向：

   • 当某个页面因维护、更新或其他临时原因无法访问时，可以使用302状态码将其临时重定向到其他可用页面。

2. 负载均衡与故障转移：

   • 在高并发场景下，为了分散服务器压力，可以使用302将请求临时转发到其他服务器进行处理。
   • 在主服务器故障时，也可以利用302将流量快速切换到备用服务器。

3. 表单提交后的跳转：

   • 在Web应用中，用户在提交表单后，有时需要被重定向到一个确认页面或结果页面，此时可使用302实现临时跳转。

前端处理：

• 前端同样无需特别处理302状态码，浏览器会自动处理重定向并显示新的页面。
• 可以通过监听浏览器的导航事件或检查URL变化来感知重定向的发生。

后端处理：

• 后端在设置302重定向时，需明确指定临时跳转的目标URL。
• 应确保该重定向是临时性的，并在原页面恢复后及时移除或修改重定向规则。
• 在编写重定向逻辑时，要注意避免引入潜在的安全风险，如开放重定向漏洞等。

综上所述，301和302状态码在应用场景和处理方式上存在明显差异。前端应依赖浏览器的自动处理能力，而后端则需谨慎设置和管理这些重定向规则，以确保网站的正常运行和用户体验的顺畅。

13. 请尽可能详细地说明，微信小程序有哪几层，怎么通信的，是否用到了JSBridge？你的回答中不要写出示例代码。

微信小程序的架构可以分为以下几个层次：

1. 视图层（View Layer）

• WXML（WeiXin Markup Language）：类似于HTML，用于描述页面的结构。
• WXSS（WeiXin Style Sheet）：类似于CSS，用于描述页面的样式。

2. 逻辑层（Logic Layer）

• JavaScript：用于处理业务逻辑和数据管理。
• App Service：小程序的逻辑层是由JavaScript编写的，运行在微信客户端中。

3. 数据层（Data Layer）

• 云开发：提供云端的数据存储和处理能力。
• 本地存储：可以使用wx.setStorageSync和wx.getStorageSync等方法进行本地数据的存储和读取。

4. 网络层（Network Layer）

• 网络请求API：如wx.request用于发起HTTP请求，与服务器进行数据交互。

层次间的通信机制

视图层与逻辑层的通信

• 事件系统：

  • 视图层可以通过绑定事件（如bindtap）将用户交互事件传递给逻辑层。
  • 逻辑层通过Page对象的事件处理函数来接收和处理这些事件。

• 数据绑定：

  • 逻辑层通过this.setData方法将数据同步到视图层。
  • 视图层通过WXML中的数据绑定表达式（如{{data}}）实时反映数据的变化。

逻辑层与数据层的通信

• 本地存储：

  • 逻辑层可以使用wx.setStorageSync和wx.getStorageSync等方法直接读写本地存储的数据。

• 云开发：

  • 通过微信提供的云开发API（如wx.cloud.database()）进行云端数据的读写和操作。

网络层与其他层次的通信

• 网络请求：
  • 逻辑层通过wx.request等方法向服务器发送请求，并处理返回的数据。
  • 获取到的数据可以通过this.setData更新到视图层，或存储到本地/云端。

JSBridge的使用

JSBridge是一种在Webview中实现JavaScript与原生应用之间通信的桥梁。在微信小程序中，虽然没有显式地提及“JSBridge”这一术语，但实际上微信小程序的架构内建了一套类似的通信机制来实现JavaScript与微信客户端原生能力的交互。

• 原生能力调用：

  • 小程序提供了丰富的API接口（如wx.getLocation获取地理位置，wx.showToast显示消息提示框等），这些接口实际上是通过内部的通信机制与微信客户端的原生功能进行交互的。

• 事件回调：

  • 当调用某些API时，微信客户端会在相应的事件完成后通过回调函数将结果返回给JavaScript逻辑层。

综上所述，微信小程序通过明确的层次划分和一套完善的通信机制实现了各层次间的顺畅交互。虽然没有直接使用传统意义上的“JSBridge”，但其内部的通信原理与JSBridge相似，都是为了实现JavaScript与原生环境之间的无缝衔接和数据交换。

14. 请尽可能详细地说明，前端如何判断或解决循环引用问题？你的回答中不要写出示例代码。

在前端开发中，循环引用问题通常出现在对象或数据结构的深度复制、序列化以及某些复杂的数据处理场景中。循环引用指的是两个或多个对象之间相互引用，形成一个闭环，这可能导致程序出现内存泄漏、栈溢出等问题。以下是前端判断和解决循环引用问题的详细方法：

一、判断循环引用

1. 手动检查：

   • 开发者可以通过仔细分析数据结构，理清对象之间的引用关系，从而手动识别出潜在的循环引用。

2. 使用工具辅助：

   • 利用浏览器的开发者工具（如Chrome DevTools）中的内存分析功能，可以可视化地查看对象之间的引用链，帮助定位循环引用。

3. 递归检测：

   • 编写递归函数，在遍历对象属性的过程中，记录已访问过的对象。若发现某个对象已在记录中，则表明存在循环引用。

二、解决循环引用

1. 重构数据结构：

   • 尽量避免不必要的双向引用，或者将双向引