add property to object with spread operator

Question

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

 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?

Important: Using Jquery is just an example. Please provide solutions without using Jquery.

Answer 1

Spread operators can be replaced with Object.assign , however that isn't supported in 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> 

Answer 2

您可以使用Object.assign() （ https://developer.mozilla.org/pl/docs/Web/JavaScript/Referencje/Obiekty/Object/assign ）代替散布运算符：

Object.assign({}, currentItem, position)

Answer 3

If I understood you correct, you can use Object.defineProperty, looks like it supported in IE enter link description here

  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);