js 数组内嵌对象（json结构），知道路径怎么去修改内容？

Question

在js中定义了一个数组：

[
  {
    "t": "h",
    "c": [
      {
        "t": "t",
        "c": "aaaa"
      },
      {
        "t": "t",
        "c": "bbbbbbbb"
      },
      {
        "t": "t",
        "c": "cccccccc"
      }
    ]
  }
]

现在我有一个路径[0, "c", "0"]可以获取到内部aaaa这一个节点，我现在想通过该路径去修改这一个节点，怎么才能做到？

Answer 1

Lodash 好用啊

_.set(obj, path, value) 就可以 （在文档目录上面的搜索栏搜索 set，在 Object 分类下）

官方示例：

var object = { 'a': [{ 'b': { 'c': 3 } }] };

_.set(object, 'a[0].b.c', 4);

console.log(object.a[0].b.c);

// => 4

_.set(object, ['x', '0', 'y', 'z'], 5);

console.log(object.x[0].y.z);

// => 5

Answer 2

简单实现：

function pathValue(obj, path, newValue) {  
  const pathPartLength = path.length;
  const lastPathPart = path[pathPartLength - 1];

  for(let i = 0; i < pathPartLength - 1; ++i) {
    if(obj[path[i]]) {
      obj = obj[path[i]];
    }
  }

  const oldVal = obj[lastPathPart];
  // Set操作
  if(arguments.length > 2) {
    obj[lastPathPart] = newValue;
  }
  // 返回末梢节点值
  return oldVal;
}

var data = [
  {
    "t": "h",
    "c": [
      {
        "t": "t",
        "c": "aaaa"
      },
      {
        "t": "t",
        "c": "bbbbbbbb"
      },
      {
        "t": "t",
        "c": "cccccccc"
      }
    ]
  }
]

// Get
console.log(pathValue(data, [0, "c", "0"])) // {t: "t", c: "aaaa"}

// Set
console.log(pathValue(data, [0, "c", "0"], 'newValue')) // {t: "t", c: "aaaa"}
console.log(data); // [{"t":"h","c":["newValue",{"t":"t","c":"bbbbbbbb"},{"t":"t","c":"cccccccc"}]}]

可以借助这个库diffy-update

Answer 3

可以借助循环实现

const array = [
  {
    "t": "h",
    "c": [
      {
        "t": "t",
        "c": "aaaa"
      },
      {
        "t": "t",
        "c": "bbbbbbbb"
      },
      {
        "t": "t",
        "c": "cccccccc"
      }
    ]
  }
]
const path = [0, "c", "0"];
let result = array;
for(var i = 0;i<path.length;i++) {
    result = result[path[i]]
}
console.log(result)
result.c='22222222'
console.log(array)