Javascript中对象字面量的概念以及最佳实践

const person = {
    name: '张三',
    age: 30,
    job: '软件工程师'
};

const obj = {
    name: '张三',      // 标识符作为属性名
    'full-name': '张三丰',  // 字符串作为属性名
    123: '数字属性'    // 数字作为属性名
};

console.log(obj.name);       // 访问方式1：点符号
console.log(obj['full-name']); // 访问方式2：方括号符号
console.log(obj[123]);       // 访问数字属性

const name = '张三';
const age = 30;

// 传统写法
const person1 = {
    name: name,
    age: age
};

// ES6简写
const person2 = {
    name,
    age
};

console.log(person2.name); // '张三'

const prefix = 'user';
const id = 1;

const user = {
    [`${prefix}_${id}`]: '张三',
    [`${prefix}Id`]: 100
};

console.log(user.user_1);  // '张三'
console.log(user.userId);  // 100

// 传统写法
const calculator1 = {
    add: function(a, b) {
        return a + b;
    }
};

// ES6简写
const calculator2 = {
    add(a, b) {
        return a + b;
    }
};

console.log(calculator2.add(1, 2)); // 3

const person = {
    name: '张三',
    age: 30,
    job: '软件工程师',
    address: {
        city: '北京',
        district: '海淀区'
    }
};

// 基本解构
const { name, age } = person;
console.log(name, age); // '张三' 30

// 嵌套解构
const { address: { city } } = person;
console.log(city); // '北京'

// 设置默认值
const { salary = '未知' } = person;
console.log(salary); // '未知'

// 重命名
const { name: fullName } = person;
console.log(fullName); // '张三'

const person = {
    name: '张三',
    age: 30
};

// 复制对象
const personCopy = { ...person };
console.log(personCopy); // { name: '张三', age: 30 }

// 合并对象
const personWithJob = {
    ...person,
    job: '软件工程师'
};
console.log(personWithJob); // { name: '张三', age: 30, job: '软件工程师' }

// 覆盖属性
const updatedPerson = {
    ...person,
    age: 31
};
console.log(updatedPerson); // { name: '张三', age: 31 }

const person = {
    firstName: '三',
    lastName: '张',
    
    // 常规方法
    getFullName() {
        return `${this.lastName}${this.firstName}`;
    },
    
    // getter
    get fullName() {
        return `${this.lastName}${this.firstName}`;
    },
    
    // setter
    set fullName(value) {
        const parts = value.split('');
        this.lastName = parts[0];
        this.firstName = parts.slice(1).join('');
    }
};

console.log(person.getFullName()); // '张三'
console.log(person.fullName);      // '张三'

​​​​​​​person.fullName = '李四';
console.log(person.lastName);      // '李'
console.log(person.firstName);     // '四'

// 推荐
function createUser(name, age, role) {
    return { name, age, role };
}

// 而不是
function createUser(name, age, role) {
    return { name: name, age: age, role: role };
}

// 推荐
function displayUser({ name, age, role = '用户' }) {
    console.log(`姓名: ${name}, 年龄: ${age}, 角色: ${role}`);
}

// 而不是
function displayUser(user) {
    const name = user.name;
    const age = user.age;
    const role = user.role || '用户';
    console.log(`姓名: ${name}, 年龄: ${age}, 角色: ${role}`);
}

displayUser({ name: '张三', age: 30 });

const original = { a: 1, b: 2 };
const copy = { ...original };

// 但要注意，这只是浅拷贝
const nested = { a: 1, b: { c: 2 } };
const shallowCopy = { ...nested };
shallowCopy.b.c = 3;
console.log(nested.b.c); // 3 (原对象也被修改了)

function createObjectWithDynamicKeys(keys, values) {
    return keys.reduce((obj, key, index) => {
        obj[key] = values[index];
        return obj;
    }, {});
}

const keys = ['name', 'age', 'job'];
const values = ['张三', 30, '软件工程师'];
const person = createObjectWithDynamicKeys(keys, values);
console.log(person); // { name: '张三', age: 30, job: '软件工程师' }

// 对象字面量
const obj1 = { name: '张三', age: 30 };

// Object构造函数
const obj2 = new Object();
obj2.name = '张三';
obj2.age = 30;

// 对象字面量
const person1 = {
    name: '张三',
    age: 30,
    greet() {
        console.log(`你好，我是${this.name}`);
    }
};

// 类
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    
    greet() {
        console.log(`你好，我是${this.name}`);
    }
}

​​​​​​​const person2 = new Person('张三', 30);