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

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 值是通过迭代结构 (x*10) 来确定的。

每个“y”的输出应该是一个字符串，像这样：“x0,y1[0] x1,y1[1] x2,y1[2]...”

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/箭头语法初始化完整的输出结构：

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()。

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))

我不确定这些是否适用于折线，因为我没有做过任何 SVG，但我相信您可以对其进行调整以满足您的需求。

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

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))

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

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))