JS - 属性路径访问、计算属性名？

前言

数组属性路径相比 . 属性路径而言，前者比后者灵活性更高。

在 ES6 中，有一种对象访问方式叫作 “计算属性名”，这种访问对象属性的路径也非常有用。假如下面有一个对象：

file:[demo.js]
const person = {
    firstName: "John",
    lastName: "Doe"
};

而在使用计算属性名的情况下，你可以在方括号内使用表达式来定义属性名。这个表达式的结果将被用作属性的名称。例如：

file:[demo.js]
const propertyName = "age";
const person = {
    name: "John",
    [propertyName]: 30
};

计算属性名的主要优势在于你可以根据需要动态地定义属性名，而不必事先知道属性名的确切值。这对于处理动态数据或根据条件设置属性名非常有用。例如，你可以在循环中使用计算属性名来创建一组属性：

file:[demo.js]
const fruits = ["apple", "banana", "cherry"];
const fruitObjects = {};

for (const fruit of fruits) {
    fruitObjects[fruit] = "available";
}

// { apple: "available", banana: "available", cherry: "available" }

在这个示例中，我使用循环和计算属性名来动态创建了一个对象，该对象的属性名来自数组 fruits 中的元素。

属性路径访问

file:[demo2.js]
const person = {
  address: {
    city: "New York"
  },
  one: { two: { three: "one-two-three" } }
};

function getProperty(obj, path) {
  let propertyValue = obj;
  for (let i = 0; i < path.length; i++) {
    const propertyName = path[i];
    propertyValue = propertyValue[propertyName];
  }
  return propertyValue;
}

console.log(getProperty(person, ["address", "city"])); // New York
console.log(getProperty(person, ["one", "two", "three"])); // one-two-three

不管你的对象路径有多深，都可以通过数组构建出路径出来，并获取到最终想要的值。