Looping JS-ում և դրա վերաբերյալ որոշ հարցեր

Looping օգտագործելով forEach-ը

forEach մեթոդը զանգվածի մեթոդ է JavaScript-ում, որը կարող է ֆունկցիա կատարել զանգվածի յուրաքանչյուր տարրի վրա: Այն վերցնում է հետ կանչի ֆունկցիան որպես արգումենտ, որը կատարվում է զանգվածի յուրաքանչյուր տարրի համար։ Հետ կանչելու ֆունկցիան ունի երեք արգումենտ՝ ընթացիկ տարրը, ընթացիկ ինդեքսը և զանգվածը շրջված է:

let numbers = [1, 2, 3, 4, 5];
numbers.forEach((element, index, array) => {
  console.log(element, index, array);
});

// Output:
// 1 0 [1, 2, 3, 4, 5]
// 2 1 [1, 2, 3, 4, 5]
// 3 2 [1, 2, 3, 4, 5]
// 4 3 [1, 2, 3, 4, 5]
// 5 4 [1, 2, 3, 4, 5]

Այս օրինակում forEach մեթոդը կանչվում է numbers զանգվածի վրա, և որպես արգումենտ փոխանցված անանուն ֆունկցիան կատարվում է զանգվածի յուրաքանչյուր տարրի համար։ element, index և array արգումենտները մուտքագրվում են վահանակ, այնպես որ դուք կարող եք տեսնել ընթացիկ տարրը և դրա ինդեքսը զանգվածում, ինչպես նաև ամբողջ զանգվածը, որը շրջվում է:

Looping օգտագործելով քարտեզը

map մեթոդը զանգվածային մեթոդ է JavaScript-ում, որը կարող է ստեղծել նոր զանգված՝ յուրաքանչյուր տարր վերափոխելով բնօրինակ զանգվածի մեջ: Այն վերցնում է հետ կանչի ֆունկցիան որպես արգումենտ, որը կատարվում է զանգվածի յուրաքանչյուր տարրի համար և յուրաքանչյուր տարրի համար վերադարձնում է նոր արժեք։ Վերադարձված արժեքներն օգտագործվում են նոր զանգված ստեղծելու համար։

let numbers = [1, 2, 3, 4, 5];

let doubledNumbers = numbers.map(function(element) {
  return element * 2;
});

console.log(doubledNumbers);
// Output:
// [2, 4, 6, 8, 10]

Այս օրինակում map մեթոդը կանչվում է numbers զանգվածի վրա, և որպես արգումենտ փոխանցված անանուն ֆունկցիան կատարվում է զանգվածի յուրաքանչյուր տարրի համար։ Ֆունկցիան յուրաքանչյուր տարրի համար վերադարձնում է element * 2, ինչը նշանակում է, որ numbers զանգվածի յուրաքանչյուր տարր կրկնապատկվում է: Վերադարձված արժեքներն այնուհետև օգտագործվում են նոր զանգված՝ doubledNumbers ստեղծելու համար: doubledNumbers զանգվածը գրանցված է վահանակում, այնպես որ կարող եք տեսնել, որ այն պարունակում է numbers զանգվածի կրկնապատկված արժեքները:

Տարբերությունը

JavaScript-ում forEach և map մեթոդների հիմնական տարբերությունն այն է, թե ինչ են նրանք անում զանգվածի յուրաքանչյուր տարրի արժեքների հետ:

forEach մեթոդն օգտագործվում է զանգվածի յուրաքանչյուր տարրի համար ֆունկցիա կատարելու համար, բայց այն չի վերադարձնում նոր զանգված: Այն պարզապես թույլ է տալիս կատարել որոշակի գործողություններ յուրաքանչյուր տարրի համար, օրինակ՝ մուտքագրել արժեքները վահանակում կամ ավելացնել արժեքներ մեկ այլ զանգվածում:

Մյուս կողմից, map մեթոդը ստեղծում է նոր զանգված՝ յուրաքանչյուր տարր վերափոխելով սկզբնական զանգվածում: Այն ընդունում է հետ կանչի ֆունկցիան որպես արգումենտ և յուրաքանչյուր տարրի համար վերադարձնում է նոր արժեք, որն օգտագործվում է նոր զանգված ստեղծելու համար։ Նոր զանգվածը պարունակում է փոխակերպված արժեքները, իսկ սկզբնական զանգվածը մնում է անփոփոխ։

Այսպիսով, թեև forEach-ը և map-ը թույլ են տալիս շրջել զանգվածի տարրերի վրա, forEach մեթոդն ավելի շատ կենտրոնացած է յուրաքանչյուր տարրի համար գործողություններ կատարելու վրա, մինչդեռ map մեթոդն ավելի շատ կենտրոնացած է արժեքների փոխակերպման և նոր զանգված ստեղծելու վրա:

համար … ընդդեմ …-ի համար

«for…in» հանգույցն օգտագործվում է օբյեկտների հատկությունների միջով պտտելու համար, մինչդեռ «for…of» օղակը օգտագործվում է կրկնվող տարրերի միջով պտտելու համար, ինչպիսիք են զանգվածները, տողերը, քարտեզները և հավաքածուները:

Շարահյուսություն:

for (let variable in object) {
  // code to be executed
}
for (let variable of iterable) {
  // code to be executed
}

Ահա տարբերությունը.

• «for…in» հանգույցը օգտագործվում է օբյեկտի հատկությունների վրա պտտելու համար և վերադարձնում է բանալիները, այլ ոչ թե օբյեկտի արժեքները:
• «for…of» հանգույցն օգտագործվում է կրկնվող արժեքների վրա պտտելու համար և վերադարձնում է օբյեկտի արժեքները:

Օրինակ:

let array = [1, 2, 3, 4, 5];

for (const value in array) {
  console.log(value);
}
// Output: 0 1 2 3 4

for (const value of array) {
  console.log(value);
}
// Output: 1 2 3 4 5

Այսպիսով, մի խոսքով, եթե ցանկանում եք շրջել օբյեկտի հատկությունների միջոցով, օգտագործեք «for…in» և եթե ցանկանում եք պտտել արժեքների միջով կրկնվողի մեջ, օգտագործեք «for…of»:

Այսպիսով, ե՞րբ ենք մենք սովորաբար օգտագործում for in, for of, forEach կամ քարտեզի համար:

Դա կախված է իրավիճակից, բայց ընդհանուր առմամբ.

• for...in. Օգտագործեք սա, երբ ցանկանում եք պտտել օբյեկտի հատկությունները, ներառյալ հատկությունները, որոնք կարող են ավելացվել օբյեկտի նախատիպին:
• for...of. Օգտագործեք սա, երբ ցանկանում եք պտտել կրկնվող տարրերի միջով, ինչպիսիք են զանգվածը, տողը, քարտեզը կամ բազմությունը: Այն ավելի հակիրճ է, քան for...in հանգույցը, ինչպես նաև չի ներառում որևէ հատկություն նախատիպի շղթայից:
• Array.prototype.forEach(). Օգտագործեք սա, երբ ցանկանում եք գործողություն կատարել զանգվածի յուրաքանչյուր տարրի վրա, բայց ձեզ ոչինչ պետք չէ վերադարձնել:
• Array.prototype.map(). Օգտագործեք սա, երբ ցանկանում եք ստեղծել նոր զանգված՝ փոխակերպելով գոյություն ունեցող զանգվածի յուրաքանչյուր տարր: Այն վերադարձնում է նոր զանգվածը և հաճախ օգտագործվում է զանգվածից տվյալները նոր տվյալների կառուցվածքի մեջ հանելու համար:

Այսպիսով, դուք ընտրում եք այն մեկը, որը լավագույնս համապատասխանում է ձեր օգտագործման գործին: Եթե ​​ձեզ պարզապես անհրաժեշտ է պտտել կրկնվողի միջով և կատարել որոշ գործողություններ նրա տարրերի վրա, լավ կլինի՝ կամ for...of կամ Array.prototype.forEach(): Եթե ​​Ձեզ անհրաժեշտ է գոյություն ունեցողից նոր զանգված ստեղծել, Array.prototype.map()-ը լավագույն ընտրությունն է:

Որոշ հարցեր ավագ Frontend ինժեների համար Looping-ի մասին

Ահա մի քանի տեխնիկական հարցեր, որոնց կարող է հանդիպել ավագ ինժեները for in, for of, forEach և map-ի օգտագործման վերաբերյալ JavaScript-ում.

1. Ո՞րն է տարբերությունը for in և for of հանգույցների միջև JavaScript-ում:
2. Ինչպե՞ս կարող եք դուրս գալ forEach հանգույցից JavaScript-ում:
3. Կարող եք օգտագործել continue forEach հանգույցով JavaScript-ում: Ի՞նչ կասեք break-ի մասին:
4. Ե՞րբ պետք է օգտագործեք map ֆունկցիան JavaScript-ում forEach հանգույցի վրա:
5. Ինչպե՞ս եք մուտք գործում JavaScript-ում map ֆունկցիայի ինդեքսը և արժեքը:
6. Կարող եք օգտագործել map-ը JavaScript-ում զանգվածը տեղում փոփոխելու համար:
7. Որո՞նք են JavaScript-ում map ընդդեմ forEach-ի օգտագործման հետևանքները:
8. Կարող եք օգտագործել map-ը JavaScript-ում զանգվածի փոխարեն նոր օբյեկտ վերադարձնելու համար:
9. Ո՞րն է տարբերությունը map-ի և push հայտարարությամբ for հանգույց օգտագործելու միջև՝ JavaScript-ում նոր զանգված ստեղծելու համար:
10. Ինչպե՞ս կարող եք կառավարել ասինխրոն գործողությունները JavaScript-ում map ֆունկցիայի շրջանակներում:

Այս հարցերը կարող են օգնել գնահատել առաջնակարգ ինժեների ըմբռնումն ու հմտությունները JavaScript-ում առկա տարբեր օղակների և կրկնությունների մեթոդների կիրառման հարցում:

Թիվ 1-ին, 4-րդ, 5-րդ և 8-րդ հարցին տրվել է պատասխան վերը նշված քննարկման ժամանակ:

Հարց թիվ 2.

JavaScript-ում forEach հանգույցից դուրս գալու համար կարող եք օգտագործել return հայտարարությունը forEach հետադարձ զանգի ֆունկցիայի ներսում: Այնուամենայնիվ, սա միայն դադարեցնում է ընթացիկ կրկնության կատարումը և շարունակվում է հաջորդ կրկնությամբ:

Եթե ​​ցանկանում եք ամբողջությամբ դուրս գալ օղակից և դադարեցնել կրկնման գործընթացը, կարող եք օգտագործել դրոշակ փոփոխական՝ հետևելու, թե արդյոք օղակը պետք է շարունակվի: Հետ կանչելու գործառույթում կարող եք ստուգել դրոշի արժեքը, և եթե այն սահմանված է false, օգտագործեք return կրկնությունը դադարեցնելու համար:

let array = [1, 2, 3, 4];
let shouldContinue = true;

array.forEach(function(value) {
  if (!shouldContinue) return;
  console.log(value);
  if (value === 3) {
    shouldContinue = false;
  }
});
// Output: 1 2 3

Այս օրինակում forEach հանգույցը կդադարի, երբ արժեքը հավասար լինի 3-ին, քանի որ shouldContinue-ը սահմանվել է false:

Հարց թիվ 3.

Ոչ, դուք չեք կարող օգտագործել continue-ը կամ break-ն ուղղակիորեն forEach հանգույցով JavaScript-ում, քանի որ forEach-ը չունի ավանդական հանգույց կառուցվածք՝ կառավարման հոսքով, որը թույլ է տալիս օգտագործել այս հայտարարությունները:

Եթե ​​Ձեզ անհրաժեշտ է continue կամ break ֆունկցիոնալությունը, կարող եք օգտագործել դրոշակ փոփոխական՝ հետևելու հանգույցի կատարմանը, որը նման է հանգույցից դուրս գալուն, ինչպես նկարագրված է նախորդ պատասխանում:

Ահա մի օրինակ՝ օգտագործելով դրոշակ փոփոխական՝ continue հայտարարությունը նմանակելու համար.

let array = [1, 2, 3, 4];

array.forEach(function(value) {
  if (value % 2 === 0) return;
  console.log(value);
});
// Output: 1 3

Այս օրինակում forEach հանգույցը շարունակում է հաջորդ կրկնությունը, եթե արժեքը հավասար է՝ արդյունավետ կերպով նմանակելով continue հայտարարությունը:

Հարց թիվ 6.

Դուք չեք կարող օգտագործել map-ը՝ JavaScript-ում զանգվածը տեղում փոփոխելու համար: map-ը վերադարձնում է նոր զանգված, որը պարունակում է սկզբնական զանգվածի յուրաքանչյուր տարրի վրա տրամադրված ֆունկցիայի կանչման արդյունքները: Բնօրինակ զանգվածը փոփոխված չէ:

Հարց թիվ 7.

JavaScript-ում map ընդդեմ forEach-ի օգտագործման արդյունավետությունը կարող է կախված լինել կոնկրետ օգտագործման դեպքից: Ընդհանուր առմամբ, map-ն ավելի արագ է, քան forEach-ը, քանի որ map-ը վերադարձնում է նոր զանգված, մինչդեռ forEach-ը փոփոխում է զանգվածը տեղում: Սա նշանակում է, որ map-ն օգտագործելիս JavaScript շարժիչը կարող է մեկ անգամ հիշողություն հատկացնել նոր զանգվածին, մինչդեռ forEach-ի դեպքում շարժիչը պետք է բազմիցս փոփոխի առկա զանգվածը, ինչը կարող է ավելի դանդաղ լինել:

Այնուամենայնիվ, կարևոր է նշել, որ կատարողականի տարբերությունը սովորաբար աննշան է փոքր զանգվածների համար, և կատարողականի տարբերությունը կախված կլինի մշակվող զանգվածի չափից և բարդությունից:

Ընդհանուր առմամբ, խորհուրդ է տրվում ընտրել շրջադարձային մեթոդը՝ հիմնվելով ցանկալի արդյունքի վրա, այլ ոչ թե կատարողականի նկատառումների վրա: Եթե ​​Ձեզ անհրաժեշտ է փոփոխել զանգվածը տեղում, օգտագործեք forEach: Եթե ​​Ձեզ անհրաժեշտ է ստեղծել նոր զանգված, օգտագործեք map: Բացի այդ, դուք կարող եք օգտագործել forEach-ը կողմնակի էֆեկտների համար, ինչպիսիք են հաշվիչը գրանցելը կամ թարմացնելը, քանի որ forEach-ը նոր արժեք չի վերադարձնում:

Հարց թիվ 9.

Ե՛վ map, և՛ for հանգույցը՝ push հայտարարությամբ, կարող են օգտագործվել JavaScript-ում նոր զանգված ստեղծելու համար, սակայն դրանք այլ կերպ են աշխատում:

map-ը ավելի բարձր կարգի ֆունկցիա է, որը վերադարձնում է նոր զանգված՝ կիրառելով տրամադրված ֆունկցիա սկզբնական զանգվածի յուրաքանչյուր տարրի վրա: map-ն ավելի հակիրճ է և ավելի հեշտ ընթեռնելի, քան for հանգույցը push հայտարարությամբ, քանի որ այն ավելի հստակ է արտահայտում նոր զանգված ստեղծելու մտադրությունը:

Ահա map-ի օգտագործման օրինակ՝ նոր զանգված ստեղծելու համար.

let array = [1, 2, 3, 4];
let doubledArray = array.map(x => x * 2);

console.log(doubledArray);
// Output: [2, 4, 6, 8]

for հանգույցը push հայտարարությամբ ավելի ցածր մակարդակի մոտեցում է նոր զանգված ստեղծելու համար: for հանգույցը կրկնվում է սկզբնական զանգվածի տարրերի վրա, իսկ push հայտարարությունը տրամադրված ֆունկցիայի արդյունքները մղում է նոր զանգված:

Ահա for հանգույց օգտագործելու օրինակ՝ push հայտարարությամբ՝ նոր զանգված ստեղծելու համար.

let array = [1, 2, 3, 4];
let doubledArray = [];

for (let i = 0; i < array.length; i++) {
  doubledArray.push(array[i] * 2);
}
console.log(doubledArray);
// Output: [2, 4, 6, 8]

Կատարման առումով, for հանգույցը push հայտարարությամբ, ընդհանուր առմամբ, ավելի դանդաղ է, քան map-ը, քանի որ այն պետք է հիշողություն հատկացնի նոր զանգվածի համար և յուրաքանչյուր տարր մեկ առ մեկ մղի նոր զանգված: Այնուամենայնիվ, կատարողականի տարբերությունը սովորաբար աննշան է փոքր զանգվածների համար, և map-ի և for հանգույցի միջև ընտրությունը push հայտարարությամբ պետք է հիմնված լինի կոդի ընթերցանության և պահպանման, այլ ոչ թե կատարողականի վրա:

Ծանոթագրություններ

Համակարգչային ծրագրավորման մեջ ավելի բարձր կարգի ֆունկցիան այն ֆունկցիան է, որն ընդունում է մեկ կամ մի քանի ֆունկցիա որպես արգումենտ կամ վերադարձնում է ֆունկցիա որպես արդյունք: Ավելի բարձր կարգի ֆունկցիաները հնարավորություն են տալիս վերացական և վերօգտագործել վարքագծի ընդհանուր օրինաչափությունները և ֆունկցիոնալ ծրագրավորման հիմնական հատկանիշն են:

Ավելի բարձր կարգի գործառույթները թույլ են տալիս գրել ավելի արտահայտիչ և բաղադրելի կոդ՝ ավելի պարզ գործառույթները ավելի բարդ գործառույթների մեջ համատեղելով: Նրանք կարող են օգնել ձեր կոդը դարձնել ավելի հակիրճ, ընթեռնելի և պահպանելի:

Մյուս կողմից, Ավելի ցածր մակարդակի մոտեցումը վերաբերում է ծածկագրին, որը գրված է ավելի պարզունակ, ընթացակարգային կամ հրամայական ոճով: Ստորին մակարդակի մոտեցումները հաճախ հիմնվում են փոփոխականների և կառավարման կառուցվածքների ուղղակի մանիպուլյացիայի վրա, ինչպիսիք են for հանգույցները, if հայտարարությունները և while հանգույցները: Ավելի ցածր մակարդակի մոտեցումները կարող են լինել ավելի արագ և արդյունավետ, բայց դրանք կարող են նաև լինել ավելի խոսուն և ավելի քիչ արտահայտիչ, քան ավելի բարձր կարգի գործառույթները:

Ավելի բարձր կարգի ֆունկցիայի և ավելի ցածր մակարդակի մոտեցման միջև ընտրությունը կախված է օգտագործման կոնկրետ դեպքից, կոդի պահանջներից և ծրագրավորողի նախասիրություններից: Ավելի բարձր կարգի գործառույթները հաճախ նախընտրելի են իրենց արտահայտչականության և ընթեռնելիության համար, մինչդեռ ավելի ցածր մակարդակի մոտեցումները նախընտրելի են իրենց կատարողականության և արդյունավետության համար:

Հարց թիվ 10.

JavaScript-ում map ֆունկցիայի շրջանակներում ասինխրոն գործողությունները կարող են իրականացվել՝ վերադարձնելով խոստումը քարտեզագրման ֆունկցիայից և օգտագործելով Promise.all՝ սպասելու բոլոր խոստումների լուծմանը:

Ահա ասինխրոն գործողություններ վարելու համար map-ի օգտագործման օրինակ.

let urls = [
  'https://api.example.com/data1',
  'https://api.example.com/data2',
  'https://api.example.com/data3'
];

let fetchData = url => {
  return fetch(url)
    .then(response => response.json())
    .catch(error => console.error(error));
};

let mappedData = urls.map(url => fetchData(url));

Promise.all(mappedData)
  .then(data => {
    console.log(data);
  })
  .catch(error => console.error(error));

Այս օրինակում fetchData ֆունկցիան վերադարձնում է խոստում, որը լուծում է API-ի տվյալների հետ: map ֆունկցիան օգտագործվում է fetchData ֆունկցիան urls զանգվածի յուրաքանչյուր URL-ի վրա կիրառելու համար, իսկ Promise.all՝ սպասելու բոլոր խոստումների լուծմանը: Երբ բոլոր խոստումները լուծվեն, ստացված տվյալները մուտքագրվում են վահանակ:

Նկատի ունեցեք, որ map-ը գործում է համաժամանակյա, այնպես որ, եթե Ձեզ անհրաժեշտ է ասինխրոն գործողություններ կատարել map-ի սահմաններում, դուք պետք է օգտագործեք խոստումներ կամ հետ կանչեր՝ ասինխրոն վարքագիծը կարգավորելու համար: