array.map(callback(currentValue, index, array), thisArg)

// 創(chuàng)建一個新的數組，其中每個元素是一個對象，包含訂單的 id、訂單總金額、訂單日期以及基于總金額計算的稅費
// 其中如果總金額小于1000，則稅費為總金額的10%，否則為100
 
// 示例訂單數組
const orders = [
  { id: 1, date: '2023-04-01', items: [{ name: 'Item1', price: 100, quantity: 2 }], shipping: 50 },
  { id: 2, date: '2023-04-02', items: [{ name: 'Item2', price: 200, quantity: 1 }], shipping: 30 },
  // ... 更多訂單
];
 
// 稅費計算函數
function calculateTax(totalAmount) {
  return totalAmount < 1000 ? totalAmount * 0.1 : 100;
}
 
// 創(chuàng)建新數組，包含每個訂單的id, 總金額, 訂單日期和稅費
const orderDetails = orders.map(order => {
  const totalAmount = order.items.reduce((sum, item) => sum + item.price * item.quantity, 0);
  const tax = calculateTax(totalAmount);
  return {
    id: order.id,
    totalAmount: totalAmount + order.shipping + tax, // 包括運費和稅費的最終總金額
    date: order.date,
    tax: tax
  };
});
 
console.log(orderDetails);
 
 
// 輸出：
[
  {
    id: 1,
    totalAmount: 300, // 100 * 2 (items) + 50 (shipping) + 20 (tax)
    date: '2023-04-01',
    tax: 20
  },
  {
    id: 2,
    totalAmount: 330, // 200 * 1 (item) + 30 (shipping) + 30 (tax)
    date: '2023-04-02',
    tax: 30
  },
  // ... 更多訂單詳情
]

// 有一個員工信息的數組，每個員工對象包含 name、age 和 salary。我們想要創(chuàng)建一個新的數組，其中只包含年齡超過30歲的員工的姓名和工資。
 
const employees = [
  { name: 'Alice', age: 25, salary: 70000 },
  { name: 'Bob', age: 32, salary: 80000 },
  { name: 'Charlie', age: 35, salary: 90000 },
  { name: 'David', age: 22, salary: 60000 }
];
 
const olderEmployees = employees
  .filter(employee => employee.age > 30) // 篩選年齡超過30歲的員工
  .map(employee => ({
    name: employee.name,
    salary: employee.salary
  })); // 創(chuàng)建新數組，只包含姓名和工資
 
console.log(olderEmployees);
 
// 輸出：
[
  { name: 'Bob', salary: 80000 },
  { name: 'Charlie', salary: 90000 }
]

//有一個用戶信息的數組，每個用戶對象包含 id、name 和 isActive。我們想要獲取所有活躍用戶的姓名，并按照字母順序排序
 
const users = [
  { id: 1, name: 'Alice', isActive: true },
  { id: 2, name: 'Bob', isActive: false },
  { id: 3, name: 'Charlie', isActive: true },
  { id: 4, name: 'David', isActive: true }
];
 
const activeUserNames = users
  .filter(user => user.isActive) // 篩選活躍用戶
  .map(user => user.name) // 獲取用戶名
  .sort(); // 按照字母順序排序
 
console.log(activeUserNames);
 
 
// 輸出：
// ['Alice', 'Charlie', 'David']

// 有一個用戶列表，每個用戶都有一個異步函數 fetchUserData 來獲取用戶的詳細信息。我們想要獲取所有用戶的詳細信息，并對結果進行處理。
 
const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  // ... 更多用戶
];
 
// 模擬異步獲取用戶詳細信息的函數
const fetchUserData = userId => 
  new Promise(resolve => setTimeout(() => resolve(`Data for user ${userId}`), 1000));
 
// 使用 map() 和 Promise.all() 處理異步數據流
const fetchAllUserData = users.map(user =>
  fetchUserData(user.id).then(data => ({ ...user, details: data }))
);
 
Promise.all(fetchAllUserData).then(usersWithData => {
  console.log(usersWithData); // 輸出處理后包含每個用戶詳細信息的數組
});

// 需要從不同的API端點獲取數據，并將這些數據匯總到一個數組中。
 
const apiEndpoints = [
  'https://api.example.com/data1',
  'https://api.example.com/data2',
  // ... 更多API端點
];
 
// 模擬異步API請求
const fetchDataFromApi = url => 
  new Promise(resolve => setTimeout(() => resolve(`Data from ${url}`), 500));
 
// 使用 map() 來對每個API端點發(fā)起請求
const fetchAllData = apiEndpoints.map(endpoint =>
  fetchDataFromApi(endpoint)
);
 
Promise.all(fetchAllData).then(allData => {
  console.log(allData); // 輸出包含所有API請求結果的數組
});

// 假設我們有一個用戶列表，我們想要為每個用戶創(chuàng)建一個列表項并將其添加到頁面上的一個列表中。
 
const users = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  // ... 更多用戶
];
 
// 選擇頁面上的列表元素
const userList = document.getElementById('user-list');
 
// 使用 map() 生成每個用戶的列表項
const listItems = users.map(user => {
  const li = document.createElement('li');
  li.textContent = `User ${user.name}`;
  return li;
});
 
// 將所有列表項添加到列表中
listItems.forEach(item => userList.appendChild(item));

// 假設我們有一個商品列表，我們想要根據用戶的搜索輸入來過濾商品。
 
const products = [
  { id: 1, name: 'Apple', category: 'Fruits' },
  { id: 2, name: 'Banana', category: 'Fruits' },
  // ... 更多商品
];
 
// 用戶輸入的搜索關鍵詞
const searchQuery = 'Apple';
 
// 使用 map() 和 filter() 進行搜索和過濾
const filteredProducts = products
  .filter(product => product.name.includes(searchQuery))
  .map(product => ({
    id: product.id,
    name: product.name,
    // 其他需要展示的信息
  }));
 
console.log(filteredProducts); // 輸出匹配搜索關鍵詞的商品列表