Array.prototype.with के साथ इम्यूटेबल अरे अपडेट

Jad Joubran

ब्राउज़र ने हाल ही में एक नया इंटरऑपरेबल तरीका डेवलप किया है जिसे सरणियों पर कॉल किया जा सकता है: Array.prototype.with().

इस लेख में बताया गया है कि यह तरीका कैसे काम करता है और किसी कलेक्शन को अपडेट करने के लिए इसका इस्तेमाल कैसे करें और ओरिजनल अरे में बदलाव किए बिना.

Array.prototype.with(index, value) के बारे में जानकारी

Array.prototype.with(index, value) तरीका, इस अरे की कॉपी दिखाता है कॉल किया गया और आपके उपलब्ध कराए गए नए value पर index सेट किया गया.

नीचे दिए गए उदाहरण में, अलग-अलग उम्र के लोगों का ग्रुप दिखाया गया है. आप इसकी एक नई कॉपी बनाना चाहते हैं दूसरी उम्र को 15 से 16 करते समय वाला श्रेणी:

const ages = [10, 15, 20, 25];

const newAges = ages.with(1, 16);
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)

कोड का विश्लेषण करना:: ages.with(...), ages वैरिएबल की कॉपी दिखाता है और ओरिजनल अरे में बदलाव किए बिना. ages.with(1, …) दूसरे आइटम को बदल देता है (index = 1). ages.with(1, 16), 16 को दूसरा आइटम असाइन करता है.

इस तरह बदलाव करके कलेक्शन की नई कॉपी बनाई गई.

यह तरीका तब काम आता है, जब आपको यह पक्का करना हो कि ओरिजनल अरे बनी रहे नहीं किया है. इस लेख में इसके इस्तेमाल के कुछ उदाहरण दिए गए हैं. लेकिन, अभी के लिए, अगर आपने ब्रैकेट नोटेशन का इस्तेमाल किया होता, तो इस पर एक नज़र डालें:

const ages = [10, 15, 20, 25];

const newAges = ages;
newAges[1] = 16;
console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 16, 20, 25] (Also changed 🙁)

जैसा कि आपको दिख रहा है, इस उदाहरण में भी ages वैरिएबल में बदलाव किया गया है. यह क्योंकि जब ages = newAges असाइन किया जाता है, तो JavaScript अरे को कॉपी नहीं करता, लेकिन बल्कि अन्य अरे का रेफ़रंस देता है. इसलिए, किसी एक में होने वाले परिवर्तन से दूसरे पर असर डालते हैं, क्योंकि वे दोनों एक ही कलेक्शन की ओर इशारा करते हैं.

Array.prototype.with() और नहीं बदला जा सकने वाला

अम्यूटेबिलिटी, कई फ़्रंटएंड लाइब्रेरी और फ़्रेमवर्क के केंद्र में है. इनमें से कुछ: रिऐक्ट (और रिडक्स) और Vue

इसके अलावा, यह ज़रूरी नहीं है कि दूसरी लाइब्रेरी और फ़्रेमवर्क के लिए यह ज़रूरी न हो कि उनका इस्तेमाल न किया जा सकता हो. हालांकि, इसे बेहतर परफ़ॉर्मेंस के लिए बढ़ावा दें: Angular और Lit

इस वजह से, डेवलपर को अक्सर ऐसे तरीकों का इस्तेमाल करना पड़ता जिनसे अरे की कॉपी मिलती हैं इसकी वजह से कोड को पढ़ने में परेशानी हो रही थी:

const ages = [10, 15, 20, 25];

const newAges = ages.map((age, index) => {
    if (index === 1) {
         return 16;
    }
    return age;
});

console.log(newAges); // [10, 16, 20, 25]
console.log(ages); // [10, 15, 20, 25] (Remains unchanged)

यहां एक कोडपेन का उदाहरण दिया गया है. इसमें बताया गया है कि React में, .with() का इस्तेमाल कैसे किया जा सकता है. यूज़स्टेट की मदद से आइटम के कलेक्शन को अपडेट करें:

.with() तरीका, कलेक्शन की कॉपी दिखाता है. इसलिए, एक से ज़्यादा चेन का इस्तेमाल किया जा सकता है .with() कॉल या अन्य कलेक्शन वाले तरीके. नीचे दिए गए उदाहरण से पता चलता है कि कैटगरी से दूसरी और तीसरी उम्र को बढ़ाना:

const ages = [10, 15, 20, 25];

const newAges = ages.with(1, ages[1] + 1).with(2, ages[2] + 1)

console.log(newAges); // [10, 16, 21, 25]
console.log(ages); // [10, 15, 20, 25] (unchanged)

नहीं बदले जा सकने वाले अन्य नए तरीके

तीन अन्य तरीके हाल ही में इंटरऑपरेबल हो गए हैं:

• Array.prototype.toReversed() यह फ़ंक्शन को म्यूट किए बिना अरे को रिवर्स कर देता है ओरिजनल अरे.
• Array.prototype.toSorted() जो अरे को बिना क्रम के और ओरिजनल अरे में बदलाव करना.
• Array.prototype.toSpliced() जो इसकी तरह काम करता है .splice() लेकिन मूल अरे में बदलाव किए बिना.

एमडीएन के मुताबिक, ये तीन तरीके इस मिलते-जुलते टूल. इन तरीकों का इस्तेमाल तब भी किया जा सकता है, जब नहीं बदले जा सकने वाले होने की उम्मीद हो या प्राथमिकता दी जाती है.

आखिर में, ऐसे अपडेट ज़्यादा आसानी से हासिल किए जा सकते हैं जिनमें बदलाव नहीं किए जा सकते इस लेख में दिए गए चार तरीकों में से किसी एक का इस्तेमाल करके JavaScript का इस्तेमाल करें. खास तौर पर, .with() तरीका, अरे के किसी एक एलिमेंट को अपडेट करना आसान बनाता है और ओरिजनल अरे में बदलाव किए बिना.