JS对象赋值详解

一、基础语法

JS中的对象赋值方式有两种：直接赋值和通过构造函数赋值。我们先来看一下直接赋值的基础语法：

const obj = {
    key1: value1,
    key2: value2,
    ...
};

其中key表示对象中属性的名称，value表示该属性所对应的值。我们也可以通过obj[key]的方式获取value。

需要注意的是，直接赋值方式中，对象的每个属性前面都需要加上一个属性名。而如果对应的属性名是字符串，则需要用双引号或单引号将其括起来。

下面是一个示例代码：

const person = {
    name: "Tom",
    age: 20,
    gender: "male",
    sayHi: function() {
        console.log("Hi, my name is " + this.name);
    }
};

console.log(person.name); // 输出 Tom
person.sayHi(); // 输出 "Hi, my name is Tom"

二、复杂对象赋值

JS中的对象也可以互相嵌套，形成复杂的数据结构。在复杂对象赋值时，我们可以使用与基础语法类似的方式进行嵌套：

const obj = {
    key1: {
        key2: value2,
        key3: value3
    },
    key4: value4,
    ...
};

如此一来，我们可以通过obj.key1.key2的方式获取value2。

需要注意的是，如果我们修改obj.key1的引用，那么对象的属性也会随之改变。下面是一个示例代码：

const obj1 = {
    name: "Tom",
    age: 20
};
const obj2 = {
    person: obj1,
    grade: "A"
};

console.log(obj2); // 输出 {person: {name: "Tom", age: 20}, grade: "A"}

obj2.person.name = "Mike";
console.log(obj2); // 输出 {person: {name: "Mike", age: 20}, grade: "A"}

在此示例代码中，我们先创建了obj1和obj2两个对象。然后通过obj2.person的方式将obj1嵌套在了一个新的对象中。之后，我们修改了obj2.person.name的引用，发现obj2中的person对象的name属性也相应地改变了。这是因为嵌套对象只是存储了对原对象的引用，而不是将原对象的值拷贝一份。

三、深拷贝与浅拷贝

如果我们需要复制一个对象，我们可以使用深拷贝或浅拷贝的方式。浅拷贝会将对象的引用复制一份，而深拷贝会创建一个新的对象，并将其中的属性都复制一份。

下面是一个浅拷贝的示例代码：

const obj1 = {
    name: "Tom",
    age: 20
};
const obj2 = obj1;

console.log(obj1); // 输出 {name: "Tom", age: 20}
console.log(obj2); // 输出 {name: "Tom", age: 20}

obj2.name = "Mike";

console.log(obj1); // 输出 {name: "Mike", age: 20}
console.log(obj2); // 输出 {name: "Mike", age: 20}

在此示例代码中，我们通过obj2 = obj1的方式进行了浅拷贝。之后，我们修改了obj2的引用，发现obj1中的name属性也相应地改变了。这是因为浅拷贝只是复制了对象的引用，而不是创建了一个新的对象。

下面是一个深拷贝的示例代码：

function deepCopy(obj) {
    let newObj = Array.isArray(obj) ? [] : {};

    for (let key in obj) {
        if (typeof obj[key] === "object" && obj[key] !== null) {
            newObj[key] = deepCopy(obj[key]);
        } else {
            newObj[key] = obj[key];
        }
    }

    return newObj;
}

const obj1 = {
    name: "Tom",
    age: 20
};
const obj2 = deepCopy(obj1);

console.log(obj1); // 输出 {name: "Tom", age: 20}
console.log(obj2); // 输出 {name: "Tom", age: 20}

obj2.name = "Mike";

console.log(obj1); // 输出 {name: "Tom", age: 20}
console.log(obj2); // 输出 {name: "Mike", age: 20}

在此示例代码中，我们通过定义deepCopy函数来实现深拷贝。该函数会递归地创建新的对象，并将原对象中的属性都复制一份。

四、动态赋值

JS中的对象在创建后可以动态地增加或删除属性。我们可以通过以下方式进行增加：

const obj = {
    key1: value1,
    key2: value2,
    ...
};

obj.newKey = newValue;
console.log(obj); // 输出 {key1: value1, key2: value2, newKey: newValue}

我们可以发现，通过赋值obj.newKey = newValue的方式，我们成功地在原对象中动态增加了一个newKey属性。

下面是一个示例代码：

const person = {
    name: "Tom",
    age: 20,
    gender: "male",
    sayHi: function() {
        console.log("Hi, my name is " + this.name);
    }
};
person.job = "engineer";

console.log(person); // 输出 {name: "Tom", age: 20, gender: "male", job: "engineer", sayHi: function}

需要注意的是，如果我们动态增加的属性名是字符串，则需要用双引号或单引号将其括起来。

删除一个对象的属性，我们可以使用delete运算符，如下所示：

const obj = {
    key1: value1,
    key2: value2,
    ...
};

delete obj.key1;
console.log(obj); // 输出 {key2: value2, ...}

我们可以发现，通过delete obj.key1的方式，我们成功地删除了原对象中的key1属性。

五、Object.assign方法

JS的Object对象提供了一个assign方法，可以将多个对象合并为一个对象，并返回该对象。在这个方法中，只有浅拷贝。

const obj1 = {
    key1: value1,
    key2: value2,
    ...
};
const obj2 = {
    key3: value3,
    key4: value4,
    ...
};

const newObj = Object.assign(obj1, obj2);
console.log(newObj); // 输出 {key1: value1, key2: value2, key3: value3, key4: value4, ...}

需要注意的是，Object.assign方法会将新的属性合并到目标对象中。如果目标对象中已经存在相同的属性，则会覆盖原有属性的值。

下面是一个示例代码：

const person = {
    name: "Tom",
    age: 20,
    sayHi: function() {
        console.log("Hi, my name is " + this.name);
    }
};
const job = {
    jobTitle: "engineer",
    sayHi: function() {
        console.log("Hi, my job title is " + this.jobTitle);
    }
};

const newObj = Object.assign(person, job);
console.log(newObj); // 输出 {name: "Tom", age: 20, sayHi: function, jobTitle: "engineer"}

newObj.sayHi(); // 输出 "Hi, my job title is engineer"

需要注意的是，在此示例代码中，我们创建了两个对象person和job。其中，person对象中的sayHi属性为一个函数，而job对象中的sayHi属性也为一个函数。通过Object.assign方法后，newObj对象中的sayHi属性是job对象中的函数。这说明Object.assin方法会将新的属性覆盖掉原有属性。