JavaScript の面接でよくある質問と回答

JavaScript の面接でよくある質問と回答をいくつか示します。

1. クロージャとは何ですか? 例を挙げて説明します。

クロージャとは、外部関数が戻った場合でも、内部関数が外部関数のスコープ内の変数とパラメーターにアクセスできることを意味します。以下はクロージャーの例です。

function outer() {
  var x = 10;

  function inner() {
    console.log(x);
  }

  return inner;
}

var closure = outer();
closure(); // 输出 10

2. プロトタイプチェーンとは何ですか? プロトタイプチェーンを使用して継承を実装するにはどうすればよいですか?

プロトタイプチェーンとは、__proto__オブジェクト間の属性による相関によって形成されるチェーン構造を指します。JavaScript の継承はプロトタイプチェーンを通じて実装されます。以下は、プロトタイプチェーンを使用して継承を実装する例です。

function Animal(name) {
  this.name = name;
}

Animal.prototype.sayName = function() {
  console.log(this.name);
};

function Dog(name) {
  Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.bark = function() {
  console.log('Woof!');
};

var dog = new Dog('Fido');
dog.sayName(); // 输出 'Fido'
dog.bark(); // 输出 'Woof!'

3. イベントループとは何ですか? JavaScript の非同期プログラミングを理解するにはどうすればよいですか?

イベントループとは、JavaScript の実行中にイベントとタスクがスケジュールされるメカニズムを指します。JavaScript はシングルスレッドであるため、メインスレッドのブロックを避けるために非同期プログラミングが必要です。非同期プログラミングは、コールバック関数、Promise、および async/await を通じて実装できます。

変数が配列かどうかを判断するにはどうすればよいですか?

このメソッドを使用して、Array.isArray()変数が配列であるかどうかを判断できます。例えば：

var arr = [1, 2, 3];
console.log(Array.isArray(arr)); // 输出 true

var obj = { a: 1, b: 2 };
console.log(Array.isArray(obj)); // 输出 false

5. 変数がオブジェクトかどうかを判断するにはどうすればよいですか?

演算子を使用して、typeof変数がオブジェクトであるかどうかを判断できます。例えば：

var obj = { a: 1, b: 2 };
console.log(typeof obj === 'object'); // 输出 true

var arr = [1, 2, 3];
console.log(typeof arr === 'object'); // 输出 true

var str = 'hello';
console.log(typeof str === 'object'); // 输出 false

6. JavaScript でクラスを実装するにはどうすればよいですか?

JavaScript にはクラスの概念はありませんが、コンストラクターとプロトタイプを使用してクラスのような機能を実現できます。以下は実装クラスの例です。

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.sayName = function() {
  console.log(this.name);
};

Person.prototype.sayAge = function() {
  console.log(this.age);
};

var person = new Person('Alice', 30);
person.sayName(); // 输出 'Alice'
person.sayAge(); // 输出 30

7. JavaScript でモジュール性を実現するにはどうすればよいですか?

JavaScript のモジュール性は、CommonJS または ES6 のモジュール性を使用して実現できます。CommonJS を使用したモジュール化の例を次に示します。

// math.js
function add(x, y) {
  return x + y;
}

module.exports = { add };

// main.js
var math = require('./math');

console.log(math.add(1, 2)); // 输出 3

8. アレイの重複排除を実装するにはどうすればよいですか?

Set配列の重複排除は、データ構造を使用するか、配列をループすることによって実現できます。以下は、Set配列重複排除の使用例です。

var arr = [1, 2, 3, 2, 1];
var uniqueArr = Array.from(new Set(arr));
console.log(uniqueArr); // 输出 [1, 2, 3]

9. 文字列を反転するにはどうすればよいですか?

split()およびreverse()メソッドを使用して文字列を反転できます。文字列の反転の例を次に示します。

var str = 'hello';
var reversedStr = str.split('').reverse().join('');
console.log(reversedStr); // 输出 'olleh'

10. 文字列が回文文字列であるかどうかを判断するにはどうすればよいですか?

まず文字列を反転してから、元の文字列と比較できます。以下は回文文字列を判定する例です。

function isPalindrome(str) {
  var reversedStr = str.split('').reverse().join('');
  return str === reversedStr;
}

console.log(isPalindrome('racecar')); // 输出 true
console.log(isPalindrome('hello')); // 输出 false

11. 関数のカリー化を実装するにはどうすればよいですか?

関数のカリー化は、クロージャと再帰を使用して実装できます。関数カリー化の実装例を次に示します。

function add(x) {
  return function(y) {
    return x + y;
  };
}

console.log(add(1)(2)); // 输出 3

12. 機能スロットルを実装するにはどうすればよいですか?

機能のスロットリングは、タイマーとタイムスタンプを使用して実装できます。以下は、機能スロットルの実装例です。

function throttle(func, delay) {
  var lastTime = 0;

  return function() {
    var currentTime = Date.now();

    if (currentTime - lastTime > delay) {
      func.apply(this, arguments);
      lastTime = currentTime;
    }
  };
}

window.addEventListener('scroll', throttle(function() {
  console.log('scrolling');
}, 1000));

13. 手ぶれ補正機能を実装するにはどうすればよいですか?

タイマーを使用して手ぶれ補正機能を実装できます。以下は手ぶれ補正機能の実装例です。

function debounce(func, delay) {
  var timer;

  return function() {
    clearTimeout(timer);

    timer = setTimeout(function() {
      func.apply(this, arguments);
    }, delay);
  };
}

window.addEventListener('scroll', debounce(function() {
  console.log('scrolling');
}, 1000));

14. URL 内のクエリパラメータを取得するにはどうすればよいですか?

URLSearchParamsオブジェクトまたは正規表現を使用して、 URL からクエリパラメータを取得できます。URLSearchParams以下は、オブジェクトを使用してクエリパラメーターを取得する例です。

var searchParams = new URLSearchParams(window.location.search);

console.log(searchParams.get('q')); // 假设 URL 是 http://example.com/?q=hello，输出 'hello'

15. JavaScript で乱数を生成するにはどうすればよいですか?

Math.random()このメソッドを使用して乱数を生成できます。以下は、指定された範囲内で乱数を生成する例です。

function getRandomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

console.log(getRandomNumber(1, 10)); // 输出介于 1 和 10（含）之间的随机整数

16. 文字列を数値に変換するにはどうすればよいですか?

parseInt()orメソッドを使用してparseFloat()文字列を数値に変換できます。文字列を数値に変換する例を次に示します。

var str = '123';
var num = parseInt(str);

console.log(num); // 输出数字类型的值 123

17. 数値を文字列に変換するにはどうすればよいですか?

メソッドを使用してtoString()数値を文字列に変換できます。数値を文字列に変換する例を次に示します。

var num = 123;
var str = num.toString();

console.log(str); // 输出字符串类型的值 '123'

18. 数値が偶数かどうかを判断するにはどうすればよいですか?

モジュロ演算子を使用すると、%数値が偶数かどうかを判断できます。数値を 2 で割って余りが 0 の場合、その数値は偶数です。以下は偶数を決定する例です。

function isEven(num) {
  return num % 2 === 0;
}

console.log(isEven(2)); // 输出 true
console.log(isEven(3)); // 输出 false

19. 数値が素数かどうかを判断するにはどうすればよいですか?

ループトラバーサルとモジュロ演算子を使用して、%数値が素数かどうかを判断できます。1 より大きく、その数自体より小さいすべての整数で割ったときに余りがある場合、その数は素数になります。以下は素数を決定する例です。

function isPrime(num) {
  if (num <= 1) {
    return false;
  }

  for (var i = 2; i < num; i++) {
    if (num % i === 0) {
      return false;
    }
  }

  return true;
}

console.log(isPrime(2)); // 输出 true
console.log(isPrime(3)); // 输出 true
console.log(isPrime(4)); // 输出 false

20. 現在のタイムスタンプを取得するにはどうすればよいですか?

Date.now()現在のタイムスタンプはメソッドを使用して取得できます。現在のタイムスタンプを取得する例を次に示します。

var timestamp = Date.now();

console.log(timestamp); // 输出当前时间戳（以毫秒为单位）

21. 日付時刻をフォーマットするにはどうすればよいですか?

Dateオブジェクトと文字列の連結を使用して日付と時刻をフォーマットできます。日時の書式設定の例を次に示します。

var date = new Date();
var year = date.getFullYear();
var month = ('0' + (date.getMonth() + 1)).slice(-2);
var day = ('0' + date.getDate()).slice(-2);
var hours = ('0' + date.getHours()).slice(-2);
var minutes = ('0' + date.getMinutes()).slice(-2);
var seconds = ('0' + date.getSeconds()).slice(-2);

var formattedDate = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;

console.log(formattedDate); // 输出格式化后的日期时间字符串，例如 '2023-07-03 15:30:00'

22. JavaScript で DOM 要素を操作するにはどうすればよいですか?

document.getElementById()、document.querySelector()、およびその他のメソッドを使用してdocument.querySelectorAll()DOM 要素を取得し、要素オブジェクトのプロパティとメソッドを使用して DOM 要素を操作できます。以下は、DOM 要素を操作する例です。

// HTML： <div id="my-div">Hello</div>

var myDiv = document.getElementById('my-div');
myDiv.innerHTML = 'World';
myDiv.style.color = 'red';

23. JavaScript でイベントリスナーを追加するにはどうすればよいですか?

addEventListener()イベントリスナーは、要素オブジェクトのメソッドを使用して追加できます。イベントリスナーを追加する例を次に示します。

// HTML： <button id="my-button">Click me</button>

var myButton = document.getElementById('my-button');
myButton.addEventListener('click', function() {
  console.log('Button clicked');
});

24. JavaScript で新しい要素を作成して DOM に追加するにはどうすればよいですか?

要素オブジェクトのメソッドを使用して新しい要素を作成し、要素オブジェクトのプロパティとメソッドを使用して要素のプロパティとコンテンツを設定し、最後にcreateElement()要素オブジェクトのメソッドを使用して要素をappendChild()DOM に追加できます。新しい要素を作成して DOM に追加する例を次に示します。

// HTML： <div id="my-container"></div>

var myContainer = document.getElementById('my-container');
var myParagraph = document.createElement('p');
myParagraph.innerHTML = 'Hello';
myContainer.appendChild(myParagraph);

25. JavaScript で要素を削除するにはどうすればよいですか?

要素は、要素オブジェクトのメソッドremoveChild()または親要素オブジェクトのメソッドを使用して削除できます。removeChild()要素を削除する例を次に示します。

// HTML： <div id="my-container"><p>Hello</p></div>

var myContainer = document.getElementById('my-container');
var myParagraph = document.querySelector('p');
myContainer.removeChild(myParagraph);

26. JavaScript で要素の属性を変更するにはどうすればよいですか?

要素のプロパティは、要素オブジェクトのプロパティとメソッドを使用して変更できます。たとえば、class要素の属性を変更するには、要素オブジェクトの属性を使用できますclassName。要素のスタイルを変更するには、要素オブジェクトの属性を使用できます。要素のコンテンツを変更するには、要素オブジェクトの属性を使用できます。style要素オブジェクトのinnerHTMLor属性textContentなど。以下は要素のプロパティを変更する例です。

// HTML： <div id="my-div" class="foo" style="color: red;">Hello</div>

var myDiv = document.getElementById('my-div');
myDiv.className += ' bar'; // 添加新 class
myDiv.style.backgroundColor = 'blue'; // 修改背景颜色
myDiv.textContent = 'World'; // 修改内容

27. JavaScript でフォーム要素の値を取得および変更するにはどうすればよいですか?

フォーム要素オブジェクトのプロパティとメソッドを使用して、フォーム要素の値を取得および変更できます。たとえば、テキストボックスの入力ボックスに入力された値を取得するには、テキストボックスの入力ボックスオブジェクトのプロパティを使用できます。ラジオボタンまたはチェックボックスの選択状態を変更するには、valueラジオボタンのcheckedプロパティを使用できます。またはチェックボックスオブジェクトなど。以下は、フォーム要素の値を取得および変更する例です。

// HTML： <input type="text" id="my-input">
//        <input type="checkbox" id="my-checkbox">

var myInput = document.getElementById('my-input');
console.log(myInput.value); // 获取文本框输入框中输入的值

var myCheckbox = document.getElementById('my-checkbox');
myCheckbox.checked = true; // 修改复选框选中状态

28. JavaScript で AJAX リクエストを送信するにはどうすればよいですか?

XMLHttpRequestオブジェクトまたは Fetch API を使用して、AJAX リクエストを送信できます。XMLHttpRequest以下は、オブジェクトを使用して AJAX リクエストを送信し、応答データを処理する例です。

function sendAjaxRequest(url, callback) {
  var xhr = new XMLHttpRequest();

  xhr.onreadystatechange = function() {
    if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
      callback(xhr.responseText);
    }
  };

  xhr.open('GET', url);
  xhr.send();
}

sendAjaxRequest('https://jsonplaceholder.typicode.com/todos/1', function(responseText) {
  var data = JSON.parse(responseText);
  
  console.log(data.userId); // 输出响应数据中 userId 的值
});

29. JavaScript で例外を処理するにはどうすればよいですか?

try...catchブロックを使用して例外を処理できます。tryブロック内で例外をスローし、例外状況を処理して、ブロック内で適切なアクションを実行するコードを作成しますcatch。以下は例外処理の例です。

try {
  var result = someFunctionThatMayThrowAnError();
} catch (error) {
  console.error(error.message);
}

30. JavaScript で単体テストを行うにはどうすればよいですか?

単体テストは、テストフレームワーク (Mocha、Jasmine、QUnit など) およびアサーションライブラリ (Chai、Expect.js など) を使用して実行できます。テストケースを作成し、テストを実行し、テスト結果に基づいてコードの欠陥をデバッグおよび修正します。たとえば、Mocha と Chai でテストケースを作成して実行する方法は次のとおりです。

// 安装 Mocha 和 Chai：
// npm install --save-dev mocha chai

// 编写测试用例：
describe('someFunction', function() {
  it('should return the correct result', function() {
    var result = someFunction(1, 2);

    expect(result).to.equal(3);
  });
});

// 执行测试：
// mocha test.js