기본 JavaScript 인터뷰 연습 — 숫자와 요소

https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

프론트엔드 개발자로 일하려면 코딩 인터뷰를 해야 합니다.

이 기사에서는 모든 사람이 알아야 할 몇 가지 간단한 준비 질문을 살펴보겠습니다.

N의 피보나치 수를 계산하는 함수를 작성하세요.

루프와 JavaScript의 구조화 구문을 사용하여 이를 수행할 수 있습니다.

다음과 같이 fib 함수를 만듭니다.

const fib = (n) => {
  let i = 1,
    a = 1,
    b = 1;
  while (i < n) {
    [a, b] = [b, a + b];
    i++;
  }
  return a;
}

위의 코드에서 b를 a로, b를 a + b로 설정하여 증가함에 따라 i 새로운 피보나치 값으로 숫자를 업데이트합니다.

그런 다음 루프가 끝나면 a를 반환합니다.

문자열을 받아들이고 문자열 문자 빈도가 있는 맵을 반환하는 함수를 작성하십시오.

이를 위해 JavaScriptMap를 사용할 수 있습니다.

문자열을 문자 배열로 분할한 다음 다음과 같이 문자의 빈도를 계산하여 문자열의 문자 빈도를 계산합니다.

const count = str => {
  const chars = str.split('');
  const frequencies = new Map();
  for (let c of chars) {
    const freq = frequencies.get(c) || 0;
    frequencies.set(c, freq + 1);
  }
  return frequencies;
}

코드에서는 Map 의 get 메서드를 사용하여 주파수를 구하고 1을 더한 다음 설정합니다.

루프가 끝나면 Map  를 반환합니다.

숫자를 받아 소수인지 확인하는 함수를 작성하세요.

숫자가 2인지 홀수인지 확인하여 소수인지 확인할 수 있습니다. 홀수이면 주어진 숫자의 바닥까지 숫자를 2로 나눈 값까지 나누려고 합니다.

예를 들어, 소수를 확인하기 위해 다음 함수를 작성할 수 있습니다.

const isPrime = (num) => {
  if (num % 2 === 0 && num !== 2) {
    return false;
  }
  for (let i = 3; i <= Math.ceil(num / 2); i++) {
    if (num % i === 0) {
      return false;
    }
  }
  return true
}

짝수인지 확인하고 2가 아닌 경우 반환합니다false  .

그렇지 않으면 루프를 실행하여 숫자가 num를 2로 나눈 한도까지 3으로 나눌 수 있는지 확인합니다.

그 중 하나로 균등하게 나눌 수 있으면 false  를 반환합니다.

그렇지 않으면 true  를 반환합니다.

DOM 요소와 문자열을 받아들이고 해당 문자열과 함께 클래스 이름을 포함하는 직계 자식을 출력하는 함수를 작성합니다.

요소 개체의 getElementsByClassName 메서드를 사용하여 주어진 클래스 속성을 가진 자식을 가져올 수 있습니다.

예를 들어 다음 함수를 작성할 수 있습니다.

const getChildrenWithClass = (el, className) => {
 const children = el.getElementsByClassName(className);
  for (let c of children) {
   console.log(c);
  }
}

위의 코드는 getElementsByClassName 요소 개체에서 el를 호출하고 지정된 클래스 이름으로 자식 요소를 출력합니다.

또한 querySelectorAll 메서드를 사용하여 동일한 작업을 수행할 수 있습니다.

다음을 작성할 수 있습니다.

const getChildrenWithClass = (el, className) => {
  const children = el.querySelectorAll(`.${className}`);
  for (let c of children) {
    console.log(c);
  }
}

유일한 차이점은 템플릿 문자열querySelectAll을 사용하여 `.${className}`를 호출했다는 것입니다.

DOM 요소와 문자열을 받아들이고 부모 노드에 해당 문자열이 있는 클래스가 포함되어 있으면 인쇄하는 함수를 작성하세요. 부모 요소가 없을 때 중지해야 합니다.

루트 요소에 도달하거나 원하는 parentNode가 있는 요소를 찾을 때까지 className 속성을 재귀적으로 사용할 수 있습니다.

이를 위해 다음과 같이 getParentWithClassName를 생성합니다.

const getParentWithClassName = (el, className) => {
  let currentEl = el.parentNode;
  while (currentEl) {
    if (currentEl.className === className) {
      return currentEl;
    }
    currentEl = currentEl.parentNode;
  }
  return undefined;
}

위의 코드에서 currentEl를 parentNode의 el로 설정했습니다.

그런 다음 while 루프를 사용하여 주어진 이름을 가진 하나를 찾을 때까지 주어진 parentNode로 className를 검색합니다.

주어진 className로 하나를 찾으면 요소를 반환합니다.

그렇지 않으면 currrentel를 currentEl.parentNode로 설정하여 계속 진행합니다.

루트 노드로 루프를 돌고 여전히 주어진 className 요소를 찾지 못하면 undefined 를 반환합니다.

결론

parentNode 속성을 사용하여 자식 노드의 부모를 찾습니다.

주어진 CSS 선택기로 자식 노드를 얻으려면 DOM 탐색 메서드를 호출하여 주어진 선택기로 요소를 찾을 수 있습니다.

사전을 생성하기 위해 Map 생성자를 사용할 수 있습니다.

피보나치 수에서 했던 것처럼 구조 해제 구문을 사용하여 여러 가지를 쉽게 재할당할 수 있습니다.