原生js怎么拿到子对象

原生JS获取子对象的方法有：点操作符、方括号操作符、for…in循环。 下面将详细描述点操作符的使用。

点操作符是最常见的获取子对象的方法。当我们知道子对象的具体名称时，可以通过点操作符直接访问。例如：

const parentObject = {
  childObject: {
    name: "Child",
    age: 10
  }
};
console.log(parentObject.childObject.name); // 输出 "Child"

点操作符提供了简单、直观的语法，使代码易读易维护。但要注意的是，这种方法要求子对象的名称是已知且合法的JavaScript标识符。

一、点操作符

点操作符是最常用的访问对象属性的方法，尤其适用于对象结构已知且属性名称是合法的JavaScript标识符的情况。点操作符不仅简洁，而且代码可读性强。

1.1 使用点操作符

点操作符通过对象名后接属性名的方式来访问子对象。这种方式的优点在于代码简洁、直观，易于理解和维护。以下是具体示例：

const parentObject = {
  childObject: {
    name: "Child",
    age: 10
  }
};
console.log(parentObject.childObject.name); // 输出 "Child"

在上述代码中，parentObject.childObject.name通过点操作符直接访问了parentObject的childObject属性，再进一步访问了childObject的name属性。

1.2 嵌套对象访问

当对象结构较为复杂时，点操作符依然适用。例如：

const company = {
  department: {
    team: {
      member: {
        name: "Alice",
        role: "Developer"
      }
    }
  }
};
console.log(company.department.team.member.name); // 输出 "Alice"

在这种嵌套结构中，通过点操作符逐层访问子对象，代码依然保持简洁和清晰。

二、方括号操作符

方括号操作符提供了另一种访问对象属性的方式，尤其适用于属性名称动态变化或包含特殊字符的情况。与点操作符相比，方括号操作符更灵活，但代码可读性略逊一筹。

2.1 使用方括号操作符

方括号操作符允许我们使用变量或字符串来访问对象属性，这在属性名称未知或动态生成时尤为有用。例如：

const parentObject = {
  childObject: {
    name: "Child",
    age: 10
  }
};
const propertyName = "childObject";
console.log(parentObject[propertyName].name); // 输出 "Child"

上述代码中，通过变量propertyName来动态访问对象属性，这种方式在编写动态代码时非常实用。

2.2 处理特殊字符

当属性名称包含特殊字符或空格时，点操作符无法使用，这时方括号操作符则显得尤为必要：

const parentObject = {
  "child-object": {
    name: "Child",
    age: 10
  }
};
console.log(parentObject["child-object"].name); // 输出 "Child"

通过方括号操作符，可以方便地处理包含特殊字符的属性名称。

三、for…in循环

for…in循环主要用于遍历对象的可枚举属性，但也可以通过该循环获取子对象。尽管这种方法不如点操作符和方括号操作符常用，但在某些场景下仍然非常有用。

3.1 使用for…in循环

for…in循环遍历对象的所有可枚举属性，并对每个属性执行指定操作。例如：

const parentObject = {
  childObject: {
    name: "Child",
    age: 10
  }
};
for (let key in parentObject) {
  if (parentObject.hasOwnProperty(key)) {
    console.log(parentObject[key].name); // 输出 "Child"
  }
}

在上述代码中，for…in循环遍历parentObject的所有属性，通过hasOwnProperty检查确保属性属于对象自身，然后访问子对象的name属性。

3.2 深度遍历对象

当对象结构较为复杂且需要深度遍历时，可以结合递归函数实现深度遍历。例如：

const parentObject = {
  childObject: {
    name: "Child",
    age: 10,
    grandChildObject: {
      name: "GrandChild",
      age: 5
    }
  }
};
function deepTraverse(obj) {
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      if (typeof obj[key] === "object") {
        deepTraverse(obj[key]);
      } else {
        console.log(`${key}: ${obj[key]}`);
      }
    }
  }
}
deepTraverse(parentObject);
// 输出:
// name: Child
// age: 10
// name: GrandChild
// age: 5

上述代码通过递归函数deepTraverse实现了对象的深度遍历，能够访问并输出所有层级的属性。

四、结合使用多种方法

在实际开发中，点操作符、方括号操作符和for…in循环常常结合使用，以应对不同的场景需求。合理选择和组合这些方法，可以提升代码的灵活性和可维护性。

4.1 动态属性访问

在某些场景下，属性名称可能是动态生成的，此时可以结合点操作符和方括号操作符：

const parentObject = {
  childObject1: { name: "Child1", age: 10 },
  childObject2: { name: "Child2", age: 12 }
};
for (let i = 1; i <= 2; i++) {
  const propertyName = `childObject${i}`;
  console.log(parentObject[propertyName].name); // 输出 "Child1" 和 "Child2"
}

这种结合使用的方法，使代码既保持了动态性，又不失简洁和可读性。

4.2 深度遍历与条件判断

在处理复杂对象结构时，可以结合for…in循环和条件判断，实现更加灵活的对象属性访问：

const parentObject = {
  childObject1: { name: "Child1", age: 10 },
  childObject2: { name: "Child2", age: 12, grandChildObject: { name: "GrandChild", age: 5 } }
};
function traverseAndPrint(obj) {
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      if (typeof obj[key] === "object") {
        traverseAndPrint(obj[key]);
      } else if (key === "name") {
        console.log(`${key}: ${obj[key]}`);
      }
    }
  }
}
traverseAndPrint(parentObject);
// 输出:
// name: Child1
// name: Child2
// name: GrandChild

这种方法结合了深度遍历和条件判断，可以灵活地筛选和处理对象属性，适用于复杂的对象结构。

五、性能与优化

在选择对象属性访问方法时，还需要考虑性能和优化问题。点操作符和方括号操作符在大多数情况下性能相近，但在高频访问场景下，选择合适的方法能提升代码性能。

5.1 性能测试

通过性能测试可以帮助我们选择合适的方法。在不同浏览器和运行环境下，点操作符和方括号操作符的性能可能略有差异。以下是简单的性能测试示例：

const parentObject = {
  childObject: { name: "Child", age: 10 }
};
console.time("Dot Operator");
for (let i = 0; i < 1000000; i++) {
  const name = parentObject.childObject.name;
}
console.timeEnd("Dot Operator");
console.time("Bracket Operator");
for (let i = 0; i < 1000000; i++) {
  const name = parentObject["childObject"]["name"];
}
console.timeEnd("Bracket Operator");

通过上述代码，可以测试在高频访问场景下两种方法的性能差异，从而选择最佳方案。

5.2 优化建议

在实际开发中，为了优化对象属性访问性能，可以考虑以下建议：

缓存频繁访问的子对象：对于频繁访问的子对象，可以将其缓存到局部变量，减少多次访问的开销。

const parentObject = {
  childObject: { name: "Child", age: 10 }
};
const child = parentObject.childObject;
for (let i = 0; i < 1000000; i++) {
  const name = child.name;
}

合理使用点操作符和方括号操作符：在属性名称已知且合法的情况下，优先使用点操作符，增强代码可读性。在属性名称动态生成或包含特殊字符时，使用方括号操作符。
避免不必要的深度遍历：在处理复杂对象结构时，尽量避免不必要的深度遍历，降低性能开销。

六、总结

在原生JavaScript中，获取子对象的方法主要有点操作符、方括号操作符和for…in循环。点操作符简洁直观，适用于已知属性名称的场景；方括号操作符灵活多变，适用于动态属性名称或特殊字符的情况；for…in循环适合遍历对象属性，尤其在复杂对象结构中发挥重要作用。

结合使用多种方法，根据具体需求选择合适的方案，能够提升代码的灵活性和可维护性。同时，考虑性能优化，合理缓存频繁访问的子对象，避免不必要的深度遍历，以提高代码运行效率。通过这些方法和技巧，我们可以更高效地在原生JavaScript中获取和操作子对象。