Web-Dev-For-Beginners/translations/pa/2-js-basics/4-arrays-loops

ਜਾਵਾਸਕ੍ਰਿਪਟ ਬੇਸਿਕਸ: ਐਰੇਜ਼ ਅਤੇ ਲੂਪ

ਸਕੈਚਨੋਟ Tomomi Imura ਦੁਆਰਾ

ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼

ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵਿਜ਼

ਇਹ ਪਾਠ ਜਾਵਾਸਕ੍ਰਿਪਟ ਦੀ ਬੁਨਿਆਦੀਆਂ ਨੂੰ ਕਵਰ ਕਰਦਾ ਹੈ, ਜੋ ਕਿ ਵੈੱਬ 'ਤੇ ਇੰਟਰਐਕਟਿਵਿਟੀ ਪ੍ਰਦਾਨ ਕਰਨ ਵਾਲੀ ਭਾਸ਼ਾ ਹੈ। ਇਸ ਪਾਠ ਵਿੱਚ, ਤੁਸੀਂ ਐਰੇਜ਼ ਅਤੇ ਲੂਪ ਬਾਰੇ ਸਿੱਖੋਗੇ, ਜੋ ਡਾਟਾ ਨੂੰ ਮੈਨੇਜ ਕਰਨ ਲਈ ਵਰਤੇ ਜਾਂਦੇ ਹਨ।

🎥 ਉੱਪਰ ਦਿੱਤੀਆਂ ਤਸਵੀਰਾਂ 'ਤੇ ਕਲਿਕ ਕਰੋ ਤਾਂ ਜੋ ਐਰੇਜ਼ ਅਤੇ ਲੂਪ ਬਾਰੇ ਵੀਡੀਓਜ਼ ਦੇਖ ਸਕੋ।

ਤੁਸੀਂ ਇਹ ਪਾਠ Microsoft Learn 'ਤੇ ਲੈ ਸਕਦੇ ਹੋ!

ਐਰੇਜ਼

ਡਾਟਾ ਨਾਲ ਕੰਮ ਕਰਨਾ ਕਿਸੇ ਵੀ ਭਾਸ਼ਾ ਲਈ ਇੱਕ ਆਮ ਕੰਮ ਹੈ, ਅਤੇ ਜਦੋਂ ਡਾਟਾ ਨੂੰ ਇੱਕ ਸਟ੍ਰਕਚਰਲ ਫਾਰਮੈਟ ਵਿੱਚ ਸੰਗਠਿਤ ਕੀਤਾ ਜਾਂਦਾ ਹੈ, ਜਿਵੇਂ ਕਿ ਐਰੇਜ਼, ਤਾਂ ਇਹ ਕੰਮ ਬਹੁਤ ਆਸਾਨ ਹੋ ਜਾਂਦਾ ਹੈ। ਐਰੇਜ਼ ਨਾਲ, ਡਾਟਾ ਨੂੰ ਇੱਕ ਸੂਚੀ ਦੇ ਸਮਾਨ ਸਟ੍ਰਕਚਰ ਵਿੱਚ ਸਟੋਰ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ਐਰੇਜ਼ ਦਾ ਇੱਕ ਵੱਡਾ ਫਾਇਦਾ ਇਹ ਹੈ ਕਿ ਤੁਸੀਂ ਇੱਕ ਐਰੇ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਕਿਸਮਾਂ ਦੇ ਡਾਟਾ ਨੂੰ ਸਟੋਰ ਕਰ ਸਕਦੇ ਹੋ।

✅ ਐਰੇਜ਼ ਹਰ ਜਗ੍ਹਾ ਹਨ! ਕੀ ਤੁਸੀਂ ਐਰੇ ਦਾ ਕੋਈ ਅਸਲ ਜ਼ਿੰਦਗੀ ਦਾ ਉਦਾਹਰਨ ਦੇ ਸਕਦੇ ਹੋ, ਜਿਵੇਂ ਕਿ ਸੂਰਜੀ ਪੈਨਲ ਐਰੇ?

ਐਰੇ ਦਾ ਸਿੰਟੈਕਸ ਇੱਕ ਜੋੜੇ ਚੌਰਸ ਬ੍ਰੈਕਟਸ ਹੈ।

let myArray = [];

ਇਹ ਇੱਕ ਖਾਲੀ ਐਰੇ ਹੈ, ਪਰ ਐਰੇਜ਼ ਨੂੰ ਪਹਿਲਾਂ ਹੀ ਡਾਟਾ ਨਾਲ ਭਰਿਆ ਹੋਇਆ ਐਲਾਨ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਐਰੇ ਵਿੱਚ ਕਈ ਮੁੱਲਾਂ ਨੂੰ ਕਾਮਾ ਨਾਲ ਵੱਖ ਕੀਤਾ ਜਾਂਦਾ ਹੈ।

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

ਐਰੇ ਮੁੱਲਾਂ ਨੂੰ ਇੱਕ ਵਿਲੱਖਣ ਮੁੱਲ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ ਜਿਸਨੂੰ ਇੰਡੈਕਸ ਕਿਹਾ ਜਾਂਦਾ ਹੈ, ਜੋ ਕਿ ਇਸਦੀ ਐਰੇ ਦੇ ਸ਼ੁਰੂ ਤੋਂ ਦੂਰੀ ਦੇ ਆਧਾਰ 'ਤੇ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ। ਉਪਰੋਕਤ ਉਦਾਹਰਨ ਵਿੱਚ, ਸਟ੍ਰਿੰਗ ਮੁੱਲ "Chocolate" ਦਾ ਇੰਡੈਕਸ 0 ਹੈ, ਅਤੇ "Rocky Road" ਦਾ ਇੰਡੈਕਸ 4 ਹੈ। ਐਰੇ ਮੁੱਲਾਂ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ, ਬਦਲਣ ਜਾਂ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਇੰਡੈਕਸ ਨੂੰ ਚੌਰਸ ਬ੍ਰੈਕਟਸ ਨਾਲ ਵਰਤੋ।

✅ ਕੀ ਇਹ ਤੁਹਾਨੂੰ ਹੈਰਾਨ ਕਰਦਾ ਹੈ ਕਿ ਐਰੇਜ਼ ਜ਼ੀਰੋ ਇੰਡੈਕਸ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹਨ? ਕੁਝ ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਵਿੱਚ, ਇੰਡੈਕਸ 1 ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹਨ। ਇਸ ਬਾਰੇ ਇੱਕ ਦਿਲਚਸਪ ਇਤਿਹਾਸ ਹੈ, ਜਿਸਨੂੰ ਤੁਸੀਂ ਵਿਕੀਪੀਡੀਆ 'ਤੇ ਪੜ੍ਹ ਸਕਦੇ ਹੋ।

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors[2]; //"Vanilla"

ਤੁਸੀਂ ਇੰਡੈਕਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਮੁੱਲ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹੋ, ਇਸ ਤਰ੍ਹਾਂ:

iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"

ਅਤੇ ਤੁਸੀਂ ਦਿੱਤੇ ਗਏ ਇੰਡੈਕਸ 'ਤੇ ਇੱਕ ਨਵਾਂ ਮੁੱਲ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ ਇਸ ਤਰ੍ਹਾਂ:

iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"

✅ ਐਰੇ ਵਿੱਚ ਮੁੱਲ ਸ਼ਾਮਲ ਕਰਨ ਦਾ ਇੱਕ ਹੋਰ ਆਮ ਤਰੀਕਾ ਹੈ ਐਰੇ ਆਪਰੇਟਰ ਵਰਤਣਾ ਜਿਵੇਂ ਕਿ array.push()

ਐਰੇ ਵਿੱਚ ਕਿੰਨੇ ਆਈਟਮ ਹਨ ਇਹ ਪਤਾ ਕਰਨ ਲਈ, length ਪ੍ਰਾਪਰਟੀ ਦੀ ਵਰਤੋਂ ਕਰੋ।

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors.length; //5

✅ ਖੁਦ ਅਜਮਾਓ! ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਕਨਸੋਲ ਵਿੱਚ ਆਪਣਾ ਖੁਦ ਦਾ ਐਰੇ ਬਣਾਓ ਅਤੇ ਮੈਨੇਜ ਕਰੋ।

ਲੂਪ

ਲੂਪ ਸਾਨੂੰ ਦੁਹਰਾਏ ਜਾਂ ਇਟਰੇਟਿਵ ਕੰਮ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ, ਅਤੇ ਬਹੁਤ ਸਾਰਾ ਸਮਾਂ ਅਤੇ ਕੋਡ ਬਚਾ ਸਕਦੇ ਹਨ। ਹਰ ਇਟਰੇਸ਼ਨ ਵਿੱਚ ਇਸਦੇ ਵੈਰੀਏਬਲ, ਮੁੱਲ ਅਤੇ ਸ਼ਰਤਾਂ ਵਿੱਚ ਫਰਕ ਹੋ ਸਕਦਾ ਹੈ। ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਕਿਸਮ ਦੇ ਲੂਪ ਹਨ, ਅਤੇ ਉਹਨਾਂ ਵਿੱਚ ਕੁਝ ਛੋਟੇ ਫਰਕ ਹਨ, ਪਰ ਅਸਲ ਵਿੱਚ ਉਹ ਇੱਕੋ ਕੰਮ ਕਰਦੇ ਹਨ: ਡਾਟਾ 'ਤੇ ਲੂਪ ਕਰਨਾ।

For Loop

for ਲੂਪ ਨੂੰ ਇਟਰੇਟ ਕਰਨ ਲਈ 3 ਹਿੱਸਿਆਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ:

• counter ਇੱਕ ਵੈਰੀਏਬਲ ਜੋ ਆਮ ਤੌਰ 'ਤੇ ਇਟਰੇਸ਼ਨ ਦੀ ਗਿਣਤੀ ਕਰਨ ਲਈ ਇੱਕ ਨੰਬਰ ਨਾਲ ਸ਼ੁਰੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ
• condition ਇੱਕ ਐਕਸਪ੍ਰੈਸ਼ਨ ਜੋ ਤੁਲਨਾ ਆਪਰੇਟਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਤਾਂ ਜੋ ਲੂਪ false ਹੋਣ 'ਤੇ ਰੁਕ ਜਾਵੇ
• iteration-expression ਹਰ ਇਟਰੇਸ਼ਨ ਦੇ ਅੰਤ ਵਿੱਚ ਚਲਦਾ ਹੈ, ਆਮ ਤੌਰ 'ਤੇ ਕਾਊਂਟਰ ਮੁੱਲ ਨੂੰ ਬਦਲਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ

// Counting up to 10
for (let i = 0; i < 10; i++) {
  console.log(i);
}

✅ ਇਹ ਕੋਡ ਬ੍ਰਾਊਜ਼ਰ ਕਨਸੋਲ ਵਿੱਚ ਚਲਾਓ। ਜਦੋਂ ਤੁਸੀਂ ਕਾਊਂਟਰ, ਸ਼ਰਤ ਜਾਂ ਇਟਰੇਸ਼ਨ ਐਕਸਪ੍ਰੈਸ਼ਨ ਵਿੱਚ ਛੋਟੇ ਬਦਲਾਅ ਕਰਦੇ ਹੋ ਤਾਂ ਕੀ ਹੁੰਦਾ ਹੈ? ਕੀ ਤੁਸੀਂ ਇਸਨੂੰ ਪਿੱਛੇ ਚਲਾਉਣ ਲਈ ਬਦਲ ਸਕਦੇ ਹੋ, ਇੱਕ ਕਾਊਂਟਡਾਊਨ ਬਣਾਉਣ ਲਈ?

While loop

for ਲੂਪ ਦੇ ਸਿੰਟੈਕਸ ਤੋਂ ਵੱਖਰਾ, while ਲੂਪ ਨੂੰ ਸਿਰਫ਼ ਇੱਕ ਸ਼ਰਤ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਜੋ ਲੂਪ ਨੂੰ ਰੋਕ ਦੇਵੇਗੀ ਜਦੋਂ ਸ਼ਰਤ false ਹੋਵੇਗੀ। ਲੂਪ ਵਿੱਚ ਸ਼ਰਤਾਂ ਆਮ ਤੌਰ 'ਤੇ ਹੋਰ ਮੁੱਲਾਂ ਜਿਵੇਂ ਕਿ ਕਾਊਂਟਰ 'ਤੇ ਨਿਰਭਰ ਕਰਦੀਆਂ ਹਨ, ਅਤੇ ਲੂਪ ਦੌਰਾਨ ਇਸਨੂੰ ਮੈਨੇਜ ਕਰਨਾ ਪੈਂਦਾ ਹੈ। ਕਾਊਂਟਰ ਲਈ ਸ਼ੁਰੂਆਤੀ ਮੁੱਲਾਂ ਨੂੰ ਲੂਪ ਤੋਂ ਬਾਹਰ ਬਣਾਇਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ, ਅਤੇ ਕੋਈ ਵੀ ਐਕਸਪ੍ਰੈਸ਼ਨ ਜੋ ਸ਼ਰਤ ਪੂਰੀ ਕਰਨ ਲਈ ਹੈ, ਜਿਸ ਵਿੱਚ ਕਾਊਂਟਰ ਨੂੰ ਬਦਲਣਾ ਸ਼ਾਮਲ ਹੈ, ਲੂਪ ਦੇ ਅੰਦਰ ਰੱਖਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।

//Counting up to 10
let i = 0;
while (i < 10) {
 console.log(i);
 i++;
}

✅ ਤੁਸੀਂ for ਲੂਪ ਦੇ ਬਦਲੇ while ਲੂਪ ਕਿਉਂ ਚੁਣੋਗੇ? 17,000 ਦਰਸ਼ਕਾਂ ਨੇ StackOverflow 'ਤੇ ਇਹੀ ਸਵਾਲ ਪੁੱਛਿਆ ਸੀ, ਅਤੇ ਕੁਝ ਰਾਏ ਤੁਹਾਡੇ ਲਈ ਦਿਲਚਸਪ ਹੋ ਸਕਦੇ ਹਨ।

ਲੂਪ ਅਤੇ ਐਰੇਜ਼

ਐਰੇਜ਼ ਨੂੰ ਅਕਸਰ ਲੂਪ ਨਾਲ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਕਿਉਂਕਿ ਜ਼ਿਆਦਾਤਰ ਸ਼ਰਤਾਂ ਨੂੰ ਲੂਪ ਨੂੰ ਰੋਕਣ ਲਈ ਐਰੇ ਦੀ ਲੰਬਾਈ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਅਤੇ ਇੰਡੈਕਸ ਵੀ ਕਾਊਂਟਰ ਮੁੱਲ ਹੋ ਸਕਦਾ ਹੈ।

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(iceCreamFlavors[i]);
} //Ends when all flavors are printed

✅ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਕਨਸੋਲ ਵਿੱਚ ਆਪਣੇ ਬਣਾਏ ਐਰੇ 'ਤੇ ਲੂਪ ਕਰਨ ਦਾ ਅਨੁਭਵ ਕਰੋ।

---

GitHub Copilot Agent Challenge 🚀

Agent ਮੋਡ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਹੇਠਾਂ ਦਿੱਤੇ ਚੈਲੈਂਜ ਨੂੰ ਪੂਰਾ ਕਰੋ:

Description: ਇੱਕ ਡਾਟਾ ਪ੍ਰੋਸੈਸਿੰਗ ਫੰਕਸ਼ਨ ਬਣਾਓ ਜੋ ਐਰੇਜ਼ ਅਤੇ ਲੂਪ ਨੂੰ ਜੋੜ ਕੇ ਡਾਟਾਸੈੱਟ ਦਾ ਵਿਸ਼ਲੇਸ਼ਣ ਕਰੇ।

Prompt: ਇੱਕ ਫੰਕਸ਼ਨ ਬਣਾਓ ਜਿਸਨੂੰ analyzeGrades ਕਿਹਾ ਜਾਂਦਾ ਹੈ ਜੋ ਵਿਦਿਆਰਥੀ ਗਰੇਡ ਆਬਜੈਕਟਾਂ ਦੇ ਐਰੇ (ਹਰ ਇੱਕ ਵਿੱਚ name ਅਤੇ score ਪ੍ਰਾਪਰਟੀਜ਼ ਸ਼ਾਮਲ ਹਨ) ਨੂੰ ਲੈਂਦਾ ਹੈ ਅਤੇ ਸਟੈਟਿਸਟਿਕਸ ਵਾਪਸ ਕਰਦਾ ਹੈ ਜਿਸ ਵਿੱਚ ਸਭ ਤੋਂ ਉੱਚਾ ਸਕੋਰ, ਸਭ ਤੋਂ ਘੱਟ ਸਕੋਰ, ਔਸਤ ਸਕੋਰ, ਅਤੇ ਪਾਸ ਹੋਣ ਵਾਲੇ ਵਿਦਿਆਰਥੀਆਂ ਦੀ ਗਿਣਤੀ (score >= 70) ਸ਼ਾਮਲ ਹੈ। ਡਾਟਾ ਨੂੰ ਪ੍ਰੋਸੈਸ ਕਰਨ ਲਈ ਲੂਪ ਦੀ ਵਰਤੋਂ ਕਰੋ।

🚀 ਚੈਲੈਂਜ

ਐਰੇਜ਼ 'ਤੇ ਲੂਪ ਕਰਨ ਦੇ ਹੋਰ ਤਰੀਕੇ ਹਨ ਜਿਵੇਂ ਕਿ for ਅਤੇ while ਲੂਪ ਤੋਂ ਇਲਾਵਾ। forEach, for-of, ਅਤੇ map। ਆਪਣੇ ਐਰੇ ਲੂਪ ਨੂੰ ਇਨ੍ਹਾਂ ਤਕਨੀਕਾਂ ਵਿੱਚੋਂ ਇੱਕ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਦੁਬਾਰਾ ਲਿਖੋ।

ਲੈਕਚਰ ਤੋਂ ਬਾਅਦ ਕਵਿਜ਼

ਲੈਕਚਰ ਤੋਂ ਬਾਅਦ ਕਵਿਜ਼

ਸਮੀਖਾ ਅਤੇ ਖੁਦ ਅਧਿਐਨ

ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਐਰੇਜ਼ ਨਾਲ ਬਹੁਤ ਸਾਰੇ ਮੈਥਡ ਜੁੜੇ ਹੋਏ ਹਨ, ਜੋ ਡਾਟਾ ਮੈਨੇਜਮੈਂਟ ਲਈ ਬਹੁਤ ਹੀ ਲਾਭਦਾਇਕ ਹਨ। ਇਨ੍ਹਾਂ ਮੈਥਡਾਂ ਬਾਰੇ ਪੜ੍ਹੋ ਅਤੇ ਆਪਣੇ ਬਣਾਏ ਐਰੇ 'ਤੇ ਕੁਝ ਮੈਥਡ (ਜਿਵੇਂ ਕਿ push, pop, slice ਅਤੇ splice) ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ।

ਅਸਾਈਨਮੈਂਟ

Loop an Array

---

ਅਸਵੀਕਰਤਾ:
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ Co-op Translator ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।