Appearance
对象
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>