一文掌握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等。

一文掌握JavaScript对象