ऑब्जेक्ट्स

docs.scrimba.com

मान लीजिए कि आप एक एकल उपयोगकर्ता का वर्णन कर रहे हैं: एक नाम, एक ईमेल, एक आयु, चाहे वे साइन इन हैं। आप इन चारों को अलग-अलग चर में बिखरा सकते हैं, लेकिन वे एक साथ संबंधित हैं, और उन्हें अलग रखने का मतलब है कि हर बार जब आप "उपयोगकर्ता" का मतलब रखते हैं तो चार चीजें पास करनी पड़ती हैं। एक ऑब्जेक्ट आपको सभी को एक मान में इकट्ठा करने देता है, जहां प्रत्येक भाग का एक नाम है जिसे आप देख सकते हैं। अधिकांश डेटा जो आप संभालेंगे, एक उपयोगकर्ता, एक उत्पाद, एक कार्ट, ठीक इसी तरह आकार में आता है।

एक ऑब्जेक्ट बनाना

एक ऑब्जेक्ट नामित मानों का एक संग्रह है, जो घुंघराले ब्रेसेस के साथ लिखा गया है। इसके अंदर, आप key: value जोड़ियों को सूचीबद्ध करते हैं, जो कोमा से अलग होते हैं। कुंजी नाम है; मान यह है कि यह क्या रखता है:

const user = {
  name: "राज",
  age: 27,
};

console.log(user.name); // राज

आप एक मान को बिंदु और कुंजी के साथ वापस पढ़ते हैं: user.name। इसे डॉट नोटेशन कहा जाता है, और यह वह है जो आप अधिकांशतः करेंगे। बाईं ओर कुंजी, दाईं ओर यह संग्रहीत मान।

एक मान को पढ़ने का एक दूसरा तरीका है, वर्ग कोष्ठक का उपयोग करके कुंजी को एक स्ट्रिंग के रूप में:

console.log(user["name"]); // राज

अधिकांशतः डॉट नोटेशन स्पष्ट रूप से पढ़ता है, इसलिए इसका उपयोग करें। कोष्ठक अपनी जगह अर्जित करते हैं जब कुंजी एक सादा शब्द नहीं होती है (मान लीजिए इसमें एक स्थान है) या जब आप कुंजी को आगे से नहीं जानते और यह दूसरे चर में बैठा है।

एक ऑब्जेक्ट स्ट्रिंग कुंजियों के तहत संबंधित मानों को समूहित करता है, जो घुंघराले ब्रेसेस के अंदर key: value जोड़ियों के रूप में लिखे गए हैं। जहां एक array एक क्रमबद्ध सूची रखता है जिसे आप स्थिति द्वारा पहुँचते हैं, एक ऑब्जेक्ट मानों को रखता है जिसे आप नाम द्वारा पहुँचते हैं:

const user = {
  name: "राज",
  age: 27,
  isActive: true,
};

console.log(user.name); // राज
console.log(user["age"]); // 27

अंदर जाने के दो तरीके हैं। डॉट नोटेशन (user.name) डिफ़ॉल्ट है: छोटा और स्पष्ट। ब्रैकेट नोटेशन (user["age"]) वही काम करता है लेकिन कुंजी को एक स्ट्रिंग के रूप में लेता है, जो दो चीजों को अनलॉक करता है जो डॉट नोटेशन नहीं कर सकता।

ब्रैकेट फॉर्म आवश्यक है जब कुंजी एक वैध पहचानकर्ता नहीं है, उदाहरण के लिए जब इसमें एक स्थान है या एक अंक से शुरू होता है, और जब कुंजी गतिशील है, एक चर में बैठा है न कि शाब्दिक रूप से टाइप किया गया हो:

const field = "name";
console.log(user[field]); // राज, `field` में रखी गई कुंजी को पढ़ता है
console.log(user.field); // undefined, "field" नामक शाब्दिक कुंजी को देखता है

यह अंतर लोगों को भ्रमित करता है: user[field] field का मान उपयोग करता है, जबकि user.field एक कुंजी को field के रूप में देखता है। एक कुंजी को पढ़ना जो मौजूद नहीं है undefined लौटाता है न कि एक त्रुटि।

एक ऑब्जेक्ट JavaScript की कुंजियों के तहत मानों को समूहित करने की मूल संरचना है। कुंजियाँ स्ट्रिंग हैं (या Symbols, जिन्हें आप अभी के लिए अलग रख सकते हैं); एक मान कुछ भी हो सकता है, एक अन्य ऑब्जेक्ट या एक function सहित। आप इसे घुंघराले ब्रेसेस में key: value जोड़ियों के रूप में लिखते हैं:

const user = {
  name: "राज",
  age: 27,
  isActive: true,
};

console.log(user.name); // राज
console.log(user["age"]); // 27

डॉट नोटेशन सुविधाजनक डिफ़ॉल्ट है। ब्रैकेट नोटेशन वही लुकअप है कुंजी के साथ एक अभिव्यक्ति के रूप में गणना की गई है, यही कारण है कि यह बिल्कुल दो मामलों में आवश्यक है: जब कुंजी एक वैध पहचानकर्ता नहीं है (user["first name"], user["2fa"]), और जब कुंजी गतिशील है:

const field = "name";
console.log(user[field]); // राज, पहले `field` को "name" में मूल्यांकित करता है

दो व्यवहार पकड़ने के लायक हैं। एक लापता कुंजी को पढ़ना undefined लौटाता है, कभी नहीं फेंकता है, इसलिए एक टाइपो चुप्पी से असफल हो जाता है न कि जोर से। और कुंजियाँ हमेशा हुड के तहत स्ट्रिंग होती हैं: user[27] और user["27"] एक ही स्लॉट तक पहुँचते हैं, क्योंकि संख्या को एक स्ट्रिंग कुंजी में जबरदस्ती किया जाता है। यह जबरदस्ती एक सामान्य भ्रम का स्रोत है जब ऑब्जेक्ट कुंजियाँ और सरणी सूचकांक एक जैसे दिखने लगते हैं।

const product = {
  title: "डेस्क लैंप",
  price: 40,
  inStock: true,
};

console.log(`${product.title} की कीमत ${product.price} है`); // डेस्क लैंप की कीमत 40 है

एक ऑब्जेक्ट किसी अन्य की तरह एक मान है। आप इसे एक const में स्टोर कर सकते हैं, इसे एक सरणी में रख सकते हैं, इसे एक फ़ंक्शन को पास कर सकते हैं, और इसे लौटा सकते हैं। कुंजियाँ इसके भागों को नाम देती हैं, जो पूरी बात है: product.price कहता है कि यह क्या है, जहां एक नंगा 40 एक चर में बैठा है वह नहीं।

Junoएक ऑब्जेक्ट बनाना एक ऑब्जेक्ट नामों के तहत संबंधित मानों को एकत्रित करता है, जो घुंघराले ब्रेसेस में key: value जोड़ियों के रूप में लिखे गए हैं। एक मान को एक बिंदु और कुंजी के साथ पढ़ें, जैसे user.name। वर्ग-कोष्ठक फॉर्म के लिए तभी पहुंचें जब कुंजी में कोई अजीब चरित्र हो या यह एक चर में रहता हो।

Junoएक ऑब्जेक्ट बनाना एक ऑब्जेक्ट नाम द्वारा मानों तक पहुंचता है जहां एक सरणी उन्हें स्थिति द्वारा पहुंचाती है। डॉट नोटेशन आपका डिफ़ॉल्ट है; ब्रैकेट नोटेशन कुंजी को एक स्ट्रिंग के रूप में लेता है, इसलिए इसे कुंजियों के लिए उपयोग करें जो सादे शब्द नहीं हैं या जो एक चर में रहते हैं। याद रखें user[field] field में संग्रहीत कुंजी को पढ़ता है, जबकि user.field एक शाब्दिक field कुंजी को देखता है, और एक लापता कुंजी undefined के रूप में वापस आती है न कि त्रुटि।

Junoएक ऑब्जेक्ट बनाना कुंजियाँ हुड के तहत स्ट्रिंग हैं, इसलिए user[27] और user["27"] एक ही स्लॉट को हिट करते हैं, और एक लापता कुंजी फेंकने के बजाय undefined लौटाती है। डॉट नोटेशन सुविधाजनक है; ब्रैकेट नोटेशन एक गणना की गई कुंजी के साथ वही लुकअप है, गैर-पहचानकर्ता कुंजियों और गतिशील लोगों के लिए आवश्यक है। एक टाइपो पर यह शांत undefined सुविधाजनक है जब तक यह एक बग को छिपा न दे।

एक ऑब्जेक्ट को बदलना

ऑब्जेक्ट्स एक बार बनने के बाद निर्धारित नहीं होते हैं। आप एक नई कुंजी जोड़ सकते हैं, एक मौजूदा को बदल सकते हैं, या एक को पूरी तरह से हटा सकते हैं। जोड़ने या अपडेट करने के लिए, कुंजी को असाइन करें:

const user = {
  name: "राज",
};

user.age = 30; // एक नई कुंजी जोड़ता है
user.name = "राज शर्मा"; // मौजूदा को अपडेट करता है

console.log(user); // { name: "राज शर्मा", age: 30 }

यदि कुंजी पहले से मौजूद है, तो उसे असाइन करना मान को बदल देता है। यदि यह नहीं है, तो इसे बनाया जाता है। एक कुंजी को हटाने के लिए, delete का उपयोग करें:

delete user.age;
console.log(user); // { name: "राज शर्मा" }

यहाँ वह हिस्सा है जो लोगों को आश्चर्यचकित करता है। एक const ऑब्जेक्ट के गुणों को अभी भी बदला जा सकता है। const का मतलब है कि नाम user एक अलग ऑब्जेक्ट की ओर इशारा नहीं कर सकता, लेकिन ऑब्जेक्ट जिस ओर यह इशारा करता है वह उचित खेल है:

const cart = { total: 0 };
cart.total = 25; // ठीक है, अंदर क्या है बदलना
// cart = { total: 25 }; // यह त्रुटि होगी, नाम को फिर से असाइन करना

ऑब्जेक्ट्स परिवर्तनशील हैं: आप निर्माण के बाद कुंजियों को जोड़ते, अपडेट करते, और हटाते हैं। एक कुंजी को असाइन करने से यह बन जाती है यदि यह नई है और अगर यह मौजूद है तो इसे अधिलेखित कर देता है। एक कुंजी को हटाना delete का काम है:

const user = { name: "राज" };

user.age = 30; // जोड़ें
user.age = 31; // अपडेट करें
delete user.age; // हटाएं

console.log(user); // { name: "राज" }

वह जो लोगों को पकड़ता है वह const है। const नाम को लॉक करता है, सामग्री को नहीं। बाइंडिंग को एक नए ऑब्जेक्ट में फिर से असाइन नहीं किया जा सकता, लेकिन यह जो ऑब्जेक्ट रखता है वह पूरी तरह संपादन योग्य रहता है:

const cart = { total: 0, items: 0 };
cart.total = 25; // अनुमत, ऑब्जेक्ट को परिवर्तित करना
cart.items += 1; // अनुमत
// cart = {}; // TypeError, const बाइंडिंग को फिर से असाइन करना

यही कारण है कि const विवेकपूर्ण डिफ़ॉल्ट है यहाँ तक कि ऑब्जेक्ट्स के लिए जिन्हें आप बदलने की योजना बना रहे हैं। आप लगभग कभी भी चर को फिर से इंगित करना नहीं चाहते हैं, और const आपको दुर्घटना से ऐसा करने से रोकता है जबकि ऑब्जेक्ट को ही खुला रखता है।

ऑब्जेक्ट्स परिवर्तनशील हैं। एक कुंजी को असाइन करना इसे बनाता है या अधिलेखित करता है, और delete इसे हटाता है:

const user = { name: "राज", age: 30 };

user.role = "admin"; // जोड़ें
delete user.age; // हटाएं

console.log(user); // { name: "राज", role: "admin" }

const अंतर वह है जिसे आंतरिक करना है, क्योंकि यह वास्तव में const क्या सुरक्षा देता है इसके बारे में है। const बाइंडिंग को फ्रीज करता है, मान को कभी नहीं। नाम को फिर से असाइन नहीं किया जा सकता; ऑब्जेक्ट जिसे यह संदर्भित करता है वह खुला रहता है:

const cart = { total: 0 };
cart.total = 25; // ठीक है, संदर्भित ऑब्जेक्ट को परिवर्तित करना
// cart = { total: 25 }; // TypeError: Assignment to constant variable

यदि आप वास्तव में ऑब्जेक्ट को ही लॉक करना चाहते हैं, तो Object.freeze(obj) कुंजियों को जोड़ने, बदलने, या हटाने से रोकता है, हालांकि यह एक उथला फ्रीज है (नेस्टेड ऑब्जेक्ट्स परिवर्तनशील रहते हैं) और गैर-सख्त कोड में चुप्पी से कुछ नहीं करता न कि त्रुटि। व्यवहार में आपको इसकी शायद ही कभी आवश्यकता होती है। आदत जो पकड़ने के लायक है वह const डिफ़ॉल्ट है: यह संकेत देता है कि बाइंडिंग स्थिर है और दुर्घटना से फिर से असाइन करने को रोकता है, जो वास्तविक गलती है जो होती है, जबकि सामान्य परिवर्तन को उपलब्ध रखता है।

Junoएक ऑब्जेक्ट को बदलना एक कुंजी को असाइन करके इसे जोड़ें या अपडेट करें, और एक को हटाने के लिए delete का उपयोग करें। आश्चर्य है const है: यह आपको user को एक अलग ऑब्जेक्ट की ओर इशारा करने से रोकता है, लेकिन आप अभी भी जो अंदर है वह बदल सकते हैं। मुझे const को सब कुछ लॉक करने की उम्मीद करना बंद करने में कुछ समय लगा।

Junoएक ऑब्जेक्ट को बदलना असाइनमेंट एक कुंजी को जोड़ता या अधिलेखित करता है, delete एक को हटाता है। const नाम को लॉक करता है, सामग्री को नहीं, इसलिए एक const ऑब्जेक्ट पूरी तरह संपादन योग्य रहता है जबकि चर को ही फिर से इंगित नहीं किया जा सकता। यही कारण है कि const एक अच्छा डिफ़ॉल्ट है यहाँ तक कि ऑब्जेक्ट्स के लिए जिन्हें आप बदलने का मतलब रखते हैं।

Junoएक ऑब्जेक्ट को बदलना असाइनमेंट एक कुंजी को सम्मिलित या अपडेट करता है, delete एक को हटाता है, और const मान के बजाय बाइंडिंग की रक्षा करता है, इसलिए संदर्भित ऑब्जेक्ट परिवर्तनशील रहता है। यदि आपको ऑब्जेक्ट को लॉक करना होगा, तो Object.freeze इसे उथले तरीके से करता है और गैर-सख्त मोड में चुप्पी से विफल होता है। इसे शायद ही कभी पहुंचें; const डिफ़ॉल्ट पहले से ही फिर से असाइन की गलती को रोकता है जो वास्तव में दिखाई देती है।

विधियाँ और this

एक ऑब्जेक्ट में एक मान एक फ़ंक्शन हो सकता है। जब यह होता है, तो इसे एक विधि कहा जाता है: कुछ ऑब्जेक्ट कर सकता है, बजाय एक तथ्य के जो यह संग्रहीत करता है। आप इसे एक ही बिंदु के साथ कॉल करते हैं, साथ ही कोष्ठक:

const user = {
  name: "राज",
  greet() {
    return `नमस्ते, मैं ${this.name} हूँ`;
  },
};

console.log(user.greet()); // नमस्ते, मैं राज हूँ

अंदर नया शब्द this है। जब आप user.greet() कॉल करते हैं, तो this का अर्थ है "वह ऑब्जेक्ट जिस पर यह विधि को कॉल किया गया था", जो यहाँ user है। इसलिए this.name एक ही ऑब्जेक्ट से name कुंजी को पढ़ता है। यह कैसे एक विधि अपने ऑब्जेक्ट के मानों तक पहुंचती है बिना आपके उन्हें पास किए।

जब एक फ़ंक्शन एक ऑब्जेक्ट पर एक मान के रूप में संग्रहीत होता है, तो यह एक विधि होता है। विधियाँ एक ऑब्जेक्ट को अपने डेटा के साथ व्यवहार को ले जाने देती हैं, और वे उस डेटा तक this के माध्यम से पहुंचते हैं:

const cart = {
  items: ["lamp", "desk"],
  total: 65,
  summary() {
    return `${this.items.length} items, ${this.total} total`;
  },
};

console.log(cart.summary()); // 2 items, 65 total

this के लिए नियम जो लगभग सब कुछ को कवर करता है जो आप हिट करेंगे: this कॉल समय पर बिंदु के बाईं ओर ऑब्जेक्ट है। cart.summary() कॉल करें और this cart है, इसलिए this.items और this.total एक ही ऑब्जेक्ट से पढ़ते हैं।

वाक्यांश "कॉल समय पर" मायने रखता है। this तय नहीं है जब आप विधि लिखते हैं, यह कॉल समय पर तय होता है कि विधि को कैसे कॉल किया जाता है। इसे cart.summary() के रूप में कॉल करें और this cart है; फ़ंक्शन को बाहर निकालें और इसे अपने आप पर कॉल करें और this अब cart की ओर इशारा नहीं करता है। आप बाद में उस किनारे से मिलेंगे, लेकिन विधियों के लिए एक बिंदु के साथ कॉल किया गया है, this बिल्कुल वैसे व्यवहार करता है जैसे आप उम्मीद करेंगे।

एक ऑब्जेक्ट पर संग्रहीत फ़ंक्शन एक विधि है, और यह this के माध्यम से ऑब्जेक्ट की अपनी स्थिति तक पहुंचता है। बाइंडिंग नियम जो व्यवहार में मायने रखता है: this को सेट किया जाता है कि फ़ंक्शन को कैसे कॉल किया जाता है, न कि जहां इसे परिभाषित किया गया है। एक सामान्य विधि कॉल के लिए, this बिंदु के बाईं ओर ऑब्जेक्ट है:

const cart = {
  total: 65,
  discount: 0.1,
  finalPrice() {
    return this.total * (1 - this.discount);
  },
};

console.log(cart.finalPrice()); // 58.5

क्योंकि बाइंडिंग गतिशील है, विधि को अलग करने से यह टूट जाता है: const fn = cart.finalPrice; fn(); cart संदर्भ खो देता है और this अब जहां आप चाहते हैं वहां इशारा नहीं करता।

व्यावहारिक समस्या विधियों के रूप में तीर कार्य हैं। एक तीर अपना this नहीं पाता है; यह इसे परिभाषित किए जाने वाले आसपास के दायरे से this पकड़ता है। इसलिए एक तीर विधि के रूप में उपयोग किया जाता है बाहरी this को पढ़ता है (शीर्ष स्तर पर, ऑब्जेक्ट को नहीं) बजाय उस ऑब्जेक्ट के जिस पर यह रहता है:

const user = {
  name: "राज",
  greet: () => `नमस्ते, मैं ${this.name} हूँ`, // गलत: `this` `user` नहीं है
  greetOk() {
    return `नमस्ते, मैं ${this.name} हूँ`; // सही: विधि शॉर्टहैंड
  },
};

नियम ले जाने के लिए: विधि शॉर्टहैंड (greet() {}) का उपयोग करें जब फ़ंक्शन को this का मतलब ऑब्जेक्ट होना चाहिए, और कॉलबैक के लिए तीर को आरक्षित करें जहां आप वास्तव में आसपास के this चाहते हैं, जो अधिकांश अन्य जगह है।

Junoविधियाँ और this एक ऑब्जेक्ट पर संग्रहीत फ़ंक्शन एक विधि है, जिसे एक बिंदु और कोष्ठक के साथ कॉल किया जाता है जैसे user.greet()। इसके अंदर, this का अर्थ है वह ऑब्जेक्ट जिस पर विधि को कॉल किया गया था, इसलिए this.name उस ऑब्जेक्ट की अपनी name को पढ़ता है। यह कैसे एक विधि अपने ऑब्जेक्ट के मानों तक पहुंचती है।

Junoविधियाँ और this एक विधि एक ऑब्जेक्ट पर रहने वाला फ़ंक्शन है, और this वह ऑब्जेक्ट है जो बिंदु के बाईं ओर है जब आप इसे कॉल करते हैं। इसलिए cart.summary() this को cart का अर्थ देता है। समस्या यह है कि this कॉल समय पर तय होता है, न कि जब आप विधि लिखते हैं, जो महत्वपूर्ण है पल आप विधि को अपने ऑब्जेक्ट से खींचते हैं।

Junoविधियाँ और thisthis को सेट किया जाता है कि फ़ंक्शन को कैसे कॉल किया जाता है, न कि जहां यह रहता है, इसलिए विधि को अलग करना इसे तोड़ देता है। विधि शॉर्टहैंड (greet() {}) का उपयोग करें जब फ़ंक्शन को this का अर्थ ऑब्जेक्ट होना चाहिए, और तीर फ़ंक्शन को कॉलबैक के लिए रखें जहां आप वास्तव में आसपास के this चाहते हैं, क्योंकि एक तीर बाहरी वाले को पकड़ता है। यह तीर-जैसी-विधि मिश्रण एक क्लासिक है, और यह चुप्पी से विफल होता है।

ऑब्जेक्ट्स और सरणियाँ एक साथ

अधिकांश वास्तविक डेटा ऑब्जेक्ट्स की एक सूची है: कई उपयोगकर्ता, कई उत्पाद, प्रत्येक ऑब्जेक्ट एक रिकॉर्ड एक ही कुंजियों के साथ। आप ऑब्जेक्ट्स को एक array में रखते हैं:

const products = [
  { title: "डेस्क लैंप", price: 40 },
  { title: "नोटबुक", price: 6 },
  { title: "पेन", price: 3 },
];

console.log(products[0].title); // डेस्क लैंप

आप एक ऑब्जेक्ट तक इसकी स्थिति से पहुंचते हैं (products[0]), फिर एक बिंदु के साथ इसके एक क्षेत्र में (.title)। एक साथ श्रृंखलित, products[0].title पहले उत्पाद का शीर्षक पढ़ता है।

हर ऑब्जेक्ट से एक क्षेत्र को पढ़ने के लिए, सरणी पर लूप करें:

for (const product of products) {
  console.log(product.title);
}
// डेस्क लैंप
// नोटबुक
// पेन

लूप का प्रत्येक मोड़, product सूची से एक ऑब्जेक्ट है, और product.title इसका शीर्षक पढ़ता है। यह आकार, ऑब्जेक्ट्स की एक सरणी आप लूप करते हैं, अधिकांश डेटा काम जो आप करेंगे है।

ऑब्जेक्ट्स की एक सरणी अधिकांश वास्तविक डेटा का आकार है: प्रत्येक ऑब्जेक्ट एक रिकॉर्ड, प्रत्येक एक ही कुंजियों को साझा करते हुए। किसी एकल क्षेत्र तक पहुंचने के लिए सरणी पहुंच को डॉट पहुंच के साथ संयोजित करें:

const products = [
  { title: "डेस्क लैंप", price: 40 },
  { title: "नोटबुक", price: 6 },
  { title: "पेन", price: 3 },
];

console.log(products[1].price); // 6

क्योंकि यह एक सरणी है, array methods इस पर काम करते हैं, और यह जहां वे अपनी कमाई करते हैं। map के साथ प्रत्येक ऑब्जेक्ट से एक क्षेत्र खींचें, filter के साथ मिलान रिकॉर्ड रखें, reduce के साथ उन्हें एक मान में रोल करें:

const titles = products.map((product) => product.title);
console.log(titles); // ["डेस्क लैंप", "नोटबुक", "पेन"]

const total = products.reduce((sum, product) => sum + product.price, 0);
console.log(total); // 49

कॉलबैक प्रत्येक पुनरावृत्ति पर एक ऑब्जेक्ट प्राप्त करता है, और आप कुंजी द्वारा इसके क्षेत्रों को पढ़ते हैं। एक बार जब यह क्लिक करता है, तो "प्रत्येक रिकॉर्ड के लिए, यह क्षेत्र लें" और "सभी रिकॉर्ड्स में इस क्षेत्र को कुल करें" एक-लाइनर बन जाते हैं।

ऑब्जेक्ट्स की एक सरणी संरचित डेटा का विहित आकार है, और array methods यह है कि आप इसके साथ कैसे काम करते हैं। प्रत्येक कॉलबैक एक रिकॉर्ड प्राप्त करता है; आप कुंजी द्वारा इसके क्षेत्रों को पढ़ते हैं और रूपांतरित, फ़िल्टर, या एकत्रित करते हैं:

const orders = [
  { id: 1, total: 40, paid: true },
  { id: 2, total: 6, paid: false },
  { id: 3, total: 3, paid: true },
];

const paidTotal = orders
  .filter((order) => order.paid)
  .reduce((sum, order) => sum + order.total, 0);

console.log(paidTotal); // 43

चेनिंग ऊपर से नीचे एक पाइपलाइन के रूप में पढ़ता है: भुगतान किए गए ऑर्डर रखें, फिर उनके कुल जोड़ें। यह स्वच्छ रूप से सरल होता है क्योंकि प्रत्येक चरण ऑब्जेक्ट्स की एक सरणी लेता है और दूसरी सरणी लौटाता है (या, reduce के लिए, एक एकल मान)।

डेटा बढ़ने के साथ ध्यान में रखने के लिए एक बात: ये ऑब्जेक्ट्स संदर्भ द्वारा आयोजित किए जाते हैं, जो नीचे दिए गए उन्नत अनुभाग को सटीक बनाते हैं। map या forEach कॉलबैक के अंदर एक ऑब्जेक्ट को परिवर्तित करना सरणी में मूल रिकॉर्ड को बदलता है, एक प्रति को नहीं, जो कभी-कभी आप चाहते हैं और अक्सर एक आश्चर्य है। जब आप स्रोत को छुए बिना रूपांतरित करना मतलब करते हैं, तो नए ऑब्जेक्ट्स बनाएं बजाय आपको सौंपे गए लोगों को संपादित करने के।

Junoऑब्जेक्ट्स और सरणियाँ एक साथ अधिकांश वास्तविक डेटा ऑब्जेक्ट्स की एक सरणी है: एक सूची जहां प्रत्येक आइटम एक ही कुंजियों वाला एक रिकॉर्ड है। products[0] के साथ एक को पहुंचें, फिर products[0].title के साथ एक क्षेत्र को। सरणी पर लूप करें हर रिकॉर्ड को छूने के लिए, और आपके पास अधिकांश डेटा कार्य का पैटर्न है जो आप करेंगे।

Junoऑब्जेक्ट्स और सरणियाँ एक साथ ऑब्जेक्ट्स की एक सरणी है कि अधिकांश वास्तविक डेटा आता है, और सरणी विधियाँ इसे कैसे काम करें। map प्रत्येक रिकॉर्ड से एक क्षेत्र खींचता है, filter मिलान रिकॉर्ड्स रखता है, reduce उन्हें कुल करता है, कॉलबैक को प्रत्येक मोड़ पर एक ऑब्जेक्ट के साथ हाथ में दिया जाता है। "प्रत्येक रिकॉर्ड के लिए, यह क्षेत्र लें" एक लूप होना बंद हो जाता है और एक-लाइनर बन जाता है।

Junoऑब्जेक्ट्स और सरणियाँ एक साथ सरणी विधियाँ रिकॉर्ड्स पर एक पाइपलाइन में श्रृंखलित होती हैं: नीचे फ़िल्टर करें, फिर एक मान को कम करें, प्रत्येक चरण कुंजी द्वारा क्षेत्रों को पढ़ता है। देखें कि ये ऑब्जेक्ट्स संदर्भ द्वारा आयोजित किए जाते हैं, इसलिए map या forEach कॉलबैक के अंदर एक को परिवर्तित करना सरणी में मूल को संपादित करता है। जब आप स्रोत को छुए बिना रूपांतरित करना मतलब करते हैं, तो नए ऑब्जेक्ट्स बनाएं बजाय आपको सौंपे गए लोगों को संपादित करने के।

ऑब्जेक्ट्स कहां अगले जाते हैं

ऑब्जेक्ट्स और arrays दो संरचनाएं हैं जो आप लगातार पहुंचेंगे, और अधिकांश डेटा जो आप संभालते हैं दोनों का कुछ नेस्टिंग है: सरणी क्षेत्रों वाली ऑब्जेक्ट्स, ऑब्जेक्ट्स की सरणियाँ, और दोनों का संयोजन। उन्हें array methods के साथ जोड़ी करें और आप लगभग किसी भी डेटा को उस रूप में आकार दे सकते हैं जो आपको चाहिए।

अगला कदम ऑब्जेक्ट्स को एक पृष्ठ में कार्य करना है। जब आप the DOM तक पहुंचते हैं, तो तत्व जो आप पढ़ते और बदलते हैं वह भी ऑब्जेक्ट्स होते हैं, जिनमें कुंजियाँ आप सेट करते हैं और विधियाँ आप कॉल करते हैं, इसलिए सब कुछ यहां सीधे भेजा जाता है।