ホームページ > 記事 > ウェブフロントエンド > 高頻度の知識ポイントを習得するために、これらのフロントエンドの面接の質問を見てみましょう (6)
毎日 10 問、100 日後には、フロントエンド面接の高頻度の知識ポイントをすべてマスターしていることになります。さあ! ! ! , 記事を読みながら、答えを直接見るのではなく、まず知っているかどうか、知っている場合の答えは何かを考えてください。考えて、答えと比べてみてください。それが良いでしょうか? もちろん、私の答えよりも良い答えがある場合は、コメント欄にメッセージを残して、テクノロジーの美しさについて一緒に話し合ってください。
私: えー、わかりました。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 は次の部分で構成されています:
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) 特定の要素に対して独立したレイヤーを生成する
私: えー、わかりました。両者の関係は次のとおりです。
同じ点:
これらはすべてブラウザのストレージであり、ブラウザのローカルに保存されます。
違い:
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 のデータ応答型オブザーバーで使用されます。
2 . intanceof (プロトタイプチェーンに基づいて判断)、ネイティブデータ型は判断できません 3.constructor.name (コンストラクターに基づいて判断)、null データ型は判断できません 4. Object.prototype.toString .call() (Object の toString メソッドを使用して判定します) あらゆる種類のデータを判定できます。判定結果は '[object Xxx]'## として出力されることに注意してください。 #インタビュアー: null と unknown について話しましょう 違い、プロパティを null にする方法
疑似配列の特徴
: 型はオブジェクトです。配列は使用できません。メソッド、長さを取得でき、for in を使用してトラバースできます。疑似配列は、配列に変換できます。
: Array.prototype.slice。 call()、Array.from()、[...疑似配列]次があります疑似配列とは
: 関数パラメータの引数、Map および Set キー()、値( )、および全体() [推奨学習: JavaScript 上級チュートリアル]
以上が高頻度の知識ポイントを習得するために、これらのフロントエンドの面接の質問を見てみましょう (6)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。