🎬 HoRain云小助手:个人主页
🔥 个人专栏: 《Linux 系列教程》《c语言教程》
⛺️生活的理想,就是为了理想的生活!
⛳️ 推荐
前些天发现了一个超棒的服务器购买网站,性价比超高,大内存超划算!忍不住分享一下给大家。点击跳转到网站。
专栏介绍
专栏名称 | 专栏介绍 |
《C语言》 | 本专栏主要撰写C干货内容和编程技巧,让大家从底层了解C,把更多的知识由抽象到简单通俗易懂。 |
《网络协议》 | 本专栏主要是注重从底层来给大家一步步剖析网络协议的奥秘,一起解密网络协议在运行中协议的基本运行机制! |
《docker容器精解篇》 | 全面深入解析 docker 容器,从基础到进阶,涵盖原理、操作、实践案例,助您精通 docker。 |
《linux系列》 | 本专栏主要撰写Linux干货内容,从基础到进阶,知识由抽象到简单通俗易懂,帮你从新手小白到扫地僧。 |
《python 系列》 | 本专栏着重撰写Python相关的干货内容与编程技巧,助力大家从底层去认识Python,将更多复杂的知识由抽象转化为简单易懂的内容。 |
《试题库》 | 本专栏主要是发布一些考试和练习题库(涵盖软考、HCIE、HRCE、CCNA等) |
目录
⛳️ 推荐
专栏介绍
JavaScript 对象:理解与应用
什么是 JavaScript 对象
创建对象的方式
1. 对象字面量
2. 使用 new Object()
3. 工厂函数
4. 构造函数
对象属性操作
1. 访问属性
2. 添加/修改属性
3. 删除属性
原型与原型链
1. 原型链概念
2. 原型链工作原理
对象继承
1. 原型继承
2. 类继承(ES6)
对象高级技巧
1. 模块模式(闭包应用)
2. 优雅处理对象默认值
3. 深度合并对象(支持数组 + 去重)
对象的常用方法
1. Object.keys() 和 Object.values()
2. Object.assign()
3. Object.freeze()(冻结对象)
对象在实际开发中的应用
1. 作为数据结构存储
2. 作为配置对象
3. 作为缓存机制
最佳实践
总结
JavaScript 对象:理解与应用
什么是 JavaScript 对象
在 JavaScript 中,对象是一种引用类型,用于存储键值对(key-value pairs)的数据结构。对象是 JavaScript 中最核心的概念之一,几乎所有 JavaScript 代码都离不开对象。
根据知识库中的信息,JavaScript 有 8 种数据类型,其中 7 种是基本类型(Number、String、Boolean、Undefined、Null、Symbol、BigInt),1 种是引用类型(Object)。对象属于引用类型。
创建对象的方式
1. 对象字面量
// 最常见的创建对象方式 const person = { name: "张三", age: 30, greet: function() { console.log(`Hello, I'm ${this.name}`); } }; // 访问对象属性 console.log(person.name); // "张三" person.greet(); // "Hello, I'm 张三"2. 使用new Object()
const person = new Object(); person.name = "张三"; person.age = 30; person.greet = function() { console.log(`Hello, I'm ${this.name}`); };3. 工厂函数
function createPerson(name, age) { return { name: name, age: age, greet: function() { console.log(`Hello, I'm ${this.name}`); } }; } const person = createPerson("张三", 30);4. 构造函数
function Person(name, age) { this.name = name; this.age = age; this.greet = function() { console.log(`Hello, I'm ${this.name}`); }; } const person = new Person("张三", 30);对象属性操作
1. 访问属性
// 点语法 console.log(person.name); // 方括号语法(适用于属性名包含特殊字符或变量) console.log(person["name"]);2. 添加/修改属性
person.job = "Developer"; // 添加新属性 person.age = 31; // 修改现有属性3. 删除属性
delete person.age; // 删除属性原型与原型链
1. 原型链概念
JavaScript 采用词法作用域,对象的原型链是 JavaScript 继承机制的核心。
function Person(name) { this.name = name; } Person.prototype.sayHello = function() { console.log(`Hello, I'm ${this.name}`); }; const person = new Person("张三"); person.sayHello(); // "Hello, I'm 张三"2. 原型链工作原理
当访问对象的属性时,JavaScript 会先在对象自身查找,如果找不到,会沿着原型链向上查找,直到找到或到达原型链顶端(null)。
对象继承
1. 原型继承
function Student(name, grade) { Person.call(this, name); // 继承父类属性 this.grade = grade; } // 继承父类方法 Student.prototype = Object.create(Person.prototype); Student.prototype.constructor = Student; Student.prototype.study = function() { console.log(`${this.name} is studying in grade ${this.grade}`); }; const student = new Student("李四", 10); student.sayHello(); // "Hello, I'm 李四" student.study(); // "李四 is studying in grade 10"2. 类继承(ES6)
class Person { constructor(name) { this.name = name; } sayHello() { console.log(`Hello, I'm ${this.name}`); } } class Student extends Person { constructor(name, grade) { super(name); this.grade = grade; } study() { console.log(`${this.name} is studying in grade ${this.grade}`); } } const student = new Student("王五", 12); student.sayHello(); // "Hello, I'm 王五" student.study(); // "王五 is studying in grade 12"对象高级技巧
1. 模块模式(闭包应用)
const CounterModule = (function() { let privateCount = 0; function privateIncrement() { privateCount++; } function privateDecrement() { privateCount--; } return { increment: function() { privateIncrement(); console.log(`Count: ${privateCount}`); }, decrement: function() { privateDecrement(); console.log(`Count: ${privateCount}`); }, getCount: function() { return privateCount; } }; })(); CounterModule.increment(); // Count: 1 CounterModule.increment(); // Count: 2 console.log(CounterModule.getCount()); // 22. 优雅处理对象默认值
// 传统写法 const getUserName = (user) => { return user?.profile?.name || '匿名用户'; }; // 优化写法:解构+默认值穿透 const getUserName = ({ profile: { name = '匿名用户' } = {} } = {}) => name; console.log(getUserName({ profile: { name: '张三' } })); // 张三 console.log(getUserName({ profile: {} })); // 匿名用户 console.log(getUserName()); // 匿名用户3. 深度合并对象(支持数组 + 去重)
function deepMerge(target, source) { if (typeof target !== 'object' || target === null) { return source; } if (Array.isArray(target) && Array.isArray(source)) { return [...new Set([...target, ...source])]; } for (const key in source) { if (source.hasOwnProperty(key)) { if (typeof source[key] === 'object' && source[key] !== null) { target[key] = deepMerge(target[key] || {}, source[key]); } else { target[key] = source[key]; } } } return target; } // 使用示例 const obj1 = { a: 1, b: { c: 2 } }; const obj2 = { b: { d: 3 }, e: 4 }; const merged = deepMerge(obj1, obj2); console.log(merged); // { a: 1, b: { c: 2, d: 3 }, e: 4 }对象的常用方法
1.Object.keys()和Object.values()
const person = { name: "张三", age: 30 }; console.log(Object.keys(person)); // ["name", "age"] console.log(Object.values(person)); // ["张三", 30]2.Object.assign()
const target = { a: 1 }; const source = { b: 2 }; Object.assign(target, source); console.log(target); // { a: 1, b: 2 }3.Object.freeze()(冻结对象)
const person = { name: "张三", age: 30 }; Object.freeze(person); person.age = 31; // 无法修改 console.log(person.age); // 30对象在实际开发中的应用
1. 作为数据结构存储
// 存储用户信息 const users = [ { id: 1, name: "张三", email: "zhangsan@example.com" }, { id: 2, name: "李四", email: "lisi@example.com" } ]; // 查找特定用户 const user = users.find(u => u.id === 1); console.log(user.name); // "张三"2. 作为配置对象
// 配置对象 const config = { apiUrl: "https://api.example.com", timeout: 5000, debug: true }; // 使用配置 fetch(config.apiUrl, { timeout: config.timeout }) .then(response => console.log("Data fetched")) .catch(error => console.error("Error:", error));3. 作为缓存机制
const cache = {}; function fetchData(url) { if (cache[url]) { console.log("Using cached data"); return cache[url]; } // 模拟API请求 const data = { url, content: "Sample data" }; cache[url] = data; return data; } console.log(fetchData("https://api.example.com/data")); // 从API获取 console.log(fetchData("https://api.example.com/data")); // 使用缓存最佳实践
优先使用
const:对象一旦创建,尽量不要重新赋值,但可以修改对象内部属性。使用有意义的属性名:让代码更易读。
避免使用
var:var有变量提升和作用域问题,优先使用let和const。合理使用原型:不要在原型上添加大量方法,以免影响性能。
使用
Object.freeze:对于不应被修改的对象,可以使用Object.freeze。使用 ES6+ 的对象特性:如对象简写、计算属性名等。
总结
JavaScript 对象是语言的核心,理解对象的工作原理对掌握 JavaScript 至关重要。对象不仅是数据存储的容器,也是实现封装、继承和多态的基础。通过掌握对象的创建、属性操作、原型链和继承,你可以编写更高效、可维护的 JavaScript 代码。
正如知识库[4]中提到的:"15个 JavaScript 高级技巧,让你的代码更优雅高效",对象相关的技巧是实现优雅代码的关键之一。理解并熟练运用这些技巧,将使你的 JavaScript 代码更加专业和高效。
❤️❤️❤️本人水平有限,如有纰漏,欢迎各位大佬评论批评指正!😄😄😄
💘💘💘如果觉得这篇文对你有帮助的话,也请给个点赞、收藏下吧,非常感谢!👍 👍 👍
🔥🔥🔥Stay Hungry Stay Foolish 道阻且长,行则将至,让我们一起加油吧!🌙🌙🌙