Cet article vous présente le partage des enregistrements de questions d'entretien JS en 2017 et 2018. Les amis intéressés peuvent y jeter un œil
Articles connexes recommandés : Collection complète de questions d'entretien js en 2020 (dernière)
'11' * 2 'a8' * 3 var a = 2, b = 3; var c = a+++b; // c = 5
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 这个点没有太理解,虽然答对了
// 以下代码执行输出结果是什么 function b () { console.log(a); var a = 10; function a() {}; a = 100; console.log(a); } b(); function c () { console.log(a); function a() {}; var a = 10; a = 100; console.log(a); } c(); (function d (num) { console.log(num); var num = 10; }(100)) (function e (num) { console.log(num); var num = 10; function num () {}; }(100)) (function f (num) { function num () {}; console.log(num); var num =10 console.log(num); }(100)) //仍然是预解析(在与解析过程中还要考虑一下当前变量的作用于) function m () { console.log(a1); // underfined console.log(a2); // underfined console.log(b1); // underfined console.log(b2); // underfined if(false) { function b1 (){}; var a1 = 10; } if(true) { function b2 (){}; var a2 = 10; } console.log(a1); // underfined console.log(a2); // 10 console.log(b1); // underfined console.log(b2); // function } m(); function n() { if(2>1) { arr = 10; brr = 10; let arr; var brr; console.log(arr); console.log(brr); } } n(); // ReferenceError
À ce stade, le navigateur se prépare uniquement à une analyse des paramètres var, fonction et fonction. Et dans ce processus de "pré-analyse", il existe une séquence de pré-analyse, c'est-à-dire les paramètres formels de la fonction -> De plus, lorsque le nom est le même, la fonction est réservée et la dernière écrase la première. Si le paramètre formel du résultat pré-analysé a une valeur, il sera analysé à la valeur. Sinon, il sera sous-défini. La fonction sera analysée dans l'ensemble du corps de la fonction et les variables seront sous-définies. dans cette question, nous n’en discuterons donc pas en premier. Par conséquent, lorsque cette question est "pré-analysée", le poids de la déclaration de fonction sera d'abord augmenté
4 Un problème d'algorithme
a un tableau trié, tel que. [ 1,4,6,9,11,15,18], donnez-vous un nouveau numéro, insérez-le dans le tableau et écrivez une fonction
Il peut être compris littéralement La limitation des fonctions est utilisée pour limiter les fonctions afin d'optimiser les performances dans une certaine mesure. Par exemple, les opérations DOM nécessitent plus de mémoire et de temps CPU que les interactions non-DOM. Tenter d'effectuer successivement trop d'opérations liées au DOM peut provoquer le blocage du navigateur et parfois même un crash. Cela est particulièrement susceptible de se produire lors de l'utilisation du gestionnaire d'événements onresize dans IE. Lorsque le navigateur est redimensionné, l'événement sera déclenché en continu. Si vous essayez d'effectuer des opérations DOM dans le gestionnaire d'événements onresize, sa fréquence élevée de modifications peut faire planter le navigateur. Pour un autre exemple, pour une fonction de recherche courante, nous lions généralement l'événement keyup et effectuons une recherche à chaque fois que vous appuyez sur le clavier. Mais notre objectif est principalement de rechercher chaque fois que nous saisissons un contenu. Afin de résoudre ces problèmes, vous pouvez utiliser des minuteries pour limiter les fonctions.
Certains codes ne peuvent pas être exécutés de manière continue et répétée sans interruption. La première fois que la fonction est appelée, un minuteur est créé pour exécuter le code après un intervalle spécifié. Lorsque la fonction est appelée une deuxième fois, elle efface la minuterie précédente et en définit une autre. Si le timer précédent a déjà été exécuté, cette opération n'a aucun sens. Cependant, si le timer précédent n’a pas encore été exécuté, il est remplacé par un nouveau timer. Le but est d'exécuter la fonction uniquement après que la demande d'exécution ait été arrêtée pendant un certain temps.
http://www.cnblogs.com/LuckyW...
La capture d'événement est au stade cible. L'événement bouillonne
1. économisez beaucoup d'utilisation de la mémoire, réduisez l'enregistrement des événements. Par exemple, il est très utile de proxyer tous les événements de clic de li sur ul.
2. On peut se rendre compte que lorsqu'un nouveau sous-objet est ajouté, il n'est pas nécessaire de le lier par événement, ce qui est particulièrement adapté aux parties de contenu dynamiques
Communs. les applications des proxys d'événements doivent être limitées à. Pour les exigences ci-dessus, si tous les événements sont utilisés comme agents d'événements, une erreur d'évaluation des événements peut se produire. Autrement dit, les événements qui ne devraient pas être déclenchés sont liés à des événements.
Définition : La mise en cache du navigateur consiste à accélérer la navigation. Le navigateur stocke les documents récemment demandés sur le disque de l'utilisateur. Lorsque le visiteur demande à nouveau cette page, le navigateur peut la récupérer à partir des documents affichés. le disque local, accélérant ainsi l'affichage des pages.
Fonction du cache :
1. Réduisez la latence, rendez votre site Web plus rapide et améliorez l'expérience utilisateur.
2. Évitez la congestion du réseau, réduisez le volume des requêtes et réduisez la bande passante de sortie.
Cache-Control中的max-age是实现内容cache的主要手段,共有3种常用策略:max-age和Last-Modified(If-Modified-Since)的组合、仅max-age、max-age和ETag的组合。
对于强制缓存,服务器通知浏览器一个缓存时间,在缓存时间内,下次请求,直接用缓存,不在时间内,执行比较缓存策略。
对于比较缓存,将缓存信息中的Etag和Last-Modified通过请求发送给服务器,由服务器校验,返回304状态码时,浏览器直接使用缓存。
// 有一个构造函数A,写一个函数B,继承A function A (num) { this.titileName = num; } A.prototype = { fn1: function () {}, fn2: function () {} }
这个问题的关注点是B继承的A的静态属性,同时B的原型链中不存在A实例的titleName属性
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操作次数,性能会有较大提升
1.基本数据类型(自身不可拆分的):Undefined、Null、Boolean、Number、String
2.引用数据类型(对象):Object (Array,Date,RegExp,Function)
ES6基本数据类型多了个symbol 据说这道题刷了百分之二十的人 感谢Abbyshen提出
function gettype(nm){ return Object.prototype.toString.call(nm); }
1.行内样式 1000
2.id 0100
3.类选择器、伪类选择器、属性选择器[type="text"] 0010
4.标签选择器、伪元素选择器(::first-line) 0001
5.通配符*、子选择器、相邻选择器 0000
首先传输对象的双向数据绑定 Object.defineProperty(target, key, decription),在decription中设置get和set属性(此时应注意description中get和set不能与描述属性共存)
数组的实现与对象不同。
同时运用观察者模式实现wather,用户数据和view视图的更新
1 component层面,web component和virtual dom
2 数据绑定(vue双向,react的单向)等好多
3 计算属性 vue 有,提供方便;而 react 不行
4 vue 可以 watch 一个数据项;而 react 不行
5 vue 由于提供的 direct 特别是预置的 directive 因为场景场景开发更容易;react 没有
6 生命周期函数名太长 directive
git stash //将本次修改存到暂存区(紧急切换分支时)git stash pop //将所有暂存区的内容取出来
静态、自适应、流式、响应式四种网页布局
静态布局:意思就是不管浏览器尺寸具体是多少,网页布局就按照当时写代码的布局来布置;
自适应布局:就是说你看到的页面,里面元素的位置会变化而大小不会变化;
流式布局:你看到的页面,元素的大小会变化而位置不会变化——这就导致如果屏幕太大或者太小都会导致元素无法正常显示。
自适应布局:每个屏幕分辨率下面会有一个布局样式,同时位置会变而且大小也会变。
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
var R = (function() { var u = {a:1,b:2}; var r = { fn: function(k) { return u[k]; } } return r; }()); R.fn('a'); // 1
上述代码中如何获取匿名函数中的u
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 < str.length - 2) { start += ',' } return start; });return str.split(',');// 方法五(函数式变成,参考网络)function reduce(arr, val) { if(Object.prototype.toString.apply(val)){ return; } if(val >= 100) { return arr; } arr.push(val); return reduce(arr, val+1); }var res = reduce([], 0)
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
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,父级元素也可以为例
回答: 错误
在同源策略下;在某个服务器下的页面是无法获取到该服务器以外的数据的;Jquery中ajax 的核心是通过 XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加