解析 JavaScript 对象数据类型及其基础

2023-10-26 20:00:51

一、对象的基本概念

1. 定义

对象（Object） ：对象是一种非原始数据类型，它允许开发者使用键值对来存储和访问数据。对象中的每一个键值对都由一个属性名（key）和一个属性值（value）组成。
属性名 ：属性名是用于标识键值对中数据的唯一键。属性名可以是字符串、数字或符号。
属性值 ：属性值是与属性名相关联的数据值。属性值可以是任何数据类型，包括原始数据类型（字符串、数字、布尔值）和非原始数据类型（数组、对象等）。

2. 创建对象

有以下几种方式创建对象：

对象字面量 ：对象字面量是最常用的创建对象的方式。对象字面量使用大括号 {} 来定义，键值对使用冒号 : 来分隔，键值对之间使用逗号 , 来分隔。例如：

const person = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

new Object() ：也可以使用 new Object() 语法来创建对象。例如：

const person = new Object();
person.name = "John Doe";
person.age = 30;
person.city = "New York";

Object.create() ：Object.create() 方法创建一个新对象，该对象继承另一个对象的属性和方法。例如：

const person = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

const student = Object.create(person);
student.school = "Harvard University";

二、访问和修改对象属性

1. 访问属性

有以下几种方式访问对象属性：

点语法 ：点语法是最常用的访问对象属性的方式。点语法使用点号 . 来访问对象属性。例如：

const person = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

console.log(person.name); // John Doe
console.log(person.age); // 30
console.log(person.city); // New York

方括号语法 ：方括号语法也可以用来访问对象属性。方括号语法使用方括号 [] 来访问对象属性。例如：

const person = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

console.log(person["name"]); // John Doe
console.log(person["age"]); // 30
console.log(person["city"]); // New York

2. 修改属性

有以下几种方式修改对象属性：

点语法 ：点语法可以用来修改对象属性。例如：

const person = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

person.name = "Jane Doe";
person.age = 31;
person.city = "Los Angeles";

console.log(person);
// { name: 'Jane Doe', age: 31, city: 'Los Angeles' }

方括号语法 ：方括号语法也可以用来修改对象属性。例如：

const person = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

person["name"] = "Jane Doe";
person["age"] = 31;
person["city"] = "Los Angeles";

console.log(person);
// { name: 'Jane Doe', age: 31, city: 'Los Angeles' }

三、JSON 表示法

JavaScript 对象可以使用 JSON（JavaScript Object Notation）表示法来表示。JSON 是一种轻量级的数据交换格式，它使用键值对来表示数据。JSON 表示法通常用于在服务器和客户端之间传输数据。

要将 JavaScript 对象转换为 JSON 字符串，可以使用 JSON.stringify() 方法。例如：

const person = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

const json = JSON.stringify(person);

console.log(json);
// "{\"name\":\"John Doe\",\"age\":30,\"city\":\"New York\"}"

要将 JSON 字符串转换为 JavaScript 对象，可以使用 JSON.parse() 方法。例如：

const json = "{\"name\":\"John Doe\",\"age\":30,\"city\":\"New York\"}";

const person = JSON.parse(json);

console.log(person);
// { name: 'John Doe', age: 30, city: 'New York' }

四、常见操作

1. 遍历对象

有以下几种方式遍历对象：

for...in 循环 ：for...in 循环可以用来遍历对象的属性名。例如：

const person = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

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

Object.keys() ：Object.keys() 方法返回一个包含对象所有属性名的数组。例如：

const person = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

const keys = Object.keys(person);

console.log(keys);
// [ 'name', 'age', 'city' ]

Object.values() ：Object.values() 方法返回一个包含对象所有属性值的数组。例如：

const person = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

const values = Object.values(person);

console.log(values);
// [ 'John Doe', 30, 'New York' ]

Object.entries() ：Object.entries() 方法返回一个包含对象所有键值对的数组。例如：

const person = {
  name: "John Doe",
  age: 30,
  city: "New York"
};

const entries = Object.entries(person);

console.log(entries);
// [ [ 'name', 'John Doe' ], [ 'age', 30 ], [ 'city', 'New York' ] ]

2. 合并对象

有以下几种方式合并对象：

Object.assign() ：Object.assign() 方法可以用来合并两个或多个对象。例如：

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

const address = {
  city: "New York",
  state: "NY"
};

const newPerson = Object.assign({}, person, address);

console.log(newPerson);
// { name: 'John Doe', age: 30, city: 'New York', state: 'NY' }

扩展运算符 ：扩展运算符也可以用来合并对象。例如：

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

const address = {
  city: "New York",
  state: "NY"
};

const newPerson = { ...person, ...address };

console.log(newPerson);
// { name: 'John Doe', age: 30, city: 'New York', state: 'NY' }