使用.map()和解构赋值，优雅地提取作为数组项的对象的部分属性

.map() 介绍

• map 方法是数组原型上的方法（Array.prototype.map()）
• 语法：

  let result = arr.map(function(item, index, array) { return newItem }); 
  
  let result = arr.map((item, index, array) => { return newItem }); // 使用ES6箭头函数
  

  • map 方法对数组中的每个元素都调用上述函数，每个元素调用函数后都有一个返回值，这些返回值组成数组，成为 map 方法最终的返回数组

解构赋值介绍

此处仅介绍对象的解构赋值，不介绍数组的解构赋值

• 解构赋值是 ES6 引入的新语法，用来从数组和对象中提取值，并优雅地对变量进行赋值

  • 解构赋值进行了两个工作，一个是提取，一个是创建变量并赋值

• 提取：通过属性名的对应进行有选择地提取

  let options = { title: "Menu", width: 100, height: 200 }; // 创建对象
  let {title, height} = options; // 只提取 title 和 height ，不提取 width
  

  • 只创建了 title 和 height 变量，width 变量并没有被创建
  • height 的值为 200 ，而不是 100

• 重新命名新变量的名字：通过“冒号”的语法对创建的变量重命名

  let {title: name, height: h} = options; 
  

  • 此处并没有创建 title 和 height，而是创建了 name 和 h 变量，值分别为 "Menu" 和 200

ES6 对象字面量声明

• 还需要了解在通过函数声明对象字面量的简洁语法，进一步简化最终的代码
• ES6 语法：

  const student = (name, id) => ({name, id});
  

  • 只需要写一次 name，解释器会自动转换为 name: name

优雅地提取作为数组项的对象的部分属性

• 场景设置：
  • 用数组储存三个对象
  • 每个对象对应一个网络小组
  • 对象具有三个属性，分别是网络小组的名字、人数、成立时间
  • 现在仅需提取网络小组的人数和成立时间
• 设置 webGroup 数组：

  const webGroup = [
      {
          name: "Fitness",
          member: 10445,
          birthday: "2022-07-01"
      },
      {
          name: "No crush",
          member: 16898,
          birthday: "2022-09-19"
      },
      {
          name: "Lettuce",
          member: 5105,
          birthday: "2020-06-27"
      }
  ];
  

• 提取：

  const numday = webGroup.map(({ member: num, birthday: day }) => ({ num, day}));