使用JavaScript从对象中删除内容

Question

我有一个如下所示的对象：

const arr = [
  {
    name: 'FolderA',
    child: [
      {
        name: 'FolderB',
        child: [
          {
            name: 'FolderC0',
            child: [],
          },
          {
            name: 'FolderC1',
            child: [],
          },
        ],
      },
    ],
  },
  {
    name: 'FolderM',
    child: [],
  },
];

我有一个作为字符串的路径：

var path = "0-0-1".

我需要删除这个对象：

{
    name: 'FolderC1',
    child: [],
 },

我可以通过这样做来实现，

arr[0].child[0].splice(1, 1);

但我希望以动态方式完成它。由于路径字符串可以是任何内容，因此我希望上述“.”运算符和splice定义可以动态创建，以在特定位置切割。

- Uzair Khan

---

请查看将JavaScript点符号表示的字符串转换为对象引用。 - Bergi

Answer 1

通过保存最后一个索引并返回实际索引的子元素，可以减少索引。稍后使用最后一个索引对其进行切割。

function deepSplice(array, path) {
    var indices = path.split('-'),
        last = indices.pop();

    indices
        .reduce((a, i) => a[i].child, array)
        .splice(last, 1);
}

const array = [{ name: 'FolderA', child: [{ name: 'FolderB', child: [{ name: 'FolderC0', child: [] }, { name: 'FolderC1', child: [] }] }] }, { name: 'FolderM', child: [] }];

deepSplice(array, "0-0-1");
console.log(array);

.as-console-wrapper { max-height: 100% !important; top: 0; }

- Nina Scholz

Answer 2

您可以拆分您的路径并使用其中的部分，如下所示：

let path = '0-0-1';
let parts = path.split('-');

// Call your splice using your parts (unsure if your '1' is the index, or deleteCount).

// If parts[2] is the index
arr[parts[0]].child[parts[1]].splice(parts[2], 1);

// If parts[2] is the deleteCount:
arr[parts[0]].child[parts[1]].splice(1, parts[2]);

- Stuart

---

我希望这个是动态的，我不知道路径嵌套会有多长：arr [parts [0]] .child [parts [1]] .splice（1，parts [2]）; - Uzair Khan

你的字符串 0-0-1 的长度/深度是否会改变？ - Stuart

Answer 3

你可以编写一个递归函数，从层次结构的顶部开始遍历，直到找到路径为止。以下是一个非常简单的片段代码。

const arr = [
  {
    name: 'FolderA',
    child: [
      {
        name: 'FolderB',
        child: [
          {
            name: 'FolderC0',
            child: [],
          },
          {
            name: 'FolderC1',
            child: [],
          },
        ],
      },
    ],
  },
  {
    name: 'FolderM',
    child: [],
  },
];

let ar_path = "0-0-1";

function deleteRecursive(arr, path) {
  if(Array.isArray(arr) && path.length > 0){
     const index = Number(path.shift());
     if (path.length > 0) 
        deleteRecursive(arr[index].child, path)
     else 
        arr.slice(index, 1);
  } else {
     console.log('invalid');
  }
}


deleteRecursive(arr, ar_path.split('-'))

console.log(arr);

- Shubham Khatri

Answer 4

//Variable setup:
const arr = [
    {
        name: 'FolderA',
        child: [
            {
                name: 'FolderB',
                child: [
                    {
                        name: 'FolderC0',
                        child: [],
                    },
                    {
                        name: 'FolderC1',
                        child: [],
                    },
                ],
            },
        ],
    },
    {
        name: 'FolderM',
        child: [],
    },
];
const path = "0-0-1";
//Break the path into pieces to iterate through:
const pathArray = path.split("-");
//Javascript assignments are by reference, so arrayToManage is going to be an internal piece within the original array
let arrayToManage = arr;
//We are going to iterate through the children of the array till we get above where we want to remove
while(pathArray.length > 1){
    const key = parseInt(pathArray.shift());
    arrayToManage = arrayToManage[key].child;
}
//Get the last position of the last array, where we want to remove the item
const key = parseInt(pathArray.shift());
arrayToManage.splice(key,1);
//And because it's all by reference, changed we made to arrayToManage were actually made on the arr object
console.log("end result:", JSON.stringify(arr));

- Yishai Landau

Answer 5

如果路径始终由3个（或更少）索引组成，则可以轻松地按照以下方式完成：

function deleteByPath(arr, path) {
   const index = path.split('-').map((x) => +x);
   if ( index.length < 1) {
      return null;
   } else if ( 1 === index.length ) {
     return arr.splice(index[0], 1);
   } else if ( 2 === index.length ) {
     return arr[index[0]].child.splice(index[1], 1);
   } else {
     return arr[index[0]].child[index[1]].child.splice(index[2], 1);
   }
}

const arr = [
  {
    name: 'FolderA',
    child: [
      {
        name: 'FolderB',
        child: [
          {
            name: 'FolderC0',
            child: [],
          },
          {
            name: 'FolderC1',
            child: [],
          },
        ],
      },
    ],
  },
  {
    name: 'FolderM',
    child: [],
  },
];

console.log(deleteByPath(arr, "0-0-1"));
console.log(deleteByPath(arr, "0-1"));
console.log(deleteByPath(arr, "0"));

如果路径可能由不到3个部分组成，您可以调整函数deleteByPath以处理基于部分数量的情况。

如果路径是任意长度且可以具有任何长度，则可以像以下递归方式调整deleteByPath函数：

function deleteByIndexRecursive(arr, index, current) {
  return current+1 < index.length ? deleteByIndexRecursive(arr.child[index[current]], current+1) : arr.child.splice(index[current], 1); 
}
function deleteByPath(arr, path) {
   const index = path.split('-').map((x) => +x);
   if ( 1>index.length) {
     return null;
   } else if ( 1===index.length) {
     return arr.splice(index[0], 1);
   } else {
     return deleteByIndexRecursive(arr[index[0]], index, 1);
   }
}

- Nikos M.

---

不，路径的长度可以是任意的 :) - Uzair Khan

@MichaelPhilips，更新了处理1、2或3部分路径的答案。您可以根据需要添加更多示例。 - Nikos M.