13 KiB
ਜਾਵਾਸਕ੍ਰਿਪਟ ਬੁਨਿਆਦੀਆਂ: ਐਰੇ ਅਤੇ ਲੂਪ
ਸਕੈਚਨੋਟ 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
ਲੂਪ ਨੂੰ ਇਟਰੇਟ ਕਰਨ ਲਈ 3 ਹਿੱਸਿਆਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ:
counter
ਇੱਕ ਵੈਰੀਏਬਲ ਜੋ ਆਮ ਤੌਰ 'ਤੇ ਇੱਕ ਨੰਬਰ ਨਾਲ ਸ਼ੁਰੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜੋ ਇਟਰੇਸ਼ਨ ਦੀ ਗਿਣਤੀ ਕਰਦਾ ਹੈ।condition
ਇੱਕ ਐਕਸਪ੍ਰੈਸ਼ਨ ਜੋ ਤੁਲਨਾ ਓਪਰੇਟਰ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਜਦੋਂfalse
ਹੋਵੇ ਤਾਂ ਲੂਪ ਨੂੰ ਰੋਕਣ ਲਈ।iteration-expression
ਹਰ ਇਟਰੇਸ਼ਨ ਦੇ ਅੰਤ ਵਿੱਚ ਚਲਦਾ ਹੈ, ਆਮ ਤੌਰ 'ਤੇ ਕਾਊਂਟਰ ਮੁੱਲ ਨੂੰ ਬਦਲਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ।
// Counting up to 10
for (let i = 0; i < 10; i++) {
console.log(i);
}
✅ ਇਸ ਕੋਡ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਕਨਸੋਲ ਵਿੱਚ ਚਲਾਓ। ਕੀ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਕਾਊਂਟਰ, ਸ਼ਰਤ ਜਾਂ ਇਟਰੇਸ਼ਨ ਐਕਸਪ੍ਰੈਸ਼ਨ ਵਿੱਚ ਛੋਟੇ-ਛੋਟੇ ਬਦਲਾਅ ਕਰਦੇ ਹੋ? ਕੀ ਤੁਸੀਂ ਇਸਨੂੰ ਪਿੱਛੇ ਚਲਾ ਸਕਦੇ ਹੋ, ਇੱਕ ਕਾਊਂਟਡਾਊਨ ਬਣਾਉਣ ਲਈ?
ਵਾਇਲ ਲੂਪ
for
ਲੂਪ ਦੇ ਸਿੰਟੈਕਸ ਦੇ ਵਿਰੁੱਧ, while
ਲੂਪ ਨੂੰ ਸਿਰਫ਼ ਇੱਕ ਸ਼ਰਤ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਜੋ ਲੂਪ ਨੂੰ ਰੋਕੇਗੀ ਜਦੋਂ ਸ਼ਰਤ false
ਹੋਵੇਗੀ। ਲੂਪ ਵਿੱਚ ਸ਼ਰਤਾਂ ਆਮ ਤੌਰ 'ਤੇ ਹੋਰ ਮੁੱਲਾਂ ਜਿਵੇਂ ਕਿ ਕਾਊਂਟਰ 'ਤੇ ਨਿਰਭਰ ਕਰਦੀਆਂ ਹਨ, ਅਤੇ ਲੂਪ ਦੌਰਾਨ ਪ੍ਰਬੰਧਿਤ ਹੋਣੀਆਂ ਚਾਹੀਦੀਆਂ ਹਨ। ਕਾਊਂਟਰਾਂ ਲਈ ਸ਼ੁਰੂਆਤੀ ਮੁੱਲਾਂ ਨੂੰ ਲੂਪ ਦੇ ਬਾਹਰ ਬਣਾਇਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ, ਅਤੇ ਕੋਈ ਵੀ ਐਕਸਪ੍ਰੈਸ਼ਨ ਜੋ ਸ਼ਰਤ ਨੂੰ ਪੂਰਾ ਕਰਨ ਲਈ ਹੈ, ਜਿਸ ਵਿੱਚ ਕਾਊਂਟਰ ਨੂੰ ਬਦਲਣਾ ਸ਼ਾਮਲ ਹੈ, ਲੂਪ ਦੇ ਅੰਦਰ ਰੱਖਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ।
//Counting up to 10
let i = 0;
while (i < 10) {
console.log(i);
i++;
}
✅ ਤੁਸੀਂ ਫੋਰ ਲੂਪ ਦੇ ਬਜਾਏ ਵਾਇਲ ਲੂਪ ਕਿਉਂ ਚੁਣਦੇ ਹੋ? 17K ਦਰਸ਼ਕਾਂ ਨੇ 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
✅ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਕਨਸੋਲ ਵਿੱਚ ਆਪਣੇ ਬਣਾਏ ਐਰੇ 'ਤੇ ਲੂਪ ਕਰਨ ਦਾ ਅਨੁਭਵ ਕਰੋ।
🚀 ਚੁਣੌਤੀ
ਐਰੇ 'ਤੇ ਲੂਪ ਕਰਨ ਦੇ ਹੋਰ ਤਰੀਕੇ ਹਨ ਜਿਵੇਂ ਕਿ for ਅਤੇ while ਲੂਪ। forEach, for-of, ਅਤੇ map। ਆਪਣੇ ਐਰੇ ਲੂਪ ਨੂੰ ਇਨ੍ਹਾਂ ਤਕਨੀਕਾਂ ਵਿੱਚੋਂ ਇੱਕ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਦੁਬਾਰਾ ਲਿਖੋ।
ਲੈਕਚਰ ਤੋਂ ਬਾਅਦ ਕਵਿਜ਼
ਸਮੀਖਿਆ ਅਤੇ ਖੁਦ ਅਧਿਐਨ
ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਐਰੇ ਦੇ ਨਾਲ ਕਈ ਵਿਧੀਆਂ ਜੁੜੀਆਂ ਹੋਈਆਂ ਹਨ, ਜੋ ਡਾਟਾ ਮੈਨੇਜਮੈਂਟ ਲਈ ਬਹੁਤ ਹੀ ਲਾਭਦਾਇਕ ਹਨ। ਇਨ੍ਹਾਂ ਵਿਧੀਆਂ ਬਾਰੇ ਪੜ੍ਹੋ ਅਤੇ ਆਪਣੇ ਬਣਾਏ ਐਰੇ 'ਤੇ ਕੁਝ ਵਿਧੀਆਂ (ਜਿਵੇਂ ਕਿ push, pop, slice ਅਤੇ splice) ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ।
ਅਸਾਈਨਮੈਂਟ
ਅਸਵੀਕਰਤੀ:
ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ Co-op Translator ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀਤਾ ਲਈ ਯਤਨਸ਼ੀਲ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚੀਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।