5 משימות ראיון טיפוסיות של JavaScript: ניתוח ופתרונות

מהמתרגם: פרסם מאמר עבורך מריה אנטונייטה פרנה, שמדברת על משימות JavaScript נפוצות, המוצע לרוב למועמדים למפתחים במהלך ראיונות. המאמר יהיה שימושי, קודם כל, למתכנתים מתחילים.

ראיונות בחברות טכנולוגיה הם כבר זמן רב שיחת העיירה. זה לא אמור להפתיע - מעבר מוצלח של ראיון נותן לך את ההזדמנות לקבל עבודה טובה. אבל זה לא כל כך פשוט, מכיוון שלעתים קרובות יש לפתור בעיות מורכבות.

יתרה מכך, לרוב, רוב המשימות הללו אינן קשורות לעבודה שיבצע הפונה, אך עדיין יש לפתור אותן. לפעמים צריך לעשות את זה על הלוח, בלי לבדוק עם גוגל או כל מקור אחר. כן, המצב משתנה בהדרגה, וחלק מהחברות נוטשות ראיונות כאלה, אבל מעסיקים רבים עדיין דבקים במסורת הזו. מאמר זה מוקדש לניתוח משימות JavaScript טיפוסיות המשמשות לעתים קרובות כמשימות עבור מחפשי עבודה.

אנו מזכירים: לכל קוראי Habr - הנחה של 10 רובל בעת הרשמה לכל קורס Skillbox באמצעות קוד ההטבה של Habr.

Skillbox ממליצה: קורס מעשי "Mobile Developer PRO".

העיקר הוא להתכונן היטב לראיון.

כן, לפני שנתחיל להסתכל על המשימות, בואו נסתכל על כמה עצות כלליות להכנה לראיון.

העיקר להכין מראש. בדוק עד כמה אתה זוכר אלגוריתמים ומבני נתונים, ושפר את הידע שלך בתחומים שאתה לא מכיר יותר מדי. ישנן פלטפורמות מקוונות רבות שיכולות לעזור לך להתכונן לראיונות. אנו ממליצים חנונים, פראמפ, ראיון.יו и קוד סיגנל.

כדאי ללמוד להגיד את ההחלטה בקול רם. רצוי לספר לפונים על מה שאתם עושים, ולא רק לכתוב על הלוח (או להקליד קוד במחשב, גם בשקט). בדרך זו, אם אתה עושה טעות בקוד, אבל הפתרון הוא בדרך כלל נכון, אתה יכול להגדיל את סיכויי ההצלחה שלך.

אתה צריך להבין את הבעיה לפני שאתה מתחיל לפתור אותה. במקרים מסוימים, אתה עשוי להבין משימה בצורה שטחית ואז ללכת בדרך הלא נכונה. אולי כדאי לשאול כמה שאלות הבהרה למראיין.

אתה צריך להתאמן בכתיבת קוד ביד, לא במחשב. קורה שבמהלך ראיונות נותנים למועמד סמן ולוח, שבו אין רמזים או עיצוב אוטומטי. כאשר מחפשים פתרון, כדאי לרשום את הקוד שלכם על פיסת נייר או ישירות על הלוח. אם תשמור הכל בראש, אתה עלול לשכוח משהו חשוב.

משימות תבנית ב-JavaScript

חלק מהמשימות הללו כנראה כבר מוכרות לך. או שהיו לך ראיונות שבהם היית צריך לפתור משהו דומה, או שהתרגלת עליהם תוך כדי לימוד JavaScript. ובכן, עכשיו הגיע הזמן לפתור אותם שוב, ועם הסבר מפורט על התהליך.

פלינדרום

פלינדרום הוא מילה, משפט או רצף של תווים הנקראים בדיוק אותו הדבר הן בכיוון הרגיל והן בכיוון ההפוך. לדוגמה, "אנה" היא פלינדרום, אבל "שולחן" ו"ג'ון" לא.

בימוי

נתון מחרוזת; אתה צריך לכתוב פונקציה שמאפשרת לך להחזיר true אם המחרוזת היא פלינדרום, ו-false אם לא. במקרה זה, אתה צריך לקחת בחשבון רווחים וסימני פיסוק.

palindrome('racecar') === נכון
palindrome('table') === שקר

בואו ננתח את המשימה

הרעיון המרכזי כאן הוא להפוך את המחרוזת. אם המחרוזת "הפוכה" זהה לחלוטין לזו המקורית, אז קיבלנו פלינדרום והפונקציה אמורה להחזיר אמת. אם לא, שקר.

החלטה

הנה הקוד שפותר את הפלינדרום.

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() (ספריית מחרוזות). לאחר מכן נהפוך את המערך באמצעות .reverse() (ספריית מערך). השלב האחרון הוא להמיר את המערך ההפוך למחרוזת באמצעות .join() (ספריית מערך).

כעת כל מה שאתה צריך לעשות הוא להשוות את המחרוזת "הפוכה" למחרוזת המקורית, ולהחזיר את התוצאה אמת או לא נכונה.

FizzBuzz

אחת המשימות הפופולריות ביותר בראיונות.

בימוי

עליך לכתוב פונקציה שמדפיסה מספרים מ-1 עד n לקונסולה, כאשר n הוא מספר שלם שהפונקציה לוקחת כפרמטר, בתנאים הבאים:

• פלט תוסס במקום כפולות של 3;
• פלט באז במקום מספרים שהם כפולות של 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', 'חבר') -> נכון
anagram('שלום', 'ביי') —> שקר

בואו ננתח את המשימה

הדבר החשוב שיש לקחת בחשבון כאן הוא שצריך לבדוק כל אות בשתי שורות הקלט ואת מספרן בכל שורה.

מוצא —> ו: חבר אחד —> ו: 1
i: 1 r: 1
n: 1 i: 1
ד: 1 ה: 1
ה: 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 כדי לבדוק אם לשתי המחרוזות יש אותו מספר תווים - זו תכונה חשובה של אנגרמות.

חפש תנועות

משימה פשוטה למדי שעולה לא פעם בראיונות.

בימוי

עליך לכתוב פונקציה שלוקחת מחרוזת כארגומנט ומחזירה את מספר התנועות הכלולות במחרוזת.
התנועות הן "a", "e", "i", "o", "u".

לדוגמה:

findVwels('hello') // —> 2
findVwels('why') // —> 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.

פיבונאצ'י

משימה קלאסית שניתן למצוא בראיונות ברמות שונות. כדאי לזכור שרצף פיבונאצ'י הוא סדרה של מספרים כאשר כל אחד לאחר מכן הוא הסכום של השניים הקודמים. אז, עשרת המספרים הראשונים נראים כך: 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.

פלט

סביר להניח שכבר נתקלת בכל אחת מהמשימות הללו אם התראיינת לעבודת מפתח חזיתית או JavaScript (במיוחד אם זה ברמה הזוטר). אבל אם לא נתקלתם בהם, הם עשויים להיות שימושיים בעתיד - לפחות לפיתוח כללי.

Skillbox ממליצה:

• קורס מקוון יישומי "Python Data Analyst".
• קורס מקוון "מפתח חזיתי מקצועי".
• קורס מעשי בן שנה "מפתח PHP מ-0 ל-PRO".

מקור: www.habr.com