JavaScript ਵਿੱਚ ਐਰੇ ਲੂਪਸ ਨੂੰ ਮਾਸਟਰ ਕਰਨਾ
ਇੱਕ ਐਰੇ ਰਾਹੀਂ ਲੂਪ ਕਰਨਾ JavaScript ਵਿੱਚ ਇੱਕ ਬੁਨਿਆਦੀ ਹੁਨਰ ਹੈ, ਸੂਚੀਆਂ ਵਿੱਚ ਸਟੋਰ ਕੀਤੇ ਡੇਟਾ ਨਾਲ ਹੇਰਾਫੇਰੀ ਅਤੇ ਇੰਟਰੈਕਟ ਕਰਨ ਲਈ ਜ਼ਰੂਰੀ ਹੈ। ਭਾਵੇਂ ਤੁਸੀਂ ਛੋਟੇ ਜਾਂ ਵੱਡੇ ਡੇਟਾਸੈਟਾਂ ਨਾਲ ਕੰਮ ਕਰ ਰਹੇ ਹੋ, ਇਹ ਸਮਝਣਾ ਕਿ ਐਰੇ ਐਲੀਮੈਂਟਸ ਨੂੰ ਕੁਸ਼ਲਤਾ ਨਾਲ ਕਿਵੇਂ ਦੁਹਰਾਉਣਾ ਹੈ ਤੁਹਾਡੀ ਪ੍ਰੋਗਰਾਮਿੰਗ ਸਮਰੱਥਾਵਾਂ ਨੂੰ ਮਹੱਤਵਪੂਰਣ ਰੂਪ ਵਿੱਚ ਵਧਾ ਸਕਦਾ ਹੈ।
ਇਸ ਗਾਈਡ ਵਿੱਚ, ਅਸੀਂ JavaScript ਵਿੱਚ ਇੱਕ ਐਰੇ ਰਾਹੀਂ ਲੂਪ ਕਰਨ ਲਈ ਕਈ ਤਰੀਕਿਆਂ ਦੀ ਪੜਚੋਲ ਕਰਾਂਗੇ। ਰਵਾਇਤੀ ਲੂਪਸ ਤੋਂ ਲੈ ਕੇ ਆਧੁਨਿਕ, ਵਧੇਰੇ ਸੰਖੇਪ ਤਕਨੀਕਾਂ ਤੱਕ, ਤੁਸੀਂ ਆਪਣੀਆਂ ਖਾਸ ਲੋੜਾਂ ਅਤੇ ਕੋਡਿੰਗ ਸ਼ੈਲੀ ਲਈ ਸਭ ਤੋਂ ਵਧੀਆ ਪਹੁੰਚ ਚੁਣਨ ਲਈ ਗਿਆਨ ਪ੍ਰਾਪਤ ਕਰੋਗੇ।
| ਹੁਕਮ | ਵਰਣਨ |
|---|---|
| forEach() | ਇੱਕ ਵਿਧੀ ਜੋ ਹਰੇਕ ਐਰੇ ਐਲੀਮੈਂਟ ਲਈ ਇੱਕ ਵਾਰ ਪ੍ਰਦਾਨ ਕੀਤੇ ਫੰਕਸ਼ਨ ਨੂੰ ਚਲਾਉਂਦੀ ਹੈ। |
| for...of | ਇੱਕ ਲੂਪ ਜੋ ਦੁਹਰਾਉਣਯੋਗ ਵਸਤੂਆਂ, ਜਿਵੇਂ ਕਿ ਐਰੇਜ਼ ਉੱਤੇ ਦੁਹਰਾਉਂਦਾ ਹੈ, ਹਰੇਕ ਵੱਖਰੀ ਵਿਸ਼ੇਸ਼ਤਾ ਦੇ ਮੁੱਲ ਲਈ ਲਾਗੂ ਕੀਤੇ ਜਾਣ ਵਾਲੇ ਸਟੇਟਮੈਂਟਾਂ ਦੇ ਨਾਲ ਇੱਕ ਕਸਟਮ ਦੁਹਰਾਓ ਹੁੱਕ ਦੀ ਮੰਗ ਕਰਦਾ ਹੈ। |
| map() | ਇੱਕ ਵਿਧੀ ਜੋ ਕਾਲਿੰਗ ਐਰੇ ਵਿੱਚ ਹਰੇਕ ਤੱਤ 'ਤੇ ਇੱਕ ਪ੍ਰਦਾਨ ਕੀਤੇ ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰਨ ਦੇ ਨਤੀਜਿਆਂ ਨਾਲ ਭਰੀ ਇੱਕ ਨਵੀਂ ਐਰੇ ਬਣਾਉਂਦਾ ਹੈ। |
| reduce() | ਇੱਕ ਵਿਧੀ ਜੋ ਐਰੇ ਦੇ ਹਰੇਕ ਤੱਤ ਉੱਤੇ ਇੱਕ ਰੀਡਿਊਸਰ ਫੰਕਸ਼ਨ ਨੂੰ ਚਲਾਉਂਦੀ ਹੈ, ਨਤੀਜੇ ਵਜੋਂ ਇੱਕ ਸਿੰਗਲ ਆਉਟਪੁੱਟ ਮੁੱਲ ਹੁੰਦਾ ਹੈ। |
| length | ਇੱਕ ਵਿਸ਼ੇਸ਼ਤਾ ਜੋ ਇੱਕ ਐਰੇ ਵਿੱਚ ਤੱਤਾਂ ਦੀ ਸੰਖਿਆ ਨੂੰ ਸੈੱਟ ਕਰਦੀ ਹੈ ਜਾਂ ਵਾਪਸ ਕਰਦੀ ਹੈ। |
| console.log() | ਇੱਕ ਢੰਗ ਜੋ ਵੈੱਬ ਕੰਸੋਲ ਵਿੱਚ ਇੱਕ ਸੁਨੇਹਾ ਆਉਟਪੁੱਟ ਕਰਦਾ ਹੈ। ਇਹ ਸੁਨੇਹਾ ਇੱਕ ਸਤਰ, ਐਰੇ, ਵਸਤੂ, ਜਾਂ ਕੋਈ ਹੋਰ ਕਿਸਮ ਦਾ ਹੋ ਸਕਦਾ ਹੈ। |
JavaScript ਵਿੱਚ ਐਰੇ ਲੂਪਿੰਗ ਢੰਗਾਂ ਨੂੰ ਸਮਝਣਾ
ਉੱਪਰ ਪ੍ਰਦਾਨ ਕੀਤੀਆਂ ਸਕ੍ਰਿਪਟਾਂ JavaScript ਵਿੱਚ ਇੱਕ ਐਰੇ ਰਾਹੀਂ ਲੂਪ ਕਰਨ ਦੇ ਵੱਖ-ਵੱਖ ਤਰੀਕਿਆਂ ਦਾ ਪ੍ਰਦਰਸ਼ਨ ਕਰਦੀਆਂ ਹਨ। ਪਹਿਲੀ ਉਦਾਹਰਨ ਇੱਕ ਰਵਾਇਤੀ ਵਰਤਦਾ ਹੈ for ਲੂਪ, ਜੋ ਕਿ ਇੱਕ ਸੂਚਕਾਂਕ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਐਰੇ ਤੱਤਾਂ ਉੱਤੇ ਦੁਹਰਾਉਂਦਾ ਹੈ। ਦ forEach ਵਿਧੀ ਇੱਕ ਵਧੇਰੇ ਆਧੁਨਿਕ ਪਹੁੰਚ ਹੈ, ਹਰੇਕ ਐਰੇ ਐਲੀਮੈਂਟ ਲਈ ਇੱਕ ਵਾਰ ਪ੍ਰਦਾਨ ਕੀਤੇ ਫੰਕਸ਼ਨ ਨੂੰ ਚਲਾਉਂਦੀ ਹੈ। ਦ for...of ਲੂਪ ਐਰੇ ਉੱਤੇ ਦੁਹਰਾਉਣ ਦਾ ਇੱਕ ਹੋਰ ਕੁਸ਼ਲ ਤਰੀਕਾ ਹੈ, ਖਾਸ ਕਰਕੇ ਜਦੋਂ ਤੁਹਾਨੂੰ ਸੂਚਕਾਂਕ ਤੱਕ ਪਹੁੰਚ ਦੀ ਲੋੜ ਨਹੀਂ ਹੁੰਦੀ ਹੈ। ਇਹ ਵਿਧੀਆਂ JavaScript ਵਿੱਚ ਐਰੇ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਮਹੱਤਵਪੂਰਨ ਹਨ, ਜਿਸ ਨਾਲ ਹਰੇਕ ਤੱਤ 'ਤੇ ਕਾਰਵਾਈਆਂ ਕਰਨਾ ਆਸਾਨ ਹੋ ਜਾਂਦਾ ਹੈ।
ਇਸ ਤੋਂ ਇਲਾਵਾ, ਦ map ਵਿਧੀ ਹਰ ਐਲੀਮੈਂਟ ਉੱਤੇ ਇੱਕ ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰਕੇ ਇੱਕ ਨਵੀਂ ਐਰੇ ਬਣਾਉਂਦਾ ਹੈ, ਜੋ ਡੇਟਾ ਨੂੰ ਬਦਲਣ ਲਈ ਉਪਯੋਗੀ ਹੈ। ਦ reduce ਵਿਧੀ ਹਰੇਕ ਐਰੇ ਐਲੀਮੈਂਟ ਉੱਤੇ ਇੱਕ ਰੀਡਿਊਸਰ ਫੰਕਸ਼ਨ ਨੂੰ ਚਲਾਉਂਦੀ ਹੈ, ਨਤੀਜੇ ਵਜੋਂ ਇੱਕ ਸਿੰਗਲ ਆਉਟਪੁੱਟ ਮੁੱਲ ਹੁੰਦਾ ਹੈ। ਇਹ ਹੁਕਮ, ਦੇ ਨਾਲ length ਅਤੇ console.log, JavaScript ਵਿੱਚ ਐਰੇ ਨੂੰ ਹੇਰਾਫੇਰੀ ਅਤੇ ਡੀਬੱਗ ਕਰਨ ਲਈ ਸ਼ਕਤੀਸ਼ਾਲੀ ਟੂਲ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ। ਇਹਨਾਂ ਤਰੀਕਿਆਂ ਨੂੰ ਸਮਝ ਕੇ, ਡਿਵੈਲਪਰ ਆਪਣੇ ਖਾਸ ਵਰਤੋਂ ਦੇ ਮਾਮਲਿਆਂ ਲਈ ਸਭ ਤੋਂ ਢੁਕਵੀਂ ਲੂਪਿੰਗ ਤਕਨੀਕ ਦੀ ਚੋਣ ਕਰ ਸਕਦੇ ਹਨ, ਕੋਡ ਪੜ੍ਹਨਯੋਗਤਾ ਅਤੇ ਪ੍ਰਦਰਸ਼ਨ ਨੂੰ ਵਧਾ ਸਕਦੇ ਹਨ।
ਲੂਪ ਲਈ ਵਰਤਦੇ ਹੋਏ ਇੱਕ ਐਰੇ ਰਾਹੀਂ ਲੂਪ ਕਰਨਾ
JavaScript
const array = ['apple', 'banana', 'cherry'];for (let i = 0; i < array.length; i++) {console.log(array[i]);}
forEach ਢੰਗ ਨਾਲ ਇੱਕ ਐਰੇ ਉੱਤੇ ਦੁਹਰਾਉਣਾ
JavaScript
const array = ['apple', 'banana', 'cherry'];array.forEach(function(element) {console.log(element);});
ਇੱਕ ਐਰੇ ਨੂੰ ਪਾਰ ਕਰਨ ਲਈ ਲੂਪ ਲਈ... ਦੀ ਵਰਤੋਂ ਕਰਨਾ
JavaScript
const array = ['apple', 'banana', 'cherry'];for (const element of array) {console.log(element);}
Array.map ਵਿਧੀ ਨਾਲ ਲੂਪ ਕਰਨਾ
JavaScript
const array = ['apple', 'banana', 'cherry'];array.map(element => {console.log(element);return element;});
Array.reduce ਢੰਗ ਨਾਲ ਇੱਕ ਐਰੇ ਨੂੰ ਪਾਰ ਕਰਨਾ
JavaScript
const array = ['apple', 'banana', 'cherry'];array.reduce((acc, element) => {console.log(element);return acc;}, []);
ਐਡਵਾਂਸਡ ਐਰੇ ਈਟਰੇਸ਼ਨ ਤਕਨੀਕਾਂ ਦੀ ਪੜਚੋਲ ਕਰਨਾ
JavaScript ਵਿੱਚ ਐਰੇ ਦੁਹਰਾਅ ਦਾ ਇੱਕ ਹੋਰ ਮਹੱਤਵਪੂਰਨ ਪਹਿਲੂ ਅਸਿੰਕ੍ਰੋਨਸ ਵਿਧੀਆਂ ਦੀ ਵਰਤੋਂ ਹੈ। ਵਰਗੇ ਫੰਕਸ਼ਨ forEach ਅਤੇ map ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਸਿੰਕਰੋਨਸ ਓਪਰੇਸ਼ਨਾਂ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਅਨੁਕੂਲਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ async ਅਤੇ await. ਇਹ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਲਾਭਦਾਇਕ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਉਸ ਡੇਟਾ ਨਾਲ ਕੰਮ ਕਰਨਾ ਜਿਸ ਲਈ API ਤੋਂ ਪ੍ਰਾਪਤ ਕਰਨ ਜਾਂ ਗੁੰਝਲਦਾਰ ਗਣਨਾ ਕਰਨ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਜਿਸ ਵਿੱਚ ਕੁਝ ਸਮਾਂ ਲੱਗ ਸਕਦਾ ਹੈ।
ਇਸ ਤੋਂ ਇਲਾਵਾ, ਇਹ ਸਮਝਣਾ ਕਿ ਲੂਪਸ ਤੋਂ ਕਿਵੇਂ ਬਾਹਰ ਨਿਕਲਣਾ ਹੈ ਜਾਂ ਦੁਹਰਾਓ ਨੂੰ ਛੱਡਣਾ ਮਹੱਤਵਪੂਰਨ ਹੈ। ਜਦਕਿ ਦ for ਲੂਪ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਇਜਾਜ਼ਤ ਦਿੰਦਾ ਹੈ break ਅਤੇ continue ਬਿਆਨ, the forEach ਵਿਧੀ ਮੂਲ ਰੂਪ ਵਿੱਚ ਇਹਨਾਂ ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੀ। ਇਸ ਦੀ ਬਜਾਏ, ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋਏ Array.some() ਜਾਂ Array.every() ਵਿਧੀਆਂ ਦੁਹਰਾਅ ਦੇ ਪ੍ਰਵਾਹ ਨੂੰ ਨਿਯੰਤਰਿਤ ਕਰਨ ਲਈ ਆਪਣੇ ਵਾਪਸੀ ਮੁੱਲਾਂ ਦਾ ਲਾਭ ਲੈ ਕੇ ਸਮਾਨ ਕਾਰਜਸ਼ੀਲਤਾ ਪ੍ਰਦਾਨ ਕਰ ਸਕਦੀਆਂ ਹਨ।
JavaScript ਵਿੱਚ Array Looping ਬਾਰੇ ਅਕਸਰ ਪੁੱਛੇ ਜਾਂਦੇ ਸਵਾਲ
- ਵਿਚਕਾਰ ਕੀ ਫਰਕ ਹੈ forEach ਅਤੇ map?
- forEach ਹਰੇਕ ਐਰੇ ਐਲੀਮੈਂਟ ਲਈ ਇੱਕ ਵਾਰ ਪ੍ਰਦਾਨ ਕੀਤੇ ਫੰਕਸ਼ਨ ਨੂੰ ਚਲਾਉਂਦਾ ਹੈ, ਜਦਕਿ map ਹਰੇਕ ਐਲੀਮੈਂਟ 'ਤੇ ਪ੍ਰਦਾਨ ਕੀਤੇ ਫੰਕਸ਼ਨ ਨੂੰ ਕਾਲ ਕਰਨ ਦੇ ਨਤੀਜਿਆਂ ਨਾਲ ਇੱਕ ਨਵੀਂ ਐਰੇ ਬਣਾਉਂਦਾ ਹੈ।
- ਕੀ ਮੈਂ ਵਰਤ ਸਕਦਾ ਹਾਂ break ਵਿੱਚ ਇੱਕ forEach ਲੂਪ?
- ਨਹੀਂ, forEach ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦਾ break. ਸਮਾਨ ਕਾਰਜਸ਼ੀਲਤਾ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ, ਤੁਸੀਂ ਵਰਤ ਸਕਦੇ ਹੋ Array.some() ਜਾਂ Array.every().
- ਮੈਂ ਇੱਕ ਲੂਪ ਦੇ ਅੰਦਰ ਅਸਿੰਕਰੋਨਸ ਓਪਰੇਸ਼ਨਾਂ ਨੂੰ ਕਿਵੇਂ ਹੈਂਡਲ ਕਰਾਂ?
- ਵਰਤ ਕੇ async ਅਤੇ await ਤੁਹਾਡੇ ਲੂਪ ਫੰਕਸ਼ਨ ਦੇ ਅੰਦਰ, ਤੁਸੀਂ ਅਸਿੰਕ੍ਰੋਨਸ ਓਪਰੇਸ਼ਨਾਂ ਨੂੰ ਪ੍ਰਭਾਵਸ਼ਾਲੀ ਢੰਗ ਨਾਲ ਸੰਭਾਲ ਸਕਦੇ ਹੋ।
- ਦੀ ਵਰਤੋਂ ਕੀ ਹੈ reduce ਢੰਗ?
- ਦ reduce ਵਿਧੀ ਐਰੇ ਦੇ ਹਰੇਕ ਤੱਤ 'ਤੇ ਇੱਕ ਰੀਡਿਊਸਰ ਫੰਕਸ਼ਨ ਨੂੰ ਚਲਾਉਂਦੀ ਹੈ, ਨਤੀਜੇ ਵਜੋਂ ਇੱਕ ਸਿੰਗਲ ਆਉਟਪੁੱਟ ਮੁੱਲ, ਮੁੱਲਾਂ ਨੂੰ ਜੋੜਨ ਜਾਂ ਐਰੇ ਨੂੰ ਸਮਤਲ ਕਰਨ ਲਈ ਲਾਭਦਾਇਕ ਹੁੰਦਾ ਹੈ।
- ਕੀ ਰਿਵਰਸ ਵਿੱਚ ਇੱਕ ਐਰੇ ਉੱਤੇ ਦੁਹਰਾਉਣ ਦਾ ਕੋਈ ਤਰੀਕਾ ਹੈ?
- ਹਾਂ, ਤੁਸੀਂ ਏ for ਪਿਛਲੇ ਸੂਚਕਾਂਕ ਤੋਂ ਪਹਿਲੇ ਤੱਕ ਲੂਪ, ਜਾਂ reverse() ਦੇ ਨਾਲ ਸੁਮੇਲ ਵਿੱਚ ਢੰਗ forEach.
- ਕੀ ਮੈਂ ਐਰੇ ਢੰਗਾਂ ਨੂੰ ਚੇਨ ਕਰ ਸਕਦਾ ਹਾਂ ਜਿਵੇਂ ਕਿ map ਅਤੇ filter?
- ਹਾਂ, ਐਰੇ ਵਿਧੀਆਂ ਜਿਵੇਂ map, filter, ਅਤੇ reduce ਇੱਕ ਸੰਖੇਪ ਤਰੀਕੇ ਨਾਲ ਕਈ ਕਾਰਵਾਈਆਂ ਕਰਨ ਲਈ ਜੰਜ਼ੀਰਾਂ ਨਾਲ ਬੰਨ੍ਹਿਆ ਜਾ ਸਕਦਾ ਹੈ।
- ਵਰਤਣ ਦਾ ਕੀ ਫਾਇਦਾ ਹੈ for...of ਵੱਧ for?
- for...of ਵਧੇਰੇ ਪੜ੍ਹਨਯੋਗ ਅਤੇ ਸੰਖੇਪ ਹੈ, ਖਾਸ ਕਰਕੇ ਜਦੋਂ ਤੁਹਾਨੂੰ ਐਰੇ ਇੰਡੈਕਸ ਤੱਕ ਪਹੁੰਚ ਦੀ ਲੋੜ ਨਹੀਂ ਹੁੰਦੀ ਹੈ।
JavaScript ਵਿੱਚ ਐਰੇ ਲੂਪਿੰਗ ਬਾਰੇ ਅੰਤਿਮ ਵਿਚਾਰ
ਸਿੱਟੇ ਵਜੋਂ, JavaScript ਵਿੱਚ ਐਰੇ ਰਾਹੀਂ ਲੂਪ ਕਰਨ ਦੇ ਵੱਖ-ਵੱਖ ਤਰੀਕਿਆਂ ਵਿੱਚ ਮੁਹਾਰਤ ਹਾਸਲ ਕਰਨਾ ਕਿਸੇ ਵੀ ਡਿਵੈਲਪਰ ਲਈ ਜ਼ਰੂਰੀ ਹੈ। ਵਰਗੇ ਰਵਾਇਤੀ ਲੂਪਸ ਤੱਕ for ਵਰਗੇ ਹੋਰ ਆਧੁਨਿਕ ਤਰੀਕਿਆਂ ਲਈ forEach, for...of, map, ਅਤੇ reduce, ਹਰੇਕ ਐਰੇ ਡੇਟਾ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਵਿਲੱਖਣ ਫਾਇਦੇ ਪੇਸ਼ ਕਰਦਾ ਹੈ। ਉਚਿਤ ਢੰਗ ਚੁਣਨਾ ਤੁਹਾਡੇ ਕੋਡ ਦੀਆਂ ਖਾਸ ਲੋੜਾਂ 'ਤੇ ਨਿਰਭਰ ਕਰਦਾ ਹੈ, ਭਾਵੇਂ ਇਹ ਪੜ੍ਹਨਯੋਗਤਾ, ਪ੍ਰਦਰਸ਼ਨ, ਜਾਂ ਕਾਰਜਸ਼ੀਲਤਾ ਹੋਵੇ। ਇਹਨਾਂ ਤਕਨੀਕਾਂ ਨਾਲ, ਤੁਸੀਂ ਆਪਣੇ ਕੋਡ ਨੂੰ ਹੋਰ ਮਜਬੂਤ ਅਤੇ ਬਹੁਮੁਖੀ ਬਣਾਉਂਦੇ ਹੋਏ, ਐਰੇ ਐਲੀਮੈਂਟਸ ਦੀ ਕੁਸ਼ਲਤਾ ਨਾਲ ਪ੍ਰਕਿਰਿਆ ਅਤੇ ਹੇਰਾਫੇਰੀ ਕਰ ਸਕਦੇ ਹੋ।