5 տիպիկ JavaScript հարցազրույցի առաջադրանքներ՝ վերլուծություն և լուծումներ

Թարգմանիչից. հրապարակել է հոդված ձեզ համար Մարիա Անտոնիետա Պերնան, ով խոսում է JavaScript-ի ընդհանուր առաջադրանքների մասին, ամենից հաճախ առաջարկվում է ծրագրավորող դիմորդներին հարցազրույցների ժամանակ։ Հոդվածը օգտակար կլինի առաջին հերթին սկսնակ ծրագրավորողների համար։

Տեխնոլոգիական ընկերություններում հարցազրույցները վաղուց դարձել են քաղաքի խոսակցությունները: Սա չպետք է զարմանալի լինի. հարցազրույցը հաջողությամբ անցնելը ձեզ հնարավորություն է տալիս լավ աշխատանք գտնել: Բայց սա այնքան էլ պարզ չէ, քանի որ բարդ խնդիրները հաճախ լուծում են պահանջում։

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

Հիշեցում. «Habr»-ի բոլոր ընթերցողների համար՝ 10 ռուբլի զեղչ «Habr» գովազդային կոդով Skillbox-ի ցանկացած դասընթացին գրանցվելիս:

Skillbox-ը խորհուրդ է տալիս. Գործնական դասընթաց «Mobile Developer PRO».

Հիմնական բանը ձեր հարցազրույցին մանրակրկիտ պատրաստվելն է:

Այո, նախքան առաջադրանքների ուսումնասիրությունը սկսելը, եկեք դիտարկենք հարցազրույցի նախապատրաստման մի քանի ընդհանուր խորհուրդներ:

Հիմնական բանը նախապես պատրաստելն է։ Ստուգեք, թե որքան լավ եք հիշում ալգորիթմներն ու տվյալների կառուցվածքները և բարելավեք ձեր գիտելիքներն այն ոլորտներում, որոնց այնքան էլ ծանոթ չեք: Կան բազմաթիվ առցանց հարթակներ, որոնք կարող են օգնել ձեզ նախապատրաստվել հարցազրույցներին: Մենք խորհուրդ ենք տալիս geeksforgeeks, Պրամպ, Interviewing.io и CodeSignal.

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

Դուք պետք է հասկանաք խնդիրը, նախքան այն լուծելը: Որոշ դեպքերում դուք կարող եք մակերեսորեն հասկանալ առաջադրանքը, ապա գնալ սխալ ճանապարհով: Թերևս արժե մի քանի պարզաբանող հարցեր տալ հարցազրուցավարին:

Դուք պետք է սովորեք կոդ գրել ձեռքով, ոչ թե ԱՀ-ով: Պատահում է, որ հարցազրույցների ժամանակ դիմորդին տալիս են մարկեր և գրատախտակ, որտեղ չկան հուշումներ կամ ավտոմատ ձևաչափում։ Լուծում փնտրելիս արժե ձեր կոդը գրել թղթի վրա կամ անմիջապես գրատախտակին: Եթե ​​ամեն ինչ պահեք ձեր գլխում, կարող եք մոռանալ մի կարևոր բան:

Կաղապարային առաջադրանքներ JavaScript-ում

Այս առաջադրանքներից մի քանիսը հավանաբար արդեն ծանոթ են ձեզ: Դուք կամ հարցազրույցներ եք ունեցել, որտեղ դուք պետք է լուծեիք նման բան, կամ վարժվեք դրանց վրա JavaScript-ը սովորելիս: Դե, հիմա ժամանակն է դրանք նորից լուծելու և գործընթացի մանրամասն բացատրությամբ:

Պալինդրոմ

Պալինդրոմը բառ, նախադասություն կամ նիշերի հաջորդականություն է, որը կարդացվում է միանգամայն նույնը և՛ սովորական, և՛ հակառակ ուղղությամբ: Օրինակ՝ «Աննան» պալինդրոմ է, իսկ «սեղան» և «Ջոն»՝ ոչ։

Բեմադրություն

Տրվում է տող; դուք պետք է գրեք ֆունկցիա, որը թույլ է տալիս վերադարձնել true, եթե տողը palindrome է, և false, եթե ոչ: Այս դեպքում անհրաժեշտ է հաշվի առնել բացատները և կետադրական նշանները:

palindrome ('racecar') === ճշմարիտ
palindrome ('աղյուսակ') === կեղծ

Եկեք վերլուծենք առաջադրանքը

Այստեղ հիմնական գաղափարը լարը հակադարձելն է: Եթե ​​«հակառակ» տողը լիովին նույնական է սկզբնականին, ապա մենք ստացել ենք պալինդրոմ, և ֆունկցիան պետք է վերադարձնի true: Եթե ​​ոչ, ապա կեղծ:

որոշում

Ահա այն կոդը, որը լուծում է պալինդրոմը:

const palindrome = str => {
  // turn the string to lowercase
  str = str.toLowerCase()
  // reverse input string and return the result of the
  // comparisong
  return str === str.split('').reverse().join('')
}

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

Երկրորդ քայլը գիծը հակադարձելն է: Դա դժվար չէ անել. անհրաժեշտ է այն վերածել զանգվածի, օգտագործելով .split() մեթոդը (String library): Այնուհետև մենք հակադարձում ենք զանգվածը՝ օգտագործելով .reverse() (Array library): Վերջին քայլը հակադարձ զանգվածը տողի վերածելն է՝ օգտագործելով .join() (Array library):

Այժմ ձեզ հարկավոր է միայն համեմատել «հակադարձ» տողը բնօրինակ տողի հետ՝ վերադարձնելով արդյունքը ճշմարիտ կամ կեղծ:

FizzBuzz

Հարցազրույցների ամենատարածված առաջադրանքներից մեկը.

Բեմադրություն

Դուք պետք է գրեք գործառույթ, որը տպում է 1-ից n թվերը վահանակի վրա, որտեղ n-ը ամբողջ թիվ է, որը ֆունկցիան ընդունում է որպես պարամետր՝ հետևյալ պայմաններով.

• 3-ի բազմապատիկի փոխարեն ելքային fizz;
• 5-ի բազմապատիկ թվերի փոխարեն ելքային աղմուկ;
• fizzbuzz-ը թողարկում է 3-ի և 5-ի բազմապատիկ թվերի փոխարեն:

Օրինակ

Fizzbuzz (5)

Արդյունք

// 1
// 2
// բզզոց
// 4
//բզզ

Եկեք վերլուծենք առաջադրանքը

Այստեղ գլխավորը JavaScript-ի միջոցով բազմակի գտնելու միջոցն է: Այն կարող է իրականացվել մոդուլի օպերատորի կամ մնացորդի միջոցով՝ %, որը թույլ է տալիս ցույց տալ մնացորդը երկու թվեր բաժանելիս։ Եթե ​​մնացորդը 0 է, նշանակում է, որ առաջին թիվը երկրորդի բազմապատիկն է։

12% 5 // 2 -> 12-ը 5-ի բազմապատիկ չէ
12% 3 // 0 -> 12-ը 3-ի բազմապատիկ է

Այսպիսով, եթե 12-ը բաժանեք 5-ի, ապա կստանաք 2՝ 2-ի մնացորդով: Եթե 12-ը բաժանեք 3-ի, կստանաք 4՝ 0-ի մնացորդով: Առաջին դեպքում 12-ը 5-ի բազմապատիկ չէ, երկրորդում. , 12-ը 3-ի բազմապատիկն է։

որոշում

Օպտիմալ լուծումը կլինի հետևյալ ծածկագիրը.

const fizzBuzz = num => {
  for(let i = 1; i <= num; i++) {
    // check if the number is a multiple of 3 and 5
    if(i % 3 === 0 && i % 5 === 0) {
      console.log('fizzbuzz')
    } // check if the number is a multiple of 3
      else if(i % 3 === 0) {
      console.log('fizz')
    } // check if the number is a multiple of 5
      else if(i % 5 === 0) {
      console.log('buzz')
    } else {
      console.log(i)
    }
  }
}

Ֆունկցիան կատարում է անհրաժեշտ ստուգումները՝ օգտագործելով պայմանական հայտարարություններ և արտադրում է օգտագործողի պահանջած արդյունքը: Խնդրի մեջ արժե ուշադրություն դարձնել if...else պնդումների հերթականությանը. սկսեք կրկնակի պայմանով (&&) և ավարտեք այն դեպքով, երբ մի քանի թվեր չգտնվեցին։ Արդյունքում մենք ծածկում ենք բոլոր տարբերակները:

Անագրամ

Սա այն բառի անունն է, որը պարունակում է մեկ այլ բառի բոլոր տառերը նույն թվով, բայց այլ հերթականությամբ:

Բեմադրություն

Մենք պետք է գրենք ֆունկցիա, որը ստուգում է, թե արդյոք երկու տողերը անագրամ են, և գործը նշանակություն չունի։ Հաշվվում են միայն նիշերը. բացատները կամ կետադրական նշանները հաշվի չեն առնվում:

anagram('finder', 'Friend') —> true
anagram ('բարև', 'ցտեսություն') —> կեղծ

Եկեք վերլուծենք առաջադրանքը

Կարևոր բանը, որ պետք է հաշվի առնել այստեղ, այն է, որ դուք պետք է ստուգեք յուրաքանչյուր տառը երկու մուտքային տողերում և դրանց թիվը յուրաքանչյուր տողում:

որոնիչ —> f: 1 ընկեր —> f: 1
i: 1 r: 1
n: 1 i: 1
d: 1 e: 1
e: 1 n: 1
r: 1 դ: 1

Անագրամային տվյալները պահելու համար դուք պետք է ընտրեք այնպիսի կառուցվածք, ինչպիսին է JavaScript-ի բառացի օբյեկտը: Բանալին այս դեպքում տառի բնույթն է, արժեքը՝ ընթացիկ տողում դրա կրկնությունների քանակն է:

Կան այլ պայմաններ.

• Պետք է համոզվել, որ համեմատելիս տառերի դեպքը հաշվի չի առնվում։ Մենք պարզապես փոխակերպում ենք երկու տողերը փոքրատառերի կամ մեծատառերի:
• Համեմատությունից բացառում ենք բոլոր ոչ կերպարները։ Լավագույնն է աշխատել կանոնավոր արտահայտություններ.

որոշում

// helper function that builds the
// object to store the data
const buildCharObject = str => {
  const charObj = {}
  for(let char of str.replace(/[^w]/g).toLowerCase()) {
    // if the object has already a key value pair
    // equal to the value being looped over,
    // increase the value by 1, otherwise add
    // the letter being looped over as key and 1 as its value
    charObj[char] = charObj[char] + 1 || 1
  }
  return charObj
}
 
// main function
const anagram = (strA, strB) => {
  // build the object that holds strA data
  const aCharObject = buildCharObject(strA)
  // build the object that holds strB data
  const bCharObject = buildCharObject(strB)
 
  // compare number of keys in the two objects
  // (anagrams must have the same number of letters)
  if(Object.keys(aCharObject).length !== Object.keys(bCharObject).length) {
    return false
  }
  // if both objects have the same number of keys
  // we can be sure that at least both strings
  // have the same number of characters
  // now we can compare the two objects to see if both
  // have the same letters in the same amount
  for(let char in aCharObject) {
    if(aCharObject[char] !== bCharObject[char]) {
      return false
    }
  }
  // if both the above checks succeed,
  // you have an anagram: return true
  return true
}

Ուշադրություն դարձրեք օգտագործման վրա Object.keys () վերևի հատվածում: Այս մեթոդը վերադարձնում է զանգված, որը պարունակում է անուններ կամ բանալիներ նույն հաջորդականությամբ, որ դրանք հայտնվում են օբյեկտում: Այս դեպքում զանգվածը կլինի հետևյալը.

['f', 'i', 'n', 'd', 'e', ​​'r']

Այս կերպ մենք ստանում ենք օբյեկտի հատկությունները` առանց զանգվածային հանգույց անելու: Խնդրի դեպքում դուք կարող եք օգտագործել այս մեթոդը .length հատկությամբ՝ ստուգելու համար, թե արդյոք երկու տողերն ունեն նույն թվով նիշեր, սա անագրամների կարևոր հատկանիշն է:

Որոնել ձայնավորներ

Բավականին պարզ խնդիր, որը հաճախ հայտնվում է հարցազրույցների ժամանակ:

Բեմադրություն

Դուք պետք է գրեք մի ֆունկցիա, որը վերցնում է տողը որպես արգումենտ և վերադարձնում է ձայնավորների թիվը, որոնք պարունակվում են տողի մեջ:
Ձայնավորներն են՝ «ա», «է», «ի», «օ», «ու»:

Example:

findVowels ('բարև') // —> 2
findVowels ('ինչու') // —> 0

որոշում

Ահա ամենապարզ տարբերակը.

const findVowels = str => {
  let count = 0
  const vowels = ['a', 'e', 'i', 'o', 'u']
  for(let char of str.toLowerCase()) {
    if(vowels.includes(char)) {
      count++
    }
  }
  return count
}

Կարևոր է ուշադրություն դարձնել .includes() մեթոդի օգտագործմանը։ Այն հասանելի է ինչպես տողերի, այնպես էլ զանգվածների համար: Այն պետք է օգտագործվի որոշելու համար, թե արդյոք զանգվածը պարունակում է որոշակի արժեք: Այս մեթոդը վերադարձնում է true, եթե զանգվածը պարունակում է նշված արժեքը, և false, եթե այն չունի:

Խնդրի ավելի կարճ լուծում կա.

const findVowels = str => {
  const matched = str.match(/[aeiou]/gi)
  return matched ? matches.length : 0
}

Սա օգտագործում է .match() մեթոդը, որը թույլ է տալիս արդյունավետ որոնում իրականացնել: Եթե ​​կանոնավոր արտահայտությունը որպես մեթոդի արգումենտ գտնվի նշված տողի ներսում, ապա վերադարձվող արժեքը համընկնող նիշերի զանգված է: Դե, եթե համընկնումներ չկան, ապա .match()-ը վերադարձնում է null:

Fibonacci

Դասական առաջադրանք, որը կարելի է գտնել տարբեր մակարդակների հարցազրույցներում: Հարկ է հիշել, որ Ֆիբոնաչիի հաջորդականությունը թվերի շարք է, որտեղ յուրաքանչյուր հաջորդը նախորդ երկուսի գումարն է: Այսպիսով, առաջին տասը թվերն այսպիսի տեսք ունեն՝ 0, 1, 1, 2, 3, 5, 8, 13, 21, 34:

Բեմադրություն

Դուք պետք է գրեք ֆունկցիա, որը վերադարձնում է n-րդ գրառումը որոշակի հաջորդականությամբ, ընդ որում n-ն այն թիվն է, որը փոխանցվում է որպես արգումենտ ֆունկցիային:

fibonacci(3) // —> 2

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

որոշում

const fibonacci = num => {
  // store the Fibonacci sequence you're going
  // to generate inside an array and
  // initialize the array with the first two
  // numbers of the sequence
  const result = [0, 1]
 
  for(let i = 2; i <= num; i++) {
    // push the sum of the two numbers
    // preceding the position of i in the result array
    // at the end of the result array
    const prevNum1 = result[i - 1]
    const prevNum2 = result[i - 2]
    result.push(prevNum1 + prevNum2)
  }
  // return the last value in the result array
  return result[num]
}

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

Ինչ վերաբերում է ռեկուրսիային, ապա ամեն ինչ ավելի պարզ է և միևնույն ժամանակ ավելի բարդ.

const fibonacci = num => {
  // if num is either 0 or 1 return num
  if(num < 2) {
    return num
  }
  // recursion here
  return fibonacci(num - 1) + fibonacci(num - 2)
}

Մենք շարունակում ենք զանգահարել fibonacci()՝ որպես արգումենտ փոխանցելով ավելի ու ավելի փոքր թվեր։ Մենք կանգ ենք առնում, երբ անցած արգումենտը 0 կամ 1 է:

Արտադրողականություն

Ամենայն հավանականությամբ, դուք արդեն հանդիպել եք այս առաջադրանքներից որևէ մեկին, եթե հարցազրույց եք անցել frontend-ի կամ JavaScript-ի ծրագրավորողի աշխատանքի համար (հատկապես, եթե դա կրտսեր մակարդակում է): Բայց եթե չես հանդիպել դրանց, դրանք կարող են օգտակար լինել ապագայում՝ գոնե ընդհանուր զարգացման համար:

Skillbox-ը խորհուրդ է տալիս.

• Կիրառական առցանց դասընթաց «Python Data Analyst».
• Առցանց դասընթաց «Մասնագիտություն ֆրոնտենդ ծրագրավորող».
• Գործնական տարվա դասընթաց «PHP ծրագրավորող 0-ից մինչև PRO».

Source: www.habr.com