2024高频前端面试题合集(四)

1、工程化组件的理解

在 Vue.js 项目中，Vue CLI (Vue Command Line Interface) 是一个非常常用的工具，用于快速搭建和管理 Vue 项目。Vue CLI 集成了一系列常用的工程化组件和功能，包括但不限于：

1. Webpack: Vue CLI 使用 Webpack 来处理模块化、代码分割、加载器和插件等任务。Webpack 是一个模块打包工具，可以将各种资源（例如 JavaScript、CSS、图片等）打包成静态资源，以便浏览器加载。

2. Vue Router: Vue Router 是 Vue.js 官方的路由管理器。它允许你在 Vue 应用中实现页面之间的导航和跳转，同时支持路由参数、动态路由、嵌套路由等功能。

3. Vuex: Vuex 是 Vue.js 官方的状态管理库，用于管理应用程序中的共享状态。它提供了一种集中式的状态管理方案，让多个组件之间可以共享和响应同一个状态。

4. ESLint: ESLint 是一个 JavaScript 代码检查工具，用于检查代码中的潜在问题和风格错误。Vue CLI 集成了 ESLint，可以帮助开发者保持代码风格的一致性，并尽早发现代码中的问题。

5. Babel: Babel 是一个 JavaScript 编译器，可以将 ES6/ES7/ES8 等新版本的 JavaScript 代码转换为向下兼容的 JavaScript 代码，以便在不同浏览器和环境中运行。

6. PostCSS: PostCSS 是一个 CSS 处理工具，可以帮助开发者使用现代的 CSS 语法和功能，例如变量、嵌套、自动前缀等。Vue CLI 默认集成了 PostCSS，以便在 Vue 项目中使用这些功能。

7. CSS Pre-processors: Vue CLI 支持使用 CSS 预处理器，例如 Sass、Less 和 Stylus。这些预处理器可以帮助开发者更高效地编写 CSS 代码，并且提供了一些额外的功能，例如变量、混合、嵌套等。

8. Unit Testing: Vue CLI 集成了单元测试工具，例如 Jest 和 Mocha。这些工具可以帮助开发者编写和运行单元测试，以确保代码的质量和稳定性。

这些工程化组件和功能使得 Vue CLI 成为一个强大的工具，可以帮助开发者快速搭建和管理 Vue 项目，并且保持代码的质量和一致性。

2、qiankuan页面渲染原理

定义一个id ,通过create 挂载到这个id上面

3、vue3 watch监听机制

在Vue 3 中，watch 函数被重新设计，以提供更直接、更灵活的方式来监视状态变化。Vue 3 中的 watch 函数有两种用法：

监听单个响应式状态

你可以使用 watch 函数来监视单个响应式状态的变化。示例：

import { ref, watch } from 'vue';

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log('count 值发生变化：', newValue, oldValue);
});

监听多个响应式状态

如果你需要同时监听多个状态的变化，你可以传递一个包含多个响应式状态的对象到 watch 函数。示例：

import { reactive, watch } from 'vue';

const state = reactive({
  count: 0,
  message: 'Hello'
});

watch([() => state.count, () => state.message], ([count, message], [oldCount, oldMessage]) => {
  console.log('count 或 message 值发生变化：', count, message, oldCount, oldMessage);
});

配置选项

watch 函数还支持配置选项，例如 immediate 和 deep：

• immediate: 如果设置为 true，则在初始渲染时立即执行监听器。
• deep: 如果设置为 true，则会深度监听对象内部的变化。

示例：

watch(
  () => state.count,
  (newValue, oldValue) => {
    console.log('count 值发生变化：', newValue, oldValue);
  },
  { immediate: true }
);

这是 Vue 3 中 watch 函数的基本用法和配置选项。通过 watch 函数，你可以更灵活地监视状态的变化，并在状态变化时执行相应的逻辑。

4、开发电商项目时，前端工程师需要注意以下几个方面

开发电商项目时，前端工程师需要注意以下几个方面：

1. 性能优化： 电商网站通常有大量的商品数据和页面内容，需要注意前端性能优化，包括减少页面加载时间、优化图片和资源加载、实现懒加载和虚拟列表等技术来提高页面性能。

2. 用户体验： 用户体验对于电商网站至关重要，需要关注页面布局、交互设计、响应式设计等方面，确保用户可以流畅地浏览商品、完成购买和支付等操作。

3. 安全性： 电商网站涉及用户的个人信息和支付数据，需要注意前端安全性，包括防止 XSS 攻击、CSRF 攻击等安全问题，保护用户的隐私和数据安全。

4. 搜索引擎优化（SEO）： 优化网站的 SEO 可以提高网站在搜索引擎中的排名和曝光度，吸引更多的流量和用户。需要注意页面的结构、标签语义化、关键词优化等方面。

5. 跨平台兼容性： 电商网站需要在不同的浏览器和设备上都能正常运行，需要进行跨平台的兼容性测试，确保网站在不同环境下的稳定性和一致性。

6. 页面可访问性（Accessibility）： 确保电商网站对于残障人士也能够友好访问，包括提供键盘操作支持、合适的语义化标签、适当的对比度和文本描述等。

7. 数据安全和隐私保护： 保护用户的个人信息和支付数据是电商网站的重要责任，需要采取合适的措施保护用户的数据安全和隐私。

8. 页面加载速度： 电商网站的页面加载速度直接影响用户的购物体验和转化率，需要尽量减少页面加载时间，提高用户留存和转化率。

9. 用户体验优化： 优化用户购物体验，包括方便的商品搜索、清晰的商品信息展示、简洁明了的购物流程等，提高用户满意度和转化率。

10. 交互设计： 设计友好的交互界面，包括清晰的导航、易于操作的筛选和排序功能、直观的购物车管理等，提升用户体验和购物效率。

11. 多语言和多货币支持： 如果电商网站面向国际市场，需要提供多语言和多货币支持，满足不同用户的需求。

12. 订单管理和售后服务： 考虑用户的订单管理和售后服务体验，包括订单跟踪、退换货流程、客服支持等，提高用户满意度和忠诚度。

综上所述，开发电商项目时，前端工程师需要注意性能优化、用户体验、安全性、SEO、跨平台兼容性、页面可访问性、数据安全和隐私保护、页面加载速度、用户体验优化、交互设计、多语言和多货币支持、订单管理和售后服务等方面，确保电商网站能够提供稳定、安全、快速、友好的购物体验。

5、防止 XSS 攻击、CSRF 攻击

防止 XSS 攻击（跨站脚本攻击）和 CSRF 攻击（跨站请求伪造）是 Web 应用程序安全的重要方面。以下是一些防御这两种攻击的常见方法：

防止 XSS 攻击：

1. 输入验证和过滤：对用户输入的数据进行验证和过滤，只允许预期的数据格式和字符。可以使用白名单过滤器或者输入验证库来过滤用户输入，以防止恶意脚本的注入。

2. 转义输出内容：在将用户输入的内容展示在页面上时，确保对其中的特殊字符进行转义处理。比如将 <, >, &, ", ' 等字符转换为对应的 HTML 实体编码，这样可以防止浏览器将其解析为 HTML 或者 JavaScript 代码。

3. 使用 Content Security Policy (CSP)：CSP 是一种 Web 安全政策，通过指定允许加载哪些资源以及允许执行哪些脚本来限制页面的行为。CSP 可以有效防止 XSS 攻击，因为它可以阻止非法脚本的执行。

4. 设置 HttpOnly Cookie：在设置敏感信息的 Cookie 时，使用 HttpOnly 标志，使得这些 Cookie 只能通过 HTTP 协议传输，而无法被 JavaScript 访问。这样可以防止 XSS 攻击者窃取用户的 Cookie。

5. 安全的开发实践：遵循安全的开发实践，包括最小化权限、定期安全审计、安全代码审查等，以减少潜在的 XSS 漏洞。

防止 CSRF 攻击：

1. CSRF Token：为每个用户会话生成一个随机的 CSRF Token，并将该 Token 嵌入到表单或者链接中。在服务器端接收到请求时，验证请求中的 Token 是否与用户会话中的 Token 一致，如果不一致则拒绝请求。

2. 同源策略：利用浏览器的同源策略来阻止跨域请求。确保敏感操作只能由同一源（Origin）发起，即请求的源与目标站点的域名、协议和端口相同。

3. 使用 CSRF Token 验证框架：一些 Web 开发框架提供了内置的 CSRF Token 验证功能，开发者可以直接使用这些功能来防止 CSRF 攻击。

4. 限制敏感操作的请求方法：将敏感操作限制为 POST、PUT、DELETE 等不会被浏览器自动发起的请求方法，以减少 CSRF 攻击的可能性。

5. 使用同步 Cookie：在跨域请求中，使用同步 Cookie 来标识用户身份，这样可以确保请求只能被已登录用户发起。

综合使用这些方法可以有效地防御 XSS 攻击和 CSRF 攻击，保护 Web 应用程序的安全性和用户数据的完整性。

6、算法题

列表（数组）转换为树

function arrayToTree(arr, parentId = null) {
  const tree = [];
  
  arr.forEach(item => {
    if (item.parentId === parentId) {
      const children = arrayToTree(arr, item.id);
      if (children.length) {
        item.children = children;
      }
      tree.push(item);
    }
  });
  
  return tree;
}

// 示例用法
const flatArray = [
  { id: 1, name: "Node 1", parentId: null },
  { id: 2, name: "Node 2", parentId: 1 },
  { id: 3, name: "Node 3", parentId: 1 },
  { id: 4, name: "Node 4", parentId: 2 },
  { id: 5, name: "Node 5", parentId: 3 },
  { id: 6, name: "Node 6", parentId: 3 },
  { id: 7, name: "Node 7", parentId: 2 }
];

const tree = arrayToTree(flatArray);
console.log(tree);

两数之和-给定一个数组 nums 和一个目标值 target，在该数组中找出和为目标值的两个数

function twoSum(nums, target) {     
 // 创建一个空对象来存储数组中的数字及其索引      
const numMap = {};          
  // 遍历数组      
for (let i = 0; i < nums.length; i++) {       
   const num = nums[i];         
 const complement = target - num; // 计算补数              
      // 检查补数是否已经在哈希表中     
     if (complement in numMap) {      
        // 如果在，返回结果          
    return [numMap[complement], i];     
    }                 
   // 如果不在，将当前数字及其索引添加到哈希表中   
       numMap[num] = i;     }          
  // 如果没有找到符合条件的两个数，抛出一个错误   
   throw new Error('No two sum solution');   }   
  // 示例   const nums = [2, 7, 11, 15];   const target = 9;  
   try {      const result = twoSum(nums, target);     
 console.log(result); // 输出: [0, 1]   } catch (error) {      console.error(error.message);   }