[英]add property to object with spread operator
I use a spread operator in my code to add a property to an object but this is not supported by IE 9. The important part is ...currentItem
我在代码中使用了扩展运算符将属性添加到对象,但是IE 9不支持。重要的部分是
...currentItem
const data = [ [{ name: "item 3", value: 2 }], [{ name: "item 4", value: 4535 }, { name: "item 5", value: 897 }] ]; $(document).ready(() => { const newData = data.map(subArr => subArr.map((currentItem, index) => ({ ...currentItem, position: index - (subArr.length - 1) * 0.5 })) ); console.log(newData); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
I tried to convert this to a code that is not using the spread operator 我试图将其转换为不使用传播运算符的代码
const data = [ [{ name: "item 3", value: 2 }], [{ name: "item 4", value: 4535 }, { name: "item 5", value: 897 }] ]; $(document).ready(() => { const newData = data.map(subArr => subArr.map((currentItem, index) => ({ name: currentItem.name, value: currentItem.value, position: index - (subArr.length - 1) * 0.5 })) ); console.log(newData); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
and this works really fine. 这真的很好。 But the problem is, that I have to write down all the properties of the current object.
但是问题是,我必须写下当前对象的所有属性。 Let's assume there would be more than five properties.
假设有五个以上的属性。 So I tried to add the new property to the current object by going for this code
所以我尝试通过执行以下代码将新属性添加到当前对象
const data = [ [{ name: "item 3", value: 2 }], [{ name: "item 4", value: 4535 }, { name: "item 5", value: 897 }] ]; $(document).ready(() => { const newData = data.map(subArr => subArr.map((currentItem, index) => ( currentItem.position = index - (subArr.length - 1) * 0.5 /* currentItem["position"] = index - (subArr.length - 1) * 0.5 */ )) ); console.log(newData); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
but now the object gets converted to the single property I want to add. 但是现在该对象已转换为我要添加的单个属性。 So this is not working.
所以这是行不通的。 How can I add the new property to the object within the
arr.map
loop? 如何在
arr.map
循环中将新属性添加到对象?
Important: Using Jquery is just an example. 重要:使用Jquery只是一个示例。 Please provide solutions without using Jquery.
请提供不使用Jquery的解决方案。
Spread operators can be replaced with Object.assign
, however that isn't supported in ie. 传播运算符可以用
Object.assign
替换,但是ie中不支持。
You can polyfill it as in this answer : 您可以按照以下答案进行填充:
if (typeof Object.assign != 'function') { Object.assign = function(target, varArgs) { // .length of function is 2 'use strict'; if (target == null) { // TypeError if undefined or null throw new TypeError('Cannot convert undefined or null to object'); } var to = Object(target); for (var index = 1; index < arguments.length; index++) { var nextSource = arguments[index]; if (nextSource != null) { // Skip over if undefined or null for (var nextKey in nextSource) { // Avoid bugs when hasOwnProperty is shadowed if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { to[nextKey] = nextSource[nextKey]; } } } } return to; }; } const data = [ [{ name: "item 3", value: 2 }], [{ name: "item 4", value: 4535 }, { name: "item 5", value: 897 }] ]; document.addEventListener("DOMContentLoaded", () => { const newData = data.map(subArr => subArr.map((currentItem, index) => (Object.assign(currentItem, { position: index - (subArr.length - 1) * 0.5 }))) ); console.log(newData); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
您可以使用Object.assign()
( https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/Object/assign )代替散布运算符:
Object.assign({}, currentItem, position)
If I understood you correct, you can use Object.defineProperty, looks like it supported in IE enter link description here 如果我理解正确,则可以使用Object.defineProperty,它看起来像IE中支持的一样,请在此处输入链接描述
const data = [
[{
name: "item 3",
value: 2
}],
[{
name: "item 4",
value: 4535
}, {
name: "item 5",
value: 897
}]
];
let newData = data.map(arr => {
let obj = {};
arr.map((item, index) => {
Object.defineProperty(obj, 'position', {
value: index - (arr.length - 1) * 0.5,
configurable: true
});
});
return obj;
});
console.log(newData);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.