Select front-end basic questions, the confidence of the interview comes from a good foundation (including the answer)

preface

As the saying goes: a journey of a thousand miles begins with a single step. The building can be built as high as the foundation. Several big factory front pen test questions, their topics are quite good.

Selected a few, also welcome everyone to try, really check, really master.

Welcome to like the collection

From Bilibili

1. What is the output of the following code?

var a = {};
var b = { key: 'b' }; var c = { key: 'c' }
a[b] = 'b';
a[c] = 'c';
console.log(a[b]);
Copy the code

Options:

• {key: 'b'}
• {key: 'c'}
• b
• c

A [b] is equal to a[b.tostring ()] is equal to a['[object Object]'A [c] = a[c] = a[c. tostring ()] = a['[object Object]']
Copy the code

2. What are the following run outputs?

['10'.'10'.'10'.'10'.'10'].map(parseInt);
Copy the code

• [NaN, NaN, NaN, NaN]
• [10, 10, 10, 10, 10]
• [NaN, 2, 3, 4, 5]
• [10, NaN, 2, 3, 4]

map('10'.0)
map('10'.1)
map('10'.2)
// parseInt two arguments
// 1: To whom parseInt?
// 2: What base is this number in? The base is between 2 and 36

parseInt('10'.0) 10  // 0 will be converted to base 10
parseInt('10'.1) NaN
parseInt('10'.2) 2(2 ^ 0 + 2 ^ 1)
parseInt('10'.3) 3^0 + 3^1
parseInt('10'.4) 4^0 + 4^1
Copy the code

3. What is the output of the following code?

var age = 100;
let years = 6;
if (age > 12) {
  let age = 10;
  var years = age * 3;
}
console.log(`${years} years`)
Copy the code

• 6
• 30
• Uncaught SyntaxError: Identifier ‘age’ has already been declared
• Uncaught SyntaxError: Identifier ‘years’ has already been declared

if (age > 12) {
  let age = 10;
  var years = age * 3;
}
Copy the code

4. What is wrong with the cross-domain statement?

• Cookies, LocalStorage, and IndexedDB are all restricted by the same origin policy
• PostMessage, JSONP, and WebSocket are all common cross-domain solutions
• The cross-domain resource sharing specification specifies that for HTTP requests other than GET, or with some POST requests of type MINE, the browser must first issue an OPTIONS request
• www.bilibili.com and HTTPS://www.bilibili.com is the same domain name and belongs to the same source

5. What is correct about Canvas and SVG?

• Canvas supports event handlers
• Canvas does not depend on resolution, and scaling does not distort
• SVG does not depend on resolution, and scaling does not distort
• SVG is suitable for graphics-intensive games

6. What is true about DOMContentLoaded and load?

• The DOMContentLoaded event executes earlier than the Load event
• The Load event executes earlier than the DOMContentLoaded event
• Execute from top to bottom by listening code
• The LOAD event is executed after the DOM document is fully loaded

7. What is the output of the following code?

[1 < 2 < 3.3 < 2 < 1]
Copy the code

• [true, true]
• [true, false]
• [false, true]
• [false, false]

8. What is the output of the following code?

function setname(name){
 this.name = name
}
setname.prototype.printName = function(){ console.log(this.name) }
let a = new setname("cc")
a.name = "dd"
a.__proto__.name = "ee"

a.__proto__.printName()  // ?
a.printName() // ?
Copy the code

• ee dd
• cc dd
• ee cc
• ee Error

9. What is the output of the following code?

- 1 >>> 32
Copy the code

10. There are n steps, and each step can take one or two steps. How many ways are there

11. Matching parentheses

Check whether the string consisting of six parentheses “()[]{}” is valid

1. All parentheses must be closed
2. The left parenthesis must be closed in the correct position

12. Flip linked lists in groups of K

You are given a linked list, each k nodes in a group of flipped, please return to the flipped list. If the total number of nodes is not an integer multiple of k, keep the last remaining nodes in the same order.

Example: given the linked list: 1 – > 2 – > 3 – > when k = 2, 4 – > 5, should return: 4 – > 2 – > 1 – > 3 – > 5 when k = 3, should return: 3 – > 2 – > 1 – > 4 – > 5

From ali

13. The following statements are incorrect:

• In Blink and WebKit browsers, an element with a CSS property of 3D or Perspective Transform causes the browser to create a separate layer.
• We would normally use the left and top attributes to change the position of an element, but left and top trigger a relayout. A better option is to use Translate instead, which does not trigger a relayout.
• For smooth animation performance on mobile, 3D hardware acceleration should be used, so it’s best to add translate3D or translateZ(0) to elements on the page as much as possible to trigger 3D hardware acceleration.
• When addressing performance issues with browser rendering, the primary goal is to avoid redrawing and rearranging layers.

14. Add the following styles to node #box: what is the top distance between node #box and body?

• If you set position to static; Then the top distance is? px // 20
• If you set position: relative; Then the top distance is? px
• If position is set to absolute; Then the top distance is? px
• If set position: sticky; If I scroll, the top distance is? px

  <body style="Margin: 0; Padding: 0">
   <div id="Box" style="Top: 10 px; margin:20px 10px;" >
   </div>
  </body>
  Copy the code

15. We need to dynamically load a JavaScript resource, but we don’t know how to handle it. We need your help to complete this work.

var script = documentThe createElement method (" script ");var head = documentThe getElementsByTagName (" head ") [0]; Script. Type = "text/javascript"; Script. The SRC ="/ / i.alicdn.com/resource.js ";
// Bind resource loading success event
script.onLoad = function( ){
// Check whether the resource loading status is successful or complete
};

// Failed to load the binding resource
script.onError = function( ) {....};// If inserted into the page, the request will be made according to the SRC attribute.
head.insertBefore (script , head.firstChild)
Copy the code

16. HTTP2 protocol has gradually become popular in the daily server, the following description of the HTTP2 protocol is correct:

• All HTTP requests are based on a TCP request, which is multiplexed
• Requests can be prioritized
• server push
• Thus reducing traffic transmission

17. Regular expressions/a+(bab)? (caac)*/Which of the following options is a subset of the regular expression?

• /(bab)(caca)/ // babcaca
• /a(bab){2}(caac)*/
• /a{2}/ //
• / a + (bab) {0, 1} + (ca)/(ca)
• /a(^bab)+(caac){1,}/
• /a+(babc){2,}(acc){1,}/

Check the parsing

Regular expression /a+(bab)? (CAAC) * / said.

Options:

• 1: matches babcaca
• 2: Can appear 0 times inconsistent with a
• 3: Correct: A 1 / many times, BAB 1 /0 times, CAAC 0 / many times

Answer: C

From Xiaomi autumn 2019

18. There is a set of data “12,15,1,18,2,35,30,11”, sorted from small to large by selection method, and the data sequence after the second data exchange is ().

19. Which of the following sorting algorithms is not stable ()

• merge
• The bubbling
• insert
• Quick sort

20. Design a function that passes in a serializable tree string and outputs an array of nodes with multiple child nodes.

Input description:

{ node: 'root'.next: [{node: 'second_root' }, { node: 'second_child'.next: [{ node: 'second_child_1'.next: { node: 'second_child_1_1'}}, {node: 'second_child_2'}]}, {node: 'third_root'.next: { node: 'third_child' , next: [{ node: 'third_child_1'.next: { node: 'third_child_1_1'}}, {node: 'third_child_2'}]}}Copy the code

Output:

["root"."second_child"."third_child"]
Copy the code

const readline = require('readline');
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout
})
let list = [];
function solution(obj) {
  if (obj.next) {
    if(! (obj.next.length)) { solution(obj.next) }else {
      list.push(obj.node);
      for (var i = 0; i < obj.next.length; i++) {
        solution(obj.next[i]);
      }
    }
  }
}
rl.on('line', (line) => {
  console.log(line);
  const obj = eval(`o = ${line}`);
  solution(obj);
  console.log(JSON.stringify(list))
  rl.close();
})
Copy the code

21. Design a function that takes two parameters, the first is an array of integers, the second is a benchmark, and takes any value in the array that matches the sum of the subscripts of two numbers added to the benchmark

Pass in a string (as shown in the following example), escape it as an array, remove the last digit of the array as the benchmark, take the subscripts of any two matching numbers in the array and add them to the benchmark, and print the sum of all matching subscripts.

Here’s the explanation:

Value:0.1.5.11.17.16.2.5.10.30.12Index:1 3  6  8
Copy the code

The output is 18

const readline = require('readline');
const rl = readline.createInterface({
    input:process.stdin,
    output:process.stdout
})
function solution(input){
    var arr = input.split(",");
    var arrInt = arr.map(e= > parseInt(e));
    var result = 0;
    var temp = arrInt.pop();
    for(let i=0; i<arrInt.length- 1; i++){for(let j=i+1; j<arrInt.length; j++){
            if(arrInt[i] + arrInt[j] == temp){
              // arrTemp.push(i,j);result += (i + j); }}}return result;
}
rl.on('line',(line) => {
    console.log(solution(line));
    rl.close();
})
Copy the code

22. The page access sequence of a process is 1, 3, 2, 4, 2, 3, 1, 2, and the system allocates 3 physical pages at most. LRU algorithm is adopted.

• 3
• 4
• 5
• 6

23. If the single linked list of length N is linked after the single linked list of length M, the time complexity of the algorithm can be expressed in the form of big O, which should be ().

• O(1)
• O(n)
• O(m)
• O(n+m)

conclusion

I also recorded a video on the above topics, preparing for the interview can pay attention to:

Bi li bi li 2020 campus recruitment front written paper (a) : www.bilibili.com/video/av834…

Bi li bi li 2020 campus recruiting technical pen examination paper (2) : www.bilibili.com/video/av834…

Millet in the autumn of 2019 for front-end development pen questions (B) : www.bilibili.com/video/av834…

Alibaba in the autumn of 2017 recruit front-end pen questions (last) : www.bilibili.com/video/av834…

If you like my article, you can follow my wechat official account.