如何用JavaScript/jQuery从已有数组生成目标结构数组？

现有如下格式的数组：

var locations = [
  {location: "40.749825, -73.090443"},
  {location: "42.743244, -71.594375"},
  {location: "37.058435, -74.903842"}
];

需要将其转换为如下结构的数组：

var routes = [{
  locations: [
    [40.749825, -73.090443],
    [42.743244, -71.594375],
    [37.058435, -74.903842]
  ],
  color: 'red',
  opacity: 1
}];

请问如何使用JavaScript/jQuery实现这一转换？

解决方案 #

原生JavaScript实现 #

利用数组的map方法遍历原数组，将每个location字符串分割并转换为数字数组，最后组合成目标结构：

var locations = [
  {location: "40.749825, -73.090443"},
  {location: "42.743244, -71.594375"},
  {location: "37.058435, -74.903842"}
];

var routes = [{
  locations: locations.map(item => {
    // 分割字符串、去除空格后转换为浮点数
    return item.location.split(',').map(coord => parseFloat(coord.trim()));
  }),
  color: 'red',
  opacity: 1
}];

jQuery实现 #

借助jQuery的$.map方法完成遍历转换，逻辑与原生一致：

var locations = [
  {location: "40.749825, -73.090443"},
  {location: "42.743244, -71.594375"},
  {location: "37.058435, -74.903842"}
];

var routes = [{
  locations: $.map(locations, function(item) {
    return [$.map(item.location.split(','), function(coord) {
      return parseFloat(coord.trim());
    })];
  }),
  color: 'red',
  opacity: 1
}];

关键步骤说明 #

• split(',')：将每个坐标字符串按逗号分割为两个子字符串
• trim()：去除坐标字符串两端的空格，避免转换数字时出现异常
• parseFloat()：将字符串格式的坐标转换为浮点数类型
• 最终将转换后的坐标数组集合，与指定的color、opacity字段组合成目标数组结构

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