HTML 部分

1. 什么是 HTML5 的自定义数据属性？如何使用它们？
答案：
自定义数据属性以 data- 开头，用于存储额外的信息，这些信息不会显示在页面上，但可以通过 JavaScript 获取。
示例：

<div data-user-id="123"></div>
<script>
  const div = document.querySelector('div');
  // 获取 data 属性
  const userId = div.dataset.userId; // "123"
  // 修改 data 属性
  div.dataset.userId = "456";
</script>

<div data-user-id="123" data-role="admin">User</div> <script> const div = document.querySelector('div'); console.log(div.dataset.userId); // "123" console.log(div.dataset.role); // "admin" </script>

2. HTML5 的离线存储（Web Storage）的两种方式及其区别：
答案：

• localStorage：永久存储，数据不会因浏览器关闭而丢失。
• sessionStorage：会话存储，数据仅在当前会话有效，关闭浏览器后清除。
  示例：

// localStorage 示例
localStorage.setItem("key", "value");
console.log(localStorage.getItem("key")); // "value"

// sessionStorage 示例
sessionStorage.setItem("key", "value");
console.log(sessionStorage.getItem("key")); // "value"

// localStorage 示例 localStorage.setItem('key', 'value'); console.log(localStorage.getItem('key')); // sessionStorage 示例 sessionStorage.setItem('sessionKey', 'value'); console.log(sessionStorage.getItem('sessionKey'));

3. Shadow DOM 的作用及应用场景：
答案：
Shadow DOM 是浏览器提供的一种技术，用于封装 DOM 和样式，避免与页面其他部分产生冲突。
应用场景：

• 创建自定义元素（Web Components）。
• 防止样式污染，保证组件样式独立。

CSS 部分

1. CSS Grid 和 Flexbox 的区别：
答案：

• Grid：二维布局，可以同时处理行和列。适用于复杂的整体布局。
• Flexbox：一维布局，只能处理行或列之一，适用于单行或单列的元素排列。

2. BFC（块级格式化上下文）的概念及应用：
答案：
BFC 是页面中的一个独立的渲染区域，创建 BFC 的方式包括 overflow: hidden、display: flex 等。
应用场景：

• 解决浮动高度塌陷：overflow: hidden。
• 解决外边距重叠问题。

3. 实现文字的渐变效果：
答案：

.text-gradient {
  background: linear-gradient(to right, red, blue);
  -webkit-background-clip: text;
  color: transparent;
}

.text-gradient { background: linear-gradient(to right, red, blue); -webkit-background-clip: text; color: transparent; }

4. CSS 变量（Custom Properties）的使用：
答案：

:root {
  --main-color: #3498db;
}
.button {
  background-color: var(--main-color);
}

复制代码

:root { --main-color: #3498db; --font-size: 16px; } div { color: var(--main-color); font-size: var(--font-size); }

JavaScript 部分

1. 什么是事件循环（Event Loop）？
答案：
事件循环是 JavaScript 处理异步操作的机制。它将同步任务放入主线程执行，异步任务放入任务队列，等主线程空闲时再执行任务队列的任务。

2. 判断一个变量是数组的 3 种方法：
答案：

Array.isArray(arr)
arr instanceof Array
Object.prototype.toString.call(arr) === "[object Array]"

复制代码

Array.isArray(arr); // 推荐方法 arr instanceof Array; // 判断原型链 Object.prototype.toString.call(arr) === '[object Array]'; // 判断类型

3. async/await 及其错误捕获：
答案：

async function fetchData() {
  try {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}
fetchData();

复制代码

async function fetchData() { try { const response = await fetch('https://api.example.com/data'); const data = await response.json(); console.log(data); } catch (error) { console.error(error); } } fetchData();

4. 深拷贝一个对象（不使用库）：
答案：

function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') return obj;
  const clone = Array.isArray(obj) ? [] : {};
  for (const key in obj) {
    clone[key] = deepClone(obj[key]);
  }
  return clone;
}

复制代码

function deepClone(obj) { if (obj === null || typeof obj !== 'object') return obj; const clone = Array.isArray(obj) ? [] : {}; for (const key in obj) { clone[key] = deepClone(obj[key]); } return clone; }

5. 简单的 Promise 异步请求：
答案：

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('数据加载成功');
    }, 1000);
  });
};
fetchData().then(data => console.log(data));

复制代码

const fetchData = () => { return new Promise((resolve, reject) => { setTimeout(() => { resolve('数据加载成功'); }, 1000); }); }; fetchData().then(data => console.log(data));

Vue.js 部分

1. Vue.js 中的双向绑定原理：
答案：
双向绑定基于数据劫持和发布-订阅模式。Vue 使用 Object.defineProperty 劫持数据的 getter 和 setter，数据变化时通知视图更新。

2. 父子组件通信的 3 种方式：
答案：

• Props：父组件向子组件传递数据。
• $emit：子组件向父组件传递事件。
• EventBus 或 Vuex：用于兄弟组件通信或跨组件通信。

开放性问题

1. HTTP2 的新特性：
答案：

• 多路复用：多个请求可以复用一个 TCP 连接。
• 头部压缩：减少重复的头部信息传输。
• 服务端推送：服务器可以主动向客户端发送资源。

2. 前端安全问题及防护措施：
答案：

• XSS（跨站脚本攻击）： 转义用户输入，使用 CSP。
• CSRF（跨站请求伪造）： 使用 Token 验证请求来源。
• 点击劫持： 使用 X-Frame-Options 禁止页面被嵌入到 iframe 中。

编程题：排序函数

function sortByField(data, field, ascending = true) {
  return data.sort((a, b) => {
    if (a[field] < b[field]) return ascending ? -1 : 1;
    if (a[field] > b[field]) return ascending ? 1 : -1;
    return 0;
  });
}
const data = [
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 22 },
  { name: 'Charlie', age: 30 },
];
console.log(sortByField(data, 'age')); // 按年龄升序
console.log(sortByField(data, 'age', false)); // 按年龄降序

复制代码

function sortByField(data, field, ascending = true) { return data.sort((a, b) => { if (a[field] < b[field]) return ascending ? -1 : 1; if (a[field] > b[field]) return ascending ? 1 : -1; return 0; }); } const data = [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 22 }, { name: 'Charlie', age: 30 }, ]; console.log(sortByField(data, 'age')); // 按年龄升序 console.log(sortByField(data, 'age', false)); // 按年龄降序