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

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: "[e-mail]" }
];

因此，原始对象看起来像这样：

item = {
    a: true,
    b: false,
    c: 100,
    d: '[e-mail]'
}

很抱歉表达不够明确，但我甚至不知道从哪里开始。

- G. Deward

Answer 1

你需要迭代遍历values，使用数组中每个项的name属性值作为键，value属性值作为值：

var item = {}

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

- user229044

---

有趣。但这样不会使所有值都变成字符串吗？ - G. Deward

是的，所有的值都是字符串。如果你想将它们转换成其他类型，你需要对这些值进行一些检查。 - user229044

这有点关键。请注意示例。属性'a'和'b'是布尔值。属性'c'是数字。属性'd'是字符串。 - G. Deward

Answer 2

你可以使用reduce(https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce)将数组缩减为单个对象。

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

---

代码片段

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: "[e-mail]" }
];
var item = {};

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

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

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

---

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

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)

---

堆栈代码段

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: "[e-mail]" }
];
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));

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

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

---

- potatopeelings

---

“false” 仍然是字符串，对吧？而字符串始终返回 true，对吗？ - sinisake

哦，是的。抱歉，刚注意到了！ - potatopeelings

@nevermind - 谢谢！我总是忘记了 Boolean("false") !== false 这个事实。 - potatopeelings

我想我在编辑过程中不小心点击了刷新或其他窗口。现在应该可以工作了！ - potatopeelings

@nevermind - 感谢提供链接。那是一种有趣的方法 :-) - potatopeelings

没错，我是那个实际上在学习的人 -> '永远的初学者'... :) - sinisake

Answer 3

在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;
}

- user663031