为 noUiSlider 构建动态 Javascript 对象

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 数组中的项目数计算为百分比，并且值为 width 数组的值。

我尝试使用以下代码创建对象，但不知道如何将第一个和最后一个键值设置为 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 对象

Building Dynamic Javascript Object for noUiSlider

javascript

arrays

jquery

object

nouislider