一文掌握JavaScript对象

1. JavaScript的对象概述

JavaScript是一门高级的动态编程语言,它是一种对象导向的语言,也被称为面向对象的语言。对象是JavaScript中最基本的数据类型之一,其他数据类型都是基于对象类型创建的。在JavaScript中,对象是一种复杂的数据结构,用于存储和表示数据。对象可以是其他数据类型的容器,并可以包含属性和方法。

对象是由属性和方法组成的,属性可以是原始值,函数,其他对象等等。属性可以通过属性名称访问,方法可以通过函数调用来执行。

1.1 JavaScript对象的创建

有几种方法可以创建JavaScript对象:

使用对象字面量:

let car = {

brand: 'Audi',

model: 'A3',

year: 2021,

start: function() {

console.log('The car is started');

}

};

上述代码使用对象字面量创建了一个名为car的对象。其包含属性brand,model, year和方法start。

使用构造函数:

function Car(brand, model, year) {

this.brand = brand;

this.model = model;

this.year = year;

this.start = function() {

console.log('The car is started');

};

}

let myCar = new Car('Audi', 'A3', 2021);

上述代码使用构造函数创建了一个名为myCar的对象,其调用了Car函数并传递了三个参数。myCar包含了brand,model, year属性和start方法。

使用Object.create方法:

let carPrototype = {

start: function() {

console.log('The car is started');

}

};

let car = Object.create(carPrototype, {

brand: { value: 'Audi' },

model: { value: 'A3' },

year: { value: 2021 }

});

上述代码使用Object.create方法创建了一个名为car的对象。它继承了carPrototype的start方法,并具有brand,model, year属性。

1.2 JavaScript对象的访问

在JavaScript中,可以通过点号(.)或方括号([])来访问对象的属性和方法。

使用点号:

console.log(car.brand); // Audi

car.start(); // The car is started

使用方括号:

console.log(car['brand']); // Audi

car['start'](); // The car is started

2. JavaScript对象的属性

JavaScript对象的属性可以是字符串、数字、布尔值、对象或函数,可以添加、修改和删除对象的属性。

2.1 添加属性

可以使用点号或方括号添加属性。

car.color = 'black'; // 添加color属性

car['price'] = 50000; // 添加price属性

2.2 修改属性

可以使用点号或方括号更改属性的值。

car.color = 'white'; // 将color属性从black修改为white

car['price'] = 60000; // 将price属性从50000修改为60000

2.3 删除属性

可以使用delete关键字删除对象的属性。

delete car.color; // 删除color属性

delete car['price']; // 删除price属性

3. JavaScript对象的方法

JavaScript对象的方法是一种函数,可以访问对象属性并执行操作。方法可以在对象字面量、构造函数或Object.create()中定义。

3.1 添加方法

可以在对象字面量、构造函数或Object.create()中定义方法。

// 对象字面量中

let car = {

brand: 'Audi',

model: 'A3',

year: 2021,

start: function() {

console.log('The car is started');

}

};

// 构造函数中

function Car(brand, model, year) {

this.brand = brand;

this.model = model;

this.year = year;

this.start = function() {

console.log('The car is started');

};

}

// Object.create()中

let carPrototype = {

start: function() {

console.log('The car is started');

}

};

let car = Object.create(carPrototype, {

brand: { value: 'Audi' },

model: { value: 'A3' },

year: { value: 2021 }

});

3.2 调用方法

调用对象的方法需要使用对象名称和函数名称,并用圆括号括起来。

car.start();

4. JavaScript对象的循环

可以使用for...in语句循环遍历对象的属性和方法。

for (let propName in car) {

console.log(propName + ": " + car[propName]);

}

上述代码将遍历car对象中所有的属性和方法,并打印在控制台中。

5. JavaScript内置对象

JavaScript有许多内置对象,包括Math、String、Date、Array等。这些对象在JavaScript中非常常见,并且在编写代码时经常使用。

5.1 Math对象

Math对象包含常用的数学常数和函数,例如pi、sin、cos、tan等。

console.log(Math.PI); // 3.141592653589793

console.log(Math.sin(Math.PI/2)); // 1

console.log(Math.sqrt(64)); // 8

5.2 String对象

String对象表示文本字符串,并且有许多有用的方法,可以用于字符串的操作。

let str = "hello world";

console.log(str.toUpperCase()); // "HELLO WORLD"

console.log(str.indexOf('world')); // 6

console.log(str.substring(3, 7)); // "lo w"

5.3 Date对象

Date对象用于处理和操作日期和时间。

let today = new Date();

console.log(today); // Thu Jul 29 2021 16:21:33 GMT+0800 (中国标准时间)

console.log(today.getFullYear()); // 2021

5.4 Array对象

Array对象表示序列化的元素列表,并且有许多方法,可以用于操作和遍历数组。

let arr = [1, 2, 3, 4, 5];

console.log(arr.length); // 5

console.log(arr.reverse()); // [ 5, 4, 3, 2, 1 ]

console.log(arr.sort()); // [ 1, 2, 3, 4, 5 ]

console.log(arr.join('|')); // "1|2|3|4|5"

6. 总结

JavaScript对象是JavaScript语言中最基本的数据类型之一,其他数据类型都是基于对象类型创建的。对象可以包含多个属性和方法,可以使用对象字面量、构造函数或Object.create()来创建对象。使用点号或方括号可以访问对象的属性和方法,可以使用for...in语句循环遍历对象的属性和方法。JavaScript语言中还有许多内置对象,例如Math、String、Date、Array等。