分享在日常开发中常用的ES6知识点【面试常考】

前言

在日常的业务开发中，可以熟悉运用掌握的知识点快速解决问题很重要。这篇分享JS相关的知识点，主要就是对数据的处理。

注意：本篇分享的知识点，只是起到一个抛砖引玉的作用，详情的使用和更多的ES6知识点还请参考官网。

1. 箭头函数

• 特点：简洁语法，不绑定 this、arguments。
• 应用场景：回调函数、数组方法（如 map、filter）。

// 传统函数
const list = [1, 2, 3];
const doubled = list.map(function(num) {
  return num * 2;
});

// 箭头函数
const doubledES6 = list.map(num => num * 2);

// 管理系统中过滤数据
const users = [
  { id: 1, name: "Alice", status: "active" },
  { id: 2, name: "Bob", status: "inactive" }
];

const activeUsers = users.filter(user => user.status === "active");

2. 解构赋值

• 特点：从数组或对象中提取值并赋值给变量。
• 应用场景：提取列表项属性、参数解构。

// 数组解构
const [first, second] = ["Apple", "Banana"];
console.log(first); // "Apple"

// 对象解构
const { name, age } = { name: "Alice", age: 30, role: "Admin" };
console.log(name); // "Alice"

// 管理系统中提取表格行数据
const renderUserRow = ({ id, name, email }) => {
  return `<tr>
    <td>${id}</td>
    <td>${name}</td>
    <td>${email}</td>
  </tr>`;
};

3. 扩展运算符

• 特点：展开数组或对象。
• 应用场景：合并列表、复制数据、传递参数。

// 合并数组
const arr1 = [1, 2];
const arr2 = [...arr1, 3, 4]; // [1, 2, 3, 4]

// 复制对象
const user = { name: "Alice" };
const newUser = { ...user, age: 30 }; // { name: "Alice", age: 30 }

// 管理系统中更新列表项
const updateUser = (users, userId, updates) => {
  return users.map(user => 
    user.id === userId ? { ...user, ...updates } : user
  );
};

4. 数组方法

• 常用方法：map、filter、reduce、find、findIndex、some、every。
• 应用场景：数据筛选、转换、聚合。

// map：转换数据格式
const users = [
  { id: 1, name: "Alice" },
  { id: 2, name: "Bob" }
];
const userNames = users.map(user => user.name); // ["Alice", "Bob"]

// filter：筛选数据
const activeUsers = users.filter(user => user.status === "active");

// reduce：计算总和
const total = [1, 2, 3].reduce((sum, num) => sum + num, 0); // 6

// find：查找单个元素
const user = users.find(user => user.id === 1);

// 管理系统中计算总价
const products = [
  { id: 1, price: 10, quantity: 2 },
  { id: 2, price: 20, quantity: 1 }
];
const totalPrice = products.reduce(
  (sum, product) => sum + product.price * product.quantity,
  0
); // 40

5. 模板字符串

• 特点：支持嵌入表达式、多行字符串。
• 应用场景：动态生成 HTML 模板、拼接字符串。

// 基本用法
const name = "Alice";
const greeting = `Hello, ${name}!`; // "Hello, Alice!"

// 多行字符串
const html = `
  <div class="user">
    <h2>${name}</h2>
    <p>Age: ${age}</p>
  </div>
`;

// 管理系统中动态生成表格行
const renderTable = (users) => {
  return `
    <table>
      ${users.map(user => `
        <tr>
          <td>${user.id}</td>
          <td>${user.name}</td>
        </tr>
      `).join("")}
    </table>
  `;
};

6. Promise 与 async/await

• 特点：处理异步操作，避免回调地狱。
• 应用场景：列表数据的异步加载、分页。

// Promise 链式调用
fetchUsers()
  .then(users => filterActiveUsers(users))
  .then(activeUsers => displayUsers(activeUsers))
  .catch(error => console.error(error));

// async/await 写法
async function loadUsers() {
  try {
    const users = await fetchUsers();
    const activeUsers = filterActiveUsers(users);
    displayUsers(activeUsers);
  } catch (error) {
    console.error(error);
  }
}

// 管理系统中分页加载数据
async function loadPage(pageNumber) {
  const response = await fetch(`/api/users?page=${pageNumber}`);
  const { data, totalPages } = await response.json();
  return { data, totalPages };
}

7. 解构赋值与默认值

• 特点：支持设置默认值，避免 undefined 错误。
• 应用场景：处理列表数据中的缺失字段。

// 对象解构默认值
const { name = "Guest", age = 18 } = { name: "Alice" };
console.log(age); // 18

// 函数参数解构默认值
const displayUser = ({ name = "Guest", age = 18 } = {}) => {
  console.log(`${name} (${age})`);
};

displayUser({ name: "Bob" }); // "Bob (18)"
displayUser(); // "Guest (18)"

// 管理系统中处理API返回的不完整数据
const formatUser = (user) => {
  const { id, name = "Unnamed", status = "inactive" } = user;
  return `${id}: ${name} (${status})`;
};

8. Set 与 Map 数据结构

8.1 Set

基本概念

• 定义：Set 是一种无序且唯一的数据集合，类似于数组，但成员值都是唯一的。
• 特点：
  • 不允许重复值（自动去重）。
  • 可以存储任意类型的值（包括 NaN 和 undefined）。
  • 基于 SameValueZero 算法判断相等性（NaN 被视为与自身相等）。

常用方法

// 创建 Set
const set = new Set([1, 2, 2, 3]); // Set(3) {1, 2, 3}

// 添加元素
set.add(4); // Set(4) {1, 2, 3, 4}

// 判断元素是否存在
set.has(2); // true

// 删除元素
set.delete(3); // Set(3) {1, 2, 4}

// 获取大小
set.size; // 3

// 清空 Set
set.clear(); // Set(0) {}

// 遍历 Set
set.forEach(value => console.log(value));
for (const value of set) {
  console.log(value);
}

应用场景 

• 数组去重

const numbers = [1, 2, 2, 3, 3, 3];
const uniqueNumbers = [...new Set(numbers)]; // [1, 2, 3]

• 管理系统中的权限控制 

// 用户权限集合
const userPermissions = new Set(["view", "edit", "delete"]);

// 检查用户是否有某个权限
const hasPermission = (permission) => userPermissions.has(permission);

// 添加新权限
userPermissions.add("export");

// 移除权限
userPermissions.delete("delete");

• 统计列表中唯一元素的数量

// 统计活跃用户的唯一部门
const departments = users.map(user => user.department);
const uniqueDepartments = new Set(departments);
console.log(`共有 ${uniqueDepartments.size} 个不同部门`);

8.2 Map

基本概念

• 定义：Map 是一种键值对的集合，类似于对象，但键可以是任意类型（不限于字符串）。
• 特点：
  • 键的类型可以是任意值（对象、函数、基本类型等）。
  • 保持插入顺序（迭代时按插入顺序返回）。
  • 提供了直接操作键值对的方法（如 get、set、has）。

常用方法

// 创建 Map
const map = new Map([
  ["name", "Alice"],
  [1, "one"],
  [true, "yes"]
]);

// 设置键值对
map.set("age", 30);

// 获取值
map.get("name"); // "Alice"

// 判断键是否存在
map.has(1); // true

// 删除键值对
map.delete("age");

// 获取大小
map.size; // 3

// 清空 Map
map.clear();

// 遍历 Map
map.forEach((value, key) => console.log(key, value));
for (const [key, value] of map) {
  console.log(key, value);
}

应用场景

• 管理系统中的数据索引

// 用户 ID 到用户对象的映射
const userMap = new Map(users.map(user => [user.id, user]));

// 快速查找用户
const getUserById = (id) => userMap.get(id); // O(1) 时间复杂度

// 更新用户信息
const updateUser = (id, updates) => {
  const user = userMap.get(id);
  if (user) {
    userMap.set(id, { ...user, ...updates });
  }
};

9.小结

如果你认为es6有哪些知识点适用于日常的开发，欢迎在评论区和大家一起分享！