Front end interview dictionary 01 (continuously updated)

Write in front

CSDN topic challenge phase 1

  • Event details address: CSDN

  • Entry topic: front end interview collection

  • Topic Description: welcome to join the topic creation partners. If I guess correctly, I think you should be a front-end person like me. Nowadays, the front-end accounts for an increasingly important proportion in the IT industry and has become an indispensable part. Front-end technologies are emerging one after another, and various technical categories and technical frameworks are also swarming out. The difficulty of front-end interview also increases. If we have a set of front-end interview dictionary. If you are a candidate: you can calmly solo interviewer, if you are an interviewer: you can torture the candidate to the bone!
    In short, we all gather our interview experience and learned knowledge here to form a set of front-end interview Dictionary of the system. Let readers have a great harvest whether in interview or study. Let's build a front-end interview dictionary hand in hand!!!

Talk about several methods of judging data types in JavaScript

typeof

typeof is generally used to judge the basic data type. Except that judging null will output "object", others are correct
When typeof judges the reference data type, except that the judgment function will output "function", others will output "object"


instanceof

Instanceof can accurately judge the reference data type. Its principle is to detect whether the prototype attribute of the constructor is on the prototype chain of an instance object, and cannot judge the basic data type

// Implementation of instanceof
function instanceofOper(left, right) {
  const prototype = right.prototype;
  while (left) {
    if ((left = left.__proto__) === prototype) {
      return true;
    }
  }
  return false;
}
// let obj  = {}
// Object.getPrototypeOf(obj) === obj.__proto__ ==> true
// Implement instanceof 2
function myInstanceof(left, right) {
  // Here, use typeof to judge the basic data type. If yes, return false directly
  if (typeof left !== "object" || left === null) return false;
  // getProtypeOf is the API of the Object object itself, which can get the prototype Object of the parameter
  let proto = Object.getPrototypeOf(left);
  while (true) {
    if (proto === null) return false;
    if (proto === right.prototype) return true; //Find the same prototype object and return true
    proto = Object.getPrototypeof(proto);
  }
}

Object.prototype.toString.call() returns [object Xxxx]

Deep copy and shallow copy

let obj = { b: "xxx" };
let arr = [{ a: "ss" }, obj, 333];

// assignment
let arr2 = arr;
// Shallow copy - only one layer is copied, and deep references still exist
// Object.assign(), ... Extension operator, slice, etc
let arr2 = arr.slice();
let arr2 = [...arr];
obj.b = "222"; // arr2[1].b => 222
// arr[2] = 4444 ==> arr2[2] ===> 333

// Deep copy
// 1. The simplest is JSON Stringify, but there is a problem with this. See the instructions below
let arr2 = JSON.parse(JSON.stringify(arr));

// 2. Self encapsulation and recursive processing

Realize deep copy - simple version

export function deepClone(obj, map = new Map()) {
  if (!obj && typeof obj !== "object") return obj;
  if (obj instanceof Date) return new Date(obj);
  if (obj instanceof RegExp) return new RegExp(obj.source, obj.flags);

  if (map.get(obj)) {
    //  If there is a circular reference, this object is returned
    return map.get(obj);
  }

  const cloneObj = obj.constructor(); // The of the array is [], and the object is {}

  map.set(obj, cloneObj); // Cache object for circular reference

  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      cloneObj[key] = deepClone(obj[key], map);
    }
  }

  return cloneObj;
}

 

Write at the end

CSDN topic challenge phase 1

  • Event details address: CSDN

Tags: Java Front-end Interview

Posted by Crashin on Sat, 14 May 2022 23:20:58 +0300