js字面量对象怎么调用属性

在JavaScript中，字面量对象的属性可以通过两种主要方式来调用：点操作符和方括号操作符。点操作符适用于有效的标识符属性名，而方括号操作符则允许使用任何字符串作为属性名，包括那些包含特殊字符或数字的属性。

一、点操作符调用属性

使用点操作符调用对象属性是最常见且直观的方式。通过这种方式，属性名必须是有效的JavaScript标识符。

示例:

let person = {
    name: "John",
    age: 30,
    job: "Developer"
};
console.log(person.name); // 输出: John
console.log(person.age);  // 输出: 30
console.log(person.job);  // 输出: Developer

二、方括号操作符调用属性

方括号操作符提供了更灵活的方式来访问对象属性，尤其适用于属性名包含特殊字符、空格或数字，或者属性名是动态生成的字符串变量。

示例:

let person = {
    "first name": "John",
    age: 30,
    "job-title": "Developer"
};
console.log(person["first name"]); // 输出: John
console.log(person["age"]);        // 输出: 30
console.log(person["job-title"]);  // 输出: Developer
// 动态属性名
let propertyName = "age";
console.log(person[propertyName]); // 输出: 30

三、动态访问属性

在实际项目中，属性名可能是动态生成的，此时方括号操作符显得尤为重要。可以通过变量或表达式来动态访问对象的属性。

示例:

let person = {
    name: "John",
    age: 30,
    job: "Developer"
};
function getPropertyValue(object, property) {
    return object[property];
}
console.log(getPropertyValue(person, "name")); // 输出: John
console.log(getPropertyValue(person, "age"));  // 输出: 30
console.log(getPropertyValue(person, "job"));  // 输出: Developer

四、修改属性值

使用点操作符或方括号操作符不仅可以访问属性值，还可以修改对象的属性值。

示例:

let person = {
    name: "John",
    age: 30,
    job: "Developer"
};
// 修改属性值
person.name = "Jane";
person["age"] = 28;
console.log(person.name); // 输出: Jane
console.log(person.age);  // 输出: 28

五、添加新属性

可以通过点操作符或方括号操作符向对象添加新属性。

示例:

let person = {
    name: "John",
    age: 30
};
// 添加新属性
person.job = "Developer";
person["country"] = "USA";
console.log(person.job);    // 输出: Developer
console.log(person.country); // 输出: USA

六、删除属性

可以使用 delete 操作符删除对象的属性。

示例:

let person = {
    name: "John",
    age: 30,
    job: "Developer"
};
// 删除属性
delete person.age;
delete person["job"];
console.log(person.age);  // 输出: undefined
console.log(person.job);  // 输出: undefined

七、使用对象解构

对象解构是一种简洁的语法，用于从对象中提取属性并赋值给变量。

示例:

let person = {
    name: "John",
    age: 30,
    job: "Developer"
};
let { name, age, job } = person;
console.log(name); // 输出: John
console.log(age);  // 输出: 30
console.log(job);  // 输出: Developer

八、总结

在JavaScript中，通过点操作符和方括号操作符调用字面量对象的属性是基本且常用的操作。点操作符适用于有效标识符属性名，而方括号操作符则提供了更大的灵活性，允许使用任何字符串作为属性名并支持动态访问。无论是访问、修改、添加还是删除属性，理解这两种操作符的使用方法都能帮助开发者更高效地操作对象。