掌握 JavaScript 中的对象-js教程-PHP中文网

掌握 JavaScript 中的对象

心靈之曲

发布： 2024-12-18 09:18:01

原创

993人浏览过

掌握 javascript 中的对象

JavaScript 对象详解

JavaScript 对象是键值对的集合，值可以是数据（属性）或函数（方法）。它在 JavaScript 中至关重要，因为几乎所有事物，包括数组、函数甚至其他对象，都是对象。

1. 对象创建方法

a. 对象字面量

最便捷的创建对象方式是使用花括号 {}。

示例：

const person = {
  name: "Alice",
  age: 25,
  greet: function() {
    console.log("Hello!");
  }
};

console.log(person.name); // 输出：Alice
person.greet(); // 输出：Hello!

登录后复制

b. 对象构造函数

使用 new Object() 创建一个空对象，然后添加属性和方法。

立即学习“Java免费学习笔记（深入）”；

示例：

const person = new Object();
person.name = "Bob";
person.age = 30;
person.greet = function() {
  console.log("Hi!");
};

console.log(person.name); // 输出：Bob
person.greet(); // 输出：Hi!

登录后复制

c. `Object.create()` 方法

此方法创建一个新对象，并指定其原型对象。

示例：

const prototype = { greet: function() { console.log("Hello!"); } };
const person = Object.create(prototype);
person.name = "Charlie";
console.log(person.name); // 输出：Charlie
person.greet(); // 输出：Hello!

登录后复制

2. 访问对象属性

a. 点运算符

使用点号 . 访问属性。

示例：

console.log(person.name); // 输出：Alice

登录后复制

b. 方括号表示法

使用方括号 [] 访问属性，尤其适用于动态属性名。

示例：

console.log(person["name"]); // 输出：Alice
const key = "age";
console.log(person[key]); // 输出：25

登录后复制

3. 属性操作

添加属性：

person.country = "USA";
console.log(person.country); // 输出：USA

登录后复制

修改属性：

person.age = 26;
console.log(person.age); // 输出：26

登录后复制

删除属性：

delete person.age;
console.log(person.age); // 输出：undefined

登录后复制

4. 对象方法

对象中的函数称为方法。

Asp+Ajax(Jquery)实用例子

Ajax是目前比较流行的网站建设技术，尤其作为网站建设者来说，掌握它十分有必要，如果用原生Javascript开发则比较困难，还好有强大的Jquery加持，开发则变的十分简单和容易。

查看详情

示例：

const car = {
  brand: "Tesla",
  start: function() {
    console.log("Car started!");
  }
};

car.start(); // 输出：Car started!

登录后复制

5. 迭代对象属性

a. `for...in` 循环

迭代对象的所有可枚举属性。

示例：

for (let key in person) {
  console.log(`${key}: ${person[key]}`);
}

登录后复制

b. `Object.keys()` 方法

返回对象键的数组。

示例：

Object.keys(person).forEach(key => {
  console.log(`${key}: ${person[key]}`);
});

登录后复制

c. `Object.entries()` 方法

返回 [key, value] 对的数组。

示例：

Object.entries(person).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

登录后复制

6. 对象常用方法

Object.assign()：复制对象属性。

const target = { a: 1 };
const source = { b: 2 };
Object.assign(target, source);
console.log(target); // 输出：{ a: 1, b: 2 }

登录后复制

Object.freeze()：冻结对象，防止修改。

const obj = { a: 1 };
Object.freeze(obj);
obj.a = 2; // 无效
console.log(obj.a); // 输出：1

登录后复制

Object.seal()：防止添加或删除属性，但允许修改现有属性。

const obj = { a: 1 };
Object.seal(obj);
obj.b = 2; // 无效
obj.a = 3; // 有效
console.log(obj); // 输出：{ a: 3 }

登录后复制

7. 原型与继承

JavaScript 对象拥有原型，用于继承属性和方法。

示例：

const animal = { eats: true };
const dog = Object.create(animal);
dog.barks = true;

console.log(dog.eats); // 输出：true (继承)
console.log(dog.barks); // 输出：true

登录后复制

8. 对象解构

将对象的属性提取到变量中。

示例：

const person = { name: "Alice", age: 25 };
const { name, age } = person;
console.log(name); // 输出：Alice
console.log(age); // 输出：25

登录后复制

9. 总结

对象是存储属性和方法的键值对集合。
对象字面量是创建对象的简便方法。
使用点运算符或方括号表示法访问属性。
Object.keys()、Object.assign() 和 Object.freeze() 等方法用于高效的对象操作。
掌握对象对于理解原型和继承等高级概念至关重要。

作者：Abhay Singh Kathayat，全栈开发者。联系邮箱：kaashshorts28@gmail.com

以上就是掌握 JavaScript 中的对象的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

JavaScript_机器学习与TensorFlow.js应用图像识别：TensorFlow.js机器学习 JavaScript视频编辑_MediaStreamAPI实时流处理 JavaScript数学计算与数值分析库 JavaScript路径寻找与AI

掌握 JavaScript 中的对象

JavaScript 对象详解

1. 对象创建方法

a. 对象字面量

b. 对象构造函数

c. Object.create() 方法

2. 访问对象属性

a. 点运算符

b. 方括号表示法

3. 属性操作

4. 对象方法

5. 迭代对象属性

a. for...in 循环

b. Object.keys() 方法

c. Object.entries() 方法

6. 对象常用方法

7. 原型与继承

8. 对象解构

9. 总结

大家都在看：

c. `Object.create()` 方法

a. `for...in` 循环

b. `Object.keys()` 方法

c. `Object.entries()` 方法