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方法會將新的屬性覆蓋掉原有屬性。