JavaScript 인터뷰 질문 — 배열

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

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

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

이 기사에서는 몇 가지 JavaScript 배열 질문을 살펴보겠습니다.

Array.prototype.map 메소드를 직접 구현합니다.

Array.prototype.map 메서드는 매핑을 수행하는 콜백 함수를 호출하여 각 배열 항목을 새 항목에 매핑합니다.

매핑된 값이 있는 새 배열을 반환합니다.

다음과 같이 구현할 수 있습니다.

const map = (arr, callback) => {
  if (!Array.isArray(arr)) {
    return [];
  }
  const newArr = [];
  for (let i = 0, len = arr.length; i < len; i++) {
    newArr.push(callback(arr[i], i, arr));
  }
  return newArr;
}

먼저 arr가 배열인지 확인하고 그렇지 않은 경우 빈 배열을 반환합니다.

위의 코드에는 각 배열 항목을 반복하고 배열 항목, 인덱스 및 전달된 원래 배열을 사용하여 map를 호출하는 callback 메서드가 있습니다. 각 항목은 newArr 배열로 푸시됩니다.

그런 다음 매핑된 항목이 있는 newArr 배열을 반환합니다.

Array.prototype.filter 메소드를 직접 구현합니다.

Array.prototype.filter 메서드는 콜백에서 조건자를 충족하는 원래 배열의 요소를 가져오는 새 배열을 반환하고 해당 항목을 새 배열로 푸시한 다음 반환합니다.

다음과 같이 구현할 수 있습니다.

const filter = (arr, callback) => {
  if (!Array.isArray(arr)) {
    return [];
  }
  const newArr = [];
  for (let i = 0, len = arr.length; i < len; i++) {
    if (callback(arr[i], i, arr)) {
      newArr.push(arr[i]);
    }
  }
  return newArr;
}

위의 코드에서 먼저 arr가 배열인지 확인합니다. 그렇지 않은 경우 빈 배열을 반환합니다.

그런 다음 arr를 반복한 다음 if 블록을 사용하여 callback 호출이 true를 반환하는지 확인한 다음 해당 항목을 newArr로 푸시하고 반환합니다.

Array.prototype.reduce 메소드를 직접 구현합니다.

Array.prototype.reduce 메서드는 배열 항목을 하나의 값으로 결합하기 위해 콜백을 반복적으로 호출하여 배열의 항목을 하나로 결합합니다.

예를 들어 다음과 같이 작성할 수 있습니다.

const reduce = (arr, reduceCallback, initialValue) => {
  if (!Array.isArray(arr)) {
    return;
  }
  let val = initialValue || 0;
  for (let i = 0, len = arr.length; i < len; i++) {
     val = reduceCallback(val, arr[i]);
  }
  return val;
}

먼저 arr가 배열인지 확인한 다음 배열이 아니면 반환합니다.

그런 다음 val를 initialValue(존재하는 경우) 또는 0으로 설정합니다.

다음으로 배열을 반복한 다음 reduceCallback를 사용하여 val와 arr[i]를 결합하고 새 값을 반환하고 val에 할당합니다.

루프가 완료되면 val  를 반환합니다.

인수 객체는 무엇입니까?

arguments 개체는 기존 함수에 전달된 인수를 반환하는 배열과 유사한 개체입니다.

화살표 기능에서는 작동하지 않습니다.

인덱스로 항목에 액세스할 수 있고 length 속성이 있기 때문에 배열과 유사한 객체입니다. arguments에는 배열 메서드가 없습니다.

또한 for...of 루프를 통해 반복될 수 있으며 스프레드 연산자를 사용하여 배열로 변환될 수 있습니다.

예를 들어 다음과 같이 작성합니다.

function logArgs() {
  console.log(arguments)
}

logArgs(1, 2, 3, 4, 5);

그러면 다음과 같은 내용이 표시됩니다.

Arguments(5) [1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]

console.log  .

항목과 Symbol.iterator 메서드를 볼 수 있으므로 반복 가능한 개체임을 알 수 있습니다.

다음과 같이 스프레드 연산자를 사용하여 배열로 변환할 수 있습니다.

function logArgs() {
  console.log([...arguments])
}

logArgs(1, 2, 3, 4, 5);

그런 다음 console.log는 일반 배열인 [1, 2, 3, 4, 5]를 제공합니다.

화살표 함수의 경우 나머지 연산자를 사용하여 다음과 같이 모든 인수를 얻습니다.

const logArgs = (...args) => {
  console.log(args)
}

logArgs(1, 2, 3, 4, 5);

[1, 2, 3, 4, 5]가 기록된 것을 볼 수 있습니다.

배열의 시작 부분에 요소를 어떻게 추가하나요?

Array.prototype.unshift 메서드를 사용하여 배열의 시작 부분에 요소를 추가할 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

const arr = [2, 3, 4];
arr.unshift(1);

그러면 arr는 [1, 2, 3, 4]  .

스프레드 연산자는 다음과 같은 경우에도 작동합니다.

let arr = [2, 3, 4];
arr = [1, ...arr];

새 값을 할당했기 때문에 const를 let로 변경했습니다.

배열 끝에 요소를 어떻게 추가하나요?

push 메서드를 사용하여 배열 끝에 항목을 추가할 수 있습니다.

예를 들어 다음과 같이 작성할 수 있습니다.

const arr = [2, 3, 4];
arr.push(1);

그러면 arr는 [2, 3, 4, 1]  .

스프레드 연산자는 다음과 같은 경우에도 작동합니다.

let arr = [2, 3, 4];
arr = [...arr, 1];

새 값을 할당했기 때문에 const를 let로 변경했습니다.

결론

배열 메서드를 처음부터 구현하여 JavaScript 배열에 대해 더 배우고 일반적인 작업을 수행하는 연습을 합니다.