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/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 (from ES5.1) is what you want. I'm using lambdas (arrow functions) and template literals from ES6, along with String.prototype.trim() and Object.keys() 来自 ES5.1.

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

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

ES6/TypeScript way to generate a polyline from an array

svg

polyline

typescript