首頁(yè) 猿問(wèn) 在 JavaScript...

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

JavaScript

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

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

查看完整描述

3 回答

慕的地10843

TA貢獻(xiàn)1785條經(jīng)驗(yàn) 獲得超8個(gè)贊

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

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]);

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

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));

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

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

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

反對(duì) 回復(fù) 2023-07-06

白衣染霜花

TA貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超10個(gè)贊

你在這里有正確的想法：

class MyCustomArray extends Array {

constructor(...args) {

super(...args);

console.log('custom array');

}

您只需要更改要Array擴(kuò)展類的類，它應(yīng)該是Array<T>這樣Array的：

class MyCustomArray extends Array<T> {

constructor(...items) {

super(...items);

console.log('custom array');

}

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

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

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

希望這可以幫助

反對(duì) 回復(fù) 2023-07-06

手掌心

TA貢獻(xiàn)1942條經(jīng)驗(yàn) 獲得超3個(gè)贊

嗯，它有點(diǎn)暴力，但是，Array 有點(diǎn)特殊，因?yàn)槿绻鸀閿U(kuò)展類提供構(gòu)造函數(shù)，則其創(chuàng)建新數(shù)組的方法將使用該構(gòu)造函數(shù)，因此，例如，myCustomArray.filter會(huì)生成myCustomArray對(duì)象結(jié)果而不是一個(gè)Array對(duì)象結(jié)果。（如果您不提供構(gòu)造函數(shù)，則這不起作用）。

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

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

反對(duì) 回復(fù) 2023-07-06