首頁猿問在 JavaScript...

在 JavaScript 中對數(shù)組更新/創(chuàng)建運行自定義方法

JavaScript

幕布斯6054654 2023-07-06 10:19:23

我知道如何向?qū)ο筇砑幼远x屬性。假設我有一個 foo 方法，const foo = () => { console.log('custom method'); }我可以將該foo方法添加到數(shù)組原型并使用數(shù)組變量調(diào)用它Array.prototype.foo = foo;然后如果我創(chuàng)建一個名為的數(shù)組，bar = [1, 2, 3];并運行bar.foo()它將執(zhí)行我的自定義 foo 方法。但我不知道如何foo在每次創(chuàng)建數(shù)組和每次更新數(shù)組時運行該方法。我想運行一個自定義方法并在 JavaScript 中創(chuàng)建/更新數(shù)組期間存儲一些數(shù)據(jù)。我怎么做？可以說我有一個自定義方法，const customMethod = () => {? ?...doing some stuff? ??}我希望這個自定義方法在每次創(chuàng)建數(shù)組時運行并在該數(shù)組中存儲一些數(shù)據(jù)。就像我想找到數(shù)組的最大值并將其存儲在帶有鍵的數(shù)組中，maximum就像我們length現(xiàn)在存儲的那樣。這樣在創(chuàng)建/更新數(shù)組后我就不必計算最大值。我只要打電話myArray.maximum就能得到最大值。這種方法做了類似的事情。但它需要添加事件偵聽器和新的推送方法，以便每次使用該自定義推送方法將某些內(nèi)容推送到數(shù)組時都可以觸發(fā)事件。Array.prototype.push但在這種情況下，如果我使用常規(guī)方法或使用像這樣的擴展運算符創(chuàng)建新數(shù)組，我的自定義函數(shù)將不會更新newArr = [...oldArray, value]。我嘗試擴展現(xiàn)有的數(shù)組類型并創(chuàng)建 MyCustomArray。但它根本不能作為數(shù)組工作。class MyCustomArray extends Array {? ?constructor(...args) {? ? ? super(...args);? ? ? console.log('custom array');? ?}}知道如何擴展數(shù)組來創(chuàng)建我的 CustomArray 類型并向其添加偵聽器，以便每次創(chuàng)建/更新 CustomArray 時它都會計算最大值并將其設置為數(shù)組 max 屬性（只需最少的代碼更改）？所以我的 CustomArray 將擁有像普通數(shù)組一樣的所有方法和實例變量。但它會做一件額外的事情，每次我更新/創(chuàng)建 CustomArray 時，它都會計算該數(shù)組中的最大值并將其設置為屬性。

查看完整描述

3 回答

慕的地10843

TA貢獻1785條經(jīng)驗獲得超8個贊

我不認為你可以像這樣“劫持”所有數(shù)組。即使您對本機Array函數(shù)進行猴子修補，使用文字符號 ie 創(chuàng)建的數(shù)組也[]不會受到影響：

console.log(new Array(1,2,3));

console.log([4,5,6]);

Array = function () {

throw new Error;

};

try {

console.log(new Array(1,2,3));

} catch (e) {

console.log('Cannot create array with new Array');

}

console.log([4,5,6]);

正如您可能認為的那樣，您需要將數(shù)組傳遞給其他東西。您只需選擇適合您的解決方案即可。就我個人而言，我會嘗試使用代理：

const spy =

(arr, fn) =>

new Proxy(arr, {

get(target, prop) {

if (prop === "max") {

return Math.max(...target);

}

if (prop === "min") {

return Math.min(...target);

}

if (typeof target[prop] === "function") {

fn();

}

return target[prop];

}

});

const arr = spy([1,2,3], () => console.log('spied'));

arr.push(500);

arr.push(-10);

console.log(arr.min, arr.max, JSON.stringify(arr), Array.isArray(arr));

我喜歡代理的一點是，它可以被設計成不會造成妨礙。上面的例子中arr仍然是一個數(shù)組。您可以做您以前做過的所有正常事情。例如Array.isArray仍然返回true并JSON.stringify仍然產(chǎn)生預期結(jié)果。

但是請注意，在上面的實現(xiàn)中，如果您從中生成另一個數(shù)組，arr則不會自動代理：

const arr = spy([1,2,3], fn);
arr.slice(1); // [2,3] (non-proxied array!)

反對回復 2023-07-06

白衣染霜花

TA貢獻1796條經(jīng)驗獲得超10個贊

你在這里有正確的想法：

class MyCustomArray extends Array {

constructor(...args) {

super(...args);

console.log('custom array');

}

您只需要更改要Array擴展類的類，它應該是Array<T>這樣Array的：

class MyCustomArray extends Array<T> {

constructor(...items) {

super(...items);

console.log('custom array');

}

這里的<T>T 代表數(shù)組中包含的對象的類型，例如，如果它將是一個僅包含數(shù)字的數(shù)組，那么您可以將<number>.

現(xiàn)在您可以向該數(shù)組添加任何功能并使用以下語法創(chuàng)建該數(shù)組的實例：

const array = new MyCustomArray(item1, item2...)

希望這可以幫助

反對回復 2023-07-06

手掌心

TA貢獻1942條經(jīng)驗獲得超3個贊

嗯，它有點暴力，但是，Array 有點特殊，因為如果您為擴展類提供構(gòu)造函數(shù)，則其創(chuàng)建新數(shù)組的方法將使用該構(gòu)造函數(shù)，因此，例如，myCustomArray.filter會生成myCustomArray對象結(jié)果而不是一個Array對象結(jié)果。（如果您不提供構(gòu)造函數(shù)，則這不起作用）。

如果我想隨時訪問該自定義類型中數(shù)組的特定自定義功能，我可能會在創(chuàng)建時將值設置為 null，并擴展更改現(xiàn)有對象（如）的方法以將其設置為 null，然后將其設置為 null?pop。一種方法，該方法可以提供非空緩存值，或者計算、緩存并返回當前值。

我沒有仔細計算，但我認為只有少數(shù)數(shù)組方法可以更改現(xiàn)有數(shù)組（而不是創(chuàng)建新數(shù)組），因此應該不需要太多努力。

反對回復 2023-07-06