2023年の面接質問記録

1. js はオブジェクトが空であることをどのように判断しますか?

オブジェクトが null かどうかを確認する簡単な方法は、オブジェクトの列挙可能なプロパティをすべてチェックすることです。オブジェクトに列挙可能なプロパティがない場合、それは空であると考えることができます。関数を使用して、 Object.keys() オブジェクトの列挙可能なプロパティをすべて取得し、結果の配列の長さを確認できます。長さが 0 の場合、オブジェクトは空です。

function isEmpty(obj) {  
    return Object.keys(obj).length === 0 && obj.constructor === Object;  
}  
  
var myObj = {};  
  
if (isEmpty(myObj)) {  
    console.log("对象是空的");  
} else {  
    console.log("对象不是空的");  
}

2. 最新のURLパラメータを取得するAPI

URL パラメーターを取得する API の場合、JavaScript の URLSearchParams インターフェイスを使用できます。

const urlParams = new URLSearchParams(window.location.search);  
const myParam = urlParams.get('myParam');

3. 新しいバージョンがリリースされた後、技術的手段を使用してユーザーにページを更新するように通知するにはどうすればよいですか?

新しいバージョンがリリースされた後、Web プッシュを使用してユーザーにページを更新するように通知できます。

if ('serviceWorker' in navigator) {  
  navigator.serviceWorker.register('/service-worker.js')  
    .then(() => console.log('Service Worker Registered'))  
    .catch(err => console.log('Service Worker Registration Failed: ', err));  
}

4. Vue プロジェクトはプロジェクトのパフォーマンスをどのように向上させますか?

遅延読み込み: Vue の非同期コンポーネントと Webpack のコード分割機能を使用して、大きな依存関係ファイルを小さな部分に分割し、必要に応じて動的に読み込みます。
コード分割: 大きな Vue コンポーネントを複数の小さなコンポーネントに分割して、レンダリング時間とメモリ使用量を削減します。
画像の最適化: TinyPNG や ImageOptimizer などの圧縮および最適化ツールを使用して、画像のサイズと読み込み時間を削減します。

5. キャッシュ

5.1. 強力なキャッシュ

サーバーにリクエストを送信せずに、ブラウザーに一定期間内にローカルキャッシュからデータを直接読み取るように強制します。強力なキャッシュは、応答ヘッダー情報を設定することで実現できます。一般的な応答ヘッダーには、Expires および Cache-Control が含まれます。

5.2. キャッシュのネゴシエーション

強力なキャッシュが失敗すると、ブラウザはサーバーにリクエストを送信し、最後のアクセス以降にリソースが変更されたかどうかをサーバーに尋ねます。変更がない場合、サーバーは 304 ステータスコードを返し、ローカルキャッシュを引き続き使用できることをブラウザーに伝えます。変更しない場合は、新しいリソースコンテンツを返します。ネゴシエーションキャッシュは、応答ヘッダー情報を設定することで実現できます。一般的な応答ヘッダーには、Last-Modified および ETag が含まれます。

5.3. ブラウザーキャッシュの主なプロセスは次の手順に要約できます。

            5.3.1. ブラウザは HTTP リクエストを受信すると、URL に基づいてリソースがキャッシュされているかどうかを判断します。リソースがキャッシュされている場合、リソースはローカルキャッシュから直接読み取られます。
            5.3.2. キャッシュされていない場合、またはキャッシュの有効期限が切れている場合、ブラウザはサーバーにリクエストを送信し、最終アクセス時間、Etag などの情報をリクエストに含めます。
サーバーはリクエストを受信すると、リクエスト内の情報に基づいてリソースが更新されたかどうかを判断します。リソースが更新されていない場合は、304 応答コードが返され、ローカルキャッシュを引き続き使用できることがブラウザに通知されます。リソースが更新されている場合は、新しいリソースのコンテンツとキャッシュ関連のヘッダー情報が返されます。
            5.3.3. ブラウザは応答を受信すると、応答ヘッダー情報に基づいてローカルキャッシュを更新し、新しいリソースのコンテンツをユーザーに表示します。

6. 新規コンストラクタの処理

空のオブジェクトを作成します。
この新しいオブジェクトのプロトタイプをコンストラクターのプロトタイププロパティにポイントします。
コンストラクターを実行し、新しく作成されたオブジェクトを指します。
コンストラクターが値を返さないか、オブジェクト以外の値を返した場合は、新しく作成されたオブジェクトが返されます。コンストラクターがオブジェクトを返す場合、このオブジェクトが返されます。

function myNew(ctor, ...args) {
	// 创建一个新对象，并将该对象的原型指向构造函数的原型对象
	const obj = Object.create(ctor.prototype);

	// 调用构造函数，并将新对象作为 this 参数传递进去
	const result = ctor.apply(obj, args);

	// 如果构造函数返回了一个非空对象，则返回该对象；否则，返回创建的新对象
	if (typeof result === 'object' && result !== null) {
		return result;
	}
	return obj;
}
// 测试：
function Person(name, age) {
	this.name = name;
	this.age = age;
}

const person = myNew(Person, '张三', 18);
console.log(person.name); // 输出：张三
console.log(person.age); // 输出：18

7、イベントループ

コードの実行が開始され、グローバル呼び出しスタックが作成され、スクリプトがマクロタスクとして実行されます。
同期タスクは実行処理が即座に実行され、非同期タスクは非同期タスクの種類に応じてマイクロタスクキューとマクロタスクキューに登録されます。
同期タスクの実行後、マイクロタスクキューを確認します。
- マイクロタスクがある場合は、キュー内のすべてのマイクロタスクを実行します (マイクロタスクの実行中に生成された新しいマイクロタスクを含む)
- マイクロタスクがない場合は、マクロタスクのキューを確認して最初のマクロタスクを実行し、マクロタスクの実行後、マイクロタスクのキューを確認し、マクロタスクのキューが空になるまで上記の操作を繰り返します。
- マクロタスク (スクリプト、タイマー、ajax、I/O)、マイクロタスク (DOM の変更を監視するための promise.then、async await、MutationObserve)

8. js プロトタイプチェーンとは何ですか?

JavaScript のすべてのオブジェクトにはプロトタイプがあり、プロトタイプはプロパティとメソッドを継承するオブジェクトです。そして、このプロトタイプは独自のプロトタイプを持つことができ、いわゆる「プロトタイプチェーン」を形成します。
JavaScript オブジェクトのプロパティまたはメソッドにアクセスするときは、まずオブジェクト自体のプロパティまたはメソッドの存在を探します。存在しない場合は、Object.prototype に到達するまでオブジェクトのプロトタイプチェーンを検索します。見つからなかった場合は、未定義が返されます。

したがって、プロトタイプチェーンを通じて、継承とコードの再利用を実現できます。たとえば、基本オブジェクトを作成し、それを他のオブジェクトのプロトタイプとして使用して、基本オブジェクトのプロパティとメソッドを共有できるようにすることができます。

9.手ぶれ補正とスロットリング

// 防抖-多次点击，只执行一次
function debounces(fn, time) {
	let timer
	
	return function() {
		if(timer) {
			clearTimeout(timer)
		}

		timer = setTimeout(() => {
			fn.apply(this, arguments);  
		}, time)
	}
}

// 节流-一定时间内，只执行一次
function throttle(fn, time) {
	let timer
	return function() {
		if (timer) {
			timer = setTimeout(() => {
				fn.apply(this, arguments)
				timer  = null
			}, time)
		}
	}
}

今日はここでやめて、更新を続けましょう...