JavaScript 对象操作

142 阅读3分钟

前言

对象操作是在JavaScript中常见且必备的技能之一。通过对象操作,我们可以添加、修改、访问和删除对象的属性,以及使用对象的方法来实现各种功能。本章带你打通任督二脉!

一、创建对象

1.使用对象字面量 {} 创建对象

const person = {
  name: "John",
  age: 30,
  profession: "Developer"
};

2.使用 new Object 构造函数创建对象

const person = new Object();
person.name = "John";
person.age = 30;
person.profession = "Developer";

二、访问对象

1.使用点号 . 或方括号 [] 访问对象的属性

const person = {
  name: "John",
  age: 30
};
console.log(person.name); // 输出:"John"
console.log(person["age"]); // 输出:30

三、修改属性

1.通过赋值操作修改对象的属性值

const person = {
  name: "John",
  age: 30,
}
person.age = 35;
onsole.log(person.age); // 输出:35

四、遍历对象

1.使用 for..in 循环语句遍历对象

const person = {
  name: "John",
  age: 30,
  profession: "Developer"
};

for (const key in person) {
  console.log(key + ": " + person[key]);
}
// 控制台日志中就会打出 'john' 30 'Developer'

五、对象方法

1.添加属性

1).通过赋值操作向对象添加属性

const person = {
  name: "John",
  age: 30
};

person.profession = "Developer";
console.log(person); // 输出:{ name: "John", age: 30, profession: "Developer" }

2).使用 Object.defineProperty 方法向对象添加属性

const person = {
  name: "John",
  age: 30
};

person.profession = "Developer";
console.log(person); // 输出:{ name: "John", age: 30, profession: "Developer" }

2.删除属性

1).使用 delete 关键字删除对象的属性

const person = {
  name: "John",
  age: 30,
  profession: "Developer"
};

delete person.profession;
console.log(person); // 输出:{ name: "John", age: 30 }

3.对象键值对

1).使用 Object.keys 方法获取对象的键

const person = {
  name: "John",
  age: 30,
  profession: "Developer"
};

const keys = Object.keys(person);
console.log(keys); // 输出:["name", "age", "profession"]

2).使用 Object.values 方法获取对象的值

const person = {
  name: "John",
  age: 30,
  profession: "Developer"
};

const values = Object.values(person);
console.log(values); // 输出:["John", 30, "Developer"]

3).使用 Object.entries 方法获取对象的键值对

const person = {
  name: "John",
  age: 30,
  profession: "Developer"
};

const entries = Object.entries(person);
console.log(entries);
// 输出:[["name", "John"], ["age", 30], ["profession", "Developer"]]

4.对象合并

1).使用 Object.assign 方法合并多个对象的属性

const person = {
  name: "John"
};

const info = {
  age: 30,
  profession: "Developer"
};

const merged = Object.assign(person, info);
console.log(merged); // 输出:{ name: "John", age: 30, profession: "Developer" }

5.对象复制

1).通过浅拷贝将一个对象复制到另外一个对象

const person = {
  name: "John"
};

const info = {
  age: 30,
  profession: "Developer"
};

const merged = Object.assign(person, info);
console.log(merged); // 输出:{ name: "John", age: 30, profession: "Developer" }

练习题:

1.计算对象属性值的和
function calculateSum(obj) {
  ...你的代码
}

// 示例用法
const obj1 = { a: 1, b: 2, c: 3 };
console.log(calculateSum(obj1)); // 输出 6

const obj2 = { x: 10, y: 20, z: 30 };
console.log(calculateSum(obj2)); // 输出 60

2.对象属性计数
function countProperties(obj) {
  ...你的代码
}

// 示例用法
const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};
console.log(countProperties(person)); // 输出 3

const car = {
  brand: 'Tesla',
  model: 'Model 3',
  year: 2022,
  color: 'blue'
};
console.log(countProperties(car)); // 输出 4

结语:

知识本身是没有价值的,只有在不断应用于实践中才能发挥作用。在这个充满竞争的世界中,希望各位读者砥砺前行,为自己的未来铺上一条成功的道路。

当日落的晚霞藏进山谷中,天边的云朵遮上一层轻盈的黑纱。这一刻,时间好似凝固,或许有些坚持仍在黎明之前,未见曙光。但总有一些坚持,能从苍茫的暗夜洞见万丈光芒,能从一寸冰封的土地里,绽放出绚烂的春华。

基础篇的内容到这里就划上句号了,但,这世间的故事却仍在继续。愿你们在继续探索与成长的旅程中,书写属于自己的精彩故事。感谢您的阅读,让我们后会有期。