JavaScript 複製對象

来源:http://www.cnblogs.com/Uncle-Keith/archive/2017/05/11/6843322.html
-Advertisement-
Play Games

在JavaScript這門語言中，數據類型分為兩大類：基本數據類型和複雜數據類型。基本數據類型包括Number、Boolean、String、Null、String、Symbol（ES6 新增），而複雜數據類型包括Object，而所有其他引用類型（Array、Date、RegExp、Function ...


在JavaScript這門語言中，數據類型分為兩大類：基本數據類型和複雜數據類型。基本數據類型包括Number、Boolean、String、Null、String、Symbol（ES6 新增），而複雜數據類型包括Object，而所有其他引用類型（Array、Date、RegExp、Function、基本包裝類型（Boolean、String、Number）、Math等）都是Object類型的實例對象，因此都可以繼承Object原型對象的一些屬性和方法。

而對於基本數據類型來說，複製一個變數值，本質上就是copy了這個變數。一個變數值的修改，不會影響到另外一個變數。看一個簡單的例子。

let val = 123;
let copy = val;
console.log(copy);  //123
val = 456;          //修改val的值對copy的值不產生影響
console.log(copy);  //123

而對於複雜數據類型來說，同基本數據類型實現的不太相同。對於複雜數據類型的複製，要註意的是，變數名只是指向這個對象的指針。當我們將保存對象的一個變數賦值給另一個變數時，實際上複製的是這個指針，而兩個變數都指向都一個對象。因此，一個對象的修改，會影響到另外一個對象。

// obj只是指向對象的指針
let obj = {
    character: 'peaceful'
};
//copy變數複製了這個指針，指向同一個對象
let copy = obj;
console.log(copy);          //{character: 'peaceful'}
obj.character = 'lovely';
console.log(copy);          //{character: 'lovely'}

有一副很形象的圖描述了複雜數據類型複製的原理

同理，在複製一個數組時，變數名只是指向這個數組對象的指針；在複製一個函數時，函數名只是指向這個函數對象的指針

let arr = [1, 2, 3];
let copy = arr;
console.log(copy); // [1, 2, 3]
arr[0] = 'keith';
console.log(copy); // 數組對象被改變： ['keith', 2, 3]
arr = null;
console.log(copy); // ['keith', 2, 3] 即使arr=null，也不會影響copy。因此此時的arr變數只是一個指向數組對象的指針

function foo () {
    return 'hello world';
};
let bar = foo;
console.log(foo());
foo = null;     //foo只是指向函數對象的指針
console.log(bar());

因此，我們應該如何實現對象的深淺複製?

複製對象

在JavaScript中，複製對象分為兩種方式，淺複製和深複製。

淺複製沒有辦法去真正的去複製一個對象，而只是保存了對該對象的引用；而深複製可以實現真正的複製一個對象。

淺複製

在ES6中，Object對象新增了一個assign方法，可以實現對象的淺複製。這裡談談Object.assign方法的具體用法，因為稍後會分析jQuery的extend方法，實現的原理同Object.assign方法差不多

Object.assign的第一個參數是目標對象，可以跟一或多個源對象作為參數，將源對象的所有可枚舉（[[emuerable]] === true）複製到目標對象。這種複製屬於淺複製，複製對象時只是包含對該對象的引用。Object.assign(target, [source1, source2, ...])

  • 如果目標對象與源對象有同名屬性，則後面的屬性會覆蓋前面的屬性
  • 如果只有一個參數，則直接返回該參數。即Object.assign(obj) === obj
  • 如果第一個參數不是對象，而是基本數據類型（Null、Undefined除外），則會調用對應的基本包裝類型
  • 如果第一個參數是Null和Undefined，則會報錯；如果Null和Undefined不是位於第一個參數，則會略過該參數的複製

要實現對象的淺複製，可以使用Object.assign方法

let target = {a: 123};
let source1 = {b: 456};
let source2 = {c: 789};
let obj = Object.assign(target, source1, source2);
console.log(obj);

不過對於深複製來說，Object.assign方法無法實現

let target = {a: 123};
let source1 = {b: 456};
let source2 = {c: 789, d: {e: 'lovely'}};
let obj = Object.assign(target, source1, source2);
source2.d.e = 'peaceful';
console.log(obj);   // {a: 123, b: 456, c: 789, d: {e: 'peaceful'}}

從上面代碼中可以看出，source2對象中e屬性的改變，仍然會影響到obj對象

深複製

在實際的開發項目中，前後端進行數據傳輸，主要是通過JSON實現的。JSON全稱：JavaScript Object Notation，JavaScript對象表示法。

JSON對象下有兩個方法，一是將JS對象轉換成字元串對象的JSON.stringify方法；一個是將字元串對象轉換成JS對象的JSON.parse方法。

這兩個方法結合使用可以實現對象的深複製。也就是說，當我們需要複製一個obj對象時，可以先調用JSON.stringify(obj)，將其轉換為字元串對象，然後再調用JSON.parse方法，將其轉換為JS對象。就可以輕鬆的實現對象的深複製

let obj = {
    a: 123,
    b: {
        c: 456,
        d: {
            e: 789
        }
    }
};
let copy = JSON.parse(JSON.stringify(obj));
// 對obj對象無論怎麼修改，都不會影響到copy對象
obj.b.c = 'hello';
obj.b.d.e = 'world';
console.log(copy);  // {a: 123, b: {c: 456, d: {e: 789}}}

當然，使用這種方式實現深複製有一個缺點就是必須給JSON.parse方法傳入的字元串必須是合法的JSON，否則會拋出錯誤

jQuery.extend || jQuery.fn.extend

jQuery.extend對象，對使用jQuery超過一定時間的朋友來說並不預設。這個$.extend方法可以用來擴展jQuery的全局對象，而$.fn.extend方法可以用來擴展實例對象。fn實際上是prototype對象的別名，所以，擴展實例對象的方法實際上就是在jQuery原型對象上添加一些方法。

$.extend方法不僅可以用來寫jQuery插件，同樣的，它可以用來實現對象的深淺複製。（使用$.extend與$.fn.extend實現深淺複製都可以，唯一的差別就是this的指向性不同）

在具體分析源代碼之前，我在源碼中看到的$.extend方法的一些特點

  • 當不接受任何參數時，直接返回一個空對象
  • 當只有一個參數時（這個參數可以任何數據類型（Null、Undefined、Boolean、String、Number、Object）），會返回this對象，這裡會分為兩種情況。如果用$.extend，會返回jQuery對象；如果用$.fn.extend，會返回jQuery的原型對象。
  • 當接收兩個參數時，並且第一個參數是Boolean值時，也會返回一個空對象。如果第一個參數不是Boolean值，那麼會將源對象複製到目標對象
  • 當接收三個參數以上時，可以分為兩種情況。如果第一個參數是Boolean值表示深淺複製，那麼目標對象會移動到第二個參數，源對象會移動到第三個參數。（目標對象、源對象和Object.assign方法中的相同）。如果第一個參數不是Boolean值，那麼用法與Object.assign方法常規的複製相同。
  • 在迴圈源對象的過程中，任何數據類型為Null、Undefined或者源對象是一個空對象時，在複製的過程中都會被忽略。
  • 如果源對象和目標對象具有同名的屬性，則源對象的屬性會覆蓋掉目標對象中的屬性。如果同名屬性是一個對象的話，則會在deep=true等其他條件下向目標對象的該同名對象添加屬性

下麵貼出jQuery-2.1.4中jQuery.extend實現方式的源代碼

jQuery.extend = jQuery.fn.extend = function() {
    var options, name, src, copy, copyIsArray, clone,
        target = arguments[0] || {},
        // 使用||運算符，排除隱式強制類型轉換為false的數據類型
        // 如'', 0, undefined, null, false等
        // 如果target為以上的值，則設置target = {}
        i = 1,
        length = arguments.length,
        deep = false;

    // 當typeof target === 'boolean'時
    // 則將deep設置為target的值
    // 然後將target移動到第二個參數，
    if (typeof target === "boolean") {
        deep = target;
        // 使用||運算符，排除隱式強制類型轉換為false的數據類型
        // 如'', 0, undefined, null, false等
        // 如果target為以上的值，則設置target = {}
        target = arguments[i] || {};
        i++;
    }

    // 如果target不是一個對象或數組或函數，
    // 則設置target = {}
    // 這裡與Object.assign的處理方法不同，
    // assign方法會將Boolean、String、Number方法轉換為對應的基本包裝類型
    // 然後再返回，
    // 而extend方法直接將typeof不為object或function的數據類型
    // 全部轉換為一個空對象
    if (typeof target !== "object" && !jQuery.isFunction(target)) {
        target = {};
    }

    // 如果arguments.length === 1 或
    // typeof arguments[0] === 'boolean', 且存在arguments[1]，
    // 這時候目標對象會指向this
    // this的指向哪個對象需要看是使用$.fn.extend還是$.extend
    if (i === length) {
        target = this;
        // i-- 表示不進入for迴圈
        i--;
    }

    // 迴圈arguments類數組對象，從源對象開始
    for (; i < length; i++) {
        // 針對下麵if判斷
        // 有一點需要註意的是
        // 這裡有一個隱式強制類型轉換 undefined == null 為 true
        // 而undefined === null 為 false
        // 所以如果源對象中數據類型為Undefined或Null
        // 那麼就會跳過本次迴圈，接著迴圈下一個源對象
        if ((options = arguments[i]) != null) {
            // 遍歷所有[[emuerable]] === true的源對象
            // 包括Object, Array, String
            // 如果遇到源對象的數據類型為Boolean, Number
            // for in迴圈會被跳過，不執行for in迴圈
            for (name in options) {
                // src用於判斷target對象是否存在name屬性
                src = target[name];

                // 需要複製的屬性
                // 當前源對象的name屬性
                copy = options[name];

                // 這種情況暫時未遇到..
                // 按照我的理解，
                // 即使copy是同target是一樣的對象
                // 兩個對象也不可能相等的..
                if (target === copy) {
                    continue;
                }

                // if判斷主要用途：
                // 如果是深複製且copy是一個對象或數組
                // 則需要遞歸jQuery.extend(),
                // 直到copy成為一個基本數據類型為止
                if (deep && copy && (jQuery.isPlainObject(copy) || (copyIsArray = jQuery.isArray(copy)))) {
                    // 深複製
                    if (copyIsArray) {
                        // 如果是copy是一個數組
                        // 將copyIsArray重置為預設值
                        copyIsArray = false;
                        // 如果目標對象存在name屬性且是一個數組
                        // 則使用目標對象的name屬性，否則重新創建一個數組，用於複製
                        clone = src && jQuery.isArray(src) ? src : [];

                    } else {
                        // 如果目標對象存在name屬性且是一個對象
                        // 則使用目標對象的name屬性，否則重新創建一個對象，用於複製
                        clone = src && jQuery.isPlainObject(src) ? src : {};
                    }

                    // 因為深複製，所以遞歸調用jQuery.extend方法
                    // 返回值為target對象，即clone對象
                    // copy是一個源對象
                    target[name] = jQuery.extend(deep, clone, copy);

                } else if (copy !== undefined) {
                    // 淺複製
                    // 如果copy不是一個對象或數組
                    // 那麼執行elseif分支
                    // 在elseif判斷中如果copy是一個對象或數組，
                    // 但是都為空的話，排除這種情況
                    // 因為獲取空對象的屬性會返回undefined
                    target[name] = copy;
                }
            }
        }
    }

    // 當源對象全部迴圈完畢之後，返回目標對象
    return target;
};

因此，可以針對分析過後的源碼，給出一些例子

let obj1 = $.extend();
console.log(obj1); // 返回一個空對象 {}

let obj2 = $.extend(undefined);
console.log(obj2); //返回jQuery對象，Object.assign傳入undefined會報錯

let obj3 = $.extend('123');
console.log(obj3); // 返回jQuery對象，Object.assign傳入'123'會返回字元串的String對象

let target = {
    a: 123,
    b: 234
};

let source1 = {
    b: 456,
    d: ['keith', 'peaceful', 'lovely']
};

let source2 = {c: 789};
let source3 = {};

let obj4 = $.extend(target, source1, source2);
// let obj4 = $.extend(false, target, source1, source2);
console.log(obj4); // {a: 123, b: 456, d: Array(3), c: 789}
// 預設情況下，複製方式都是淺複製
// 如果只需要淺複製，不傳入deep參數也可以
// 淺複製時，obj4對象中的d屬性只是指向數組對象的指針

let obj5 = $.extend(target, undefined, source2);
let obj6 = $.extend(target, source3, source2);
console.log(obj5, obj6);
// {a: 123, b: 234, c: 789}, {a: 123, b: 234, c: 789}
// 會略過空對象或Undefined、Null值

let obj7 = $.extend(true, target, source1, source2);
console.log(obj7);  // {a: 123, b: 456, d: Array(3), c: 789}
// 這裡target對象有b屬性，源對象source1也有b屬性
// 此時源對象的b屬性會覆蓋目標對象的b屬性
// 這裡deep=true，屬於深複製
// 當name=d時，會遞歸調用$.extend, 直到它的屬性對應的屬性值全部為基本數據類型
// 源對象的改變不會影響到obj7對象

JavaScript 複製對象

因此，可以根據$.extend方法，寫出一個通用的實現對象深淺複製的函數，copyObject函數唯一的不同就是當i === arguments.length屬性時，copyObject函數直接返回了target對象

function copyObject () {
    let i = 1,
        target = arguments[0] || {},
        deep = false,
        length = arguments.length,
        name, options, src, copy,
        copyIsArray, clone;

    // 如果第一個參數的數據類型是Boolean類型
    // target往後取第二個參數
    if (typeof target === 'boolean') {
        deep = target;
        // 使用||運算符，排除隱式強制類型轉換為false的數據類型
        // 如'', 0, undefined, null, false等
        // 如果target為以上的值，則設置target = {}
        target = arguments[1] || {};
        i++;
    }

    // 如果target不是一個對象或數組或函數
    if (typeof target !== 'object' && !(typeof target === 'function')) {
        target = {};
    }

    // 如果arguments.length === 1 或
    // typeof arguments[0] === 'boolean',
    // 且存在arguments[1]，則直接返回target對象
    if (i === length) {
        return target;
    }

    // 迴圈每個源對象
    for (; i < length; i++) {
        // 如果傳入的源對象是null或undefined
        // 則迴圈下一個源對象
        if (typeof (options = arguments[i]) != null) {
            // 遍歷所有[[emuerable]] === true的源對象
            // 包括Object, Array, String
            // 如果遇到源對象的數據類型為Boolean, Number
            // for in迴圈會被跳過，不執行for in迴圈
            for (name in options) {
                // src用於判斷target對象是否存在name屬性
                src = target[name];
                // copy用於複製
                copy = options[name];
                // 判斷copy是否是數組
                copyIsArray = Array.isArray(copy);
                if (deep && copy && (typeof copy === 'object' || copyIsArray)) {
                    if (copyIsArray) {
                        copyIsArray = false;
                        // 如果目標對象存在name屬性且是一個數組
                        // 則使用目標對象的name屬性，否則重新創建一個數組，用於複製
                        clone = src && Array.isArray(src) ? src : [];
                    } else {
                        // 如果目標對象存在name屬性且是一個對象
                        // 則使用目標對象的name屬性，否則重新創建一個對象，用於複製
                        clone = src && typeof src === 'object' ? src : {};
                    }
                    // 深複製，所以遞歸調用copyObject函數
                    // 返回值為target對象，即clone對象
                    // copy是一個源對象
                    target[name] = copyObject(deep, clone, copy);
                } else if (copy !== undefined){
                    // 淺複製，直接複製到target對象上
                    target[name] = copy;
                }
            }
        }
    }
    // 返回目標對象
    return target;      
}

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • jQuery手風琴的製作！！
    jQuery手風琴的製作 首先我們先來做一個簡單的jQuery的效果圖 效果圖 如下： css代碼 如下： {margin: 0;padding: 0;} ul,li{list style:none} ul { width: 300px; background: yellow; margin: 50 ...
  • jQuery選擇器的的優點
    jQuery選擇器的的優點 選擇器想必大家都不陌生，今天呢，我就給大家介紹一下jQuery選擇器的優點： 1. jQuery選擇器更簡潔的寫法： 2. jQuery完善的處理機制： 3. jQuery選擇器判斷dom節點存在的方法： 4. jQuery選擇器支持css1 css3所有的選擇器： 看完 ...
  • jQuery選擇器的分類
    jQuery選擇器的分類 jQuery中有很多分類，大類分為四類，四類裡面又分為很多小類，下麵就為大家一一介紹，這些選擇器的使用和好處，Me用的是jQuery1.8.3的版本 選擇器都有哪四類？？ 1.基本選擇器都有哪些？？？ 基本選擇器的代碼。。 代碼運行出來的結果。。 2.層級選擇器都有哪些？？ ...
  • 23.3.3 Web存儲機制【JavaScript高級程式設計第三版】
    Web Storage 最早是在Web 超文本應用技術工作組（WHAT-WG）的Web 應用1.0 規範中描述的。 這個規範的最初的工作最終成為了HTML5 的一部分。Web Storage 的目的是剋服由cookie 帶來的一些限制，當數據需要被嚴格控制在客戶端上時，無須持續地將數據發回伺服器。W ...
  • 用 WebSocket 實現一個簡單的客服聊天系統
    一 需求 一個多商家的電商系統，比如京東商城，不同商家之間的客服是不同的，所面對的用戶也是不同的。要實現這樣一個電商系統的客服聊天系統，那該系統就必須是一個支持多客服、客服一對多用戶的聊天系統。 二 思路 使用 Node.js 搭建伺服器，安裝 websocket 模塊、node-uuid模塊。通過 ...
  • 取消事件預設行為（移動端）
    在編寫功能時，遇到一個很有意思的事情，後來經過思索就解決了這個問題。 這個功能的需求是點擊一個按鈕，彈出對話框，其他部分籠罩一層灰色，點擊灰色後彈出框消失，如果只是這樣就比較好實現，但還有其他需求，那就是這個按鈕所在的這個整體內容，點擊它之後會進入另一個頁面，所以我的思路是使用事件冒泡，判斷是點擊了 ...
  • zepto全選按鈕之全選會根據按鈕是否被全部選中更改狀態
    在做手機端二次開發購物車的時候，發現zepto全選，沒找到，或者功能不是自己想要的 後來做好，分享給需要的人 //全選或多選處理 var CheckAll = $('#items_check_all'); var checkbox = $('input[name^="check"]'); var r ...
  • js中常見演算法
    一、面試80%都要問的數組去重 數組去重的方式有多種，其實面試中主要是想靠對對象的理解。還記得我第一次去面試的時候，去重的時候用了2個for迴圈。 二、返回字元串中字元出現次數最多的那字元 三、排序演算法（排序演算法的種類太多） 1.冒泡排序 2.選擇排序 三、不藉助中間變數交換2個變數的值 四、未完待 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類