技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

【如何合理使用】JavaScript访问对象属性的3种方法

作者:admin    时间:2022-5-11 14:15:1    浏览:

JavaScript访问对象属性有多种方法,本文将介绍三种JS访问对象属性的方法,介绍访问属性的每种方法是如何工作的,并根据情况了解何时使用一种或另一种方式是合理的。

 JavaScript访问对象属性的3种方法

1、点属性访问器

访问对象属性的常用方法是点属性访问器。其语法是:

expression.identifier

expression 为一个对象,identifier 是要访问的属性的名称。

例如,访问name对象的属性hero

const webkaka = {
  name: '卡卡网'
};
// 点属性访问器
webkaka.name; // => '卡卡网'

webkaka.name 是一个点属性访问器,它读取webkaka对象的属性name

可以使用点属性访问器来访问更深层次的属性:object.prop1.prop2

如果提前知道属性名称,请选择点属性访问器。

点属性访问器需要标识符

当属性名称是有效标识符时,点属性访问器可以正常工作。JavaScript 中的标识符包含 Unicode 字母、、、$和_数字0..9,但不能以数字开头。

这不是问题,因为通常属性名称是有效的标识符:例如name, address, street, createdBy。

但有时属性不是有效的标识符: 

const weirdObject = {
  'prop-3': 'three',
  '3': 'three'
};
weirdObject.prop-3; // => NaN
weirdObject.3;      // throws SyntaxError: Unexpected number

因为prop-33是无效的标识符,所以点属性访问器不起作用:

weirdObject.prop-3 输出 NaN,而不是预期的'tree'。

weirdObject.3抛出一个 SyntaxError

要使用这些特殊名称访问属性,请使用方括号属性访问器(将在下面介绍)。

const weirdObject = {
  'prop-3': 'three',
  '3': 'three'
};
weirdObject['prop-3']; // => 'three'
weirdObject[3];        // => 'three' 

方括号语法可以访问具有特殊名称的属性:weirdObject['prop-3']weirdObject[3]

2、方括号属性访问器

方括号属性访问器具有以下语法:

expression[expression]

第一个expression为一个对象,第二个expression为一个表示属性名称的字符串。

这是一个例子:

const property = 'name';
const webkaka = {
  name: '卡卡网'
};
// 方括号属性访问器
webkaka['name'];   // => '卡卡网'
webkaka[property]; // => '卡卡网'

webkaka['name']webkaka[property]都使用方括号语法,并且读取name属性。

当属性名称是动态的,选择方括号属性访问器。

3、对象解构

基本的对象解构语法非常简单:

const { identifier } = expression;

identifier是要访问的属性的名称,expression为一个对象。解构后,变量identifier包含属性值。

这是一个例子:

const webkaka = {
  name: '卡卡网'
};
// 对象解构
const { name } = webkaka;
name; // => '卡卡网'

const { name } = webkaka 是一个对象解构,解构定义了一个变量name,它具有属性name的值。

当你习惯了对象解构时,你会发现它的语法是一种将属性提取到变量中的好方法。

当你想创建具有属性值的变量时,请选择对象解构。

你可以提取任意数量的属性:

const { identifier1, identifier2, .., identifierN } = expression;

别名变量

如果你想访问属性,但创建一个不同于属性名称的变量名称,则可以使用别名。

const { identifier: aliasIdentifier } = expression;

identifier是要访问的属性的名称,aliasIdentifier是变量名,expression为一个对象。解构后,变量aliasIdentifier包含属性值。

这是一个例子: 

const webkaka = {
  name: '卡卡网'
};
// 对象解构:
const { name: webkakaName } = webkaka;
webkakaName; // => '卡卡网'

const { name: webkakaName } = webkaka 是一个对象解构。解构定义了一个新变量webkakaName,并把webkaka.name的值分配给webkakaName

动态属性名称

使对象解构更加有用的是,可以将具有动态值的属性提取到变量中:

const { [expression]: identifier } = expression;

第一个expression为属性名称,identifier是解构后创建的变量名称。第二个expression是想要解构的对象。

这是一个例子:

const property = 'name';
const webkaka = {
  name: '卡卡网'
};
// 对象解构:
const { [property]: name } = webkaka;
name; // => '卡卡网'

const { [property]: name } = webkaka 是一个对象解构,在运行时动态确定要提取的属性。

4、当属性不存在时

如果访问的属性不存在,上述 3 种访问器语法都返回undefined

const webkaka = {
  myName: '卡卡网'
};
webkaka.name;    // => undefined
webkaka['name']; // => undefined
const { name } = webkaka;
name;         // => undefined

webkaka对象中不存在属性name。因此点属性访问器webkaka.name、方括号属性访问器webkaka['name']和解构后name的变量输出为undefined

因此,我们可以以此来判断对象属性是否存在:

if (typeof myVar === "undefined"){ //对象不存在
}

5、总结

JavaScript 提供了许多访问对象属性的好方法。

当提前知道变量时,点属性访问器语法object.property可以很好地工作。

当属性名称是动态的或不是有效标识符时,更好的选择是方括号属性访问器:object[propertyName]

对象解构将属性直接提取到变量中:{ property } = object ,此外,可以提取动态属性名称(在运行时确定):{ [propertName]: variable } = object

访问属性没有好坏之分,应根据你的具体情况进行选择。

您可能对以下文章也感兴趣

标签: 对象属性  属性  对象  
x
x
  • 站长推荐