Question

如何使用文本名称和值字典来设置对象的属性？例如......

我需要填充这个对象：

item = {};

使用这个值集合（注意一切都是字符串）：

values = [
    { id: 1, name: "a", value: "true" },
    { id: 2, name: "b", value: "false" },
    { id: 3, name: "c", value: "100" },
    { id: 4, name: "d", value: "me@nowhere.com" }
];

这样原始对象看起来像这样：

item = {
    a: true,
    b: false,
    c: 100,
    d: 'me@nowhere.com'
}

很抱歉这么模糊，但我不确定从哪里开始。

Answer 1

您需要迭代values，使用该数组中每个项的name属性的值作为键，并将value属性的值作为值：

var item = {}

values.forEach(function(i) {
  item[i.name] = i.value
})

Answer 2

您可以使用reduce（https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce）将数组（in）缩减为单个对象

values.reduce(function(a, b){ 
    a[b.name] = b.value; 
    return a ;
}, item)

Stack Snippet

＆＃13;

var values = [
    { id: 1, name: "a", value: "true" },
    { id: 2, name: "b", value: "false" },
    { id: 3, name: "c", value: "100" },
    { id: 4, name: "d", value: "me@nowhere.com" }
];
var item = {};

so.log(values.reduce(function(a, b){ a[b.name] = b.value; return a }, item));

＆＃13;

body {
   font-family: verdana;
   font-size: 10px;
}

＆＃13;

<div id="a"></div>
<script>
  var so = {
    log: function(e) {
       document.getElementById("a").innerText = JSON.stringify(e, null, '     ');
    }
  }
</script>

＆＃13;

如果您还想将字符串转换为适当的类型，这是一种基本的方法

values
    // convert the properties - note that this CHANGES the values array
    // if you don't want to do that precede this by a .slice() - creates a copy of values
    .map(function (e) {
        // check if the string is true of false
        if (e.value === "true" || e.value === "false")
            e.value = (e.value === "true");
        // check if number
        else if (!isNaN(e.value))
            e.value = Number(e.value);
        return e;
    })
    .reduce(function (a, b) {
        a[b.name] = b.value;
        return a;
    }, item)

Stack Snippet

＆＃13;

var values = [
    { id: 1, name: "a", value: "true" },
    { id: 2, name: "b", value: "false" },
    { id: 3, name: "c", value: "100" },
    { id: 4, name: "d", value: "me@nowhere.com" }
];
var item = {};

so.log(values
    .map(function (e) {
        if (e.value === "true" || e.value === "false")
            e.value = (e.value === "true");
        else if (!isNaN(e.value))
            e.value = Number(e.value);
        return e;
    })
    .reduce(function (a, b) {
        a[b.name] = b.value;
        return a;
    }, item));

＆＃13;

body {
   font-family: verdana;
   font-size: 10px;
}

＆＃13;

<div id="a"></div>
<script>
  var so = {
    log: function(e) {
       document.getElementById("a").innerText = JSON.stringify(e, null, '     ');
    }
  }
</script>

＆＃13;

Answer 3

以下代码完全符合您的要求。我使用配置对象来处理特殊情况（例如＆＃39; true＆＃39;和＆＃39; false＆＃39;赋值）和Number.isNaN和+来检测数字条目并相应地转换它们。处理上述问题，其中“假”是是剩下的字符串，我使用过！==检查未定义（请记住，在JavaScript中！=将为所有 falsey 值返回false，而！==仅对特定类型返回false虚假价值）。

var myProps,
    values = [
    { id: 1, name: "a", value: "true" },
    { id: 2, name: "b", value: "false" },
    { id: 3, name: "c", value: "100" },
    { id: 4, name: "d", value: "me@nowhere.com" }
    ],
    item = {},
    propertySetter = function(item, values) {
      // use this variable for special case assignments
      var specialValues = {
        "true": true,
        "false": false
      };
      values.forEach(function (row) {
        if (specialValues[row.value] !== undefined) {
          item[row.name] = specialValues[row.value];
        } else {
          if (Number.isNaN(+row.value)) {
            item[row.name] = row.value;          
          } else {
            item[row.name] = +row.value;
          }
        }
      });
      return item;
    };

myProps = propertySetter(item, values);

Answer 4

在ES6中：

Object.assign({}, ...values.map(value => ({[value.name]: value.value})))

这将创建一个小对象数组，每个对象具有一个键值对，使用ES6的计算属性名称，然后使用扩展运算符（...）将它们作为要合并的参数传递给Object.assign

要转换值，例如将"true"转换为true，请将value.value更改为transform(value.value)并编写transform函数：

function transform(value) {
  return value === "true"  ? true   :
         value === "false" ? false  :
         !isNaN(value)     ? +value :
         value;
}

如何在JavaScript中以编程方式设置对象属性？

4 个答案: