ES6/Машинопись способ создания полилинии из массива

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", как это: "х0, у1 [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 
} 

Что я ищу это более разумный способ для инициализации полную структуру вывода с помощью лямбда/стрелка синтаксис:

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) - это то, что вы хотите. Я использую lambdas (arrow functions) и template literals от ES6, а также String.prototype.trim() и 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))