🍪 front-end written series | millet 2020 school recruit front-end engineer pen test

🔥 Hi, I am. Here is the front end of the written test series, in addition to not regularly updated front end of the growth route notes & blog, welcome to follow ah vuo grow together. Your support means a lot to me!

Regular expressions

(Indefinite option) Which of the following re matches the string “b”?

A. /^b$/

B. /^b\b/

C. /(^|)b/

D. /[\b]*b/

STR / ^ b $/ matching start and end STR in the middle of the b, that is only a b character ` / ^ and word beginning with a matching STR \ b/b in the end only b/(^) | b/brackets said at the beginning or the null as a whole, followed by a b, which is a separate b / [/ b]The *b/ square bracket represents a backspace, but with *It means 0 or n backspaces, so just ignore it. A, b, C, DCopy the code

Regular expression is really learned once forgotten once, mainly or their own rarely use this 😅 can refer to the link: front-end form validation commonly used 15 JS regular expression

Test point 2: Event capture, event bubble

(Directional selection) What is the result of the following front-end code?

<div id="box1">
  <div id="box2">
    content
  </div>
</div>
<script>
const$=document.querySelector.bind(document);
const box1 = $('#box1');
const box2 = $('#box2');
box1.addEventListener('click'.() = > {
  console.log('box1 true');
}, true);
box1.addEventListener('click'.() = > {
  console.log('box1 false');
}, false);
box2.addEventListener('click'.() = > {
  console.log('box2 true');
}, true);
box2.addEventListener('click'.() = > {
  console.log('box2 false');
}, false);
</script>
Copy the code

A. box1 true, box2 true, box2 false, box1 false

B. box1 true, box2 false, box1 false, box2 true

C. box2 false, box2 true, box1 false, box1 ture

D. box1 true, box1 false, box2 true, box2 false

The addEventListener's third arguments, true and false, represent the "capture phase" and "bubble phase," respectively. For box1 containing Box2, click on the contents of Box2:1.Triggers the capture phase of Box11.Triggers the capture phase of Box21.Triggers the bubble phase of Box21.Trigger the bubble phase of Box1Copy the code

The event and the third parameter of addEventListener. Reference links: MDN – EventTarget. AddEventListener () method

Test point three, Web API- storage knowledge

Is the following description about localStorage and cookie correct?

A. When communicating with the server, localStorage is carried in the HTTP request header

B. Cookies are limited in size and can only be generated in the browser

C. In modern browsers, cookies can be carried in the header of a cross-domain request

D. After localStorage is set, it takes effect permanently unless it is cleared

LocalStorage only in the client storage, does not participate in the server communication cookie storage size, cookies are generally generated by the server, the maximum size of 4KB, localStorage also has a storage size, LocalStorage data is stored permanently unless deleted by code or manually. SessionStorage data only exists in the current session and is cleared when the browser closesCopy the code

This Web API – storage of knowledge, there are three main, cookie, localStorage and sessionStorage link for reference: cookies, localStorage and sessionStorage difference and using method

The addition operator

What is the result of the following Javascript code?

console.log(‘5’ + 3, 5 + ‘3’)

A. 8 8

B. 53 8

C. 53 53

D. 8 53

The addition operator is used to sum two numbers. If one of the operands is a string, the following rules apply:-If both operands are strings, concatenate the second string after the first.-If one of the operands is a string, convert the other to a string, and concatenate the two strings together. CCopy the code

Test point 5, CSS base – Margin and padding

After setting the following CSS code, what is the right margin?

padding: 5px 10px 15px 20px;

margin: 2px 4px 6px;

A. 6px

B. 10px

C. 20px

D. 4px

Margin and padding: The top, right, bottom, and left parameters correspond to this parameter. Margin and padding: The top, right, bottom, and left parameters correspond to this parameter. Margin and padding: the first parameter, the second parameter, the third parameter, the left parameter, the third parameterCopy the code

W3school-margin w3school-margin w3school-margin

Test point six, CSS foundation – hidden elements of several ways and differences

(Non-directional selection) What is the correct description of display: None, visibility:hidden, and opacity:0 in the CSS?

A. All three hide corresponding elements

Elements corresponding to display:none also take up space in the document flow

C. The event listener of the element corresponding to opacity:0 will also be triggered

D. visbility: The corresponding elements of hidden will not occupy space in the document flow

Display :none The corresponding element does not occupy space in the document stream. Visibility :hidden The element is hidden, but the corresponding element occupies space in the document streamCopy the code

W3school-display and visibility attribute w3school-display and visibility comparison example

Test point seven, CSS foundation -CSS combinator

(directional selection) Which of the following selectors matches the next sibling p element adjacent to the div?

A. div p

B. div > p

C. div + p

D. div ~ p

A combinator is some mechanism for interpreting the relationship between selectors. CSS selectors can contain multiple simple selectors. Between simple selectors, we can include a combinator. There are four types of combinators:-Descendant selector (space)-Subselector (>)-Adjacent sibling selector (+)-Universal sibling selectors (~) Adjacent sibling selectors and universal sibling selectors are explained here adjacent sibling selectors match all elements that are adjacent siblings of the specified element. Sibling (sibling) elements must have the same parent, and "adjacent" means "immediately after". The Universal sibling selector matches all elements that belong to the sibling of the specified element. CCopy the code

Test point eight, front-end engineering

(Non-directional selection) Which of the following tools can be used to package build front-end projects?

A. gulp

B. grunt

C. webpack

D. rollup

Six common front-end build tools: NPM Script, grunt, gulp, FIS3, Webpack, Rollup (focusing on ES6)! Compared with WebPack, Vite has the following advantages: 1) fast cold start; 2) instant hot update of modules; 3) true on-demand compilation. I have built projects using Vite, which is really fast. The speed at which Vite starts its service is like A rocket 🤣Copy the code

Refer to: gulp official website grunt official website Webpack official website Roolup official website Vite official website

Data structure – queue

(Directional selection) Which of the following data structures follows the FIFO principle?

A. stack

B. the queue

C. Maximum priority queue

D. Minimum priority queue

A. First In First Out B. First In First Out C. First In First Out D. First OutCopy the code

Test point ten, data structure – binary tree foundation

(directional selection) A full binary tree has 1000 nodes, then what is the number of nodes in the longest path from the root node to the deepest node?

A. 9

B. 10

C. 11

D. 12

The total number of complete binary tree nodes (2^n)-1,n represents the depth, for example,n =2 represents a total of 2 layers and 2^10=1024,2^9=512 indicates that 10 layers are not full, so the maximum is 10 layers of binary tree base expansion: 1. The number of nodes at layer N is up to 2^n nodes 2. The number of nodes at layer N is up to 20+... +2n=2n+1-1 node 3. First non-leaf node: length/2 4. The child of a node is 2n, 2n+1Copy the code

11, data structure – binary tree traversal

(directional selection) Given that the fore-order traversal of a binary tree is CABEFDHG and the in-order traversal is BAFECHDG, then its back-order traversal is?

A. BFEACHDG

B. BFEAHGDC

C. BEFACHDG

D. BEFAHGDC

Prior order traversal: root-left-right middle order traversal: left-root-right posterior order traversal: left-right-root. Therefore, according to the analysis of the two given traversal results, the structure of binary tree is obtained as follows:              C
A B C C D D D ECopy the code

See the link: Three traversals of binary trees

Test point 12, search algorithm – binary search

(Directional selection) In the worst case, how many comparisons would it take to perform a binary search on a sorted array of 1000 distinct integers?

A. 1000

B. 10

C. 100

D. 500

2^10=1024,1000>2^9=512,1000>2^9=512,1000>2^9=512Copy the code

Reference links: animation: binary search (on) | the interviewer asked me how to quickly find a integer data in 100 million?

Test point thirteen, algorithm – sorting algorithm time complexity

(Directional selection) Which of the following sorting algorithms has the worst time complexity of O(n * log(n))?

A. Merge sort

B. Quicksort

C. Bubble sort

D. Insertion sort

ACopy the code

Reference link :JS implements various sorts

The time complexity of the code

What is the time complexity of the following code?

int i, j, k = 0;
for (i = n / 2; i <= n; i++) {
    for (j = 2; j <= n; j += j) {
        k = k + n / 2; }}Copy the code

A. O(n)

B. O(n*log(n))

C. O(n^2)

D. O(n^2*log(n))

for(i = n / 2; i <= n; I++) -------- from n/2 to n,i++, time complexity n for (j = 2; j <= n; J +=j)--------- starts at 2,j+=j, so (2; 2 + 4; 2 + 4 + 8) Multiply, time complexity log(n) loop nested :O(n)* log(n)Copy the code

See the link: Time complexity vs. space complexity

Test point 15, Linux

(Directional selection)Linux Cron service for?

A. Share files on the network

B. Manage the printing subsystem

C. Track management system information and errors

D. Manage the scheduling of daily tasks

A Cron scheduled task is a task that performs the planned work at an agreed time. In Linux, we often use the Cron server to do this. The Cron server can perform specific tasks based on the time agreed upon in the configuration file. DCopy the code

16, TCP, UDP and HTTP

(Directional selection) Which of the following is true about TCP/IP, UDP, HTTP?

A. UDP is for connectionless, unreliable datagram services

TCP is a connection-oriented, reliable byte stream service

C. HTTP is an application layer protocol

D. Three handshakes are required when a TCP connection is established and three waves are required when a TCP connection is disconnected

1.Application layer (HTTP, FTP, SMTP, Telnet, DNS, TFTP)1.Transport Layer (TCP, UDP)1.The layer (IP)1.Network interface layer (NETWORK interface protocol) UDP is equivalent to "broadcast", connectionless oriented TCP is equivalent to "handshake", connection-oriented TCP connection 3 handshake, disconnect 4 waveCopy the code

Refer to the link: TCP and UDP comparison

HTTP status code

(Directional selection) In THE HTTP protocol, the status code of the request for permanent redirection is?

A. 301

B. 302

C. 304

D. 401

301: permanent redirection 302: temporary redirection 304: resources have not changed 401: no access permissionCopy the code

HTTP status code extension:

Git operation command

How to restore git to the previous state?

A. git checkout —

B. git reset –hard HEAD^

C. git reset –soft HEAD^

D. git revert HEAD

Git reset HEAD --soft git reset HEAD --hard git reset HEAD --hard git revert revert revert revert git checkout branch name // checkout git revert HEAD // Undo the most recent commit. The Git revert command means to undo a commit. C) the code is rolled back, but the version is still forwardCopy the code

GIt operation, the basic knowledge of version management should be mastered, after all, the programmer’s work will touch these, pull code, commit code, this is every programmer’s essential skills. How do I use Git at work

Scope and Closure code analysis

What is the result of the following Javascript code?

var j = 0;
for (let i = 0; i < 2; i++, j++) {
  setTimeout(function() {
    console.log(i, j);
  }, 1000);
}
Copy the code

A. 0 0 , 1 1

B. 0 2, 1 2

C. 2 1, 2 2

D. 1 1, 1 1

SetTimeout (func,time) ¶ Let (func,time) is a block-level function, var (func,time) is a global function. The func function is added to the "execution queue", and when the main program is finished, the execution queue is run. In this case, the for loop will execute first and then execute console.log(I, j) based on time; Note: the var variable in the execution queue will continue the var value changed after the loop, which is 2; The let variable will beThe * * * * binding(B) to the closure function (FUNc in setTimeout)Copy the code

See the link: setTimeout in the for loop

Test point 20

What is the result of the following Javascript code?

var person = {
  age: 18.getAge: function() {
    return this.age; }};var getAge = person.getAge;
console.log(person.getAge(), getAge());
Copy the code

A. 18 18

B. 18 undefined

C. undefined 18

D. undefined undefined

Person. GetAget () 18 getAget (Copy the code

Call,apply,bind,bind,bind,bind,bind,bind

The last

⚽ If this article is helpful to you, please click like to collect oh ~ 🏀GitHub blog address: github.com/Awu1227. 🏉 I have other columns, welcome to read ~ 🎱Vue from give up to get Started 🏐 play with the Beauty of CSS 🎳 Easy JavaScript