前言

在日常的業務開發中，可以熟悉運用掌握的知識點快速解決問題很重要。這篇分享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有哪些知識點適用于日常的開發，歡迎在評論區和大家一起分享！