javascript - 通过点符号字符串键遍历对象

Question

我不确定为什么会这样。它似乎符合我的预期，但我不确定它是如何工作的。有人可以解释它是如何设法在 console.log 中找到 key 并返回重新映射的吗？

const data = {
  title: "hello world",
  user: {
    title: 'ruegen',
    app: {
      title: 'my app'
    }
  }

}

const map = {
  'user.title': 'Ruegen',
  'title': 'Title',
  'user.app.title': 'App'
}

Object.keys(map).forEach(function(key) {
  const row = ref(data, key)
  const header = map[key]
  console.log(header, row)
})


function ref(row, key) {
  var headers = key.split(".")
  var row = JSON.parse(JSON.stringify(row))

  headers.forEach(function(header) {
    // console.log('>>', header)
    try {
      row = row[header]
    } catch (err) {
      return
    }
  })
  return row;
}

Answer 1

主要工作在ref函数中完成。您可以删除 var row = JSON.parse(JSON.stringify(row)) 并且它仍然有效。在该函数中，您将键字符串拆分为数组 headers(通过 key.split("."))，然后在 forEach 循环(headers 元素)中进入对象行by "row=row[header]"- 所以在每次迭代中，你用键'header'处的值替换行。一切都在 try-catch block 中完成，因此如果您输入的 key 无效，则您什么也不会返回。

在 Object.keys(map).forEach 中，您运行 ref 具有相同的数据结构，但键与 map 对象不同。

ref可以简化为

function ref(row, key) {
  key.split(".").forEach(k => row ? row=row[k] : undefined)
  return row;
}

我们使用 ternary operator 通过简单的空值检查(提高无效 key 的代码速度)替换 try-catch block .和 arrow function .

const data = {
  title: "hello world",
  user: {
    title: 'ruegen',
    app: {
      title: 'my app'
    }
  }

}

const map = {
  'user.title': 'Ruegen',
  'title': 'Title',
  'user.app.title': 'App'
}

Object.keys(map).forEach(function(key) {
  const row = ref(data, key)
  const header = map[key]
  console.log(header, row)
})


function ref(row, key) {
  key.split(".").forEach(k => row ? row=row[k] : undefined)
  return row;
}