JS对象入门：轻松掌握JavaScript对象基础

本文详细介绍了JS对象入门的相关知识，涵盖对象的基本概念、创建方法、属性和方法的添加、访问和删除操作，构造函数与原型链的使用，以及JSON数据处理。通过丰富的示例代码，帮助读者更好地理解和应用JS对象。

什么是JS对象

JavaScript对象是一种无序的、可变的数据结构，用于存储一组键值对。每个键值对包含一个键（key）和一个关联的值（value）。在JavaScript中，对象通常用花括号 {} 来定义。

对象与数据类型

JavaScript中的数据类型分为原始类型（Primitive Types）和引用类型（Reference Types）。原始类型包括 number、string、boolean、null、undefined 和 symbol。引用类型包括 object 和 function。对象是JavaScript中最灵活的数据类型，可以包含任何其他类型的数据。

下面是一个简单的对象示例：

let person = {
    name: "张三",
    age: 25,
    gender: "男"
};

创建对象的方法

创建JavaScript对象有多种方法：

1. 对象字面量：这是最常见也是最直接的方式，使用花括号创建对象。

let person = {
    name: "张三",
    age: 25,
    gender: "男"
};

1. 构造函数：通过定义一个函数来创建对象实例。

function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
}

let person1 = new Person("张三", 25, "男");

1. Object构造器：使用 Object 构造函数创建对象。

let person2 = new Object();
person2.name = "张三";
person2.age = 25;
person2.gender = "男";

1. Object.create()：使用 Object.create() 方法创建一个新对象，该对象将指定原型对象作为其原型。

let prototypeObj = {
    gender: "男"
};

let person3 = Object.create(prototypeObj);
person3.name = "张三";
person3.age = 25;

添加属性与方法

添加属性到对象通常直接通过属性名赋值即可。添加方法（函数）也是一样。

let person = {
    name: "张三",
    age: 25,
    gender: "男",
    sayName: function() {
        console.log("我的名字是：" + this.name);
    }
};

访问属性与方法

访问对象的属性和方法可以通过点符号 . 或方括号 []。

let person = {
    name: "张三",
    age: 25,
    gender: "男",
    sayName: function() {
        console.log("我的名字是：" + this.name);
    }
};

console.log(person.name);  // 输出：张三
console.log(person['age']);  // 输出：25
person.sayName();  // 输出：我的名字是：张三

删除属性与方法

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

let person = {
    name: "张三",
    age: 25,
    gender: "男"
};

delete person.gender;
console.log(person);  // 输出：{ name: "张三", age: 25 }

构造函数的基本概念

构造函数是一种特殊的函数，用于创建和初始化特定类型的对象。构造函数通常以大写字母开头。

function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
}

使用 new 关键字调用构造函数可以创建新对象实例。

let person1 = new Person("张三", 25, "男");
console.log(person1);  // 输出：{ name: "张三", age: 25, gender: "男" }

使用原型链

每个函数在定义时都有一个 prototype 属性，它是一个对象，包含该函数实例的引用类型属性和方法。

function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
}

Person.prototype.sayHello = function() {
    console.log("你好，我是" + this.name);
};

let person1 = new Person("张三", 25, "男");
person1.sayHello();  // 输出：你好，我是张三

原型与实例的属性与方法

原型对象上的方法和属性可以被所有实例共享。下面的示例展示了如何在原型上添加方法。

function Person(name, age, gender) {
    this.name = name;
    this.age = age;
    this.gender = gender;
}

Person.prototype.sayName = function() {
    console.log("我的名字是：" + this.name);
};

let person1 = new Person("张三", 25, "男");
let person2 = new Person("李四", 30, "女");

person1.sayName();  // 输出：我的名字是：张三
person2.sayName();  // 输出：我的名字是：李四

JSON的基本概念

JSON（JavaScript Object Notation）是一种轻量级的数据交换格式。它基于JavaScript的语法，但可以被多种编程语言解析。JSON数据格式使用键值对的形式来表达数据。

JSON与对象的转换

在JavaScript中，可以使用 JSON.stringify() 将对象转换为JSON字符串，使用 JSON.parse() 将JSON字符串转换为对象。

let person = {
    name: "张三",
    age: 25,
    gender: "男"
};

let jsonStr = JSON.stringify(person);
console.log(jsonStr);  // 输出：{"name":"张三","age":25,"gender":"男"}

let parsedPerson = JSON.parse(jsonStr);
console.log(parsedPerson);  // 输出：{ name: "张三", age: 25, gender: "男" }

使用JSON处理数据

下面的示例展示了如何使用JSON处理实际数据。

// 定义一个对象
let person = {
    name: "张三",
    age: 25,
    gender: "男",
    address: {
        street: "东方街1号",
        city: "北京"
    }
};

// 将对象转换为JSON字符串
let jsonStr = JSON.stringify(person);
console.log(jsonStr);

// 将JSON字符串转换回对象
let parsedPerson = JSON.parse(jsonStr);
console.log(parsedPerson);

// 使用JSON处理数据
parsedPerson.hobbies = ["阅读", "编程", "旅行"];
console.log(parsedPerson);

使用for和for...in遍历对象

for...in 循环可以遍历对象的每一个属性。

let person = {
    name: "张三",
    age: 25,
    gender: "男",
    address: {
        street: "东方街1号",
        city: "北京"
    }
};

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

使用Object.keys、Object.values和Object.entries

Object.keys() 返回一个数组，包含对象中所有可枚举属性的键名。

let person = {
    name: "张三",
    age: 25,
    gender: "男"
};

let keys = Object.keys(person);
console.log(keys);  // 输出：["name", "age", "gender"]

Object.values() 返回一个数组，包含对象中所有可枚举属性的值。

let person = {
    name: "张三",
    age: 25,
    gender: "男"
};

let values = Object.values(person);
console.log(values);  // 输出：["张三", 25, "男"]

Object.entries() 返回一个数组，每个元素是一个数组，包含键值对。

let person = {
    name: "张三",
    age: 25,
    gender: "男"
};

let entries = Object.entries(person);
console.log(entries);  // 输出：[ [ 'name', '张三' ], [ 'age', 25 ], [ 'gender', '男' ] ]

创建简单的对象实例

创建一个简单的对象实例来表示用户信息。

let user = {
    username: "张三",
    age: 25,
    gender: "男",
    sayHello: function() {
        console.log("你好，我是" + this.username);
    }
};

user.sayHello();  // 输出：你好，我是张三

应用对象解决实际问题

假设我们需要一个简单的购物车系统，可以添加商品到购物车，以及计算购物车中商品的总价。

let ShoppingCart = {
    items: [],

    addItem: function(item, price) {
        this.items.push({ item: item, price: price });
    },

    calculateTotal: function() {
        let total = 0;
        for (let item of this.items) {
            total += item.price;
        }
        return total;
    }
};

ShoppingCart.addItem("苹果", 5);
ShoppingCart.addItem("香蕉", 3);
ShoppingCart.addItem("橙子", 4);

console.log("购物车总价：" + ShoppingCart.calculateTotal());  // 输出：购物车总价：12