Javascript - 从值数组中查找线段的长度

Question

I'm working on a project that requires me to parse an array of an array of values, and work out the length of the line segments.

The array that I have is in the form where each element is a tuple of (xCoordinate, yCoordinate) :

[[1.4,2.8],[2.3,2.2],[3.2,1.6],[3.8,1.1]]

I would like to calculate the length of the line segment between, say, array element 1 (1.4,2.8) and 2 (2.3,2.2) , then 2 and 3, 3 and 4, etc. Also I want to avoid for-loops if possible, to try to enhance my knowledge of functional programming, coming from a Java background.

I am aware that I probably have to parse in both values into a map function, and perform a calculation like sqrt((y2-y1)^2+(x2-x1)^2))

I have an xyDistance() function written:

function xyDistance(from,to){
    var xy=from.split(",");
    var x1=xy[0];
    var y1=xy[1];
     
    var xy=to.split(",");
    var x2=xy[0];
    var y2=xy[1];
    var dt = Math.sqrt((x2-x1)**2+(y2-y1)**2);
    return dt;
}

Which seems to work fine, when I manually enter the co-ordinates. Then I imagine I want something like

var map = arr.map(arr[x] => xyDistance(arr[x],arr[x+1]))

But this throws errors.

Answer 1

You can use Array#slice to remove the last element and then use Array#map along with Math.hypot to find the distance between adjacent line segments.

 const arr = [[1.4,2.8],[2.3,2.2],[3.2,1.6],[3.8,1.1]]; const res = arr.slice(0, -1).map(([x, y], idx)=>Math.hypot(x - arr[idx + 1][0], y - arr[idx + 1][1])); console.log(res);

Answer 2

First of all, your expression has syntax error:

var map = arr.map(arr[x] => xyDistance(arr[x],arr[x+1]))

Should be corrected as:

var map = arr.map((element, x) => xyDistance(arr[x], arr[x+1]))

Noted that when you have n elements, you only get n - 1 distance. That's why iota's answer slice off the last element before calling Array#map .

var map = arr.slice(0, -1).map((element, x) => xyDistance(arr[x], arr[x + 1]))

Second part of your problem is that xyDistance function needs some fix. Apparently the elements in your array are strings, not tuple. You've given misleading example code in your post. So in order to parse those string elements into tuple of numbers, you need to cast string type to number type:

function xyDistance(from,to){
    var xy=from.split(",");
    // trim any excessive whitespaces, then convert to number type:
    var x1=Number(xy[0].trim());
    var y1=Number(xy[1].trim());
     
    var xy=to.split(",");
    var x2=Number(xy[0].trim());
    var y2=Number(xy[1].trim());
    var dt = Math.sqrt((x2-x1)**2+(y2-y1)**2);
    return dt;
}

And you're good to go now.