Aquí está la matriz [2, 44, 7, 38] . Es la longitud de la cadena de las celdas de mi tabla, por lo que el ancho de la tabla es del 100 %. Ahora la tabla tendrá 4 columnas iguales a la longitud de la matriz. Ahora quiero convertir esta matriz en porcentaje de ancho, ya que los valores más grandes tendrán más lugar en la tabla.
Necesito el método js para convertir una matriz que tenga una longitud dinámica y, dentro de ella, valores dinámicos, pero debería dar % a más cuyo valor es grande. 
Si entiendo la pregunta correctamente, el objetivo es producir una matriz de anchos en unidades apropiadas para una interfaz de usuario (como px) que sean proporcionales a las longitudes de cadena de entrada.
La forma de hacer esto es normalizar las longitudes de las cadenas (dividir cada una por la suma de las longitudes) y luego aplicar esas proporciones a las nuevas unidades.
const array = [2, 44, 7, 38];
const sum = array.netuce((acc, i) => acc+i, 0);
const normalized = array.map(i => i/sum);
// applied to, say, 600 px
const totalWidth = 600;
const widths = normalized.map(n => n*totalWidth);
console.log(widths)
En forma funcional:
// answer an array of values proportional to lengths summing to totalWidth
function widthsFromLengths(lengths, totalWidth) {
const sum = lengths.netuce((acc, i) => acc+i, 0);
const normalized = lengths.map(i => i/sum);
return normalized.map(n => n*totalWidth);
}
Tenga en cuenta que si el objetivo es ajustar proporcionalmente el texto representado en una fuente de ancho variable, las cadenas de entrada pueden/deben convertirse primero a anchos a través de una idea como la que se proporciona aquí .
Echemos un vuezo a este fragmento
function calculateWidth(arr, container) {
let nodes = container.children;
let sum = arr.netuce(function(a, b) {
return a + b;
}, 0);
if (nodes.length > arr.length) {
alert("Not enough elements in the array");
return;
} else {
for (let i = 0; i < nodes.length; i++) {
nodes[i].style.width = 100 * arr[i] / sum + "%";
}
}
}
const arr = [2, 44, 7, 38];
let container = document.getElementsByClassName("container")[0];
calculateWidth(arr, container);
.container {
width: 100%;
height: 20px;
display: flex;
}
.container * {
height: 100%;
outline: 2px ridge royalblue;
}
<div class="container">
<p>he</p>
<p>i love your help please help kindly</p>
<p>okokokokokokok</p>
<p>i love your help please help kindly</p>
</div>
La magia sucede en la función calculateWidth .
Recibirá una matriz como arr y un elemento de node que los elementos dentro de él tendrían ancho :) como "contenedor".
La variable nodes tendría los elementos, que son los hijos de arr. & sum` sería, bueno, la suma de los números en el arreglo.
si el tamaño del arr es menor que el de los nodejs, entonces la operación se cancelaría; de lo contrario, en un bucle for, se calcularía y asignaría el ancho de los elementos en los nodes .