2023年Q2用戶偏好榜：12+256G版本成新主流
3月份的性能榜、性價(jià)比榜和好評(píng)榜之后，就要輪到2023年的第二季度偏好榜了，上半年的新機(jī)潮已經(jīng)過去，最明顯的肯定就是大內(nèi)存和存儲(chǔ)的機(jī)型了，另外部分中端機(jī)也取消了屏幕塑料支架
大家好，這里是大家的林語冰。
JS 中如何克隆對(duì)象？此問題看似簡單，實(shí)際十分復(fù)雜。
假設(shè)我們需要獲取下述對(duì)象的拷貝。
const cat = { name: '薛定諤', girlFriends: { name: '龍貓' }}如果我們將對(duì)象賦值給一個(gè)新變量，那幾乎毫無卵用。
const newCar = catnewCat.name = '柴郡貓'console.log(newCat.name) //=> 柴郡貓console.log(cat.name) //=> 柴郡貓兩個(gè)對(duì)象都會(huì)變化。
原因很簡單 —— 我們并沒有創(chuàng)建一個(gè)新對(duì)象。我們只是創(chuàng)建了一個(gè)新的引用。
現(xiàn)在有兩個(gè)變量：cat 和 newCat，它們都引用同一個(gè)對(duì)象。
何時(shí)淺克隆：當(dāng)我們的對(duì)象屬性有且僅有一層深度，或者我們不關(guān)心嵌套引用時(shí)。
當(dāng)且僅當(dāng)源對(duì)象不包含對(duì)其他對(duì)象的任何引用時(shí)，淺克隆才有效。
const newCat = { ...cat }newCar.name = '柴郡貓'console.log(newCat.name) //=> 柴郡貓console.log(cat.name) //=> 薛定諤newCat.girlFriends.name = '加菲貓'console.log(newCat.girlFriends.name) //=> 加菲貓console.log(cat.girlFriends.name) //=> 加菲貓更新女友名字也會(huì)導(dǎo)致原始名字變化，這是因?yàn)?nbsp;newCat.girlFriends 和 car.girlFriends 仍然引用內(nèi)存中的同一對(duì)象。
這就是為什么它被稱為“淺”克隆：它能且僅能拷貝頂層屬性。
在我們的示例中，我們使用展開運(yùn)算符 ... 來執(zhí)行淺克隆，但我們也可以使用 Object.assign。
const newCat = Object.assign({}, cat)何時(shí)使用此方案：當(dāng)且僅當(dāng)我們需要深克隆，且我們的對(duì)象有且僅有數(shù)組、原始值和其他普通對(duì)象時(shí)。
克隆對(duì)象的一種流行方案是，將其轉(zhuǎn)換為 JSON 字符串，然后解析它。
const newCat = JSON.parse(JSON.stringify(cat))newCat.name = '柴郡貓'console.log(newCat.name) //=> 柴郡貓console.log(cat.name) //=> 薛定諤newCat.girlFriends.name = '加菲貓'console.log(newCat.girlFriends.name) //=> 加菲貓console.log(cat.girlFriends.name) //=> 龍貓雖然此方案適用于大多數(shù)情況，但它仍然有其局限性。它能且僅能轉(zhuǎn)換普通對(duì)象。
// Date 對(duì)象會(huì)變成字符串JSON.parse(JSON.stringify({ now: new Date() }))// {now: '2022-07-14T13:21:36.761Z'}// undefined 對(duì)應(yīng)屬性人間蒸發(fā)JSON.parse(JSON.stringify({ girlFriends: undefined }))//=> {}// 無法克隆 SetJSON.parse(JSON.stringify({ set: new Set([9]) }))//=> { set: {} }// 無法克隆 SymbolJSON.parse(JSON.stringify({ symbol: Symbol('996') }))//=> {}// 無法克隆正則JSON.parse(JSON.stringify({ regex: /996/i }))//=> {}// 無法克隆 BigIntJSON.parse(JSON.stringify({ bigint: 996n }))//=> 未捕獲類型錯(cuò)誤：無法序列化 BigInt何時(shí)使用此方案：當(dāng)且僅當(dāng)我們的對(duì)象包含復(fù)雜的結(jié)構(gòu)（比如 Map/RegExp 等）時(shí)。
structuredClone 可以搞定大部分問題。
如你所愿，它通過遞歸遍歷對(duì)象來工作。它足夠機(jī)智，可以使用循環(huán)引用拷貝對(duì)象，并且知道如何克隆不同類型的數(shù)據(jù)（包括但不限于 Map/Set/Date 等）。
structuredClone({ regex: /996/i, set: new Set([9]) })//=> { regex: /996/i, set: Set(1) {9}}它仍然有其局限性：舉個(gè)栗子，它無法克隆函數(shù)或 DOM 節(jié)點(diǎn)。
令人雞凍的是，它已經(jīng)被所有主流瀏覽器支持。
粉絲請(qǐng)注意，它不是 ECMAScript 標(biāo)準(zhǔn)的一部分，而是瀏覽器 API 的一部分，并且不同瀏覽器的實(shí)現(xiàn)可能一龍一豬。Node 根本沒有此 API。
或者，我們始終可以使用 lodash 的 cloneDeep，它實(shí)現(xiàn)了類似的算法。
根據(jù)情況選擇特定的克隆機(jī)制。雖然我相信，在大多數(shù)情況下，JSON.parse(JSON.stringify()) 應(yīng)該游刃有余，但有時(shí)我們可能想使用 structuredClone 函數(shù)來拷貝復(fù)雜的對(duì)象。在選擇克隆機(jī)制之前，請(qǐng)了解您的數(shù)據(jù)。
本文鏈接：http://www.tebozhan.com/showinfo-26-57926-0.htmlJS 中如何克隆對(duì)象？你學(xué)會(huì)了嗎？
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
上一篇： 告別Java -Jar啟動(dòng)！告訴你啟動(dòng)單機(jī)SpringBoot服務(wù)的正確操作方式
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)