如何将JS/AngularJS数组重构为后端要求的指定格式？

嘿，这个需求用原生JS的数组方法就能非常优雅地解决，不管是普通JS还是AngularJS场景都适用，咱们直接看实现：

原生JS实现 #

首先用map遍历原始数组的每个leader对象，同时对每个leader的sites数组做过滤+提取操作：

// 原始输入数组
const originalLeaders = [
  { email: 'name@domain.io', sites: [ { name: 'Test', sitemeta_id: 'xxxxxxxxx', _checked: true }, { name: 'Test 2', sitemeta_id: 'xxxxxxxx', _checked: true } ], focused: false, _sitesChecked: 1 },
  { email: 'dog@gmail.com', sites: [ { name: 'Some Name', sitemeta_id: 'xxxxx', _checked: true }, { name: 'Names', sitemeta_id: 'xxxxxxxx' } ], focused: false, _sitesChecked: 2 }
];

// 转换逻辑
const transformedLeaders = originalLeaders.map(leader => ({
  email: leader.email,
  sites: leader.sites
    // 第一步：过滤出_checked为true的站点
    .filter(site => site._checked === true)
    // 第二步：提取这些站点的name属性，组成新数组
    .map(site => site.name)
}));

console.log(transformedLeaders);

这段代码的逻辑清晰明了：

• ✅ map负责重构每个leader的结构，只保留我们需要的email和处理后的sites
• ✅ filter精准筛选出已勾选的站点，自动排除像"Names"这种_checked不存在或为false的项
• ✅ 最后用map提取站点名称，完全匹配目标格式

AngularJS场景下的实现 #

AngularJS本身基于原生JS，所以逻辑完全一致，只是通常会放在控制器里：

angular.module('yourAppName').controller('LeaderFormController', function($scope) {
  // 假设这是表单提交后返回的原始leaders数组
  $scope.originalLeaders = [
    { email: 'name@domain.io', sites: [ { name: 'Test', sitemeta_id: 'xxxxxxxxx', _checked: true }, { name: 'Test 2', sitemeta_id: 'xxxxxxxx', _checked: true } ], focused: false, _sitesChecked: 1 },
    { email: 'dog@gmail.com', sites: [ { name: 'Some Name', sitemeta_id: 'xxxxx', _checked: true }, { name: 'Names', sitemeta_id: 'xxxxxxxx' } ], focused: false, _sitesChecked: 2 }
  ];

  // 转换为后端需要的格式
  $scope.processedLeaders = $scope.originalLeaders.map(leader => ({
    email: leader.email,
    sites: leader.sites
      .filter(site => site._checked === true)
      .map(site => site.name)
  }));
});

为什么这是最优方式？ #

• 简洁易读：函数式编程风格，每一步操作的意图明确，后续维护起来很方便
• 性能优异：使用原生数组方法，比手动for循环更高效，也不需要额外依赖
• 精准匹配需求：自动忽略不需要的属性（比如focused、_sitesChecked），同时严格过滤未勾选的站点

内容的提问来源于stack exchange，提问作者Edgar Quintero