Weitergabe von JS-Interviewfragenaufzeichnungen in den Jahren 2017 und 2018

In diesem Artikel erfahren Sie, wie Datensätze zu JS-Interviewfragen in den Jahren 2017 und 2018 geteilt werden. Interessierte Freunde können einen Blick darauf werfen

Empfohlene verwandte Artikel1. Die einfachste Frage 2. Eine Frage dazu

3. Fragen zur Variablen- und Funktionsvorbereitung sowie zur Reihenfolge der Variablen Funktionen

Zu diesem Zeitpunkt bereitet sich der Browser nur auf das Parsen von Variablen, Funktionen und Funktionsparametern vor. Und in diesem „Vorparsing“-Prozess gibt es eine Vorparsing-Sequenz, das heißt, die formalen Parameter der Funktion -> Darüber hinaus ist die Funktion bei gleichem Namen reserviert und die spätere überschreibt die frühere. Wenn der vorab analysierte Ergebnisparameter einen Wert hat, wird er auf den Wert analysiert. Wenn nicht, wird er auf den gesamten Funktionskörper analysiert, und die Variablen werden nicht unterdefiniert in dieser Frage, daher werden wir es nicht zuerst diskutieren. Wenn diese Frage „vorab analysiert“ wird, wird daher zuerst die Gewichtung der Funktionsdeklaration erhöht

    '11' * 2
    'a8' * 3
    var a = 2, b = 3;    var c = a+++b; // c = 5

4. Ein Algorithmusproblem

    var num = 10;    var obj = {        num:8,        inner: {            num: 6,            print: function () {                console.log(this.num);
            }
        }
    }
    num = 888;
    obj.inner.print(); // 6
    var fn = obj.inner.print;
    fn(); //888
    (obj.inner.print)(); //6
    (obj.inner.print = obj.inner.print)(); //888 这个点没有太理解，虽然答对了

hat ein sortiertes Array, z [ 1,4,6,9,11,15,18], geben Sie eine neue Zahl ein, fügen Sie sie in das Array ein und schreiben Sie eine Funktion

5. Was ist Funktionsdrosselung und was sind ihre Vorteile (ich habe dieses Konzept noch nie verstanden, daher bin ich verwirrt)

Der Zweck der Funktionsdrosselung

Es kann wörtlich verstanden werden Mit der Funktionsdrosselung werden Funktionen gedrosselt, um die Leistung bis zu einem gewissen Grad zu optimieren. Beispielsweise erfordern DOM-Vorgänge mehr Speicher und CPU-Zeit als Nicht-DOM-Interaktionen. Der Versuch, zu viele DOM-bezogene Vorgänge nacheinander auszuführen, kann dazu führen, dass der Browser hängen bleibt und manchmal sogar abstürzt. Dies ist besonders wahrscheinlich, wenn der Ereignishandler onresize im IE verwendet wird. Wenn die Größe des Browsers geändert wird, wird das Ereignis kontinuierlich ausgelöst. Wenn Sie versuchen, DOM-Vorgänge innerhalb des onresize-Ereignishandlers auszuführen, kann die hohe Änderungshäufigkeit dazu führen, dass der Browser abstürzt. Als weiteres Beispiel binden wir für unsere allgemeine Suchfunktion normalerweise das Keyup-Ereignis und suchen jedes Mal, wenn die Tastatur gedrückt wird. Unser Zweck besteht jedoch hauptsächlich darin, jedes Mal zu suchen, wenn wir Inhalte eingeben. Um diese Probleme zu lösen, können Sie Timer verwenden, um Funktionen zu drosseln.

Prinzip der Funktionsdrosselung

Einige Codes können nicht kontinuierlich und wiederholt ohne Unterbrechung ausgeführt werden. Beim ersten Aufruf der Funktion wird ein Timer erstellt, um Code nach einem bestimmten Intervall auszuführen. Wenn die Funktion ein zweites Mal aufgerufen wird, löscht sie den vorherigen Timer und setzt einen anderen. Wenn der vorherige Timer bereits ausgeführt wurde, hat dieser Vorgang keine Bedeutung. Wenn der vorherige Timer jedoch noch nicht ausgeführt wurde, wird er tatsächlich durch einen neuen Timer ersetzt. Der Zweck besteht darin, die Funktion erst auszuführen, nachdem die Anforderung zur Ausführung für einige Zeit gestoppt wurde.
http://www.cnblogs.com/LuckyW...

6. Schreiben Sie eine Methode zur Übergabe von zwei Parametern (parentNode, childNode), die erfordert, dass, wenn childNode ein Nachkommeknoten von parentNode ist, Dann gibt es true zurück, andernfalls gibt es false zurück

7 Was ist das Prinzip des DOM-Ereignisflusses und in wie viele Phasen ist er unterteilt?

Ereigniserfassung befindet sich im Zielstadium

8. Was ist das Prinzip der DOM-Ereignisdelegation und welche Vor- und Nachteile hat es?

Prinzip der Ereignisdelegation: Event-Bubbling-Mechanismus

Vorteile

1. Kann viel Speicherverbrauch einsparen und die Ereignisregistrierung reduzieren. Es ist beispielsweise sehr gut, alle Klickereignisse von li auf ul zu übertragen.
2. Es kann festgestellt werden, dass beim Hinzufügen eines neuen Unterobjekts keine Ereignisbindung erforderlich ist, was besonders für dynamische Inhalte geeignet ist.

Nachteile

Häufig Anwendungen von Ereignis-Proxys sollten auf die oben genannten Anforderungen beschränkt sein: Wenn alle Ereignisse als Ereignisagenten verwendet werden, kann es zu einer Fehleinschätzung von Ereignissen kommen. Das heißt, Ereignisse, die nicht ausgelöst werden sollen, werden an Ereignisse gebunden.

9. HTTP-Cache-Mechanismus und wie man ihn im 200-Status implementiert (zeigt an, dass der am häufigsten kontaktierte 304-Cache ist) (wird zur Optimierung verwendet, wurde ihm nicht ausgesetzt, muss verstanden werden)

Bedeutung

Definition: Browser-Caching soll das Surfen beschleunigen. Der Browser speichert kürzlich angeforderte Dokumente auf der Festplatte des Benutzers. Wenn der Besucher diese Seite erneut anfordert, kann der Browser sie unter „Dokumente werden angezeigt“ abrufen auf der lokalen Festplatte, wodurch die Seitenanzeige beschleunigt wird.

Funktion

Funktion des Caches:
1. Reduzieren Sie die Latenz, machen Sie Ihre Website schneller und verbessern Sie die Benutzererfahrung.
2. Vermeiden Sie Netzwerküberlastungen, reduzieren Sie das Anforderungsvolumen und reduzieren Sie die Ausgabebandbreite.

实现手段

Cache-Control中的max-age是实现内容cache的主要手段，共有3种常用策略：max-age和Last-Modified（If-Modified-Since）的组合、仅max-age、max-age和ETag的组合。

对于强制缓存，服务器通知浏览器一个缓存时间，在缓存时间内，下次请求，直接用缓存，不在时间内，执行比较缓存策略。
对于比较缓存，将缓存信息中的Etag和Last-Modified通过请求发送给服务器，由服务器校验，返回304状态码时，浏览器直接使用缓存。

10. 一个原型链继承的问题

    // 有一个构造函数A，写一个函数B，继承A
    function A (num) {        this.titileName = num;
    }
    A.prototype = {        fn1: function () {},        fn2: function () {}
    }

这个问题的关注点是B继承的A的静态属性，同时B的原型链中不存在A实例的titleName属性

11. 什么是虚拟dom

React为啥这么大？因为它实现了一个虚拟DOM（Virtual DOM）。虚拟DOM是干什么的？这就要从浏览器本身讲起

如我们所知，在浏览器渲染网页的过程中，加载到HTML文档后，会将文档解析并构建DOM树，然后将其与解析CSS生成的CSSOM树一起结合产生爱的结晶——RenderObject树，然后将RenderObject树渲染成页面（当然中间可能会有一些优化，比如RenderLayer树）。这些过程都存在与渲染引擎之中，渲染引擎在浏览器中是于JavaScript引擎（JavaScriptCore也好V8也好）分离开的，但为了方便JS操作DOM结构，渲染引擎会暴露一些接口供JavaScript调用。由于这两块相互分离，通信是需要付出代价的，因此JavaScript调用DOM提供的接口性能不咋地。各种性能优化的最佳实践也都在尽可能的减少DOM操作次数。

而虚拟DOM干了什么？它直接用JavaScript实现了DOM树（大致上）。组件的HTML结构并不会直接生成DOM，而是映射生成虚拟的JavaScript DOM结构，React又通过在这个虚拟DOM上实现了一个 diff 算法找出最小变更，再把这些变更写入实际的DOM中。这个虚拟DOM以JS结构的形式存在，计算性能会比较好，而且由于减少了实际DOM操作次数，性能会有较大提升

12. js基础数据类型和引用类型分别是什么？这个前提条件下写一个getType，返回相应的类型

1.基本数据类型（自身不可拆分的）：Undefined、Null、Boolean、Number、String
2.引用数据类型（对象）：Object （Array，Date，RegExp，Function）
ES6基本数据类型多了个symbol 据说这道题刷了百分之二十的人 感谢Abbyshen提出

function gettype(nm){    return Object.prototype.toString.call(nm);
}

13. dom选择器优先级是什么，以及权重值计算（一道老问题了）

1.行内样式 1000
2.id 0100
3.类选择器、伪类选择器、属性选择器[type="text"] 0010
4.标签选择器、伪元素选择器(::first-line) 0001
5.通配符*、子选择器、相邻选择器 0000

14. vue双向数据绑定的原理是什么

首先传输对象的双向数据绑定 Object.defineProperty(target, key, decription),在decription中设置get和set属性（此时应注意description中get和set不能与描述属性共存）
数组的实现与对象不同。
同时运用观察者模式实现wather，用户数据和view视图的更新

15. react和vue比较来说有什么区别

1 component层面，web component和virtual dom
2 数据绑定（vue双向，react的单向）等好多
3 计算属性 vue 有，提供方便；而 react 不行
4 vue 可以 watch 一个数据项；而 react 不行
5 vue 由于提供的 direct 特别是预置的 directive 因为场景场景开发更容易；react 没有
6 生命周期函数名太长 directive

16. git使用过程中，如果你在开发着业务，突然另一个分支有一个bug要改，你怎么办

git stash       //将本次修改存到暂存区（紧急切换分支时）git stash pop   //将所有暂存区的内容取出来

17. postcss的使用

18. 网页布局有哪几种，有什么区别

静态、自适应、流式、响应式四种网页布局
静态布局：意思就是不管浏览器尺寸具体是多少，网页布局就按照当时写代码的布局来布置；
自适应布局：就是说你看到的页面，里面元素的位置会变化而大小不会变化；
流式布局：你看到的页面，元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
自适应布局：每个屏幕分辨率下面会有一个布局样式，同时位置会变而且大小也会变。

18. 执行下面代码

var a = {};var b = {key: 'b'};var c = {key: 'c'};var d = [3,5,6];
a[b] = 123;
a[c] = 345;
a[d] = 333;console.log(a[b]);  // 345console.log(a[c]);  // 345console.log(a[d]);  // 333

19.

    var R = (function() {        var u = {a:1,b:2};        var r = {            fn: function(k) {                return u[k];
            }
        }        return r;
    }());
    R.fn('a');  // 1

上述代码中如何获取匿名函数中的u

20. 不适用循环语句（包括map、forEach方法）实现一个100长度的数组，索引值和值相同的数组[0,1,2,3,4,5........99]

var arr = new Array(100);//方法1[...arr.keys()];//方法二Array.from(arr.keys());//方法三Array.from({length: 100});// 方法四 借助stringvar arr1 = new Array(101);var str = arr1.join('1,');
str = str.replace(/(1\,)/g, function ($0, $1, index) {    var start = '' + Math.ceil(index/2);    if(index e6af0fb823c143a40a71e960e513f6b6= 100) {        return arr;
    }
    arr.push(val);    return reduce(arr, val+1);
}var res = reduce([], 0)

21. 下面语句执行结果输出

var a = function (val, index) {    console.log(index);    return {        fn: function (name) {            return a(name, val);
        }
    }
}var b = a(0); // underfinedb.fn(1); // 0b.fn(2); // 0b.fn(3); // 0

22. 科普

1) dom节点的根节点是不是body
回答： 不是，dom节点的根节点是html(包含head和body，head中分为meta、title等。body又分为一组)

2）dom元素都会有offsetParent吗
回答： offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。 当容器元素的style.display 被设置为 "none"时（译注：IE和Opera除外），offsetParent属性 返回 null。

3) [1,3,5]转译成字符串是什么
回答： '1,3,5'
调用toString方法，生成该字符串

4）li标签的祖级元素可以为li，父级元素也可以为例
回答： 错误

23. jsonp原理，jquery是怎么实现的，这样实现有什么好处和坏处

原理

在同源策略下;在某个服务器下的页面是无法获取到该服务器以外的数据的;Jquery中ajax 的核心是通过 XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加 3f1c4e4b6b16bbbd69b2ee476dc4f83a标签来调用服务器提供的 js脚本
当我们正常地请求一个JSON数据的时候，服务端返回的是一串 JSON类型的数据，而我们使用 JSONP模式来请求数据的时候服务端返回的是一段可执行的 JavaScript代码。因为jsonp 跨域的原理就是用的动态加载 script的src ，所以我们只能把参数通过 url的方式传递, 所以jsonp的 type类型只能是get ！

$.ajax({
    url: 'http://192.168.1.114/yii/demos/test.php', //不同的域
    type: 'GET', // jsonp模式只有GET 是合法的
    data: {        'action': 'aaron'
    },
    dataType: 'jsonp', // 数据类型
    jsonp: 'backfunc', // 指定回调函数名，与服务器端接收的一致，并回传回来})
其实jquery 内部会转化成
http://192.168.1.114/yii/demos/test.php?backfunc=jQuery2030038573939353227615_1402643146875&action=aaron然后动态加载
<script type="text/javascript"src="http://192.168.1.114/yii/demos/test.php?backfunc=>
然后后端就会执行backfunc(传递参数 )，把数据通过实参的形式发送出去。

在jquery 源码中， jsonp的实现方式是动态添加3f1c4e4b6b16bbbd69b2ee476dc4f83a标签来调用服务器提供的 js脚本。jquery 会在window对象中加载一个全局的函数，当 3f1c4e4b6b16bbbd69b2ee476dc4f83a代码插入时函数执行，执行完毕后就 3f1c4e4b6b16bbbd69b2ee476dc4f83a会被移除。同时jquery还对非跨域的请求进行了优化，如果这个请求是在同一个域名下那么他就会像正常的 Ajax请求一样工作。

24. http协议属于七层协议中的哪一层，下一层是什么

七层结构：物理层、数据链路层、网络层、传输层、会话层、表示层、应用层
tcp属于传输层；http属于应用层。
表现层

25. js垃圾回收机制知道哪些，v8引擎使用的哪一种

js的两种回收机制

1 标记清除（mark and sweep）
2 引用计数（reference counting）

Javascript und V8-Engine

Vor- und Nachteile des Garbage-Collection-Mechanismus

Vorteile: Vereinfachen Sie den Speicherverwaltungscode des Programms erheblich, reduzieren Sie die Belastung für Programmierer und reduzieren Sie die dadurch verursachten Probleme Problem mit Speicherlecks im Langzeitbetrieb.

Nachteile: Automatisches Recycling bedeutet, dass Programmierer den Speicher nicht kontrollieren können. Es gibt keine Entschuldigung für die Garbage Collection in ECMAScript. Wir können die Garbage Collection nicht erzwingen, geschweige denn die Speicherverwaltung beeinträchtigen.

V8 automatischer Garbage-Collection-Algorithmus
https://segmentfault.com/a/11...

26. Wann wird der Bereich generiert?

Seite wird geladen--> Erstellen Sie ein globales Fensterobjekt und generieren Sie einen globalen Gültigkeitsbereich. Anschließend werden Ausführungskontexte generiert (Variablenheraufstufung) und globale Variablenobjekte generiert 🎜>
27. Was ist das Prinzip der Websocket-Langverbindung?

Bedeutung

Websocket ist im Vergleich zu nicht-persistenten Protokollen wie HTTP.

Prinzip

Ähnlich wie bei langer Round-Robin-Methode und langer Verbindung; senden Sie kontinuierlich eine Anfrage.

28. http缓存知道哪些

http://blog.csdn.net/yzf91321...

29. 讲一下事件循环机制

执行上下文(Execution context)
函数调用栈(call stack)
队列数据结构(queue)
Promise

https://zhuanlan.zhihu.com/p/...

30. 理解web安全吗？都有哪几种，介绍以及如何预防

1.XSS，也就是跨站脚本注入

攻击方法：1. 手动攻击:
编写注入脚本，比如”/><script>alert(document.cookie());</script><!--等，
手动测试目标网站上有的input, textarea等所有可能输入文本信息的区域
2. 自动攻击
利用工具扫描目标网站所有的网页并自动测试写好的注入脚本，比如：Burpsuite等
防御方法：
1. 将cookie等敏感信息设置为httponly，禁止Javascript通过document.cookie获得
2. 对所有的输入做严格的校验尤其是在服务器端，过滤掉任何不合法的输入，比如手机号必须是数字，通常可以采用正则表达式
3. 净化和过滤掉不必要的html标签，比如：<iframe>, alt,<script> 等
4. 净化和过滤掉不必要的Javascript的事件标签，比如：onclick, onfocus等
5. 转义单引号，双引号，尖括号等特殊字符，可以采用htmlencode编码 或者过滤掉这些特殊字符
6. 设置浏览器的安全设置来防范典型的XSS注入

2.SQL注入

攻击方法：
编写恶意字符串，比如‘ or  1=1--等，
手动测试目标网站上所有涉及数据库操作的地方
防御方法：1. 禁止目标网站利用动态拼接字符串的方式访问数据库2. 减少不必要的数据库抛出的错误信息3. 对数据库的操作赋予严格的权限控制4. 净化和过滤掉不必要的SQL保留字，比如：where, or, exec 等5. 转义单引号，上引号，尖括号等特殊字符，可以采用htmlencode编码 或者过滤掉这些特殊字符

3.CSRF，也就是跨站请求伪造

就是攻击者冒用用户的名义，向目标站点发送请求
防范方法：1. 在客户端进行cookie的hashing，并在服务端进行hash认证2. 提交请求是需要填写验证码3. 使用One-Time Tokens为不同的表单创建不同的伪随机值

40. sessionStorage和localstorage能跨域拿到吗？比如我在www.baidu.com设置的值能在m.baidu.com能拿到吗？为什么

localStorage会跟cookie一样受到跨域的限制，会被document.domain影响

41. Wann läuft localstorage ab, wenn es nicht manuell gelöscht werden kann?

sessionStorage ist nur in der aktuellen Sitzung gültig Schließen der Seite oder Browser gelöscht

42. Auf welche Domains können Cookies gesetzt werden? Kann .com eingestellt werden?

Dies kann durch Festlegen von domin erreicht werden

43. Glauben Sie, dass der Anmeldestatus im Sessionstorage oder Localstorage oder in Cookies oder einer anderen Ihnen bekannten Methode gespeichert werden kann? es gespeichert? ? Warum wird es dort gespeichert?

44. Flux -> Redux -> Was ist die Art der Änderung?

Die Speicherstruktur verarbeitet Objekte beobachtbar und objektorientiert :/ /zhuanlan.zhihu.com/p/...

45. Wie lade ich die entsprechende Chunk-Datei für das On-Demand-Routing? Mit anderen Worten, woher weiß der Browser, wann dieser Block geladen werden muss, und wie erkennt das Webpack die mehreren gehashten Blockdateien

50. Was ist der Unterschied zwischen get und post? Können Daten durch den Körper übertragen werden?

Um die Daten in den Körper zu übertragen, müssen sie über POST abgerufen werden, was durch das HTTP-Protokoll eingeschränkt ist.

51. 下拉刷新你怎么实现

52. 预加载options请求为什么会出现，能避免这个请求吗？

2018年面试题总结

收集一下网上的2018年的面试题 ; 希望能对你有所帮助~~

1.使用css实现一个持续的动画效果

animation:mymove 5s infinite;
@keyframes mymove {
from {top:0px;}
to {top:200px;}
}animation-name    规定需要绑定到选择器的 keyframe 名称。animation-duration    规定完成动画所花费的时间，以秒或毫秒计。animation-timing-function    规定动画的速度曲线。animation-delay    规定在动画开始之前的延迟。animation-iteration-count    规定动画应该播放的次数。animation-direction    规定是否应该轮流反向播放动画。

2.使用js实现一个持续的动画效果

最开始的思路是用定时器实现，最后没有想的太完整，面试官给出的答案是用requestAnimationFrame

· 定时器思路var e = document.getElementById('e')var falg = true;var left = 0;
setInterval(() => {
    left == 0 ? falg = true : left == 100 ? falg = false : ''
    falg ? e.style.left = ` ${left++}px` : e.style.left = ` ${left--}px`}, 1000 / 60)
· requestAnimationFrame
兼容性处理window.requestAnimFrame = (function(){  return  window.requestAnimationFrame       ||          window.webkitRequestAnimationFrame ||          window.mozRequestAnimationFrame    ||          function(callback){            window.setTimeout(callback, 1000 / 60);
          };
})();var e = document.getElementById("e")var flag = true;var left = 0;function render() {
    left == 0 ? flag = true : left == 100 ? flag = false : '';
    flag ? e.style.left = ` ${left++}px` :
        e.style.left = ` ${left--}px`;
}
(function animloop() {
    render();
    requestAnimFrame(animloop);
})();

不足之处请指正（毕竟是现学的）顺便查了一下优势：

浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果
解决毫秒的不精确性
避免过度渲染（渲染频率太高、tab 不可见暂停等等）
注：requestAnimFrame 和 定时器一样也头一个类似的清除方法 cancelAnimationFrame

3.右边宽度固定，左边自适应

第一种：<style>body{    display: flex;
}.left{    background-color: rebeccapurple;    height: 200px;    flex: 1;
}.right{    background-color: red;    height: 200px;    width: 100px;
}</style><body>
    <p class="left"></p>
    <p class="right"></p></body>第二种<style>
    p {        height: 200px;
    }    .left {        float: right;        width: 200px;        background-color: rebeccapurple;
    }    .right {        margin-right: 200px;        background-color: red;
    }</style><body>
    <p class="left"></p>
    <p class="right"></p></body>

4.水平垂直居中

第一种#container{    position:relative;
}#center{    width:100px;    height:100px;    position:absolute;    top:50%;    left:50%;    transform: translate(-50%,-50%);
}
第二种#container{    position:relative;
}#center{    width:100px;    height:100px;    position:absolute;    top:50%;    left:50%;    margin:-50px 0 0 -50px;
}
第三种#container{    position:relative;
}#center{    position:absolute;    margin:auto;    top:0;    bottom:0;    left:0;    right:0;
}
第四种 flex#container{    display:flex;    justify-content:center;    align-items: center;
}

5.四种定位的区别

`static` 是默认值
`relative` 相对定位 相对于自身原有位置进行偏移，仍处于标准文档流中
`absolute` 绝对定位 相对于最近的已定位的祖先元素, 有已定位(指`position`不是`static`的元素)祖先元素, 以最近的祖先元素为参考标准。如果无已定位祖先元素, 以`body`元素为偏移参照基准, 完全脱离了标准文档流。
`fixed` 固定定位的元素会相对于视窗来定位,这意味着即便页面滚动，它还是会停留在相同的位置。一个固定定位元素不会保留它原本在页面应有的空隙。

6.封装一个函数，参数是定时器的时间，.then执行回调函数。

function sleep (time) {  return new Promise((resolve) => setTimeout(resolve, time));
}

7.一行代码实现数组去重？

[...new Set([1,2,3,1,'a',1,'a'])]

8.使用addEventListener点击li弹出内容，并且动态添加li之后有效

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>var ulNode = document.getElementById("ul");
    ulNode.addEventListener(&#39;click&#39;, function (e) {        if (e.target && e.target.nodeName.toUpperCase() == "LI") {
            alert(e.target.innerHTML);
        }
    }, false);

9.怎么判断两个对象相等

JSON.stringify(obj)==JSON.stringify(obj);//true

10.Vue router 除了 router-link 怎么实现跳转?

router.go(1)router.push('/')

11.Vue router 跳转和 location.href 有什么区别？

router 是 hash 改变
location.href 是页面跳转，刷新页面

12. Neuanordnung und Neuzeichnung

Ein Teil des Rendering-Baums (oder der gesamte Rendering-Baum) muss neu analysiert und die Knotengröße neu berechnet werden. Dies nennt man Umordnung. Beachten Sie, dass es mindestens ein Seitenlayout für die Reflow-Initialisierung geben wird.
Ein Teil des Inhalts auf dem Bildschirm muss aufgrund von Änderungen in den geometrischen Eigenschaften des Knotens oder aufgrund von Stiländerungen, wie z. B. der Änderung der Hintergrundfarbe eines Elements, aktualisiert werden. Solche Updates werden Repaints genannt.

13. Welche Situationen lösen Reflow und Neuzeichnen aus?

DOM-Knoten hinzufügen, löschen, aktualisieren
Einen DOM-Knoten durch Anzeige ausblenden: keine – Reflow und Neuzeichnen auslösen
Einen DOM ausblenden Knoten über Sichtbarkeit: ausgeblendet – löst nur ein Neuzeichnen aus, da keine geometrischen Änderungen vorliegen
Verschieben oder animieren Sie den DOM-Knoten auf der Seite
Fügen Sie ein Stylesheet hinzu und passen Sie die Stilattribute an
Benutzerverhalten, z. B. Größe des Fensters ändern , ändern Sie die Schriftgröße oder scrollen Sie.

14.js bind 实现机制？手写一个 bind 方法？

function bind(fn, context){  return function (){     return fn.apply(context, arguments);
  }
}// 柯理化函数思想   感谢pursuitTom的提出Function.prototype.bind = function (context) {    var args = Array.prototype.slice.call(arguments, 1);    var _this = this;    return function () {        var thisArgs = [].slice.call(arguments);        return _this.apply(context, args.concat(thisArgs))
    };
}// ES6写法 感谢waterc的提出Function.prototype.bind = function(context, ...res) {
    let self = this
    return function(...arg) {        return self.apply(context, [...res,...arg])
    }
}

15.多个函数

var a = (function(){return '1';}, function(){return 1;})();console.log(typeof a); //number

16.__proto__、prototype、Object.getPrototypeOf()

__proto__是指内部原型，和Object.getPrototypeOf()结果等价function f(){}f.__proto__ === Object.getPrototypeOf(f); //truef.prototype === Object.getPrototypeOf(f); //false

17.浏览记录前后跳转（尚未试验）

<a href="javascript:history.go(-1)">backward</a><a href="javascript:history.go(1)">forward</a>

下面再有的题就不写序号了；正好到17；是自己喜欢的数字；哈哈

setTimeout 和 setInterval 细谈

常问的点，前者是在一定时间过后将函数添加至执行队列，执行时间=延迟时间+之前函数代码执行时间+执行函数时间。
后者是不管前一次是否执行完毕，每隔一定时间重复执行，用于精准执行互相没有影响的重复操作。
如果需要控制前后执行顺序，最好使用setTimeout模拟setInterval

var time = 400, times = 0, max = 10;
function func(){
  times++;  if(times < max){    //code here
    setTimeout(func, time);
  } else {
    console.log("finished");
  }
}
setTimeout(func, time);

判断多图片加载完毕

注：用jQueryObject.ready()只能判断dom结构加载完毕
好像描述的不是很清楚，这里写一下代码。
方法1：

var counter = 0;var queryInterval = 30; //msvar pics = document.getElementsByClassName("pics");function singleQuery(i){  if(pics[i].complete){
    counter++;    console.log(i + " is loaded");
  } else {
    setTimeout(singleQuery, queryInterval, i);
  }
}function allQuery(callback){  if(counter < pics.length){    console.log("current number of loaded pics: " + counter);
    setTimeout(allQuery, queryInterval, callback);
  } else {    console.log("All pics are loaded.");
    callback();
  }
}for(var i = 0; i < pics.length; i++){
  setTimeout(singleQuery, queryInterval, i);
}

setTimeout(allQuery, queryInterval, callback);

主要也是采用setTimeout模拟轮询，判断方式是img标签dom的complete属性（布尔值），缺点是定时器太多。

方法2：

var counter = 0, queryInterval = 50;var pics = document.getElementsByClassName("pics");for(var i = 0; i < pics.length; i++){
  pics[i].onload = function(){
    counter++;    console.log(this.id + " is loaded");
  }
}function queryPictures(callback){  if(counter < pics.length){    console.log("current number of loaded pics: " + counter);
    setTimeout(queryPictures, queryInterval, callback);
  } else {    console.log("All pics are loaded");
    callback();
  }
}

setTimeout(queryPictures, queryInterval, callback);

利用onload绑定图片加载成功后的回调，通过计数器判断是否加载完毕。

CSS margin重叠问题

块元素在垂直方向上的margin是很奇怪的，会有重叠现象。
如果display都是block，有三种情况：
外间距均为正数，竖直方向上会选择最大的外边距作为间隔
一正一负，间距 = 正 - |负|
两个负，间距 = 0 - 绝对值最大的那个
设置display: inline-block的盒子不会有margin重叠，position: absolute的也不会出现。

CSS选择器优先级 && CSS选择器效率

ID > 类 > 标签 > 相邻 > 子选择器 > 后代选择器 > * > 属性 > 伪类

object.propertyIsEnumerable(xxx)

判断对象中是否有xxx属性，并且能通过for in枚举，如Array对象的length是不可枚举的

判断数组

function isArray(arr){    return Object.prototype.toString.call(arr) === '[Object Array]';
}

git fetch && git pull

git pull自动完成了fetch最新远程版本，并且和本地进行merge
git fetch获得远程分支，要继续手动merge合并

WebSocket

HTML5带来的新协议，通过类似HTTP的请求建立连接。主要目的是可以获取服务端的推送。
原来的方式可能是使用long poll（即不中断连接一直等待数据），或者是ajax轮询的方式（每隔一段时间发送请求，建立连接，询问是否有新的数据）。这两种方式的缺点在于long poll的阻塞，以及ajax轮询的冗余连接。
WebSocket的设计思想有点类似于回调，在发送请求升级服务端的协议并收到确认信息后，服务端一有新的信息/数据就会主动推送给客户端，至于要一次HTTP握手便可以建立持久连接

跨域相关

只要协议、域名、端口有不同，则视为不同的域。（域名和域名对应的IP也是跨域）

1.CORS: Cross-Origin Resource Sharing

基于服务器支持的跨域，服务器设置Access-Control-Allow-Origin响应头，浏览器可允许跨域

2.设置domain

能从子域设到主域，如a.b.c.com—>b.c.com—>c.com
具体情况：在页面中用iframe打开了另一个页面（前提：两个页面主域是相同的）
利用frameElement.contentWindow.document.domain设置frame子页面的主域，document.domain设置主页面的主域，之后就能互相获取dom中的数据。
缺点是只能用于不同子域间的交互。

3.例如拥有src属性的img标签，每次改变src属性，都会发起http请求。

var img = new Image();
img.onload = function(){  //code here};
img.onerror = function(){  //code here};
img.src="http://server.com/data?query=3";

缺点是只能使用GET请求，不能获取数据，一般用于提交统计信息什么的。
script、link、iframe只有在添加到DOM中才会发起请求

4.HTML5 postMessage

支持IE8+和主流浏览器，写法也简单..

//source: http://test.org:4000//get the window object of target originvar win = window.open("http://target.com");//or this, when a frame is usedvar win = document.getElementById("targetId").contentWindow;
win.postMessage("data here", "http://target.com/rest");//target: http://target.com/tinyfunction handleMessage(event){  if(event.orgin!="http://test.org:4000")    return;  var data = event.data;  //code here

  //event.source is window.opener
  event.source.postMessage("response data here", event.origin);
}
window.addEventListener("message", handleMessage, false);

5.window.name

即使在页面打开多层iframe后，每个iframe中window.name 属性值都是相同的，以此用作数据传输的工具。
但由于跨域的限制，是无法获取另一个frame中的window.name数据，所以要使用一个同域的代理(proxy.html)：

6. jsonp

目前主流跨域方法
调用其他域的脚本获取数据，前提是另一个域能知道回调函数名，这个可以通过请求发送给目标域。
直接写jQuery封的jsonp

$.getJSON("http://target.com/data?callback=callbackFunctionName", function(data){});

$.getJSON会把获取的responseText转为json，如果url中有callback参数，数据会以script标签形式获取。

针对上方问题存在没有解答的 ; 或则解答不正确详细的 ; 欢迎留言 ; 我会及时更正 ; 也欢迎留下你认为经典的面试题 ; 我都会补充进来 ; 共同进步

相关学习推荐：javascript视频教程

Das obige ist der detaillierte Inhalt vonWeitergabe von JS-Interviewfragenaufzeichnungen in den Jahren 2017 und 2018. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!