为什么 .split() 函数不能与 vue.js 2 一起使用？

Question

我正在使用vue.js构建我的第一个应用程序，但我不知道为什么我的首选JavaScript函数不起作用。

我正在导入一个 JSON 文件并尝试从中构建一个geojson对象。为此，我需要将其latlong字符串拆分(例如 latlon:"52.3723138,0.4903593" ( 变成一个数字数组，如 [52.3, 0.49] 。 String.split()似乎是显而易见的功能，但它在这种环境中不起作用。

json 文件具有以下结构：

{ affiliates: [  ] }

我将 JSON 附属数组作为数据参数传递给 makeGeoJson 函数。

这是我正在尝试的代码：

makeGeoJson(data) {
  var geoJsonFeatures = [];
  data.forEach(function(gym) {
    var feature = {
      "type": "Feature",
      "properties": gym,
      "geometry": {
        "type": "Point",
        "coordinates": [parseFloat(gym.latlon.split(",")[0]), parseFloat(gym.latlon.split(",")[1])]
      }
    };
    geoJsonFeatures.push(feature);
  });
},

我得到的错误说

TypeError: Cannot read property 'split' of undefined
    at eval (eval at 50 (http://localhost:8080/0.9506ad4988fb1af5b77e.hot-update.js:7:1), <anonymous>:47:37)

我正在使用 Vue.js 2.2 并使用 vue-cli 来设置它。

这与为什么我也无法在同一函数中将数据推送到数组有关吗？

Answer 1

TypeError: Cannot read property 'split' of undefined表示属性gym.latlon不存在。这并不是说拆分没有按预期工作或拆分不存在。这正是您无法推送数据的原因。一旦抛出错误，它就会向上传播堆栈，直到它被捕获到某个地方，所以它会短路你的整个函数。

// Error gets propagated to the caller of this function and beyond
// if you never handle it.
makeGeoJson(data) {
  var geoJsonFeatures = [];
  data.forEach(function(gym) {
    var feature = {
      "type": "Feature",
      "properties": gym,
      "geometry": {
        "type": "Point",
        // Throws here, so you get here once and never get past it.
        // gym.latlon does not exist. Double check property name and
        // object structure.
        "coordinates": [parseFloat(gym.latlon.split(",")[0]), parseFloat(gym.latlon.split(",")[1])]
      }
    };
    // You never get here.
    geoJsonFeatures.push(feature);
  });
},

正如其他人指出的那样，登录gym，您会发现 out 没有属性latlon .

此外，您可以做的另一个不错的语法操作来避免将字符串拆分两次(一旦您拥有预期的对象(：

gym.latlon.split(",").map(function (point) {
  return parseFloat(point);
})

Answer 2

您的数据可能与预期不符。我会放一个控制台.log((检查：

var geoJsonFeatures = [];
data.forEach(function(gym) {
    console.log(gym);
    var feature = {

此外，当您遇到此类错误时，您的脚本将不会继续，因此您的推送逻辑将无法访问。