如何在多层JavaScript对象的指定位置插入节点？

我来帮你搞定这个嵌套对象的节点插入问题！首先咱们先明确你的需求：要把指定节点插入到**obj.fields数组最后一个元素的fields数组**里（也就是那个text为'Response'的项的子fields数组）。

第一步：先理清对象结构 #

先把你的原对象格式化一下，方便看清层级关系：

var obj = {
  'id': '1',
  'text': 'post',
  'fill': 'transparent',
  'img': 'assets/images/post-ico.png',
  'image': 'test',
  'type': 'component',
  'url': 'test.com',
  'key': 'F',
  'fields': [
    {
      'name': 'remote_address',
      'value': '127.0.0.1',
      'group': 'F',
      'text': 'Request',
      'fields': [
        {'name': 'remote_address', 'value': '127.0.0.1', 'text': 'Body'},
        {'name': 'remote_address', 'value': '127.0.0.1', 'text': 'Headers'}
      ]
    },
    {
      'name': 'remote_address',
      'group': 'F',
      'value': '127.0.0.1',
      'text': 'Response',
      'fields': [
        {'name': 'remote_address', 'value': '127.0.0.1', 'text': 'Headers'},
        {'name': 'remote_address', 'value': '127.0.0.1', 'text': 'Body', 'fields': []}
      ]
    }
  ]
};

你要插入的节点：

const newNode = {'name': 'remote_address', 'value': '127.0.0.1', 'text': 'Headers'};

第二步：定位目标数组并插入 #

要插入到目标位置，咱们需要精准定位到嵌套的数组：

1. obj.fields是一个数组，里面有两个元素（Request和Response），取最后一个元素用obj.fields[obj.fields.length - 1]
2. 再取这个元素的fields属性，就是你要插入的目标数组

方法1：添加到目标数组的末尾（最常用） #

用push()方法直接追加到数组最后：

// 定位到Response项的fields数组
const targetFields = obj.fields[obj.fields.length - 1].fields;
// 插入新节点
targetFields.push(newNode);

方法2：插入到目标数组的指定位置 #

如果不是要加到末尾，而是要插入到数组的某个索引位置（比如第2个位置），可以用splice()方法：

// splice(插入位置索引, 要删除的元素数量, 要插入的元素)
targetFields.splice(1, 0, newNode);

这个例子会把新节点插入到目标数组的索引1的位置（也就是第二个元素的位置）。

为什么你之前的方法没生效？ #

你之前尝试的obj[0] = {'key':'value'};和obj["position"] = {'key':'value'};不生效的原因：

• obj本身是对象不是数组，obj[0]是在访问对象中键为'0'的属性，而不是数组元素
• 你没有定位到嵌套的fields数组层级，所以插入的位置完全不对

内容的提问来源于stack exchange，提问作者Anandhu Nadesh