如何向子数组添加新属性？答案

【问题标题】：How to add a new property to a subarrays?如何向子数组添加新属性？
【发布时间】：2020-05-16 15:53:10
【问题描述】：

我有一个带有子数组的数组，我正在尝试向每个子数组添加一个新属性 title。我有一个实现，但不是将标题添加到每个子数组，而是将其放在数组的末尾

[
  { nextEpisodeDate: null },
  {
    episode: 12,
    id: '28800/tokyo-ghoul-12',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/12/th_3.jpg'
  },
  {
    episode: 11,
    id: '28459/tokyo-ghoul-11',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/11/th_3.jpg'
  },
  {
    episode: 10,
    id: '28001/tokyo-ghoul-10',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/10/th_3.jpg'
  },
  {
    episode: 9,
    id: '27741/tokyo-ghoul-9',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/9/th_3.jpg'
  },
  {
    episode: 8,
    id: '27092/tokyo-ghoul-8',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/8/th_3.jpg'
  },
  {
    episode: 7,
    id: '26689/tokyo-ghoul-7',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/7/th_3.jpg'
  },
  {
    episode: 6,
    id: '26529/tokyo-ghoul-6',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/6/th_3.jpg'
  },
  {
    episode: 5,
    id: '26431/tokyo-ghoul-5',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/5/th_3.jpg'
  },
  {
    episode: 4,
    id: '26373/tokyo-ghoul-4',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/4/th_3.jpg'
  },
  {
    episode: 3,
    id: '26278/tokyo-ghoul-3',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/3/th_3.jpg'
  },
  {
    episode: 2,
    id: '26188/tokyo-ghoul-2',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/2/th_3.jpg'
  },
  {
    episode: 1,
    id: '26103/tokyo-ghoul-1',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/1/th_3.jpg'
  }
]

我想实现以下目标

  {
    episode: 12,
    title: '......'
    id: '28800/tokyo-ghoul-12',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/12/th_3.jpg'
  },
  {
    episode: 11,
    title: '......'
    id: '28459/tokyo-ghoul-11',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/11/th_3.jpg'
  },

实施


 * @param  {Object} obj   The original object
 * @param  {String} key   The key for the item to add
 * @param  {Any}    value The value for the new key to add
 * @param  {Number} index The position in the object to add the new key/value pair [optional]
var addToObject = function (obj, key, value, index) {
    // Create a temp object and index variable
    var temp = {};
    var i = 0;
    // Loop through the original object
    for (var prop in obj) {
        if (obj.hasOwnProperty(prop)) {
            // If the indexes match, add the new item
            if (i === index && key && value) {
                temp[key] = value;
            }
            // Add the current item in the loop to the temp obj
            temp[prop] = obj[prop];
            // Increase the count
            i++;
        }
    }
    // If no index, add to the end
    if (!index && key && value) {
        temp[key] = value;
    }
    return temp;
};

let list = addToObject(listByEps, 'title' , '....', 0)

【问题讨论】：

据我所知，i === index 对除第一个对象以外的每个对象都失败，这不是情节对象。此外，这是一个对象数组，而不是子数组。
我是否正确理解您想为数组中的每个元素（具有情节）属性赋予另一个名为 title 的属性？你想在不同的对象中使用不同的标题值吗？不同标题值的来源是什么？向对象添加道具非常容易，甚至是数组中的道具。这个问题无法理解的是标题数据的来源，以及它与现有对象的关系
您好，对于每个子数组，我想传递一个名为 title 的新属性，我遇到的问题是它没有更新 title 属性的值，它总是向我显示相同的标题。您可以在底部看到一个临时解决方案。但它显示了相同的标题。

标签： javascript arrays loops properties sub-array

【解决方案1】：

参考：

listByEps.forEach(item => item.title = '......')

纯赋值

let result = listByEps.map(item => {
  Object.assign({}, item, {title: '......'})
  return item;
});

只是例子

【讨论】：

它起作用了，但是它将 title 属性分配给 {nextEpisodeDate: null, title: '.....'}，这是不应该的。它应该只是具有 episode 属性的子数组。
他为每个子射线分配了相同的标题，不应该这样。

【解决方案2】：

我认为你真的应该再看看你到底想要在这里实现什么，因为它有点令人困惑。出于本示例的目的，我假设 listByEps 是您在第一个代码部分中发布的数组，因为这似乎对您接下来尝试做的事情最有意义。

在这种情况下首先要注意的是listByEps 不是一个对象，它是一个对象数组。试图读取它的属性是行不通的，因为它没有，只有索引元素。

var addToObject = (array, key, value, index) => {
    if(index) {
        array[index][key] = value;
    } else {
        array.push({
            key: value
        })
    };
    return array;
}

此代码以listByEps 数组中给定索引处的对象为目标，并添加新的键/值对。如果没有索引，它将一个新对象推到数组的末尾。然后它会返回整个数组以及所做的更改，因为这就是您在最后将其称为 let list = addPropertyToObj(listByEps, 'title' , '....', 0) 时希望它执行的操作。

【讨论】：

【解决方案3】：

我有一个临时解决方案，但它为所有子数组分配了相同的标题。它应该在 title 属性中分配不同的值。当我执行 console.log (title) 时，它会显示所有标题

  let newListByEps;


    Array.from({length: chaptersTitles.length} , (v , k) =>{
      var title = chaptersTitles[k].title;
      console.log(title);

      // slice (1) to skip the subarray with the nextEpisodeDate property
      newListByEps =  listByEps.slice(1).map(item =>{
        Object.assign(item , {
          title: title
        })
        return item;
      })
    })

    console.log(newListByEps);

[
  { nextEpisodeDate: null },
  {
    episode: 12,
    id: '28800/tokyo-ghoul-12',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/12/th_3.jpg',
    title: 'Ghoul'
  },
  {
    episode: 11,
    id: '28459/tokyo-ghoul-11',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/11/th_3.jpg',
    title: 'Ghoul'
  },
  {
    episode: 10,
    id: '28001/tokyo-ghoul-10',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/10/th_3.jpg',
    title: 'Ghoul'
  },
  {
    episode: 9,
    id: '27741/tokyo-ghoul-9',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/9/th_3.jpg',
    title: 'Ghoul'
  },
  {
    episode: 8,
    id: '27092/tokyo-ghoul-8',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/8/th_3.jpg',
    title: 'Ghoul'
  },
  {
    episode: 7,
    id: '26689/tokyo-ghoul-7',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/7/th_3.jpg',
    title: 'Ghoul'
  },
  {
    episode: 6,
    id: '26529/tokyo-ghoul-6',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/6/th_3.jpg',
    title: 'Ghoul'
  },
  {
    episode: 5,
    id: '26431/tokyo-ghoul-5',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/5/th_3.jpg',
    title: 'Ghoul'
  },
  {
    episode: 4,
    id: '26373/tokyo-ghoul-4',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/4/th_3.jpg',
    title: 'Ghoul'
  },
  {
    episode: 3,
    id: '26278/tokyo-ghoul-3',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/3/th_3.jpg',
    title: 'Ghoul'
  },
  {
    episode: 2,
    id: '26188/tokyo-ghoul-2',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/2/th_3.jpg',
    title: 'Ghoul'
  },
  {
    episode: 1,
    id: '26103/tokyo-ghoul-1',
    imagePreview: 'https://cdn.animeflv.net/screenshots/1415/1/th_3.jpg',
    title: 'Ghoul'
  }
]

chaptersTitles 变量有标题列表，我想将它传递给newListByEps 变量。他为整个 newListByEps 数组显示相同标题的原因是因为每次他遍历数组时，他都会重复同一个列表 N 次。在这种情况下，重复相同的 arrat (chaptersTitles) 12 次strong>

如果有人可以帮助我解决问题，我将不胜感激。显然问题在于使用Array.from ({});

这是chaptersTitles.的列表

[
  { episode: 1, title: 'Tragedy', date: '2014-07-04' },
  { episode: 2, title: 'Incubation', date: '2014-07-11' },
  { episode: 3, title: 'Dove', date: '2014-07-18' },
  { episode: 4, title: 'Supper', date: '2014-07-25' },
  { episode: 5, title: 'Scar', date: '2014-08-01' },
  { episode: 6, title: 'Cloudburst', date: '2014-08-08' },
  { episode: 7, title: 'Captivity', date: '2014-08-15' },
  { episode: 8, title: 'Circular', date: '2014-08-22' },
  { episode: 9, title: 'Birdcage', date: '2014-08-29' },
  { episode: 10, title: 'Aogiri', date: '2014-09-05' },
  { episode: 11, title: 'High Spirits', date: '2014-09-12' },
  { episode: 12, title: 'Ghoul', date: '2014-09-19' }
]

【讨论】：

【解决方案4】：

我不得不使用的解决方案是通过操纵属性的逻辑来合并两个对象。

const MergeRecursive = (obj1 , obj2) => {
  for(var p in obj2) {
    try{
      // Property in destination object set; update its value.
      if(obj2[p].constructor == Object){
        obj1[p] = MergeRecursive(obj1[p], obj2[p]);
      }else{
        obj1[p] = obj2[p];
      }
    }catch(e){
      // Property in destination object not set; create it and set its value.
      obj1[p] = obj2[p];
    }
  }
  return obj1;
}

module.exports = {
  MergeRecursive
}

  listByEps =  MergeRecursive(listByEps.slice(1) , chaptersTitles)

【讨论】：