分享一些你可能还没使用的 JavaScript 技巧

// 使用filter和map方法来筛选奇数并计算它们的平方
console.time("filterAndMap"); // 启动性能计时器

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 使用filter方法筛选出奇数
const oddNumbers = numbers.filter(num => num % 2 !== 0);

// 使用map方法计算奇数的平方
const squaredOddNumbers = oddNumbers.map(num => num * num);

console.log(squaredOddNumbers); // 输出平方后的奇数数组：[1, 9, 25, 49, 81]

console.timeEnd("filterAndMap"); // 停止性能计时器并输出执行时间

// 启动性能计时器
console.time("filterAndMap");

// 原始数组
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

// 使用 flatMap 方法筛选出奇数并计算其平方
const squaredOddNumbers = numbers.flatMap(num => 
    num % 2 !== 0 ? [num * num] : []
);

// 输出平方后的奇数数组：[1, 9, 25, 49, 81]
console.log(squaredOddNumbers);

// 停止性能计时器并输出执行时间
console.timeEnd("filterAndMap");

// 对原始数组进行升序排序
numbers.sort((a, b) => a - b)

// 筛选出数组中的奇数
.filter((n) => n % 2 !== 0)

// 计算奇数的立方值
.map((n) => n ** 3);

// 原始数组
const numbers = [9, 3, 6, 4, 8, 1, 2, 5, 7];

// 筛选出数组中的奇数
numbers.filter((n) => n % 2 !== 0)

// 对筛选后的奇数进行升序排序
.sort((a, b) => a - b)

// 计算排序后的奇数的立方值
.map((n) => n ** 3);

// 发送HTTP GET请求以获取位于指定URL的待办事项数据
fetch("https://jsonplaceholder.typicode.com/todos/")
  .then(res => res.json()) // 解析响应数据为JSON格式
  .then(todos => {
    
    // 使用Map数据结构来将待办事项按用户ID分组
    const todosForUserMap = {}; // 创建一个空对象，用于存储按用户ID分组的待办事项

    todos.forEach(todo => {
      // 遍历待办事项数组，并根据用户ID将它们分组

      if (todosForUserMap[todo.userId]) {
        // 如果已存在具有相同用户ID的待办事项数组，则将当前待办事项添加到数组中
        todosForUserMap[todo.userId].push(todo);
      } else {
        // 如果还没有该用户ID的待办事项数组，创建一个新的数组并添加当前待办事项
        todosForUserMap[todo.userId] = [todo];
      }
    });

    // 输出按用户ID分组的待办事项数据
    console.log(todosForUserMap);
  })

// 发送HTTP GET请求以获取位于指定URL的待办事项数据
fetch("https://jsonplaceholder.typicode.com/todos/")
  .then(res => res.json()) // 解析响应数据为JSON格式
  .then(todos => {
    
    // 使用Map数据结构来将待办事项按用户ID分组
    const todosForUserMap = todos.reduce((accumulator, todo) => {
      // 如果累加器中已经存在具有相同用户ID的条目，则将该待办事项添加到相应用户ID的数组中
      if (accumulator[todo.userId]) accumulator[todo.userId].push(todo);
      // 否则，在累加器中创建一个新的数组，并将待办事项添加到该数组中
      if (!accumulator[todo.userId]) accumulator[todo.userId] = [todo];
      return accumulator;
    }, {}); // 初始累加器为空对象

    // 输出按用户ID分组的待办事项数据
    console.log(todosForUserMap);
  })

// 异步生成器函数，用于获取产品数据
async function *fetchProducts(){
  while (true){
    const productUrl = "https://fakestoreapi.com/products?limit=2"; // 定义产品数据的API URL，限制每次获取2个产品
    const res = await fetch(productUrl); // 发送HTTP请求，等待响应
    const data = await res.json(); // 解析响应数据为JSON格式
    yield data; // 通过生成器返回数据

    // 在此处可以操作用户界面（UI）
    // 或将数据保存到数据库或其他地方
    // 可以将其用作副作用的地方
    // 即使某些条件满足，也可以中断数据流
  }
}

async function main() {
  const itr = fetchProducts(); // 调用fetchProducts()函数以获取产品数据的生成器对象
  // 这应该根据用户交互或其他策略来调用
  // 避免无限加载数据
  console.log( await itr.next() ); // 输出生成器的下一个数据项
}

return main(); // 执行main()函数

async function getUrl(userId, limit, category){
  return `https://fakestoreapi.com/products${category ? `/category/${category}` : ""}${limit ? Number(limit):""}${userId? Number(userId):""}`;    
}

// 构建URL的函数，接受三个参数：category（类别）、limit（数量限制）、userId（用户ID）
function constructURL(category, limit, userId) {
  // 基础URL
  const baseURL = "https://fakestoreapi.com/products";
  
  // 创建一个 URL 对象
  const url = new URL(baseURL);
  
  // 创建一个用于存储查询参数的 URLSearchParams 对象
  const params = new URLSearchParams();

  // 如果传入了 category 参数，将其添加到路径中
  if (category) url.pathname += `/category/${category}`;
  
  // 如果传入了 limit 参数，将其添加为查询参数
  if (limit) params.append('limit', Number(limit).toString());

  // 如果传入了 userId 参数，将其添加为查询参数
  if (userId) params.append('userId', Number(userId).toString());

  // 将查询参数添加到 URL 中
  url.search = params.toString();

  // 返回构建完成的 URL 字符串
  return url.toString();
}