JavaScript访问对象嵌套属性的更优实现方案

核心实现思路 #

单独封装一个通用的嵌套属性取值函数，配合剩余参数语法获取属性路径，不需要判断参数数量即可支持任意层级的嵌套属性访问。

完整实现代码 #

var objectsArr = [
  {nestedobj:{property:'1'}},
  {nestedobj:{property:'3'}},
  {nestedobj:{property:'2'}},
  {nestedobj:{property:'4'}}
];

// 通用嵌套属性取值函数，支持任意层级属性访问
function getNestedValue(obj, propPath) {
  return propPath.reduce((curr, key) => curr?.[key], obj);
}

function sortObjectsArr(objectsArray, ...propPath) {
  objectsArray.sort((a,b) => {
    const valA = getNestedValue(a, propPath);
    const valB = getNestedValue(b, propPath);
    return valA - valB;
  });
}

sortObjectsArr(objectsArr, 'nestedobj', 'property');
console.log(objectsArr);

老环境兼容版本 #

如果运行环境不支持可选链和reduce语法，可以用循环实现取值逻辑：

function getNestedValue(obj, propPath) {
  let result = obj;
  for (let i = 0; i < propPath.length; i++) {
    if (result === null || result === undefined) {
      return undefined;
    }
    result = result[propPath[i]];
  }
  return result;
}

方案优势 #

• 无需编写大量重复的参数判断逻辑，天然支持任意层级的嵌套属性访问
• 增加了异常兼容逻辑，中间层级属性不存在时不会直接抛出运行时报错
• 逻辑拆分清晰，属性取值逻辑可复用在其他业务场景中

内容的提问来源于stack exchange，提问作者Philipos D.