Sharing of JS interview question records in 2017 and 2018
This article brings you the sharing of JS interview question records in 2017 and 2018. Interested friends can take a look
##2017 interview Share (js interview question record) 1. The simplest questionRecommended related articles:The most complete collection of js interview questions in 2020 (latest)
'11' * 2
'a8' * 3
var a = 2, b = 3; var c = a+++b; // c = 5
Copy after login
2. A question about this '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 这个点没有太理解,虽然答对了
Copy after login
3. Pre-parsing problem of var and function, As well as the issue of the order of variables and functionsvar 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
Copy after login
At this stage, the browser only performs a preparatory process for parsing var, function, and function parameters. And in this "pre-parsing" process, there is a pre-parsing sequence, that is, the formal parameters of the function -> function -> var. Moreover, when the name is the same, the function is reserved and the later one overwrites the former one. If the pre-parsed result formal parameter has a value, it will be parsed to the value. If not, it will be underfined. The function will be parsed to the entire function body, and the variables will be underfined. There are no parameters in this question, so we will not discuss it first. Therefore, when this question is "pre-parsed", the function declaration weight will be increased first
// 以下代码执行输出结果是什么 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
4. An algorithm problem
There is a sorted array, such as [ 1,4,6,9,11,15,18], give you a new number, insert it into the array, and write a function5. What is function throttling and what are its advantages (I have never understood this concept before, so I am confused)
The purpose of function throttling
It can be understood literally. Function throttling is used to throttle functions to optimize performance to a certain extent. For example, DOM operations require more memory and CPU time than non-DOM interactions. Attempting to perform too many DOM-related operations in succession can cause the browser to hang and sometimes even crash. This is especially likely to happen when using the onresize event handler in IE. When the browser is resized, the event will be triggered continuously. If you try to perform DOM operations inside the onresize event handler, its high frequency of changes may crash the browser. For another example, for our common search function, we usually bind the keyup event and search every time the keyboard is pressed. But our purpose is mainly to search every time we enter some content. In order to solve these problems, you can use timers to throttle functions.
Principle of function throttling
Some codes cannot be executed continuously and repeatedly without interruption. The first time the function is called, a timer is created to run code after a specified interval. When the function is called a second time, it clears the previous timer and sets another one. If the previous timer has already been executed, this operation has no meaning. However, if the previous timer has not yet been executed, it is actually replaced with a new timer. The purpose is to execute the function only after the request to execute it has been stopped for some time.
http://www.cnblogs.com/LuckyW...
6. Write a method to pass in two parameters (parentNode, childNode), requiring that if childNode is a descendant node of parentNode, Then it returns true, otherwise it returns false
7. What is the principle of DOM event flow, and what are the stages it is divided into?
Event capture in target stage event bubbling
8. What is the principle of DOM event delegation, what are its advantages and disadvantages
Principle of event delegation: event bubbling mechanism
Advantages
1. It can save a lot of memory usage, Reduce event registration. For example, it is very good to proxy all click events of li on ul.
2. It can be realized that when a new sub-object is added, there is no need to event bind it, which is especially suitable for dynamic content.
Disadvantages
The common applications of event proxies should be limited to For the above requirements, if all events are used as event agents, event misjudgment may occur. That is, events that should not be triggered are bound to events.
9. HTTP cache mechanism, and how to implement from cache in 200 status (indicating that the most contacted is 304 from cache) (used for optimization, have not been exposed to it, need to understand)
Meaning
Definition: Browser caching (Browser Caching) is to speed up browsing. The browser stores recently requested documents on the user's disk. When the visitor requests this page again, the browser can retrieve it from Documents are displayed on local disk, thus speeding up page viewing.
Function
The function of cache:
1. Reduce latency, make your website faster and improve user experience.
2. Avoid network congestion, reduce request volume, and reduce output bandwidth.
实现手段
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 < 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)
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的核心则是动态添加

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.

WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology

Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order

How to use WebSocket and JavaScript to implement an online reservation system. In today's digital era, more and more businesses and services need to provide online reservation functions. It is crucial to implement an efficient and real-time online reservation system. This article will introduce how to use WebSocket and JavaScript to implement an online reservation system, and provide specific code examples. 1. What is WebSocket? WebSocket is a full-duplex method on a single TCP connection.

JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We

JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest

Usage: In JavaScript, the insertBefore() method is used to insert a new node in the DOM tree. This method requires two parameters: the new node to be inserted and the reference node (that is, the node where the new node will be inserted).

The Go framework is a set of components that extend Go's built-in libraries, providing pre-built functionality (such as web development and database operations). Popular Go frameworks include Gin (web development), GORM (database operations), and RESTful (API management). Middleware is an interceptor pattern in the HTTP request processing chain and is used to add functionality such as authentication or request logging without modifying the handler. Session management maintains session status by storing user data. You can use gorilla/sessions to manage sessions.
