js 怎么获取多层对象的值

JavaScript 获取多层对象的值，可以通过点符号、方括号表示法、可选链操作符、递归函数等多种方法实现。点符号适用于已知对象层级的情况，方括号表示法适用于动态访问属性，可选链操作符能避免访问不存在属性时抛出的错误，递归函数则能处理更为复杂的动态需求。以下详细介绍其中一种方法。

点符号与方括号表示法：这是最常见的获取对象属性值的方法。例如，obj.prop1.prop2 或 obj['prop1']['prop2']。这两种方法都能轻松获取已知属性层级的值。

一、点符号与方括号表示法

点符号与方括号表示法是获取对象属性最基础的两种方式。

点符号

点符号是最常见的访问对象属性的方式。语法简单直接，但要求属性名是合法的标识符且已知。

const person = {
    name: {
        first: "John",
        last: "Doe"
    },
    age: 30,
    address: {
        city: "New York",
        zip: "10001"
    }
};
console.log(person.name.first); // 输出：John
console.log(person.address.city); // 输出：New York

方括号表示法

方括号表示法允许使用变量动态获取属性值，更灵活，但语法稍显冗长。

const person = {
    name: {
        first: "John",
        last: "Doe"
    },
    age: 30,
    address: {
        city: "New York",
        zip: "10001"
    }
};
console.log(person['name']['first']); // 输出：John
console.log(person['address']['city']); // 输出：New York
let key = 'age';
console.log(person[key]); // 输出：30

二、可选链操作符（Optional Chaining）

可选链操作符在避免访问不存在的属性时抛出错误方面非常有用。尤其是在处理嵌套较深的对象时。

const person = {
    name: {
        first: "John",
        last: "Doe"
    },
    age: 30,
    address: {
        city: "New York",
        zip: "10001"
    }
};
console.log(person?.name?.first); // 输出：John
console.log(person?.address?.street); // 输出：undefined，不会抛出错误

三、递归函数

对于动态层级的对象，可以编写递归函数来获取属性值。

const getObjectValue = (obj, path) => {
    return path.reduce((acc, key) => (acc && acc[key] !== 'undefined') ? acc[key] : undefined, obj);
};
const person = {
    name: {
        first: "John",
        last: "Doe"
    },
    age: 30,
    address: {
        city: "New York",
        zip: "10001"
    }
};
console.log(getObjectValue(person, ['name', 'first'])); // 输出：John
console.log(getObjectValue(person, ['address', 'zip'])); // 输出：10001
console.log(getObjectValue(person, ['address', 'street'])); // 输出：undefined

四、使用第三方库

在实际项目中，使用第三方库如 Lodash 可以简化对多层对象属性值的获取。Lodash 提供了 _.get 方法，非常适合处理复杂的对象嵌套。

const _ = require('lodash');
const person = {
    name: {
        first: "John",
        last: "Doe"
    },
    age: 30,
    address: {
        city: "New York",
        zip: "10001"
    }
};
console.log(_.get(person, 'name.first')); // 输出：John
console.log(_.get(person, 'address.city')); // 输出：New York
console.log(_.get(person, 'address.street', 'Not Found')); // 输出：Not Found

五、处理复杂对象的建议

1. 数据校验

在访问对象属性前，进行数据校验可以避免运行时错误。例如，确保对象不为空或者属性存在。

const getValue = (obj, path) => {
    if (!obj || typeof obj !== 'object') {
        return undefined;
    }
    return path.reduce((acc, key) => acc && acc[key] !== 'undefined' ? acc[key] : undefined, obj);
};

2. 使用默认值

在访问多层对象属性时，可以设置默认值来避免返回 undefined。

const getValue = (obj, path, defaultValue) => {
    const result = path.reduce((acc, key) => acc && acc[key] !== 'undefined' ? acc[key] : undefined, obj);
    return result === undefined ? defaultValue : result;
};
const person = {
    name: {
        first: "John",
        last: "Doe"
    },
    age: 30,
    address: {
        city: "New York",
        zip: "10001"
    }
};
console.log(getValue(person, ['address', 'street'], 'Street not found')); // 输出：Street not found

六、最佳实践

在实际开发中，处理多层对象时应遵循以下最佳实践：

1. 清晰的对象结构设计

设计清晰且扁平化的对象结构，可以减少访问多层对象的复杂性。尽量避免嵌套过深的对象。

2. 尽量使用可选链操作符

可选链操作符在处理多层对象时非常有用，避免了许多潜在的错误，提高了代码的健壮性。

3. 使用第三方库

对于复杂对象操作，使用像 Lodash 这样的成熟库，可以提高开发效率和代码可读性。

4. 定义访问函数

为多层对象定义访问函数，集中处理对象访问逻辑，便于维护和扩展。

const getNestedValue = (obj, path, defaultValue) => {
    if (!obj || typeof obj !== 'object') {
        return defaultValue;
    }
    return path.reduce((acc, key) => acc && acc[key] !== 'undefined' ? acc[key] : defaultValue, obj);
};
const person = {
    name: {
        first: "John",
        last: "Doe"
    },
    age: 30,
    address: {
        city: "New York",
        zip: "10001"
    }
};
console.log(getNestedValue(person, ['name', 'first'], 'Name not found')); // 输出：John
console.log(getNestedValue(person, ['address', 'street'], 'Street not found')); // 输出：Street not found

通过以上几种方法和建议，您可以灵活且高效地获取多层对象的值，从而提高代码的健壮性和可维护性。