Question

我想从我拥有的结构中生成几条SVG折线：

data = [item0, item1, ...., item50]
item0 = {y1: 10, y2: 100, ...[other properties]...}
item1 = {y1: 1000, y2: 50, ...}
item2 = {y1: 500, y2: 40, ...}

因此，结构是一个项目数组，其中一个项目具有多个Y值。通过迭代结构（x * 10）来确定x值。

输出应该是每个＆＃34; y＆＃34;的字符串，如下所示：＆＃34; x0，y1 [0] x1，y1 [1] x2，y1 [2] ...＆＃ 34;

polyLine1 = "0,10 10,100 20,500..."
polyLine2 = "0,1000 10,50 20,40 ..."

我可以使用underscore.js或类似的东西：

polyLine1 = "";
_.each (data, function(item, index){
    polyLine1 += "" + index*10 + "," + item.y1
}
polyLine2 = "";
_.each (data, function(item, index){
    polyLine2 += "" + index*10 + "," + item.y2
}

我正在寻找的是使用lambda / arrow语法初始化完整输出结构的更智能方法：

this.polyLines = {
    polyLine1 = ...,// iterate data, pick y1 property, map x and y, reduce/join to a string
    polyLine2 = ...,
}

作为参考，我使用TypeScript和Ionic2（Angular2）。我知道我可以使用模板绑定（这可能会更慢，更不易读），但我只是想学习。

Answer 1

这产生了我认为你正在寻找的东西。基本上，reduce（来自ES5.1）就是你想要的。我使用ES6中的lambdas（arrow functions）和template literals，以及来自ES5.1的String.prototype.trim()和Object.keys()。

＆＃13;

let data = [{
  y1: 10,
  y2: 100
}, {
  y1: 1000,
  y2: 50
}]
let keyReduction = (b) => Object.keys(b).reduce((c, d, x) => c += `${x*10} ${b[d]} `, "");
let polyLines = data.reduce((a, b, i) => {
  a[`polyLine${i+1}`] = keyReduction(b).trim();
  return a;
}, {});
console.log(JSON.stringify(polyLines))

＆＃13;

我不确定这些是否适用于折线，因为我没有做任何SVG，但我确定你可以根据自己的需要进行调整。

看起来你需要逗号。您可以使用逗号执行相同的代码：

＆＃13;

let data = [{
  y1: 10,
  y2: 100
}, {
  y1: 1000,
  y2: 50
}]
let keyReduction = (b) => Object.keys(b).reduce((c, d, x) => c += `${x*10},${b[d]} `, "");
let polyLines = data.reduce((a, b, i) => {
  a[`polyLine${i+1}`] = keyReduction(b).trim();
  return a;
}, {});
console.log(JSON.stringify(polyLines))

＆＃13;

这是另一个例子，将每个属性名称分解为最终输出的单独属性：

＆＃13;

let data = [{
  y1: 10,
  y2: 100
}, {
  y1: 1000,
  y2: 50
}]
let polyLines = data.reduce((a, b, i) => {
  Object.keys(b).forEach((k) => {
    a[k] = (a[k] || "") + (i * 10) + "," + b[k] + " ";
    });
  return a;
}, {});
console.log(JSON.stringify(polyLines))

＆＃13;

ES6 / TypeScript从数组生成折线的方法

1 个答案: