JavaScript 如何动态访问对象属性

在JavaScript中，对象是由多个属性组成的集合，每个属性都由键值对组成。对象是JavaScript中的一种基本数据类型。可以通过以下方式在JavaScript中创建对象：

使用对象字面量表示法，即由花括号括起的逗号分隔的键值对列表
通过使用new关键字定义
通过声明对象构造函数，然后创建该构造类型的对象
通过使用Object.create()方法

您可以使用方括号[]或点表示法(.)来访问或修改对象属性。我们将探讨两种访问对象属性的方式，并通过示例了解其基本实现方式。

语法： 此语法描述了对象的创建方式：

const obj = {

    // Property name may be an identifier
    property1: value1,

    // Or a number
    property2: value2,
    ...
    "property n": value3, // Or a string
};

例子1： 这个例子描述了基本的对象创建和在控制台中显示它们的值。在这里，前两行我们使用 点表示法 来访问name和course属性的值。在第三行，我们使用 括号表示法 来访问age属性的值。在第四和第五行，我们分别使用点表示法和括号表示法来访问address对象的city和zipCode属性。

Javascript

const person = { 
    name: 'John', 
    course: 'GeeksForGeeks', 
    'age': 30, 
    address: { 
        street: '123 Main St', 
        city: 'New York', 
        state: 'NY', 
        zipCode: '10001'
    } 
}; 
  
console.log(person.name);  
console.log(person.course); 
console.log(person['age']);  
console.log(person.address.city);  
console.log(person['address']['zipCode']);

输出

John
GeeksForGeeks
30
New York
10001

您可以使用点表示法或者方括号表示法(动态方法)访问对象的属性。有4种不同的技术可以实现对对象属性的动态访问：

通过字符串或变量定义对象属性的名称： 方括号语法允许您使用字符串或变量访问或修改对象的属性。以下是一个示例：

示例2： 在这个示例中，我们使用方括号语法设置 foo属性的值为”GeeksForGeeks”。

Javascript

const myObj = { 
    foo: 'Hello', 
    bar: 'World'
}; 
  
const prop = 'foo'; 
myObj[prop] = 'GeeksForGeeks'; 
console.log(myObj.foo);

输出

GeeksForGeeks

注意，当使用方括号语法来访问或设置属性时，你可以使用任何字符串或变量作为属性名。然而，如果属性名包含特殊字符或空格，则必须将其放在引号中。

示例3： 此示例说明了在属性名包含特殊字符或空格时获取对象的属性。

Javascript

const myObj = { 
    'my property': 'Hello', 
    'another-property': 'World'
}; 
  
console.log(myObj['my property']); 
console.log(myObj['another-property']);

输出

Hello
World

实现方括号记法： 在JavaScript中，您可以使用方括号语法来访问对象的属性。

示例4： 在此示例中，我们首先创建了一个对象 myObj ，它具有两个属性 prop1 和 prop2 。然后，我们创建一个变量 propName 并将其设置为 ‘prop1’ 。最后，我们使用方括号语法访问 prop1 属性的值 myObj[propName] 。

Javascript

const myObj = { 
    prop1: 'Hello', 
    prop2: 'World'
}; 
  
const propName = 'prop1'; 
console.log(myObj[propName]);

输出

Hello

使用方括号表示法访问嵌套对象属性： 在JavaScript中，可以使用方括号表示法访问嵌套对象属性。方括号表示法允许您使用字符串或变量访问对象的属性。在访问嵌套属性时，可以使用方括号表示法链式访问嵌套属性。

示例5： 本示例描述了如何使用方括号表示法访问嵌套对象属性。

Javascript

const myObj = { 
    foo: 'Hello', 
    bar: { 
        baz: 'World'
    } 
}; 
console.log(myObj['bar']['baz']);

输出

World

您也可以使用点表示法访问嵌套属性，但如果属性名称包含特殊字符或空格，则必须使用括号表示法。如果要使用变量访问嵌套属性，可以将括号表示法与变量链在一起。

示例6: 在此示例中，我们使用变量prop1和prop2来访问bar对象的baz属性。

Javascript

const myObj = { 
    foo: 'Hello', 
    bar: { 
        baz: 'World'
    } 
}; 
  
const prop1 = 'bar'; 
const prop2 = 'baz'; 
console.log(myObj[prop1][prop2]);

输出：

World

注意，使用方括号表示法访问嵌套对象属性时，应确保链中的每个属性都存在。如果链中的任何属性未定义，将会出现错误。

通过对象解构实现访问对象属性：

使用点表示法： 在JavaScript中，您可以使用对象解构来访问对象的属性。对象解构允许您提取对象的属性并将它们分配给变量。以下是在JavaScript中使用对象解构的示例：

示例7： 在该示例中，我们首先创建一个名为myObj的对象，该对象具有两个属性prop1和prop2。然后，我们使用对象解构从myObj对象中提取prop1和prop2属性，并将它们分配给同名的变量。最后，我们记录了prop1和prop2变量的值。

Javascript

const myObj = { 
    prop1: 'Hello', 
    prop2: 'World'
}; 
  
// Using object destructuring to access properties 
const { prop1, prop2 } = myObj; 
console.log(prop1); 
console.log(prop2);

输出：

Hello
World

你还可以使用对象解构来将属性分配给具有不同名称的变量。

示例8： 在上面的示例中，我们使用对象解构来从myObj对象中提取prop1和prop2属性，并将它们分配给具有不同名称的变量greeting和name。最后，我们记录了greeting和name变量的值。

Javascript

const myObj = { 
    prop1: 'Hello', 
    prop2: 'World'
}; 
  
// Using object destructuring to access  
// properties with different variable names 
  
const { prop1: greeting, prop2: name } = myObj; 
console.log(greeting);  
console.log(name);

输出

Hello
World

请注意，当使用对象解构来访问对象的属性时，变量名必须与对象的属性名匹配。否则，您可以使用语法propertyName：variableName 将属性分配给具有不同名称的变量。如果对象中未定义属性，则变量将被分配undefined值。

使用方括号表示法： 在JavaScript中，您还可以使用方括号表示法来解构对象并访问其属性。当您需要使用变量访问对象属性或属性名不是有效的标识符时，方括号表示法非常有用。

示例9 ：下面是使用方括号表示法解构对象的示例：

Javascript

const myObj = { 
    prop1: 'Hello', 
    'prop-with-dash': 'Geeks'
}; 
  
// Using square bracket notation to access properties 
const { prop1, 'prop-with-dash': prop2 } = myObj; 
console.log(prop1);  
console.log(prop2);

输出

Hello
Geeks

在上面的示例中，我们首先创建一个名为myObj的对象，该对象有两个属性prop1和‘prop-with-dash’。注意‘prop-with-dash’不是一个有效的标识符，不能使用点表示法访问。然后，我们使用方括号表示法来解构myObj对象，并将其属性分配给变量prop1和prop2。属性prop1使用点表示法分配给变量prop1，而属性‘prop-with-dash’使用方括号表示法分配给变量prop2。

示例10： 您还可以使用方括号表示法将属性分配给具有不同名称的变量：

Javascript

const myObj = { 
    prop1: 'Hello', 
    'prop-with-dash': 'Geeks'
}; 
  
// Using square bracket notation to access  
// properties with different variable names 
  
const { prop1: greeting, 'prop-with-dash': name } = myObj; 
console.log(greeting); 
console.log(name);