javascript - 为 noUiSlider 构建动态 Javascript 对象

Question

我正在尝试在 JavaScript 中动态为我的 noUiSlider range 属性构建一个对象。创建基于步骤的范围 slider 需要一个 min 值和一个 max 值，并且两者之间的所有值都应该是项目总值(value)的百分比。以下示例将创建一个具有 3 个步长的范围 slider :1、5 和 10。

range: {
    'min': 1,
    '50%': 5,
    'max': 10
}

我的数据如下:

[
  {width: "1"},
  {width: "1.5"},
  {width: "2"},
  {width: "3"},
  {width: "4"}
]

该数组可以是任意数量的宽度。对于传入的数据，我需要将其格式化为范围 slider 接受的对象。与此类似的东西:

{                       {
    'min': 1,               'min': 1,
    '25%': 1.5,             '16.66%': 1.5,
    '50%': 2,      OR       '33.32%': 2,
    '75%': 3,               '49.97%': 3,
    'max': 4                '66.66%': 4,
}                           '83.32%': 5,
                            'max': 6
                        }

key 值必须包含一个 min 值作为第一项，并包含一个 max 值作为最后一项。其余键必须根据 width 数组中的项目数计算为百分比，并且值将是数组的 width 值。

我尝试使用以下代码创建 obj，但不知道如何将第一个和最后一个键值设置为 min 和 max

function toObject(arr) {
    var obj = {};
    for (var i = 0; i < arr.length; ++i)
        if (arr[i] !== undefined) obj[i*10] = arr[i];
    return obj;
}

Answer 1

在迭代时检查剩余元素怎么样:

function toObject(arr) {
    var obj = {};
    for (var i = 0; i < arr.length; ++i) {
        var remaining = arr.length - i;
        if (arr[i] !== undefined) {
            if (remaining == arr.length) {
                obj['min'] = arr[i].width;
            }
            else if (remaining === 1) {
                obj['max'] = arr[i].width;
            }
            else {
                obj[(i*10).toString()] = arr[i].width;
            }
        }
    }
    return obj;
}

来自控制台的测试:

>var a = [
  {width: "1"},
  {width: "1.5"},
  {width: "2"},
  {width: "3"},
  {width: "4"}
];
>
>toObject(a)
{10: "1.5", 20: "2", 30: "3", min: "1", max: "4"}