上海网站建设q.479185700強,崇安网站建设,现在网络推广有哪些平台,淘宝客做网站好还是建群号JS#xff08;七#xff09;avaScript中的对象
01 什么是对象 在JavaScript中#xff0c;对象是一种复合数据类型#xff0c;用于存储键值对。对象可以包含多个属性#xff08;键值对#xff09;#xff0c;每个属性都有一个名称#xff08;键#xff09;和一个值。 …JS七avaScript中的对象
01 什么是对象 在JavaScript中对象是一种复合数据类型用于存储键值对。对象可以包含多个属性键值对每个属性都有一个名称键和一个值。 这些值可以是基本数据类型如字符串、数字、布尔值、其他对象或者函数。 对象是 JavaScript 中最重要的数据类型之一几乎所有的东西都是对象包括数组、函数、日期甚至是原始数据类型的包装对象例如字符串、数字和布尔值。 对象提供了一种灵活的方式来组织和管理数据使得开发者能够以更加直观和结构化的方式处理复杂的数据结构。
JavaScript 对象具有以下特点
属性和方法对象由属性和方法组成属性是键值对中的键方法是键值对中的函数值。动态性对象的属性和方法可以随时添加、修改或删除。无序性对象的属性没有固定的顺序。引用类型对象是引用类型的实例可以通过引用来传递和操作。原型继承JavaScript 中的对象可以通过原型链来继承属性和方法。
以下是一个简单的 JavaScript 对象示例
// 创建一个空对象
var person {};// 添加属性
person.name John;
person.age 30;
person.gender male;// 添加方法
person.sayHello function() {console.log(Hello, my name is this.name and Im this.age years old.);
};// 调用方法
person.sayHello(); // 输出: Hello, my name is John and Im 30 years old.02 为什么使用对象
组织数据对象提供了一种组织和存储数据的方式可以将相关的数据属性组合在一起形成一个逻辑上的单元。抽象复杂性对象允许将复杂的数据结构抽象为一个单一的实体使得代码更易于理解和维护。封装对象可以封装属性和方法通过公开接口暴露特定的功能隐藏实现细节从而提高代码的模块化和可重用性。可扩展性对象的属性和方法可以随时添加、修改或删除使得代码更具灵活性和可扩展性。代码重用通过创建对象模板例如构造函数或类可以实现代码的重用多个对象可以共享相同的属性和方法。传递和返回复杂值对象可以作为参数传递给函数也可以作为函数的返回值从而实现对复杂值的传递和返回。面向对象编程JavaScript 是一种面向对象的语言对象是面向对象编程的基本单位使用对象可以更轻松地实现面向对象编程的思想和模式。JSON 数据交换JavaScript 对象符合 JSONJavaScript Object Notation格式因此在 Web 开发中经常用于数据交换和通信。
03 创建对象
1.对象字面量
使用对象字面量的方式可以直接创建一个对象并指定其属性和方法。
var person {name: John,age: 30,sayHello: function() {console.log(Hello, my name is this.name and Im this.age years old.);}
};
console.log(person)// 输出: {name: John, age: 30, sayHello: ƒ}2.使用构造函数
使用构造函数可以创建一个对象模板并通过new关键字实例化对象。
function Person(name, age) {this.name name;this.age age;this.sayHello function() {console.log(Hello, my name is this.name and Im this.age years old.);};
}var person1 new Person(John, 30);// 输出: Person {name: John, age: 30, sayHello: ƒ}
var person2 new Person(Alice, 25);// 输出: Person {name: Alice, age: 25, sayHello: ƒ}console.log(person1);
console.log(person2);
3.使用Object.create()方法
使用Object.create()方法可以创建一个新对象并指定其原型对象。
var personProto {sayHello: function() {console.log(Hello, my name is this.name and Im this.age years old.);}
};var person Object.create(personProto);
person.name John;
person.age 30;
person.sayHello()// 输出: Hello, my name is John and Im 30 years old.
console.log(person);// 输出: {name: John, age: 30}4.使用类ES6及以后版本
使用类的方式可以更方便地定义对象模板并创建对象实例。
class Person {constructor(name, age) {this.name name;this.age age;}sayHello() {console.log(Hello, my name is this.name and Im this.age years old.);}
}var person new Person(John, 30);
person.sayHello()// 输出: Hello, my name is John and Im 30 years old.
console.log(person);// 输出: {name: John, age: 30}
04 访问属性/方法
1.点符号 (.) 访问
使用点符号可以直接访问对象的属性和方法语法为对象名.属性名 或 对象名.方法名()。
var person {name: John,age: 30,sayHello: function() {console.log(Hello, my name is this.name and Im this.age years old.);}
};console.log(person.name); // 输出: John
person.sayHello(); // 输出: Hello, my name is John and Im 30 years old.2.方括号 ([]) 访问
使用方括号可以动态地访问对象的属性和方法语法为对象名[属性名] 或 对象名[方法名]()。
var person {name: John,age: 30,sayHello: function() {console.log(Hello, my name is this.name and Im this.age years old.);}
};console.log(person.name); // 输出: John
person.sayHello(); // 输出: Hello, my name is John and Im 30 years old.var propertyName name;
console.log(person[propertyName]); // 输出: Johnvar methodName sayHello;
person[methodName](); // 输出: Hello, my name is John and Im 30 years old.console.log(person);// 输出: name: John, age: 30, sayHello: ƒ}注意 通常情况下使用点符号更为常见和直观但是方括号语法可以使用变量来动态访问对象的属性和方法这在某些情况下非常有用。 如果属性或方法名中包含特殊字符或者以数字开头就必须使用方括号访问例如对象名[my-property] 或 对象名[123method]()。
05 修改属性
1.直接赋值
可以直接使用赋值操作符来修改对象的属性值。
javascriptCopy Codevar person {name: John,age: 30
};// 修改属性值
person.name Alice;
person.age 25;console.log(person.name); // 输出: Alice
console.log(person.age); // 输出: 252.使用对象的方法
有时候对象可能会提供一些方法来修改属性值例如 set 方法。
var person {_name: John,_age: 30,setName: function(newName) {this._name newName;},setAge: function(newAge) {this._age newAge;}
};// 使用对象的方法修改属性值
person.setName(Alice);
person.setAge(25);console.log(person._name); // 输出: Alice
console.log(person._age); // 输出: 2506 遍历对象
1.for…in 循环
使用 for...in 循环可以遍历对象的可枚举属性包括自身属性和继承属性。
var person {name: John,age: 30,gender: male
};for (var key in person) {console.log(key : person[key]);
}
// 输出:name: John
// age: 30
// gender: male在使用 for...in 循环时可能会遍历到对象继承的属性因此需要使用 hasOwnProperty() 方法来判断属性是否为对象自身的属性。
2.Object.keys() 方法
使用 Object.keys() 方法可以获取对象自身可枚举属性组成的数组然后可以对数组进行遍历操作。
var person {name: John,age: 30,gender: male
};Object.keys(person).forEach(function(key) {console.log(key : person[key]);
});
// 输出:name: John
// age: 30
// gender: male3.Object.getOwnPropertyNames() 方法
使用 Object.getOwnPropertyNames() 方法可以获取对象自身所有属性包括不可枚举属性然后可以对数组进行遍历操作。
var person {name: John,age: 30,gender: male
};Object.getOwnPropertyNames(person).forEach(function(key) {console.log(key : person[key]);
});
// 输出:name: John
// age: 30
// gender: male4.方法2与方法3的区别
1.Object.getOwnPropertyNames() 方法
获取对象自身所有属性包括不可枚举属性以数组形式返回。返回的数组包含对象自身的所有属性不仅仅是可枚举的属性。不会获取继承的属性只返回对象自身的属性。可以用于获取对象的所有属性包括不可枚举的属性。
var obj {a: 1,b: 2
};Object.defineProperty(obj, c, {value: 3,enumerable: false // 设置属性 c 为不可枚举
});console.log(Object.getOwnPropertyNames(obj)); // 输出: [a, b, c]2.Object.keys() 方法
获取对象自身可枚举属性的键名以数组形式返回。只返回对象自身的可枚举属性不包括不可枚举的属性和继承的属性。通常用于获取对象的可枚举属性比较适合用于遍历对象的键值对。
var obj {a: 1,b: 2
};Object.defineProperty(obj, c, {value: 3,enumerable: false // 设置属性 c 为不可枚举
});console.log(Object.keys(obj)); // 输出: [a, b]3.使用场景
如果需要获取对象的所有属性包括不可枚举属性可以使用 Object.getOwnPropertyNames() 方法。如果只需要获取对象的可枚举属性一般可以使用 Object.keys() 方法这在进行对象属性的遍历或者筛选时很方便。
