Werfen Sie einen Blick auf diese Front-End-Interviewfragen, die Ihnen dabei helfen, hochfrequente Wissenspunkte zu meistern (6).

10 Fragen jeden Tag, nach 100 Tagen beherrschen Sie alle hochfrequenten Wissenspunkte von Front-End-Interviews, komm schon! ! ! Ich hoffe, dass Sie beim Lesen des Artikels nicht direkt auf die Antwort schauen, sondern zunächst darüber nachdenken, ob Sie sie wissen, und wenn ja, wie lautet Ihre Antwort? Denken Sie darüber nach und vergleichen Sie sie dann mit der Antwort. Wenn Sie eine bessere Antwort als meine haben, hinterlassen Sie bitte eine Nachricht im Kommentarbereich und diskutieren Sie gemeinsam über die Schönheit der Technologie.

Interviewer: Könnten Sie bitte kurz die Unterschiede zwischen var, let und const beschreiben?

Ich: Äh, okay, der Unterschied zwischen den drei Funktionen lässt sich wie folgt zusammenfassen:

var: Die am häufigsten verwendeten Variablen sind zulässig, führen jedoch zum Überschreiben von Variablen wird auftreten; lokale Variablen Die Montage auf dem globalen Objekt führt zu einer Verschmutzung des globalen Objekts.

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

let: Es gibt einen neuen Befehl, dessen Verwendung der von var ähnelt; es gibt keine Variablenheraufstufung, um eine Verschmutzung des globalen Bereichs zu vermeiden Variablen, die durch lokale Variablen verursacht werden.

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 neuer Befehl, der zum Deklarieren von Konstanten verwendet wird und der Wert nicht geändert werden kann; deklarierte Konstanten müssen sofort initialisiert werden, andernfalls wird bei wiederholten Zuweisungen kein Fehler gemeldet; die Adresse der Variablen, solange sich der Variablenname auf bezieht. Wenn die Adresse gleich bleibt, wird kein Fehler gemeldet.

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

Interviewer: Bitte sprechen Sie über Ihr Verständnis von Deep Copy und Shallow Copy. Ich: Äh ~ , okay, mein Verständnis der beiden lässt sich wie folgt zusammenfassen:

Deep Copy

: Die neuen Daten beeinträchtigen die Originaldaten nicht.

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

Natürlich gibt es auch eine Standardmethode zum Schreiben tiefer Kopien, wie folgt:

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

Flache Kopie

: Neue Daten wirken sich auf die Originaldaten aus.

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

Um es ganz klar auszudrücken: Deep Copy dient dazu, neue Daten zu erhalten und hat nichts mit den Originaldaten zu tun. Obwohl flache Kopien neue Daten erhalten können, besteht dennoch eine gewisse Verbindung zu den Originaldaten.

Interviewer: Was hat der Browser gemacht, als Sie die URL eingegeben haben?

Ich: Uh~,

URL besteht aus den folgenden Teilen

: https: Übertragungsprotokoll (eine TSL- oder SSL-Sicherheitsschicht wird zwischen http und TCP hinzugefügt)

www: Server

Baidu .com: Domänenname

Das DNS-Domänennamensystem stimmt mit der tatsächlichen IP überein. Der erste Zugriff erfolgt normal. Beim zweiten Zugriff wird die durch den Domänennamen aufgelöste IP lokal gespeichert, um den Browser-Cache zu lesen.

In dem Moment, in dem ich die URL eingegeben habe, habe ich Folgendes erlebt: Domänenname -> Die echte IP abrufen (TCP-Drei-Wege-Handshake) -> ; viermal winken

Spezifischer Implementierungsprozess

1. URL-Analyse: Bestimmen Sie, ob nach Inhalten gesucht oder URLs angefordert werden sollen2 Wenn kein Cache vorhanden ist, wird die Netzwerkanforderungsphase gestartet.

• 4. Stellen Sie eine TCP-Verbindung her Header-Informationen anfordern und HTTP-Anfrage senden

• 7. Pass Wave viermal, um die TCP-Verbindung zu trennen

• 8 9. Der Browser rendert die Seite: 1) analysiert HTML und generiert einen DOM-Baum; 2) berechnet Knotenstile basierend auf CSS; 3) generiert einen Layout-Baum; 4) generiert unabhängige Ebenen für bestimmte Elemente : Erzählen Sie mir etwas über den Unterschied zwischen Cookie-SessionStorage und LocalStorage?

• Ich: Äh~, okay, die Beziehung zwischen ihnen ist wie folgt:

• Gleiche Punkte
  : ​​
• Sie sind alle Browserspeicher und werden alle lokal im Browser gespeichert.

• Unterschied
  :

• 1 Das Cookie wird vom Server oder dem Frontend geschrieben, sessionStorage und localStorage werden beide vom Frontend geschrieben

• 2. Der Lebenszyklus des Cookies ist festgelegt Wenn es vom Server geschrieben wird, bleibt localStorage immer vorhanden, es sei denn, es wird manuell gelöscht. SessionStorage wird automatisch gelöscht, wenn die Seite geschlossen wird

3 ca. 4 KB, und die Bereiche sessionStorage und localStorage sind relativ groß, ca. 5 MB

4.3 Alle folgen dem gleichen Ursprungsprinzip für die Datenfreigabe, und sessionStorage ist auch auf dieselbe Seite beschränkt

5 Wenn das Frontend eine Anfrage an das Backend sendet, überträgt es automatisch Cookies, Sitzungs- und lokale Cookies nicht übertragen

6. Cookies speichern im Allgemeinen Anmeldebestätigungsinformationen oder Token, die häufig zum Speichern von Daten verwendet werden, die nicht einfach geändert werden können, um den Serverdruck zu verringern. Mit SessionStorage kann überwacht werden, ob der Benutzer die Seite aktualisiert Fortschrittsbalkenfunktion für die Wiederherstellung des Musik-Players

Interviewer: Sprechen wir darüber, was JS-Datentypen sind und was die Unterschiede sind?

Ich: Äh, JS-Datentypen sind in zwei Kategorien unterteilt: eine ist der Basisdatentyp, die andere ist der Referenzdatentyp, wie folgt:

• Grundtypen: Zeichenfolge, Zahl, Boolescher Wert, Null , undefiniert, Symbol, bigInt

• Referenztyp: Objekt, Array

Grundtypen werden auf dem Stapel gespeichert, mit wenig Platz und häufigen Operationen

Referenztypen werden im Heap gespeichert, mit großen Platz, auf dem Stapel wird ein Zeiger gespeichert, der auf die Startadresse im Heap zeigt Ihr Verständnis von Schließungen?

Ich: Äh, die innere Funktion bezieht sich auf die Variablen in der äußeren Funktion, und die Menge dieser Variablen ist der Abschluss.

Das Prinzip der Bildung

: Bereichskette, der aktuelle Bereich kann auf Variablen im übergeordneten Bereich zugreifen.

• Problem gelöst: Es kann verhindert werden, dass die Variablen im Funktionsbereich nach Beendigung der Funktionsausführung zerstört werden, und gleichzeitig kann von außerhalb der Funktion auf die lokalen Variablen innerhalb der Funktion zugegriffen werden. Probleme, die durch

• verursacht werden: Da der Garbage Collector die Variablen im Abschluss nicht zerstört, kommt es zu Speicherlecks. Wenn sich die Speicherlecks zu stark ansammeln, kann es leicht zu einem Speicherüberlauf kommen.

• Die Anwendung von Abschlüssen kann den Umfang auf Blockebene imitieren, Currying implementieren, privilegierte Methoden in Konstruktoren definieren, Abschlüsse in datenresponsiven Beobachtern in Vue verwenden usw.

• Interviewer: Wie viele Methoden verfügt JavaScript, um den Typ einer Variablen zu bestimmen? Ich: Äh, okay, die Zusammenfassung lautet wie folgt:

  1. Typ von (beurteilt anhand der Binärdatei), der Datentyp kann nicht beurteilt werden: null und Objektinstanz von (beurteilt anhand der Prototypenkette). ), der native Datentyp kann nicht beurteilt werden

3 (beurteilt nach dem Konstruktor), der Null-Datentyp kann nicht beurteilt werden

4 des Objekts) Alle Datentypen können beurteilt werden. Denken Sie daran, das Ergebnis zu beurteilen. Das Ergebnis wird wie folgt gedruckt: „[Objektzuweisung.

Interviewer: Erzählen Sie mir von irgendwelchen Methoden, um die Echtzeitkommunikation zwischen Front- und Back-End aufrechtzuerhalten?

Ich: Äh~, Umfragen, lange Umfragen, Iframe-Streaming, WebSocket, SSE.

Interviewer: Erzählen Sie mir den Unterschied zwischen Pseudo-Array und Array?

Ich: Äh~, okay, die Zusammenfassung lautet wie folgt:

Eigenschaften von Pseudo-Arrays

: Der Typ ist Objekt, Array-Methoden können nicht verwendet werden, Länge kann abgerufen werden und for in kann dazu verwendet werden Traverse

Pseudo-Arrays können

Methoden zum Konvertieren in Arrays

: Array.prototype.slice.call(), Array.from(), [...pseudo-array]

Es gibt

welche Pseudo-Arrays sind -Arrays

: Funktionsparameterargumente, Map- und Set-Schlüssel(), Werte() und Ganzes()

【Empfohlenes Lernen: Javascript-Tutorial für Fortgeschrittene】

Das obige ist der detaillierte Inhalt vonWerfen Sie einen Blick auf diese Front-End-Interviewfragen, die Ihnen dabei helfen, hochfrequente Wissenspunkte zu meistern (6).. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!