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.
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 = [] // 报错
: 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
// 标准的深拷贝 => 引用数据类型(数组,对象)
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)// 张三 李四: 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]
Interviewer: Was hat der Browser gemacht, als Sie die URL eingegeben haben?
: 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 winkenSpezifischer 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?
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
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.
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 werdenInterviewer: 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:【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!
