This is the third company to be interviewed = =OK.

To be honest, handwritten code for a written test is really uncomfortable==, and I don't ask for my ideas and answers during the interview (what is the meaning of my written test). At the end of the interview, there are still three sentences of soul torture:

• What do you think is the advantage of being a front end yourself?
• What do you think is your most accomplished project?What is the most impressive item?

Say nothing more. Let's get to the point!

1. How to achieve horizontal and vertical centering for an element with fixed width but irregular height?

html document

<div class="parent">
    <div class="child"></div>
</div>

• flex implementation

.parent{
  display: flex;
  justify-content:center;
  align-items:center;
  height:100px;
  border: 1px solid red;
}
.child {
  width:  100px;
  border: 1px solid red;
}

• position implementation

Several common ways to write margin s
Default value: margin: 0;

1. margin: 10px; //Outside distance is all 10px
2. margin: 10px 20px; //Upper and lower outer margins 10px, left and right outer margins 20px
3. margin: 10px 20px 30px; //upper outer margin 10px, left and right outer margin 20px, lower margin 30px
4. margin: 10px 20px 30px 40px; //From left to right Outer Margin direction is up, right, down, left

.parent{
  height:100px;
  border: 1px solid red;
  position: relative;
}
.child {
  position: absolute;
  width: 100px;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
}

Here's a little question: Why set margin:auto; horizontal is centered, but vertical is not?Does not mean auto is an auto-computed property?

2. What do the following three pieces of code output?And when does it output what?

for (var i = 0; i < 5; i++) {
  setTimeout(function () {
    console.log(i)
  }, 1000 * i)
} 

for (let i = 0; i < 5; i++) {
  setTimeout(function () {
    console.log(i)
  }, 1000 * i)
} 

for (var i = 0; i < 5; i++) {
    (function (i) {
      setTimeout(function () {
        console.log(i)
      }, 1000 * i)
    })(i)
} 

Answer:

1. Output 5 in a very short period of time, followed by a 5 every second
   

// 5 5 5 5 5

1. Output 0 for a very short period of time, then add 1 every other second
   

// 0 1 2 3 4

1. Output 0 for a very short period of time, then add 1 every other second
   

// 0 1 2 3 4

Resolution:
1. First of all, understand the js'event cycle mechanism. After the for cycle ends, the macro task setTimeout does not arrive until the i value has changed to 5.
2.let i is block scoped, similar to

for (let i = 0; i < 5; i++) {
  let i = /* i in block scope */
  setTimeout(function () {
    console.log(i)
  }, 1000 * i)
}

So for each loop, the value of i is the value in the block scope
3. Execute the function immediately, creating your own scope, so each execution is a different i

3. What does this code output below?

var a = 1;
var obj = {
  a: 2,
  func1: () => {
    console.log(this.a);
  },
  func2: function () {
    console.log(this.a);
  }
}

var obj2 = { a: 3 };

console.log(obj.func1());
console.log(obj.func2());

obj.func2.apply(obj2);

var newFunc = obj.func2;

newFunc();

Answer:

var a = 1;
var obj = {
  a: 2,
  // Notice that the this of the arrow function points to an empty object when it is defined, not when it is executed, so the this of func1 points to an empty object
  func1: () => {
    console.log(this.a);
  },
  func2: function () {
    console.log(this.a);
  }
}

var obj2 = { a: 3 };

console.log(obj.func1()); // The function does not return a value. First, undefined is printed. Inside the body, the arrow function this points to undefined, so undefined is also printed.
console.log(obj.func2());// The function does not return a value. First, undefined is printed. Inside the body of the function is the normal anonymous function this pointing to obj, so it also prints 2

obj.func2.apply(obj2);
// Explicitly change the direction of this to obj2, so print 3

var newFunc = obj.func2;

newFunc();
// The func2 function is called in a global environment, where this points to the global variable window and prints 1

4. Implement a function: Enter an integer and find out how many 1 are in the binary representation of that integer?

My Answer:

// Decimal Conversion Binary--Divide by 2 Remainder
function toBinary(number) {
  let arr = []
  while (number > 0) {
    let a = number % 2
    number = (number - a) / 2
    arr.push(a)
  }
  return arr.reverse()
}
// Filter out arrays with 1
// One traversal time complexity is N
let a = toBinary(1223).filter(item=>item === 1)
console.log(a.length) // How many one numbers do you get

There are other solutions on the web, such as complements. mode

5. Implement a function: Given a string, find the character that occurs most often.

My Answer:

// Two cycles of violence, complexity n^2
function getMostChart(str) {
  let list = [...str]; // Split strings into arrays
  let noRepeatList = Array.from(new Set(list)) // Merge duplicate elements in an array
  let lengthList  = [] // Array of the number of times each item of the noRepeatList appears in the list
  noRepeatList.map(ele => {
    let count = 0;
    list.map(item => {
      if (ele === item) {
        count++
      }
    })
    lengthList.push(count) // [ 1, 1, 2, 1, 1 ]
  })
 let max = lengthList[0]
  // Get the maximum value and its subscript
  for (let i = 0; i < lengthList.length; i++) {
    let current = lengthList[i];
    current > max ? max = current : null
  }
  
  // Note that there may be more than one maxIndex here, and it is better to have a for loop to get the subscript for the maximum value
  let maxIndex = lengthList.findIndex(item => item === max)
  
  return noRepeatList[maxIndex]
}

getMostChart('choose') // o

My answer is not good enough and I may have overlooked more than one character
For example,'ccoo'

Using JSON features on the web, time complexity is only N's answer

6. Implementing a one-way chain table class requires support for add, delete and find operations

Answer

/**
* Define a Node Class
*/
class Node {
  constructor(val) {
    this.val = val; // nodal values
    this.next = null; // Node pointer, pointing to the next item
  }
}

/**
* Define a one-way chain table class
*/

class LinkedList {
  constructor() {
    this.headNode = new Node('head'); // Initialize a header node
  }
    
  // New Node
  insert(val) {
    let currentNode = this.headNode,
        lastNode = new Node(val);
    
    while(true) {
      if(currentNode.next == null) {
        break;
      } else {
        currentNode = currentNode.next;
      }
    }
    
    lastNode.next = currentNode.next;
    currentNode.next = lastNode;
  }
    
  
    
  // Delete an item from the list
  remove(val) {
    let currentNode = this.headNode;
    
    while(true) {
      if(currentNode.next.val == val) {
        break;
      } else {
        currentNode = currentNode.next;
      }
    }
    
    currentNode.next = currentNode.next.next;
  }
  
  // lookup
  search(val) {
    let currentNode = this.headNode;
    while (currentNode.next) {
          currentNode = currentNode.next;
          if (currentNode.val === val) {
            return currentNode
          }
        }
      }
  }
}


var nodes = new LinkedList();

nodes.insert('a');
nodes.insert('b');
nodes.insert('c');
console.log(nodes.search('c')); // Node { val: 'orange', next: null }

My answer is not necessarily correct and excellent. There may be inadequate parsing. Please leave a message to correct or add.