Question

我正在尝试在JavaScript中动态地为我的noUiSlider范围属性构建一个对象。创建基于步骤的范围滑块需要min和max值，并且其间的所有值都应该是项目总值的百分比。以下示例将创建一个范围滑块，包含3个步骤，1,5和10。

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

我的数据如下：

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

此数组可以是任意数量的widths。使用我的传入数据，我需要将其格式化为我的范围滑块接受的对象。类似的东西：

{                       {
    '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。

我尝试使用以下代码创建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"}

为noUiSlider构建动态Javascript对象

1 个答案: