如何在javascript中将对象插入数组？答案

【问题标题】：How to insert an object into array in javascript?如何在javascript中将对象插入数组？
【发布时间】：2020-05-28 18:27:36
【问题描述】：

actions = [{ 'name' : 'Share',
  'icon' : 'fa fa-share-alt library_icon mylibrary-icon-right'
    },{
    'name' : 'Edit',
    'icon' : 'fa fa-pencil-square-o library_icon mylibrary-icon-right'
  },
  {
    'name' : 'Embed',
    'icon' : 'fa fa-link library_icon mylibrary-icon-right'
  },
  {
     'name' : 'Schedule',
     'icon' : 'fa fa-calendar library_icon mylibrary-icon-right'
  }
];

通过条件后，我必须删除第二个对象并在同一位置再次插入它。有什么办法吗？

【问题讨论】：

您确定要删除它而不只是更新它吗？
是的，有办法，但是到目前为止你尝试了什么？
如果你真的想删除它，然后在相同的位置插入一个对象，你应该看看splice。
抱歉没有添加解释
我尝试使用 splice 但它给了我错误。

标签： javascript arrays typescript object

【解决方案1】：

您可以使用push 将对象添加到数组中。

示例：

const actions = [{
    'name': 'Share',
    'icon': 'fa fa-share-alt library_icon mylibrary-icon-right'
  }, {
    'name': 'Edit',
    'icon': 'fa fa-pencil-square-o library_icon mylibrary-icon-right'
  },
  {
    'name': 'Embed',
    'icon': 'fa fa-link library_icon mylibrary-icon-right'
  },
  {
    'name': 'Schedule',
    'icon': 'fa fa-calendar library_icon mylibrary-icon-right'
  }
];

var newObj = {
  name: 'thing',
  icon: 'smiley face'
}

actions.push(newObj)

console.log(actions)

如果你想删除第二个对象，然后在最后添加它，你可以使用过滤器或拼接：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

const actions = [{
    'name': 'Share',
    'icon': 'fa fa-share-alt library_icon mylibrary-icon-right'
  }, {
    'name': 'Edit',
    'icon': 'fa fa-pencil-square-o library_icon mylibrary-icon-right'
  },
  {
    'name': 'Embed',
    'icon': 'fa fa-link library_icon mylibrary-icon-right'
  },
  {
    'name': 'Schedule',
    'icon': 'fa fa-calendar library_icon mylibrary-icon-right'
  }
];

var secondObj = actions[1]
actions.push(secondObj) // adds secondObj to end of array
actions.splice(1, 1) // removes one elment from index 1

console.log(actions)

【讨论】：

【解决方案2】：

只需用新对象更新 index (index start from 0)

const actions = [{ 'name' : 'Share', 'icon' : 'fa fa-share-alt library_icon mylibrary-icon-right' },{ 'name' : 'Edit', 'icon' : 'fa fa-pencil-square-o library_icon mylibrary-icon-right' }, { 'name' : 'Embed', 'icon' : 'fa fa-link library_icon mylibrary-icon-right' }, { 'name' : 'Schedule', 'icon' : 'fa fa-calendar library_icon mylibrary-icon-right' } ];


function replace(index,object){
  const array = actions;
  array[index] = object;
  return array
}

console.log(replace(2,{new:'one'}))

【讨论】：

【解决方案3】：

您可以删除某些index 的对象，保留此index 并稍后添加此index，方法如下。这里有更多关于splice

var action = [{ 'name' : 'Share',
  'icon' : 'fa fa-share-alt library_icon mylibrary-icon-right'
    },{
    'name' : 'Edit',
    'icon' : 'fa fa-pencil-square-o library_icon mylibrary-icon-right'
  },
  {
    'name' : 'Embed',
    'icon' : 'fa fa-link library_icon mylibrary-icon-right'
  },
  {
     'name' : 'Schedule',
     'icon' : 'fa fa-calendar library_icon mylibrary-icon-right'
  }
];
var idx = -1;
var item = {"foo":"bar"};
// first step to remove element matching by condition
action.forEach(function (el,index){
  if("Edit" == el.name ){
    action.splice(index,1);
    idx=index;
    item = el;
    return ;
   }
})
console.log(`items before addition `,action);
// step 2 is inserting element at deleted index
action.splice(idx, 0, item)

console.log(`items after addition `,action);

【讨论】：

【解决方案4】：

也许您正在寻找splice，它可以删除数组中任意数量的元素，并在指定索引处插入任意数量的元素。

const actions = [
  { 'name' : 'Share', 'icon' : 'fa fa-share-alt library_icon mylibrary-icon-right'},
  {
    'name' : 'Edit',
    'icon' : 'fa fa-pencil-square-o library_icon mylibrary-icon-right'
  },
  {
    'name' : 'Embed',
    'icon' : 'fa fa-link library_icon mylibrary-icon-right'
  },
  {
     'name' : 'Schedule',
     'icon' : 'fa fa-calendar library_icon mylibrary-icon-right'
  }
];


const saved = actions.splice(1,1); // At position 1 (remember it is zero based), remove 1 element
console.log("Test1", actions);
console.log("Removed", saved);
actions.splice(1,0,...saved); // At position 1, remove 0, insert all saved elements
console.log("Test2", actions);

我假设您将它用于某些菜单，另一种方法是保存原始数组并 filter 它用于新条件，然后在不再需要过滤后的数组时丢弃它。

const actions = [
  { 'name' : 'Share', 'icon' : 'fa fa-share-alt library_icon mylibrary-icon-right'},
  {
    'name' : 'Edit',
    'icon' : 'fa fa-pencil-square-o library_icon mylibrary-icon-right'
  },
  {
    'name' : 'Embed',
    'icon' : 'fa fa-link library_icon mylibrary-icon-right'
  },
  {
     'name' : 'Schedule',
     'icon' : 'fa fa-calendar library_icon mylibrary-icon-right'
  }
];


const filtered = actions.filter( item => item.name != "Edit");
console.log("Filtered", filtered);

【讨论】：

【解决方案5】：

使用拼接()。移除位置 1 的元素：

actions.splice(1,1);

在位置 1 添加项目：

actions.splice(1,0,itemToAdd);

【讨论】：