在JavaScript中生成不可修改屬性對象的方法
說在前面
數(shù)據(jù)的可變性常常是一個需要謹(jǐn)慎處理的問題。可變數(shù)據(jù)可能會導(dǎo)致難以預(yù)測的副作用，尤其是在大型項(xiàng)目或復(fù)雜的應(yīng)用程序中。不可變數(shù)據(jù)結(jié)構(gòu)提供了一種解決方案，它能使代碼更加健壯、可維護(hù)和易于調(diào)試。
需求
編寫一個函數(shù)，該函數(shù)接收一個對象 obj ，并返回該對象的一個新的 不可變 版本。
不可變 對象是指不能被修改的對象，如果試圖修改它，則會拋出錯誤。
此新對象可能產(chǎn)生三種類型的錯誤消息。
- 如果試圖修改對象的鍵，則會產(chǎn)生以下錯誤消息：
`Error Modifying: ${key}`。 - 如果試圖修改數(shù)組的索引，則會產(chǎn)生以下錯誤消息：
`Error Modifying Index: ${index}`。 - 如果試圖調(diào)用會改變數(shù)組的方法，則會產(chǎn)生以下錯誤消息：
`Error Calling Method: ${methodName}`。你可以假設(shè)只有以下方法能夠改變數(shù)組：['pop', 'push', 'shift', 'unshift', 'splice', 'sort', 'reverse']。
obj 是一個有效的 JSON 對象或數(shù)組，也就是說，它是 JSON.parse() 的輸出結(jié)果。
請注意，應(yīng)該拋出字符串字面量，而不是 Error 對象。
示例
示例 1
輸入：
obj = {
"x": 5
}
fn = (obj) => {
obj.x = 5;
return obj.x;
}
輸出：{"value": null, "error": "Error Modifying: x"}
解釋：試圖修改對象的鍵會導(dǎo)致拋出錯誤。請注意，是否將值設(shè)置為與之前相同的值并不重要。
示例 2
輸入：
obj = [1, 2, 3]
fn = (arr) => {
arr[1] = {};
return arr[2];
}
輸出：{"value": null, "error": "Error Modifying Index: 1"}
解釋：試圖修改數(shù)組會導(dǎo)致拋出錯誤。
示例 3
輸入：
obj = {
"arr": [1, 2, 3]
}
fn = (obj) => {
obj.arr.push(4);
return 42;
}
輸出：{ "value": null, "error": "Error Calling Method: push"}
解釋：調(diào)用可能導(dǎo)致修改的方法會導(dǎo)致拋出錯誤。
示例4
輸入：
obj = {
"x": 2,
"y": 2
}
fn = (obj) => {
return Object.keys(obj);
}
輸出：{"value": ["x", "y"], "error": null}
解釋：沒有嘗試進(jìn)行修改，因此函數(shù)正常返回。
代碼實(shí)現(xiàn)
1. 函數(shù)功能概述
通過遞歸地處理對象及其屬性，并利用 Proxy 對象來攔截對對象的修改操作，從而使得經(jīng)過處理后的對象無法被修改，達(dá)到了“不可變”的效果。
2. 函數(shù)參數(shù)及內(nèi)部邏輯分析
makeImmutable 函數(shù)
const makeImmutable = function (obj) {
if (typeof obj !== "object" || !obj) return obj;
// 遞歸對象進(jìn)行代理攔截
Object.keys(obj).forEach((key) => {
obj[key] = makeImmutable(obj[key]);
});
return createProxy(obj);
};
函數(shù)接受一個參數(shù) obj，代表要被處理成不可變對象的原始對象。
- 首先進(jìn)行一個條件判斷：
if (typeof obj!== "object" ||!obj) return obj;。這個判斷的目的是，如果傳入的obj不是對象類型（比如是基本數(shù)據(jù)類型，如數(shù)字、字符串、布爾值等）或者obj本身是null，那么就直接返回這個原始的obj，因?yàn)榛緮?shù)據(jù)類型和null本身就是不可變的，不需要進(jìn)行后續(xù)的處理。 - 如果
obj是對象類型且不為null，那么就會進(jìn)入下面的處理邏輯：- 通過
Object.keys(obj).forEach((key) => { obj[key] = makeImmutable(obj[key]); });這行代碼，它會遍歷對象obj的所有鍵名（使用Object.keys方法獲取鍵名數(shù)組），對于每個鍵名對應(yīng)的屬性值，再次調(diào)用makeImmutable函數(shù)進(jìn)行遞歸處理。這樣做的目的是確保對象內(nèi)部的嵌套對象也能被正確地處理成不可變對象。 - 最后，經(jīng)過遞歸處理后的對象
obj會被傳遞給createProxy函數(shù)進(jìn)行進(jìn)一步處理，然后返回處理后的結(jié)果。
- 通過
createProxy 函數(shù)
function createProxy(obj) {
const isArray = Array.isArray(obj);
// 攔截 Array 原生方法
if (isArray) {
["pop", "push", "shift", "unshift", "splice", "sort", "reverse"].forEach(
(method) => {
obj[method] = () => {
throw `Error Calling Method: ${method}`;
};
}
);
}
return new Proxy(obj, {
set(_, prop) {
throw `Error Modifying${isArray ? " Index" : ""}: ${prop}`;
},
});
}
函數(shù)接受一個參數(shù) obj，就是經(jīng)過前面 makeImmutable 函數(shù)遞歸處理后的對象。
- 首先通過
const isArray = Array.isArray(obj);判斷傳入的對象obj是否是數(shù)組類型。 - 如果
obj是數(shù)組類型，那么會通過以下代碼攔截數(shù)組的一些原生方法：
["pop", "push", "shift", "unshift", "splice", "sort", "reverse"].forEach(
(method) => {
obj[method] = () => {
throw `Error Calling Method: ${method}`;
};
}
);
這里遍歷了數(shù)組的一些常見的修改方法，如 pop（刪除數(shù)組末尾元素）、push（在數(shù)組末尾添加元素）、shift（刪除數(shù)組開頭元素）、unshift（在數(shù)組開頭添加元素）、splice（插入、刪除或替換數(shù)組元素）、sort（對數(shù)組元素進(jìn)行排序）、reverse（反轉(zhuǎn)數(shù)組元素順序）等。對于每個方法，都將其重新定義為一個函數(shù)，當(dāng)調(diào)用這些方法時，會拋出一個包含方法名的錯誤信息，比如調(diào)用 push 方法時會拋出 Error Calling Method: push，這樣就阻止了對數(shù)組進(jìn)行這些修改操作。
- 最后，無論傳入的對象
obj是數(shù)組還是其他普通對象，都會通過以下代碼創(chuàng)建一個Proxy對象并返回：
return new Proxy(obj, {
set(_, prop) {
throw `Error Modifying${isArray? " Index" : ""}: ${prop}`;
},
});
這里創(chuàng)建的 Proxy 對象定義了一個 set 攔截器。當(dāng)嘗試對這個代理對象進(jìn)行屬性設(shè)置操作（比如 obj['newProp'] = 'value';）時，就會觸發(fā)這個 set 攔截器。攔截器內(nèi)部會拋出一個錯誤信息，其中根據(jù)對象是否是數(shù)組來決定錯誤信息中的用詞。如果是數(shù)組，錯誤信息會顯示 Error Modifying Index: [屬性名]，表示修改數(shù)組的索引位置相關(guān)的錯誤；如果是普通對象，錯誤信息會顯示 Error Modifying: [屬性名]，總之就是阻止了對對象進(jìn)行屬性設(shè)置的修改操作。
3. 整體功能總結(jié)
通過 makeImmutable 函數(shù)和 createProxy 函數(shù)的協(xié)同工作，首先對傳入的對象進(jìn)行遞歸處理，確保其內(nèi)部嵌套的對象也能被處理成不可變對象，然后通過創(chuàng)建 Proxy 對象并設(shè)置相應(yīng)的攔截器，攔截了對對象的各種修改操作（包括數(shù)組的特定修改方法和普通對象的屬性設(shè)置操作），最終使得經(jīng)過處理后的對象成為一個不可變對象，任何試圖修改它的操作都會拋出相應(yīng)的錯誤信息。
4.完整代碼
/**
* @param {Array} arr
* @return {(string | number | boolean | null)[][]}
*/
var jsonToMatrix = function (arr) {
let keySet = new Set();
const isObject = (x) => x !== null && typeof x === "object";
const getKeyName = (object, name = "") => {
if (!isObject(object)) {
keySet.add(name);
return;
}
for (const key in object) {
getKeyName(object[key], name + (name ? "." : "") + key);
}
};
arr.forEach((item) => getKeyName(item));
keySet = [...keySet].sort();
const getValue = (obj, path) => {
const paths = path.split(".");
let i = 0;
let value = obj;
while (i < paths.length) {
if (!isObject(value)) break;
value = value[paths[i++]];
}
if (i < paths.length || isObject(value) || value === undefined) return "";
return value;
};
const res = [keySet];
arr.forEach((item) => {
const list = [];
keySet.forEach((key) => {
list.push(getValue(item, key));
});
res.push(list);
});
return res;
};
5、功能測試
（1）修改對象屬性
obj = makeImmutable({ x: 5 });
obj.x = 6;
//Error Modifying: x
（2）修改數(shù)組值
obj = makeImmutable([1, 2, 3]); obj[1] = 222; //Error Modifying Index: 1
（3）調(diào)用數(shù)組方法
arr = makeImmutable([1, 2, 3]); arr.push(4) //Error Calling Method: push
（4）獲取屬性值
obj = makeImmutable({ x: 5, y: 6 });
console.log(obj.x); //5
console.log(Object.keys(obj)); //['x', 'y']
沒有嘗試進(jìn)行修改，因此函數(shù)正常返回。
實(shí)際應(yīng)用場景
1、狀態(tài)管理（如在React或Vue中）
在現(xiàn)代前端框架中，不可變數(shù)據(jù)結(jié)構(gòu)有助于優(yōu)化組件的更新機(jī)制。以React為例，當(dāng)組件的狀態(tài)（state）是不可變對象時，React可以更高效地比較前后狀態(tài)的差異，從而決定是否需要重新渲染組件。
- 代碼示例（以React為例）：
import React, { useState } from 'react';
const initialState = {
user: {
name: 'John',
age: 30
},
todos: ['Task 1', 'Task 2']
};
const immutableInitialState = makeImmutable(initialState);
const App = () => {
const [state, setState] = useState(immutableInitialState);
const handleUpdateUser = () => {
try {
// 嘗試修改會拋出錯誤，這符合不可變數(shù)據(jù)的理念
state.user.name = 'Jane';
} catch (error) {
console.log(error);
}
// 正確的更新方式（假設(shè)使用 immer.js等庫輔助更新）
setState(prevState => {
const newState = {...prevState };
newState.user = {...prevState.user };
newState.user.name = 'Jane';
return makeImmutable(newState);
});
};
return (
<div>
<p>User Name: {state.user.name}</p>
<button onClick={handleUpdateUser}>Update User Name</button>
</div>
);
};
在這個示例中，通過 makeImmutable 函數(shù)將初始狀態(tài)對象轉(zhuǎn)換為不可變對象，然后在組件的狀態(tài)管理中使用。當(dāng)試圖直接修改不可變狀態(tài)對象的屬性時會拋出錯誤，這提醒開發(fā)者使用正確的方式來更新狀態(tài)，如創(chuàng)建一個新的對象副本并更新副本中的屬性，最后將新的不可變對象作為新狀態(tài)。這種方式可以確保React能夠準(zhǔn)確地檢測狀態(tài)變化，提高組件更新的性能。
2、數(shù)據(jù)緩存
在一些需要緩存數(shù)據(jù)的場景中，確保緩存數(shù)據(jù)不被意外修改是很重要的。使用不可變對象可以提供這種安全性，因?yàn)橐坏?shù)據(jù)被緩存，就不能被修改，從而保證了數(shù)據(jù)的一致性。
- 代碼示例：
const cache = {};
const getDataFromServer = async () => {
// 假設(shè)這是從服務(wù)器獲取數(shù)據(jù)的異步函數(shù)
const data = await fetch('https://example.com/api/data');
const jsonData = await data.json();
cache['data'] = makeImmutable(jsonData);
return cache['data'];
};
const updateData = () => {
try {
cache['data'].someProperty = 'new value';
} catch (error) {
console.log('不能修改緩存數(shù)據(jù):', error);
}
};
當(dāng)從服務(wù)器獲取數(shù)據(jù)后，通過 makeImmutable 函數(shù)將數(shù)據(jù)存儲在緩存對象 cache 中。如果后續(xù)有代碼試圖修改緩存中的數(shù)據(jù)，會拋出錯誤，這樣就保證了緩存數(shù)據(jù)的穩(wěn)定性和一致性，避免因?yàn)橐馔庑薷膶?dǎo)致數(shù)據(jù)不一致的問題。
3、函數(shù)式編程
在函數(shù)式編程中，不可變數(shù)據(jù)是一個核心概念。函數(shù)應(yīng)該是無副作用的，即不應(yīng)該修改外部的數(shù)據(jù)結(jié)構(gòu)。通過使用不可變對象，可以確保函數(shù)的純度。
- 代碼示例：
const addTask = (tasks, newTask) => {
try {
tasks.push(newTask);
} catch (error) {
console.log(error);
}
const newTasks = [...tasks, newTask];
return makeImmutable(newTasks);
};
const tasks = ['Task 1', 'Task 2'];
const immutableTasks = makeImmutable(tasks);
const newTasks = addTask(immutableTasks, 'Task 3');
在 addTask 函數(shù)中，首先嘗試直接修改傳入的任務(wù)列表（這會因?yàn)榱斜硎遣豢勺兊亩鴴伋鲥e誤），然后通過創(chuàng)建一個新的列表副本并添加新任務(wù)的方式來返回一個新的不可變?nèi)蝿?wù)列表。這種方式符合函數(shù)式編程的原則，即不修改傳入的參數(shù)，而是返回一個新的值，保證了函數(shù)的可預(yù)測性和無副作用的特性。
以上就是在JavaScript中生成不可修改屬性對象的方法的詳細(xì)內(nèi)容，更多關(guān)于JavaScript不可修改屬性的對象的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
本篇主要分享我對閉包的理解及使用閉包完成私有屬性、模擬類、繼承等，結(jié)合大量例子，希望大家能快速掌握！首先讓我們先從一些基本的術(shù)語開始吧2012-04-04
這篇文章主要介紹了12個提高JavaScript技能的概念(小結(jié))，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
BootStrap學(xué)習(xí)筆記之nav導(dǎo)航欄和面包屑導(dǎo)航
這篇文章主要介紹了BootStrap學(xué)習(xí)筆記之nav導(dǎo)航欄和面包屑導(dǎo)航的相關(guān)資料,需要的朋友可以參考下2017-01-01
這篇文章主要介紹了js判斷文本框剩余可輸入字?jǐn)?shù)的方法,可實(shí)現(xiàn)直觀顯示文本框可輸入字?jǐn)?shù)的功能,非常具有實(shí)用價值,需要的朋友可以參考下2015-02-02
徹底搞懂JS無縫滾動代碼...2007-01-01
微信小程序教程系列之頁面跳轉(zhuǎn)和參數(shù)傳遞（6）
這篇文章主要為大家詳細(xì)介紹了微信小程序教程系列之頁面跳轉(zhuǎn)和參數(shù)傳遞，微信小程序提供了3種頁面跳轉(zhuǎn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
js實(shí)現(xiàn)鼠標(biāo)移入移出卡片切換內(nèi)容
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)鼠標(biāo)移入移出卡片切換內(nèi)容，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10
手寫new是JS面試題高頻考點(diǎn)，實(shí)現(xiàn)代碼也非常簡單，但在實(shí)現(xiàn)后小編對其為什么要這樣設(shè)計有著很深的疑惑，今天就來講一下為什么要這樣設(shè)計new的實(shí)現(xiàn)吧2023-05-05
JS獲取dom 對象 ajax操作 讀寫cookie函數(shù)
一些常用的JS (JONEAjax) 獲取dom 對象，ajax操作，讀寫cookie類代碼，需要的朋友可以參考下。2009-11-11
Javascript中Promise的四種常用方法總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于Javascript中Promise的四種常用方法，分別是處理異步回調(diào)、多個異步函數(shù)同步處理、異步依賴異步回調(diào)和封裝統(tǒng)一的入口辦法或者錯誤處理，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧。2017-07-07