前端面试题（三）

11. Web API 面试题

如何使用 fetch 发起网络请求？

fetch 是现代浏览器中用于发起网络请求的原生 API。它返回一个 Promise，默认情况下使用 GET 请求：

javascript 复制代码

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));

可以通过第二个参数传递配置对象来指定请求方法、请求头等：

javascript 复制代码

fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ key: 'value' }),
});

什么是 localStorage 和 sessionStorage，它们的区别是什么？
- localStorage 和 sessionStorage 都是 Web Storage API 的一部分，用于在客户端存储数据。它们的主要区别在于数据的有效期：
  - localStorage：数据没有过期时间，浏览器关闭后数据仍然存在，除非手动删除。
  - sessionStorage：数据仅在页面会话期间有效，浏览器关闭后数据会被清除。
如何使用 FormData 对象？
- FormData 是用于构建和管理表单数据的接口，特别适用于处理文件上传。可以通过表单元素实例化 FormData，然后通过 fetch 或 XMLHttpRequest 发送表单数据：
  javascript 复制代码
```
const formData = new FormData();
formData.append('username', 'example');
formData.append('file', fileInput.files[0]);

fetch('https://api.example.com/upload', {
  method: 'POST',
  body: formData,
});
```

12. 函数式编程与高级 JavaScript 特性

什么是柯里化（Currying）？

柯里化 是将一个接受多个参数的函数转换为接受单一参数的函数，并返回一个新的函数，该函数继续接收剩余的参数，直到参数全部传递完毕：

javascript 复制代码

function curry(fn) {
  return function curried(...args) {
    if (args.length >= fn.length) {
      return fn.apply(this, args);
    } else {
      return function(...args2) {
        return curried.apply(this, args.concat(args2));
      };
    }
  };
}

const add = (a, b) => a + b;
const curriedAdd = curry(add);
console.log(curriedAdd(2)(3)); // 输出 5

什么是函数的纯函数（Pure Function）？
- 纯函数 是指在相同的输入下总是返回相同的输出，并且不产生任何副作用（如修改外部变量或状态）。纯函数使代码更具可预测性和可测试性。
如何使用 Promise.all 和 Promise.race？
- Promise.all 用于并行执行多个 Promise，并在所有 Promise 都 resolve 后返回结果数组。如果有任何一个 Promise reject，它将立即停止并返回错误：
  javascript 复制代码
```
Promise.all([promise1, promise2, promise3])
  .then(results => console.log(results))
  .catch(error => console.error(error));
```
- Promise.race 用于并发执行多个 Promise，但它会在第一个 Promise 完成时立即返回结果，无论是 resolve 还是 reject：
  javascript 复制代码
```
Promise.race([promise1, promise2, promise3])
  .then(result => console.log(result))
  .catch(error => console.error(error));
```

13. CSS 进阶

如何使用 CSS Grid 实现复杂布局？
- CSS Grid 是一种二维布局系统，可以轻松创建复杂的网格布局。以下是一个简单的网格布局示例：
  css 复制代码
```
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 200px);
  gap: 20px;
}
.item {
  background-color: lightblue;
}
```
  以上代码创建了一个 3 列、2 行的网格布局，每个单元格的宽度和高度分别为 1fr 和 200px，单元格之间有 20px 的间距。
如何使用 CSS Variables（CSS 变量）？
- CSS 变量通过 --variable-name 的语法定义，可以在整个 CSS 文件中复用。定义全局变量时通常放在 :root 中：
  css 复制代码
```
:root {
  --main-color: #3498db;
  --padding: 10px;
}

.button {
  background-color: var(--main-color);
  padding: var(--padding);
}
```
  使用 var(--variable-name) 引用定义的变量。
什么是 BEM 命名法？
- BEM（Block Element Modifier）是一种 CSS 命名规范，旨在提高代码的可读性和可维护性。结构如下：
  - Block ：表示组件的独立部分（如 button）。
  - Element ：表示块中的某个部分（如 button__icon）。
  - Modifier ：表示元素的状态或变体（如 button--primary）。
  例如：
  html 复制代码
```
<button class="button button--primary">
  <span class="button__icon"></span>
  Click Me
</button>
```

14. 构建工具与打包优化

Webpack 中的 Tree Shaking 是什么？
- Tree Shaking 是一种去除 JavaScript 未使用代码的优化技术。Webpack 使用 ES6 模块的静态结构分析代码，找出哪些导入的模块没有被使用，并在最终打包时将这些未使用的模块移除，从而减小打包体积。
如何使用 Lazy Loading 优化 Web 应用？
- 懒加载 （Lazy Loading）是按需加载资源的技术，常用于优化首屏加载时间。通过 Webpack 的动态导入可以实现懒加载：
  javascript 复制代码
```
import('./module').then(module => {
  // 使用动态加载的模块
});
```
如何配置 webpack-dev-server 实现热模块替换（HMR）？
- 热模块替换 （HMR）允许在不刷新整个页面的情况下替换、添加或删除模块。可以在 webpack.config.js 中配置 devServer：
  javascript 复制代码
```
module.exports = {
  devServer: {
    contentBase: './dist',
    hot: true,
  },
};
```

15. 前端安全与加密

如何防止 Clickjacking 攻击？
- Clickjacking 是通过隐藏的 iframe 诱导用户点击看似正常的按钮或链接，实际执行了恶意操作。可以通过在 HTTP 头中添加 X-Frame-Options 来防止此类攻击：
  text 复制代码
```
X-Frame-Options: DENY
```
  或者可以指定同源站点允许通过：
  text 复制代码
```
X-Frame-Options: SAMEORIGIN
```

如何实现前端的加密和解密？

前端加密可以使用 JavaScript 中的 Crypto API 来实现，如使用 AES 算法加密：

javascript 复制代码

const crypto = window.crypto.subtle;

// 生成加密密钥
const key = await crypto.generateKey({
  name: 'AES-GCM',
  length: 256,
}, true, ['encrypt', 'decrypt']);

// 加密数据
const encryptedData = await crypto.encrypt({
  name: 'AES-GCM',
  iv: iv,
}, key, data);