高頻度の知識ポイントを習得するために、これらのフロントエンドの面接の質問を見てみましょう (6)-jsチュートリアル-php.cn

高頻度の知識ポイントを習得するために、これらのフロントエンドの面接の質問を見てみましょう (6)

毎日 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 = [&#39;小张&#39;,&#39;小王&#39;,&#39;小李&#39;,&#39;小赵&#39;]
arr[0]=&#39;小明&#39;
console.log(arr) // [&#39;小明&#39;, &#39;小王&#39;, &#39;小李&#39;, &#39;小赵&#39;]
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:&#39;张三&#39;,age:18},
    {id:2,name:&#39;李四&#39;,age:28},
    {id:3,name:&#39;王五&#39;,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 を使用可能ユーザーが更新してページに入るかどうかを監視 (音楽プレーヤーで進行状況バー機能を復元するなど)

#インタビュアー: JS データ型とは何ですか違いは何ですか?

私: そうですね、JS のデータ型は次の 2 つのカテゴリに分類されます。1 つは基本データ型、もう 1 つは参照データ型です。

##基本型: 文字列、数値、ブール値、null、未定義、シンボル、bigInt
参照型: オブジェクト、配列

基本型はスタックに保存され、スペースが小さく頻繁に操作されます。

参照型はヒープに保存され、スペースが大きくなります。ポインタはヒープ内の開始アドレスを指します

Note: シンボルは一意であり、列挙できません。getOwnPropertySymbols を使用して取得します

インタビュアー: クロージャについてのあなたの理解について教えてください。

私: えーっと、内側の関数は外側の関数の変数を参照しており、これらの変数のセットがクロージャです。

形成原理: スコープチェーン。現在のスコープは上位スコープの変数にアクセスできます。
#問題は解決されました: 関数の実行終了後に関数スコープ内の変数が破棄されるのを防ぐことができます。関数内で使用関数内のローカル変数に外部からアクセスできます。
# によって引き起こされる問題: ガベージコレクターはクロージャ内の変数を破棄しないため、メモリリークが発生します。多すぎると、メモリオーバーフローが発生しやすくなります。
クロージャーのアプリケーション
、ブロックレベルのスコープを模倣したり、カリー化を実現したり、コンストラクターやクロージャーなどで特権メソッドを定義したりできます。 Vue のデータ応答型オブザーバーで使用されます。