深入淺出FE(七)物件的深淺拷貝

2021-10-04 11:21:57 字數 2303 閱讀 3941

物件的拷貝在js中比較重要,因為js不同與c++等,沒有指標操作,基本型別都是沒有引用的,只有物件和函式才有引用,這就造成當我們在拷貝乙個物件時,可能會有深淺拷貝之分。

淺拷貝的意思就是只複製引用(指標),而未複製真正的值。而深拷貝則是改變物件的引用,深拷貝形成的新物件和原來的物件有不一樣的位址。

比如乙個物件的定義如下:

var a =
這時這個物件只有一層,我們可以用很多中方法都可以實現物件的拷貝,比如object.assign({}, a)來實現物件的拷貝,因為物件第一層中的值沒有引用。

object.assign()方法用於將所有可列舉屬性的值從乙個或多個源物件複製到目標物件。它將返回目標物件。

但是如果遇到複雜物件,則必須要用到深拷貝,比如我們在react中的setstate中的新狀態必須要重新生成乙個新的物件(位址),不能有***(不能改變原來物件的值)。

此時有很多種方法都可以實現物件的拷貝:

1. json.parse(json.stringify(obj))

序列化能解決大部分物件拷貝的問題,但是有很多缺點:

(1)會忽略undefined

(2)不能序列化函式

(3)不能解決迴圈引用的物件

2.messagechannel

channel messaging api的messagechannel介面允許我們建立乙個新的訊息通道,並通過它的兩個messageport屬性傳送資料。

我們可以根據這個新的訊息通道拷貝乙個新的物件,能解決序列化不能忽略undefined和迴圈引用的問題。

唯一缺點是:不能序列化函式。

function clonedeep(obj) = new messagechannel();

port2.onmessage = ev => resolve)(ev.data);

prot1.postmessage(obj);

})}//注意這是非同步函式

var obj =

}const cloneobject = await clonedeep(obj)

3.使用lodash庫中的clonedeep函式

loadsh clonedeep,在webpack中需要按需引入,否則打包過大,

使用方式有三種:

(1)使用時按需引入

import  from 'lodash/deepclone';
(2)使用外掛程式優化

lodash-webpack-plugin

安裝後在webpack中配置

var lodashmodulereplacementplugin = require('lodash-webpack-plugin');

var webpack = require('webpack');

module.exports = }]]}}

]},

plugins: [new lodashmodulereplacementplugin(), new webpack.optimize.uglifyjsplugin()]

};

(3)使用 lodash-es

tree-shaking 作為 rollup 的乙個殺手級特性,能夠利用 es6 的靜態引入規範,減少包的體積,避免不必要的**引入,webpack2 也很快引入了這個特性。

要用到 tree-shaking,必然要保證引用的模組都是 es6 規範的。lodash-es 是著具備 es6 模組化的版本,只需要直接引入就可以。

import  from 'lodash-es';
4.jquery的extend深拷貝和淺拷貝

淺層複製(只複製頂層的非 object 元素)

var newobject = jquery.extend({}, oldobject);
深層複製(一層一層往下複製直到最底層)

var newobject = jquery.extend(true, {}, oldobject);
除此以外,還有很多其他優秀的庫也實現了深拷貝,這裡就不一一舉例。

在github上有人分析了lodash的原始碼中關於deepclone的實現,有興趣的可以再深入了解。

(四)對IP協議的深入淺出

那麼問題來了,怎麼規劃子網?這就引入了ip協議了,當然,有ip協議就有對應的ip位址標準,目前擁有ipv4,以及ipv6。子網劃分 子網定址 有了5大型別abcde,同個型別不同的網路號都占有一樣的主機數,有些地方可能不需要那麼多的主機號,而且分配ip位址也很麻煩,每個區域的中心網路需要負責整個區域...

對TCP IP協議的深入淺出總結

話說兩台電腦要通訊就必須遵守共同的規則,就好比兩個人要溝通就必須使用共同的語言一樣。乙個只懂英語的人,和乙個只懂中文的人由於沒有共同的語言 規則 就沒辦法溝通。兩台電腦之間進行通訊所共同遵守的規則,就是網路協議。tcp ip 是乙個協議族,也是按照層次劃分。共四層 應用層,傳輸層,互連網路層,網路介...

對TCP IP網路協議的深入淺出歸納

前段時間做了乙個開發,涉及到網路程式設計,開發過程比較順利,但任務完成後始終覺得有一些疑惑。主要是因為對網路協議不太熟悉,對一些概念也沒弄清楚。後來 我花了一些時間去了解這些網路協議,現在對tcp ip網路協議有了初步的認識,在這裡總結出來,可以梳理一下我對網路協議的理解,加深印象.話說兩台電腦要通...