今天我将讨论 JavaScript 中的一个重要概念，该概念几乎在每个地方和每个项目中都使用，即“对象”。
对象是 JavaScript 的支柱，为从简单的数据结构到复杂的应用程序的一切提供支持。无论您是初学者还是经验丰富的开发人员，掌握如何有效地创建、修改和操作对象都可以显著改善您的代码。在本指南中，我们将分解 JavaScript 对象，以帮助您编写更清晰、更优化的代码。
目录
创建对象
访问对象属性
修改对象属性
检查属性
迭代对象
复制和克隆对象
合并对象
冷冻和密封物体
转换对象
高级对象处理
对象解构
对象方法
对象原型
1. 创建对象
JavaScript 允许你以不同的方式创建对象。最常用的方法是对象字面量和new Object()语法。
// 1. Creating objects
// Using Object Literal
const programming = {
language: "Javascript",
extension: ".js",
usedFor: "Web development and backend"
};
scrib.show("Using object literal - ",programming)
// Using new Object()
const programmingObject = new Object();
programmingObject.language = "Python";
programmingObject.extension = ".py";
programmingObject.usedFor = "Web development and AI/ML";
scrib.show("Using new Object - ",programmingObject)2.访问对象属性
您可以使用点符号或括号符号访问对象属性。
// 2. Accessing properties
const programming = {
language: "Javascript",
extension: ".js",
usedFor: "Web development and backend"
};
// Dot Notation
scrib.show("Using dot notation - ",programming.language); // "Javascript"
// Bracket Notation
scrib.show("Using bracket notation - ",programming["extension"]); // .js
// Bracket Notation with spaces
scrib.show("Using bracket notation with key with spaces - ",programming["Used with"]); // HTML and CSS3.修改对象属性
您可以使用赋值（）来更新对象的属性=。
// 3. Modifying properties
const programming = {
language: "Javascript",
extension: ".js",
usedFor: "Web development and backend"
};
// Updating properties
programming.language = "Python";
// Adding new properties
programming["Used with"] = "HTML and CSS";
scrib.show(programming);
// { "language": "Python", "extension": ".js", "usedFor": "Web development and backend", "Used with": "HTML and CSS" }4. 检查属性
使用in运算符或hasOwnProperty()检查属性是否存在。
// 4. Checking properties
const programming = {
language: "Javascript",
extension: ".js",
usedFor: "Web development and backend"
};
// Using "in" operator
scrib.show("'language' in programming?", "language" in programming); // true
scrib.show("'Used for' in programming?", "Used for" in programming); // false
// Using hasOwnProperty()
scrib.show("'extension' in programming?",programming.hasOwnProperty("extension")); // true5. 迭代对象
使用for...in和for...of循环遍历对象的属性。
// 5. iterating objects
const programming = {
language: "Javascript",
extension: ".js",
usedFor: "Web development and backend"
};
// looping over the object directly
for (let key in programming) {
scrib.show(`${key}: ${programming[key]}`);
}
const keys = Object.keys(programming);
const values = Object.values(programming);
const entries = Object.entries(programming);
// Iterating keys
for (let key of keys) {
scrib.show(`key: ${key}`);
}
// Iterating values
for (let value of values) {
scrib.show(`Value: ${value}`);
}
// Iterating entries with key and value both
for (let [key, value] of entries) {
scrib.show(`Key: ${key},Value: ${value}`);
}6. 复制和克隆对象
通过创建副本来避免修改原始对象。
对于深度复制（嵌套对象），使用
structuredClone()（现代浏览器）或JSON.parse(JSON.stringify(obj))。
// 6. Copying and cloning objects
const programming1 = {
language: "Javascript",
extension: ".js",
usedFor: "Web development and backend"
};
const programming2 = {
language: "Python",
extension: ".py",
usedFor: "Web development and AI/ML",
libraries: [{
name:"pytorch"
},{
name:"numpy"
}]
};
// Shallow Copy using Object.assign()
const copying1 = Object.assign({}, programming1);
scrib.show(copying1);
// Shallow Copy using Spread Operator
const copying2 = { ...programming1 };
scrib.show(copying2);
// for deep copies, using structuredClone
const deepCopy = structuredClone(programming2);
scrib.show(deepCopy);7. 合并对象
使用Object.assign()或扩展运算符来合并对象。
// 7. Merging objects
const programming = {
language: "Javascript",
extension: ".js",
usedFor: "Web development and backend"
};
const concepts = {
concepts: "Arrays, Objects, Functions, Fetch, Classes"
};
// Using Object.assign()
const merged1 = Object.assign({}, programming, concepts);
scrib.show(merged1)
// Using Spread Operator
const merged2 = { ...programming, ...concepts };
scrib.show(merged1)8. 冷冻和密封物体
用于
Object.freeze()使对象变得不可变。用于
Object.seal()允许修改但阻止添加/删除属性。
// 8. Freezing
const programming = {
language: "Javascript",
extension: ".js",
usedFor: "Web development and backend"
};
// freezing
Object.freeze(programming);
programming.language = "Python"; // Won't change
scrib.show(programming); // { "language": "Javascript", "extension": ".js", "usedFor": "Web development and backend" }
// 8. Sealing
const programming = {
language: "Javascript",
extension: ".js",
usedFor: "Web development and backend"
};
Object.seal(programming);
programming["Used for"] = "Web development and backend" // Adding/removing not Allowed
programming.language = "Python" // Updating Allowed
scrib.show(programming);9. 转换对象
将对象转换为数组或JSON 字符串。
// 9. Converting objects
const programming = {
language: "Javascript",
extension: ".js",
usedFor: "Web development and backend"
};
// Convert Object to JSON
const jsonString = JSON.stringify(programming);
scrib.show(jsonString); // {"language":"Javascript","extension":".js","usedFor":"Web development and backend"}
// Convert Object to arrays
const jsonArray = Object.entries(programming);
scrib.show(jsonArray); // [ [ "language", "Javascript" ], [ "extension", ".js" ], [ "usedFor", "Web development and backend" ]]10. 高级对象处理
使用对象解构
const user = { name: "Jake", age: 26, job: "Engineer" };
const { name, age } = user;
console.log(name, age); // "Jake", 26使用对象方法
const person = {
name: "Emma",
greet() {
console.log(`Hello, my name is ${this.name}`);
}
};
person.greet();使用对象原型
JavaScript 对象从其原型继承属性。
// Object prototype
function Programming(language, extension,usedFor) {
this.language = language;
this.extension = extension;
this.usedFor = usedFor;
}
Programming.prototype.fetchDoc = () => "Doc is fetched for javascript";
const javascript = new Programming("Javascript", ".js","Web development and backend");
javascript.fetchDoc(); // Doc is fetched for javascript结论
在 JavaScript 中，高效处理对象至关重要。无论您是创建、修改、迭代还是合并对象，掌握这些技术都可以帮助您编写更简洁、更优化的代码。