Jetez un œil à ces questions d'entretien préliminaires pour vous aider à maîtriser les points de connaissances à haute fréquence (6)

10 questions chaque jour, après 100 jours, vous maîtriserez tous les points de connaissances à haute fréquence des entretiens front-end, allez ! ! ! , en lisant l'article, j'espère que vous ne regardez pas directement les réponses, mais demandez-vous d'abord si vous le savez, et si oui, quelle est votre réponse ? Pensez-y et comparez-la avec la réponse. Serait-ce mieux ? Bien sûr, si vous avez une meilleure réponse que la mienne, veuillez laisser un message dans la zone de commentaire et discuter ensemble de la beauté de la technologie.

Intervieweur : Pourriez-vous s'il vous plaît décrire brièvement les différences entre var, let et const ?

Moi : Euh~, d'accord, les différences entre les trois sont résumées comme suit :

var : les déclarations répétées sont autorisées, mais entraîneront l'écrasement des données. se produire ; variables locales Le monter sur l'objet global entraînera une pollution de l'objet global.

console.log(a) // 因变量提升, var a;提到前面但是没有赋值，所以值为undefined
var a = 1
var a = '你好' // var声明的变量会被重新赋值
console.log(a) // a会打印被重新赋值的值
console.log(window.a) // var声明的局部变量会被挂载到全局变量上，造成全局变量的污染。

let : Il y a une nouvelle commande dans es6, l'utilisation est similaire à var ; les déclarations répétées ne sont pas autorisées ; il n'y a pas de promotion de variable, elle agit souvent au niveau du bloc pour éviter la pollution globale ; variables causées par des variables locales.

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 : nouvelle commande es6, utilisée pour déclarer des constantes et la valeur ne peut pas être modifiée ; les constantes déclarées doivent être initialisées immédiatement, sinon une erreur sera signalée dans les affectations ultérieures. Les déclarations répétées ne peuvent pas être effectuées ; l'adresse de la variable, tant que le nom de la variable fait référence à Si l'adresse reste la même, aucune erreur ne sera signalée

const arr = ['小张','小王','小李','小赵']
arr[0]='小明'
console.log(arr) // ['小明', '小王', '小李', '小赵']
const arr = [] // 报错

Intervieweur : Veuillez parler de votre compréhension de la copie approfondie et de la copie superficielle

Moi : Euh~ , d'accord, ma compréhension des deux est résumée comme suit :

Deep Copy : Les nouvelles données n'interfèrent pas avec les données d'origine.

// 扩展运算符在一维数组中是属于深拷贝，在多维数组中属于浅拷贝
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

Bien sûr, il existe également une manière standard d'écrire une copie approfondie, comme suit :

// 标准的深拷贝 => 引用数据类型(数组,对象)
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)// 张三 李四

Copie superficielle : les nouvelles données affecteront les données d'origine.

let arr = [1,2,3]
let newArr = arr
// 对新数据做出改变，原数据也会发生改变，这种就叫做浅拷贝
newArr.push(4) // [1, 2, 3, 4]
console.log(arr,newArr) // [1, 2, 3, 4]

Pour parler franchement, la copie profonde consiste à obtenir de nouvelles données et n'a rien à voir avec les données originales ; bien que la copie superficielle puisse obtenir de nouvelles données, elle a toujours un certain lien avec les données originales ;

Intervieweur : Qu'a fait le navigateur au moment où vous avez saisi l'URL ?

Moi : Euh~, L'URL est composée des parties suivantes :

https : protocole de transmission (une couche de sécurité TSL ou SSL est ajoutée entre http et tcp)

www : serveur

baidu .com : Nom de domaine

Le système de nom de domaine DNS correspondra à la véritable IP. La première visite est normale. La deuxième visite stockera l'IP résolue par le nom de domaine localement pour lire le cache du navigateur.

Au moment où j'ai entré l'URL, j'ai rencontré : nom de domaine -> système de nom de domaine DNS -> obtenir la véritable adresse IP -> établir une connexion (prise de contact à trois voies TCP) -> ; agitez quatre fois

Processus de mise en œuvre spécifique :

• 1. Analyse d'URL : Déterminez s'il faut rechercher du contenu ou demander une URL

• 2. sera renvoyé directement à la page. S'il n'y a pas de cache, il entrera dans l'étape de demande réseau

• 3. Résolution DNS

• 4. demandez les informations d'en-tête et envoyez la requête http

• 6. Traitez les informations de réponse

• 7. Passez Wave quatre fois pour déconnecter la connexion TCP

• 8. Si le code d'état de la réponse est 301, redirigez

• . 9. Le navigateur affiche la page : 1) analyse le HTML et génère une arborescence DOM ; 2) calcule les styles de nœuds en fonction du CSS, génère une feuille de style ; 3) génère une arborescence de mise en page ; 4) génère des couches indépendantes pour des éléments spécifiques

• Intervieweur : Parlez-moi de la différence entre les cookies sessionStorage et localStorage ?

Moi : Euh~, d'accord, la relation entre eux est la suivante :

Mêmes points

: Ils sont tous stockés dans le navigateur, et ils sont tous stockés localement dans le navigateur.

Différence

 : 1. Le cookie est écrit par le serveur ou le front-end, sessionStorage et localStorage sont tous deux écrits par le front-end

• 2. lorsqu'il est écrit par le serveur. Oui, localStorage existera toujours tant qu'il est écrit, à moins qu'il ne soit effacé manuellement, sessionStorage est automatiquement effacé lorsque la page est fermée

• 3. et les espaces sessionStorage et localStorage sont relativement grands, environ 5M

• 4.3 suivent tous le même principe d'origine pour le partage de données, et sessionStorage est également limité à la même page

• 5 Lorsque le front-end envoie une requête au back-end, les cookies sont automatiquement transportés, de session et locaux. ne sont pas transportés

• 6. Les cookies stockent généralement des informations de vérification de connexion ou des jetons. LocalStorage est souvent utilisé pour stocker des données qui ne sont pas facilement modifiées afin de réduire la pression du serveur. comme la fonction de barre de progression de récupération du lecteur de musique

Intervieweur : Parlons de ce que sont les types de données JS et quelles sont les différences ?

Moi : Euh~, les types de données JS sont divisés en deux catégories : l'une est le type de données de base, l'autre est le type de données de référence, comme suit :

• Types de base : chaîne, nombre, booléen, nul , undefined, symbol, bigInt

• Type de référence : objet, tableau

Les types de base sont stockés sur la pile, avec un petit espace et des opérations fréquentes

Les types de référence sont stockés dans le tas, avec de grandes espace, sur la pile Un pointeur est stocké dans , pointant vers l'adresse de départ dans le tas

Remarque : ​​Le symbole est unique et ne peut pas être énuméré. Utilisez getOwnPropertySymbols pour l'obtenir

Intervieweur : Parlez-moi de. votre compréhension des fermetures ?

Moi : Euh~, la fonction interne fait référence aux variables de la fonction externe, et l'ensemble de ces variables est la fermeture.

• Le principe de formation : Chaîne de scope, le scope actuel peut accéder aux variables du scope supérieur.

• Problème résolu : Cela peut empêcher la destruction des variables dans la portée de la fonction après la fin de l'exécution de la fonction, et en même temps, les variables locales à l'intérieur de la fonction sont accessibles depuis l'extérieur de la fonction. Problèmes causés par

•  : Étant donné que le ramasse-miettes ne détruira pas les variables lors de la fermeture, des fuites de mémoire se produiront. Si les fuites de mémoire s'accumulent trop, cela entraînera facilement un débordement de mémoire.

• L'application de fermetures peut imiter la portée au niveau du bloc, implémenter le curry, définir des méthodes privilégiées dans les constructeurs, utiliser des fermetures dans les observateurs sensibles aux données dans Vue, etc.

Intervieweur : De combien de méthodes JavaScript dispose-t-il pour déterminer le type d'une variable ?

Moi : Euh~, d'accord, le résumé est le suivant :

1. typeof (jugé sur la base du binaire), le type de données ne peut pas être jugé : null et object

2. ), le type de données natif ne peut pas être jugé

3. constructor.name (jugé selon le constructeur), le type de données nul ne peut pas être jugé

4. Object.prototype.toString.call() (jugé par la méthode toString). d'objet) tous les types de données peuvent être jugés, n'oubliez pas de juger. Le résultat est imprimé comme suit : '[Affectation d'objet.

Intervieweur : Parlez-moi de méthodes permettant de maintenir une communication en temps réel entre le front et le back-end ?

Moi : Euh~, sondage, sondage long, streaming iframe, WebSocket, SSE.

Intervieweur : Dites-moi la différence entre pseudo-tableau et tableau ?

Moi : Euh~, d'accord, le résumé est le suivant :

Caractéristiques des pseudo-tableaux

: Le type est objet, les méthodes de tableau ne peuvent pas être utilisées, la longueur peut être obtenue et for in peut être utilisé pour traverse

Les pseudo-tableaux peuvent Méthodes pour convertir en tableaux : Array.prototype.slice.call(), Array.from(), [...pseudo-array]

Il y a lesquels sont des pseudo -arrays : arguments des paramètres de fonction, clés de Map et Set(), valeurs() et entiers()

【Apprentissage recommandé : Tutoriel avancé javascript】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!