ホームページ > 記事 > ウェブフロントエンド > 高頻度の知識ポイントを習得するために、これらのフロントエンドの面接の質問を見てみましょう (6)
高頻度の知識ポイントを習得するために、これらのフロントエンドの面接の質問を見てみましょう (6)
- 青灯夜游転載
- 2023-02-24 19:19:371776ブラウズ
毎日 10 問、100 日後には、フロントエンド面接の高頻度の知識ポイントをすべてマスターしていることになります。さあ! ！ ！ , 記事を読みながら、答えを直接見るのではなく、まず知っているかどうか、知っている場合の答えは何かを考えてください。考えて、答えと比べてみてください。それが良いでしょうか? もちろん、私の答えよりも良い答えがある場合は、コメント欄にメッセージを残して、テクノロジーの美しさについて一緒に話し合ってください。
インタビュアー: var、let、const の違いについて簡単に説明してもらえますか?
私: えー、わかりました。3 つの関数の違いは次のように要約されます。
var: 最も一般的なのは使用された変数; 繰り返しの宣言は許可されますが、データは上書きされます; 変数の昇格が発生します; ローカル変数がグローバル オブジェクトにマウントされるため、グローバル オブジェクトの汚染が発生します。
console.log(a) // 因变量提升, var a;提到前面但是没有赋值，所以值为undefined var a = 1 var a = '你好' // var声明的变量会被重新赋值 console.log(a) // a会打印被重新赋值的值 console.log(window.a) // var声明的局部变量会被挂载到全局变量上，造成全局变量的污染。
let: es6 の新しいコマンド、使用法は var に似ています。繰り返しの宣言は許可されません。変数の昇格はありません。多くの場合、ブロック レベルのスコープで動作します。ローカル変数がグローバル変数の汚染を引き起こすことを避けるため。
let a=10;
console.log(a) // 不存在变量提升，所以值为：10
console.log(window.a) // 不会造成全局污染，所以值为 undefined
for(let i =0;i<3;i++){ // 会生成块级作用域，i 的值只能在块级作用域中使用
console.log(i)
}
console.log(i) // 因为拿不到块级作用域中的值，所以报错。const: es6 の新しいコマンド。定数の宣言に使用され、値は変更できません。宣言された定数はすぐに初期化する必要があり、そうでない場合はエラーが発生します。後で値を割り当てるときに報告されます。宣言の繰り返しは許可されません。const は変数のアドレスを指します。変数名によって参照されるアドレスが変更されない限り、エラーは報告されません
#const arr = ['小张','小王','小李','小赵'] arr[0]='小明' console.log(arr) // ['小明', '小王', '小李', '小赵'] const arr = [] // 报错
インタビュアー: ディープ コピーとシャロー コピーについての理解を話してください。
私: えー、わかりました。この 2 つの理解は次のように要約されます。
ディープコピー: 新しいデータと元のデータは相互に干渉しません。
// 扩展运算符在一维数组中是属于深拷贝，在多维数组中属于浅拷贝
let arr = [1,2,3]
let newArr = [...arr]
newArr.push(4)
console.log(arr,newArr) // [1, 2, 3],[1, 2, 3, 4]
// 深拷贝用法
let list = [
{id:1,name:'张三',age:18},
{id:2,name:'李四',age:28},
{id:3,name:'王五',age:38},
]
let newList = JSON.parse(JSON.stringify(list))
newList.pop()
console.log(list.length,newList.length) // 3 2もちろん、次のようなディープ コピーを作成する標準的な方法もあります。
// 标准的深拷贝 => 引用数据类型(数组,对象)
function deepClone(source){
const targetObj = source.constructor === Array ? [] : {}
for(let keys in source){
if(source.hasOwnProperty(keys)){
// 引用数据类型
if(source[keys] && typeof source[keys] === 'object'){
targetObj[keys] = source[keys].constructor === Array ? [] : {}
// 递归
targetObj[keys] = deepClone(source[keys])
}else{
// 基本数据类型,直接赋值
targetObj[keys] = source[keys]
}
}
}
return targetObj
}
let obj = {
name:'张三',
age:18,
hobby:['抽烟','喝酒','烫头'],
action:{
am:'敲代码',
pm:'睡觉'
}
}
let newObj = deepClone(obj)
newObj.name = '李四'
console.log(obj.name,newObj.name)// 张三 李四
シャロー コピー: 新しいデータは影響を与えます。元のデータ。
let arr = [1,2,3] let newArr = arr // 对新数据做出改变，原数据也会发生改变，这种就叫做浅拷贝 newArr.push(4) // [1, 2, 3, 4] console.log(arr,newArr) // [1, 2, 3, 4]
端的に言えば、ディープ コピーは新しいデータを取得することであり、元のデータとは何の関係もありません。シャロー コピーは新しいデータを取得できますが、元のデータと一定のつながりがあります。
インタビュアー: URL を入力した瞬間、ブラウザは何をしましたか?
私: えーっと、URL は次の部分で構成されています:
https: トランスポート プロトコル (http と tcp の間) TSL または SSL セキュリティ層の層)
www: サーバー
baidu.com: ドメイン名
DNS ドメイン ネーム システムは、初回アクセス時に実際の IP と一致します。 通常、 、2 回目の訪問では、ドメイン名によって解決された IP がローカルに保存され、それを使用してブラウザーのキャッシュが読み取られます。
URL を入力した瞬間に体験したのは、 ドメイン名 -> DNS ドメイン ネーム システム -> 実 IP の取得 -> 接続の確立 (TCP スリーウェイ ハンドシェイク) -> データの取得、ページをレンダリングします -> Wave 4 回
特定の実装プロセス:
1. URL 解析: 決定コンテンツを検索するか、URL をリクエストするか
2. ローカル キャッシュを見つけます: キャッシュがある場合は、直接ページに返します。キャッシュがない場合は、ネットワーク リクエスト ステージ
3. DNS 解決
4. 3 ウェイ ハンドシェイクによる TCP 接続の確立
#5. リクエスト ヘッダー情報を合成し、http リクエストを送信します
6. 応答情報を処理します
7. 次の方法で TCP 接続を切断します4 回手を振ります
8。応答ステータス コードが 301 の場合、リダイレクト
9。ブラウザはページをレンダリングします。1) 解析します。 HTML を読み込んで DOM ツリーを生成する; 2) CSS に従ってノード スタイルを計算し、スタイルシートを生成する; 3) レイアウト ツリーを生成する; 4) 特定の要素に対して独立したレイヤーを生成する
#インタビュアー: cookie sessionStorage と localStorage の違いについて教えてください。
私: えー、わかりました。両者の関係は次のとおりです。
同じ点:
これらはすべてブラウザのストレージであり、ブラウザのローカルに保存されます。
違い:
1.Cookieはサーバーまたはフロントエンドによって書き込まれ、sessionStorageとlocalStorageは両方とも書き込まれます。フロントエンドで
#2 と入力します。Cookie のライフ サイクルは、サーバーがそれを書き込むときに設定されます。LocalStorage は、手動でクリアされない限り、書き込まれている限り常に存在します。 SessionStorage は、ページが閉じられると自動的にクリアされます。
3. Cookie のストレージ スペースは約 4kb で、sessionStorage と localStorage のスペースは比較的大きく、約 5M
4.3 すべてのデータ共有は同一生成元の原則に従い、sessionStorage も同じページに制限されます
5. フロントエンドがリクエストを送信するときバックエンド、自動的に Cookie を保持します。セッションとローカルは
6 を保持しません。Cookie は通常、ログイン検証情報またはトークンを保存します。LocalStorage は、変更が容易ではないデータを保存するためによく使用されます。 SessionStorage を使用可能 ユーザーが更新してページに入るかどうかを監視 (音楽プレーヤーで進行状況バー機能を復元するなど)
##基本型: 文字列、数値、ブール値、null、未定義、シンボル、bigInt
参照型: オブジェクト、配列
Note: シンボルは一意であり、列挙できません。getOwnPropertySymbols を使用して取得します
インタビュアー: クロージャについてのあなたの理解について教えてください。
私: えーっと、内側の関数は外側の関数の変数を参照しており、これらの変数のセットがクロージャです。形成原理: スコープ チェーン。現在のスコープは上位スコープの変数にアクセスできます。
#問題は解決されました: 関数の実行終了後に関数スコープ内の変数が破棄されるのを防ぐことができます。関数内で使用 関数内のローカル変数に外部からアクセスできます。
# によって引き起こされる問題: ガベージ コレクターはクロージャ内の変数を破棄しないため、メモリ リークが発生します。多すぎると、メモリオーバーフローが発生しやすくなります。
- クロージャーのアプリケーション
、ブロックレベルのスコープを模倣したり、カリー化を実現したり、コンストラクターやクロージャーなどで特権メソッドを定義したりできます。 Vue のデータ応答型オブザーバーで使用されます。
インタビュアー: JavaScript には変数の型を決定するメソッドがいくつありますか?
私: えー、わかりました、要約は次のとおりです:
1. typeof (二値判定に基づく)、データ型を決定できません: null と object2 . intanceof (プロトタイプチェーンに基づいて判断)、ネイティブデータ型は判断できません 3.constructor.name (コンストラクターに基づいて判断)、null データ型は判断できません 4. Object.prototype.toString .call() (Object の toString メソッドを使用して判定します) あらゆる種類のデータを判定できます。判定結果は '[object Xxx]'## として出力されることに注意してください。 #インタビュアー: null と unknown について話しましょう 違い、プロパティを null にする方法
私: えーっと、null は定義されていて割り当てられています。null 未定義は定義されていても割り当てられていません。
インタビュアー: フロントエンドとバックエンド間のリアルタイム通信を維持する方法について教えてください。私: えー、ポーリング、ロングポーリング、iframe ストリーミング、WebSocket、SSE。
インタビュアー: 擬似配列と配列の違いを教えてください。私: えー、わかりました。要約すると次のとおりです。
疑似配列の特徴
: 型はオブジェクトです。配列は使用できません。メソッド、長さを取得でき、for in を使用してトラバースできます。疑似配列は、配列に変換できます。
: Array.prototype.slice。 call()、Array.from()、[...疑似配列]次があります疑似配列とは
: 関数パラメータの引数、Map および Set キー()、値( )、および全体() [推奨学習: JavaScript 上級チュートリアル]
以上が高頻度の知識ポイントを習得するために、これらのフロントエンドの面接の質問を見てみましょう (6)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。