1. How to implement a deep copy of an object?

Parse (json.stringify (obj)); parse(json.stringify (obj));
var obj = {
    name: 'zhangsan'.age: 12
}
var obj1 = JSON.parse(JSON.stringify(obj));
obj1.name = 'lisi';
console.log(obj1, obj);  //{ name: 'lisi', age: 12 } { name: 'zhangsan', age: 12 }

// Method 2: cloneDeep for loDash
var _ = require('lodash');
var obj = {
  name:'zhangsan'.age: 18
}
// Use cloneDeep
var obj2 = _.cloneDeep(obj);
obj2.name = 'hhh';
obj2.age = 20;
console.log(obj);    // { name: 'zhangsan', age: 18 }
console.log(obj2);   // { name: 'hhh', age: 20 }
Copy the code

2. Sum 1 to 100 recursively

function sum(n) {
    if (n == 1) {
        return 1
    } else {
        return n + sum(n - 1)}}var result = sum(100);/ / 5050
console.log(result)
Copy the code

What is a closure? How do I fix memory leaks from closures?

A closure is a function that has access to variables in the scope of another function. Closures are created by creating another function inside a function. Protects variables from being reclaimed by the memory reclamation mechanism to prevent global variables from being contaminated.Copy the code
function foo() {
    var i = 0;
    return function () {    // This is a closure function
        console.log(i++);   // Variables are not collected by the memory reclamation mechanism}}var f1 = foo();
f1();     //  0
f1();     //  1
f1();     //  2
// Closures take up memory for a long time and consume a lot of memory, which may lead to memory leaks
function foo(){
    var i=0;
      return  function(){    // This is a closure function
          console.log(i++);   // Variables are not collected by the memory reclamation mechanism
          i=null;   // Free memory}}var f1=foo();   
  f1();     //  0
  f1();     //  0
  f1();     //  0
Copy the code

4. Describe the HTTP packet format

HTTP is a hypertext transfer protocol, which is often used in BS architecture to specify the protocol for data transmission over the network. HTTP packets are classified into two types: request packets and response packets. The request message is the signal sent by the client to the server, and the response message is the signal returned by the server to the client. Request message: browser front end will be encapsulated into a request message sent to the back-end, request message contained in the lines, request headers, request body response message: the server receives the request message from the front end will response content encapsulated into a response message, the browser will the response message parsing, and displayed. The response message contains the response line, response header, and response bodyCopy the code

5. List at least five sub-properties of the animation and explain their meanings

Animation-name specifies the name of the keyframe to bind to the selector, telling the system which animation to execute animation-duration specifies how many seconds or milliseconds the animation will take to complete. Animation-timing -function Sets how the animation will complete a cycle, and tells the animation speed. Animation-delay sets the animation delay before starting. Animation-rotund-count defines the number of times an animation is played. Tells the system how many times the animation needs to be executed and animation-direction specifies whether the animation should take turns playing backwards. Animation-fill-mode specifies the style to be applied to the element when the animation does not play (when the animation is complete, or when the animation has a delay before it starts playing). Animation-play-state tells the system whether the animation needs to be pausedCopy the code

6. Types and main differences of box models?

Border-box /IE box/weird box border-box /W3C box/Default box Content-box Difference: The calculation method is different. For the border box, the width is set to include border, padding, and content. For the content box, the width is set to refer to content onlyCopy the code

7. Count the number of characters that occur once in a string. For example, enter Hello and output 2

function count(str,char){
    var pat=new RegExp(char,'gm');
    var res=str.match(pat);
    console.log(res);
    return res.length;
  }
console.log(count('hello'.'l'));  //[ 'l', 'l' ] 2
Copy the code

8. Write the code implementation flattened array output, such as: input [[1, 2, 3, [4 and 6, [7, 8]]], [9], [11, 12, [13]], 5] output for,2,3,4,5,6,7,8,9,10,11,12,13,5 [1]

function mout(arr) {
    var brr = arr.toString().split(', ').map(function (item) {
        return Number(item);
    })
    return brr;
}
var arr = [[1.2.3[4.5.6[7.8]]], [9.10], [11.12[13]], 5];
console.log(mout(arr));  //[ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 5 ]
Copy the code

9. Sort the array using any sort algorithm, for example: input [3,2,1,6,12,8,9] output [1,2,3,6,8,9,12]

// The first method
var arr=[3.2.1.6.12.8.9];var result=arr.sort(function(a,b){
  return a-b;
})
console.log(result)  //[1, 2, 3, 6, 8, 9, 12]
// The second method
var arr = [3.2.1.6.12.8.9];
var result = arr.sort(function (a, b) {
    if (a > b) {
        return 1;
    } else {
        return -1; }})console.log(result);  //[1, 2, 3, 6, 8, 9, 12]
// The third way
var arr = [3.2.1.6.12.8.9];
function bubbleSort(arr) {
    var len = arr.length;
    // Control the number of loops
    for (var i = 0; i < len - 1; i++) {
        // The inner layer controls the number of cycles per trip
        for (var j = 0; j < len - 1 - i; j++) {
            // Compare adjacent elements in pairs, swap elements, swap large elements behind
            if (arr[j] > arr[j + 1]) {
                var temp = arr[j];
                arr[j] = arr[j + 1];
                arr[j + 1] = temp; }}}return arr;
}
bubbleSort(arr);
console.log(arr);  //[1, 2, 3, 6, 8, 9, 12]
Copy the code

10. Explain the relationship between PX, EM, and REM

Px is a unit of length, representing a pixel point em is a unit of relative length, representing the font size on the current element rem is a unit of relative length, representing the font size declared on the root (HTML) elementCopy the code