通过字符串 var [复制] 获得自定义对象属性

在前端开发中，我们常常需要从一个对象中获取一些属性值。通常情况下，我们可以使用点语法来访问对象属性，例如 obj.property。但是，如果我们想要访问一个动态变化的属性名，该怎么办呢？这时候就需要使用字符串变量来访问对象属性了。

使用方括号访问属性

JavaScript 中，我们可以使用方括号语法来访问对象属性。例如，下面的代码可以访问对象 person 的 name 属性：

const person = { name: 'Tom' };
console.log(person['name']); // 输出：Tom

这种方法允许我们使用字符串类型的变量作为属性名，如下所示：

const propertyName = 'name';
console.log(person[propertyName]); // 输出：Tom

这里，propertyName 变量包含了要访问的属性名，我们将它用方括号包裹起来，就可以访问到对应的属性值。

访问自定义对象属性

现在假设我们有一个自定义的对象 myObj，它包含了一些属性。我们可以按照上面的方式来访问这些属性，例如：

const myObj = {
  foo: 'bar',
  abc: 123,
  xyz: ['a', 'b', 'c']
};

const propertyName = 'foo';
console.log(myObj[propertyName]); // 输出：bar

这种方式可以方便地访问到对象的属性值，但是在使用时需要注意一些细节。

注意事项

属性名大小写

JavaScript 对象属性名是大小写敏感的。如果我们尝试访问一个不存在的属性名，会返回 undefined 值。例如：

const propertyName = 'FOO';
console.log(myObj[propertyName]); // 输出：undefined

数组索引

如果我们想要获取数组中的某个元素，可以使用数组索引来访问，如下所示：

const myArray = [1, 2, 3];
const index = 1;
console.log(myArray[index]); // 输出：2

访问函数属性

当我们尝试访问一个函数对象的属性时，需要特别小心。因为函数对象也是对象，它们也可以有自己的属性。例如：

function myFunc() {
  console.log('Hello!');
}

myFunc.prop = 'world';

console.log(myFunc.prop); // 输出：world

但是，这种做法不太推荐。如果我们想要给函数添加一些属性，可以考虑使用闭包或者类的方式来实现。

示例代码

下面是一个完整的示例代码，演示了如何使用字符串变量来访问自定义对象的属性：

const myObj = {
  foo: 'bar',
  abc: 123,
  xyz: ['a', 'b', 'c']
};

const propertyName = 'xyz';
console.log(myObj[propertyName]); // 输出：["a", "b", "c"]

总结

通过字符串变量访问自定义对象属性是前端开发中一个常用的技巧。虽然这种方法很方便，但是需要注意属性名大小写、数组索引和函数属性等细节问题。在实际开发中，我们应该根据具体情况选择合适的方式来访问对象属性。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/12510