Skip to content

对象

JavaScript 对象是键值对的集合,是语言中最核心的数据类型之一。

创建对象

对象字面量

javascript
const person = {
    name: '张三',
    age: 25,
    city: '北京'
};

new Object()

javascript
const person = new Object();
person.name = '张三';
person.age = 25;

构造函数

javascript
function Person(name, age) {
    this.name = name;
    this.age = age;
}

const person = new Person('张三', 25);

Object.create()

javascript
const proto = {
    greet() {
        console.log('Hello, ' + this.name);
    }
};

const person = Object.create(proto);
person.name = '张三';
person.greet(); // Hello, 张三

类(ES6)

javascript
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    
    greet() {
        console.log('Hello, ' + this.name);
    }
}

const person = new Person('张三', 25);

访问属性

点表示法

javascript
console.log(person.name);
person.age = 26;

方括号表示法

javascript
console.log(person['name']);
person['age'] = 26;

// 动态属性名
const key = 'name';
console.log(person[key]);

属性简写(ES6)

javascript
const name = '张三';
const age = 25;

const person = { name, age };
// 等同于 { name: name, age: age }

计算属性名(ES6)

javascript
const key = 'name';
const person = {
    [key]: '张三',
    ['age' + 'Suffix']: 25
};

console.log(person.name);      // 张三
console.log(person.ageSuffix); // 25

方法简写(ES6)

javascript
const person = {
    name: '张三',
    // 传统写法
    greet: function() {
        console.log('Hello');
    },
    // 简写
    sayHello() {
        console.log('Hello, ' + this.name);
    }
};

对象方法

Object.keys()

获取对象所有键:

javascript
const person = { name: '张三', age: 25, city: '北京' };
console.log(Object.keys(person)); // ['name', 'age', 'city']

Object.values()

获取对象所有值:

javascript
console.log(Object.values(person)); // ['张三', 25, '北京']

Object.entries()

获取键值对数组:

javascript
console.log(Object.entries(person));
// [['name', '张三'], ['age', 25], ['city', '北京']]

// 遍历对象
for (const [key, value] of Object.entries(person)) {
    console.log(`${key}: ${value}`);
}

Object.assign()

合并对象:

javascript
const target = { a: 1 };
const source = { b: 2, c: 3 };

const result = Object.assign(target, source);
console.log(result); // { a: 1, b: 2, c: 3 }

// 浅拷贝
const copy = Object.assign({}, person);

展开运算符(ES6)

javascript
// 合并对象
const merged = { ...person, job: '工程师' };

// 浅拷贝
const copy = { ...person };

Object.freeze()

冻结对象:

javascript
const person = { name: '张三' };
Object.freeze(person);

person.name = '李四'; // 无效(严格模式报错)
person.age = 25;      // 无效

Object.seal()

密封对象:

javascript
const person = { name: '张三' };
Object.seal(person);

person.name = '李四'; // 有效
person.age = 25;      // 无效(不能添加新属性)
delete person.name;   // 无效(不能删除属性)

属性描述符

Object.defineProperty()

javascript
const person = {};

Object.defineProperty(person, 'name', {
    value: '张三',
    writable: false,      // 不可写
    enumerable: true,     // 可枚举
    configurable: false   // 不可配置
});

person.name = '李四'; // 无效

Object.getOwnPropertyDescriptor()

javascript
const person = { name: '张三' };
const descriptor = Object.getOwnPropertyDescriptor(person, 'name');
console.log(descriptor);
// {
//   value: '张三',
//   writable: true,
//   enumerable: true,
//   configurable: true
// }

Getter 和 Setter

javascript
const person = {
    firstName: '张',
    lastName: '三',
    
    get fullName() {
        return this.firstName + this.lastName;
    },
    
    set fullName(value) {
        this.firstName = value[0];
        this.lastName = value.slice(1);
    }
};

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

原型和继承

原型链

javascript
function Person(name) {
    this.name = name;
}

Person.prototype.greet = function() {
    console.log('Hello, ' + this.name);
};

const person = new Person('张三');
person.greet(); // Hello, 张三

console.log(person.hasOwnProperty('name')); // true
console.log(person.hasOwnProperty('greet')); // false

类继承(ES6)

javascript
class Animal {
    constructor(name) {
        this.name = name;
    }
    
    speak() {
        console.log(this.name + ' 发出声音');
    }
}

class Dog extends Animal {
    constructor(name, breed) {
        super(name);
        this.breed = breed;
    }
    
    speak() {
        console.log(this.name + ' 汪汪叫');
    }
}

const dog = new Dog('小黄', '金毛');
dog.speak(); // 小黄 汪汪叫

解构赋值

javascript
const person = { name: '张三', age: 25, city: '北京' };

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

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

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

// 剩余属性
const { name: n, ...rest } = person;
console.log(rest); // { age: 25, city: '北京' }

对象比较

javascript
const obj1 = { a: 1 };
const obj2 = { a: 1 };
const obj3 = obj1;

console.log(obj1 === obj2); // false(引用不同)
console.log(obj1 === obj3); // true(引用相同)

// 深比较
function deepEqual(obj1, obj2) {
    if (obj1 === obj2) return true;
    
    if (typeof obj1 !== 'object' || typeof obj2 !== 'object') {
        return false;
    }
    
    const keys1 = Object.keys(obj1);
    const keys2 = Object.keys(obj2);
    
    if (keys1.length !== keys2.length) return false;
    
    return keys1.every(key => deepEqual(obj1[key], obj2[key]));
}

实践示例

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>JavaScript 对象示例</title>
</head>
<body>
    <h1>JavaScript 对象示例</h1>
    <script>
        // 用户管理类
        class UserManager {
            constructor() {
                this.users = [];
            }
            
            add(user) {
                this.users.push({ ...user, id: Date.now() });
            }
            
            findById(id) {
                return this.users.find(user => user.id === id);
            }
            
            findByName(name) {
                return this.users.filter(user => 
                    user.name.includes(name)
                );
            }
            
            update(id, updates) {
                const index = this.users.findIndex(user => user.id === id);
                if (index !== -1) {
                    this.users[index] = { ...this.users[index], ...updates };
                }
            }
            
            delete(id) {
                this.users = this.users.filter(user => user.id !== id);
            }
            
            list() {
                return [...this.users];
            }
            
            get count() {
                return this.users.length;
            }
        }
        
        // 使用示例
        const manager = new UserManager();
        
        manager.add({ name: '张三', age: 25, city: '北京' });
        manager.add({ name: '李四', age: 30, city: '上海' });
        manager.add({ name: '王五', age: 28, city: '广州' });
        
        console.log('用户列表:', manager.list());
        console.log('用户数量:', manager.count);
        
        const user = manager.findById(manager.list()[0].id);
        console.log('查找用户:', user);
        
        const searchResult = manager.findByName('张');
        console.log('搜索结果:', searchResult);
        
        // 对象工具函数
        const ObjectUtils = {
            // 深拷贝
            deepClone(obj) {
                if (obj === null || typeof obj !== 'object') {
                    return obj;
                }
                
                if (Array.isArray(obj)) {
                    return obj.map(item => this.deepClone(item));
                }
                
                const clone = {};
                for (const key in obj) {
                    if (obj.hasOwnProperty(key)) {
                        clone[key] = this.deepClone(obj[key]);
                    }
                }
                return clone;
            },
            
            // 深合并
            deepMerge(target, source) {
                const result = this.deepClone(target);
                
                for (const key in source) {
                    if (source.hasOwnProperty(key)) {
                        if (typeof source[key] === 'object' && source[key] !== null) {
                            result[key] = this.deepMerge(result[key] || {}, source[key]);
                        } else {
                            result[key] = source[key];
                        }
                    }
                }
                
                return result;
            },
            
            // 扁平化对象
            flatten(obj, prefix = '') {
                const result = {};
                
                for (const key in obj) {
                    if (obj.hasOwnProperty(key)) {
                        const newKey = prefix ? `${prefix}.${key}` : key;
                        
                        if (typeof obj[key] === 'object' && obj[key] !== null && !Array.isArray(obj[key])) {
                            Object.assign(result, this.flatten(obj[key], newKey));
                        } else {
                            result[newKey] = obj[key];
                        }
                    }
                }
                
                return result;
            }
        };
        
        // 测试工具函数
        const nested = {
            user: {
                name: '张三',
                address: {
                    city: '北京',
                    district: '朝阳'
                }
            }
        };
        
        console.log('扁平化:', ObjectUtils.flatten(nested));
    </script>
</body>
</html>