js--對象賦值與合並（解構和復制assign）

前言

　　前端開發中經常會遇到給對象賦值的操作，比如在我們拿到后端的數據的時候，我們需要一一給我們頁面綁定的對象進行賦值，又或者在點擊重置按鈕的時候，我們經常需要給查詢的條件空間進行初始化賦值。本文來總結一下常見的對象賦值，合並的方法。

正文

　　1、手動給對象進行賦值

     // 模擬請求回來的接口
        const resData = {
            name: "張三",
            age: 18,
            sex: "男"
        }
        // 模擬頁面綁定數據
        const data = {
            name: null,
            age: null,
            sex: null
        }
        data.name = resData.name
        data.age = resData.age
        data.sex = resData.sex
        console.log(data);// {name: "張三",age: 18,sex: "男"}

 　　上面這種方法最為簡單，但是實際開發中當對象的屬性特別多的時候，代碼就會十分冗余，因此，ES6 中新增了擴展運算符和 Object.assign() 合並對象的方法。

　　2、擴展運算符實現合並

　　擴展運算符大家應該並不陌生，來看下面的代碼：

    // 模擬請求回來的接口
        const resData = {
            name: "張三",
            age: 18,
            sex: "男"
        }
        // 模擬頁面綁定數據
        const data = {
            name: null,
            age: null,
            sex: null
        }
        const newData = { ...data , ...resData}
        console.log(newData);// {name: "張三",age: 18,sex: "男"}

　　上面的代碼確實能將請求回來的數據進行合並，但是缺點是每次合並都需要創建一個newData 變量，原來的 data 對象並沒有發生變化。

　　3、Object,assign() 詳解

　　官方文檔介紹：Object.assign() 方法用於將所有可枚舉屬性的值從一個或多個源對象分配到目標對象。它將返回目標對象。

　　使用語法：Object.assign(target，...sources)， 其中 target 為目標對象（即合並后生成對象），sources 為源對象（即被合並對象），返回值為目標對象

　　注意：如果目標對象中的屬性和源對象中有相同的鍵，則源對象的值會覆蓋目標對象的值。當源對象值為null 或者undefined 的時候，不會拋出錯誤。

　　使用代碼如下：

    // 模擬請求回來的接口
        const resData = {
            name: "張三",
            age: 18,
            sex: "男"
        }
        // 模擬頁面綁定數據
        const data = {
            name: null,
            age: null,
            sex: null
        }
        const returnValue = Object.assign(data,resData)
        console.log(returnValue);// {name: "張三",age: 18,sex: "男"}
        console.log(data);// {name: "張三",age: 18,sex: "男"}

寫在最后

　　以上就是本文的全部內容，希望給讀者帶來些許的幫助和進步，方便的話點個關注，小白的成長之路會持續更新一些工作中常見的問題和技術點。