Javascript based

1. Raw data types, built-in objects

Primitive types store values, object types store addresses (Pointers)

Boolean, null, undefined, number, string, symbol

(2) Object types: Object, array, function

3. Understand Typeof and Instanceof

  • Typeof: is an instance of determining the typeof the argument and returns a string specifying the operand type.
    • Returned Value Result: “number”, “string”, “Boolean”, “object”, “function”, “undefined”
    • If the parameter is a reference type, “Object” is always returned. For Array and NULL, “Object” is always returned. Therefore, using Typeof to determine the parameter type has great limitations.
  • Instanceof: The prototype property used to determine whether an object has a constructor in its prototype chain
    • A instanceof b: determines whether a is an instanceof b, which can be used in an inheritance relationship
    • B is the parent object of c, a is an instanceof c, a instanceof b and a instanceof c are both true

2. Type conversion

There are only three types of conversion in JS:

  • Convert to Boolean :Boolean()

All of them are true except for the following six

  • undefined
  • null
  • 0
  • + 0
  • NaN
  • ‘(empty string)

  • Convert to Number: Number()

  • Convert to string

    • String() : This method can be used with any type of numbers, letters, variables, expressions
    • toString()

  • The addition operator differs from the other operators in that it has the following characteristics:

    • If one side of the operation is a string, the other side is also converted to a string
    • If one party is not a string or number, it is converted to a number or string

3. this

  • The default binding
    • For objects that are not explicitly called, this refers to the global object, the Window object
    • In strict mode (undefined)
  • Implicit binding
    • Call a method on an object, and this refers to that object
  • Explicitly bound
    • Use the Apply and call functions
    • Using bind
  • The new binding
  • Arrow function

4. Error handling

  • The Error object
  • Common Error types

    • EvalError: An EvalError is thrown when the eval function is not executed correctly

    • InternalError: Indicates the error that occurs within the JavaScript engine when it has too much data to process and the stack grows beyond its critical limit

      • “Too many switch cases”
      • “Too many parentheses in regular expression”;
      • “Array initializer too Large”;
      • “Too much recursion.”

    • SyntaxError: indicates a SyntaxError

      • Example: var 123

    • TypeError: TypeError that is found in scope but does something it should not do

      • Example: var fn1; fn1();

    • URIError: Error thrown when urI-related functions have incorrect arguments, mainly involving encodeURI(), decodeURI(), encodeURIComponent(), decodeURIComponent(), escape() and unescape().

      • Example: decodeURI (‘ % 2 ‘)

    • ReferenceError: error in reference to a variable that does not exist and cannot be found in scope.

    • Scope error: Scope error, an error that occurs when the valid range is exceeded

      • Example: []. Length = -20;
  • The difference between an exception and an error: An error object becomes an exception only when thrown
    • Use try/catch/finally
    • Use promises to handle exceptions:.then /.catch /.finally

5. Understand == and ===

  • = = =Strictly equal, the type and value of two values are compared
  • = =Abstract equality, when comparing, the type conversion is performed first, and then the value is compared

6. Closure

  • The definition of A closure is simple: function A has A function B inside it, and function B has access to variables in function A, so function B is A closure.

Regular expressions

Regular expressions use a single string to describe and match a series of string search patterns that conform to a certain syntactic rule. They are generally used for text search and text replacement.

(1) Regular expression related methods: test, exec, match

  • The test: method is used in regular expression mode to run look-up in a string, and if exec() finds a match, it returns an array of results. Otherwise, null is returned
  • Exec: Used to retrieve matches of regular expressions in strings.

The return value is an array, but the contents of the array have a lot to do with whether the re object is a global match

  • No G modifier: This function is the same as the match() function. It matches only once in a string, and returns null if no match is found, otherwise it returns an array whose 0th element contains the match string
  • With g modifier: This function returns an array and can only be matched once in a string. At this point, however, this function is usually used to match the lastIndex attribute. The function starts retrieving the string at the character specified by the lastIndex attribute. When exec() finds a string that matches the expression, after the match, It sets the lastIndex property to the position next to the last character of the matching string. All matches in the string can be iterated through by calling the exec() function repeatedly, and when the exec() function cannot find any more matches, it returns null and resets the lastIndex attribute to 0.
  • Match: Retrieves the string stringObject to find one or more texts that match regexp.

(2) Flags and modifiers

  • G: Global search, does not return directly after a successful match.
  • I: Case insensitive search.

(3) Common regular expression writing

8. Deep and light copy (the so-called copy, is assignment)

(1) Shallow copy

  • Definition: added a pointer to an existing memory address

  • Methods:

    • 1. Write a shallow copy
    function shallowCopy(obj) {
   if (typeof obj === 'object'&& obj ! =null) {

      let copy = Array.isArray(obj) ? [] : {};
      for (var p in obj) {
         copy[p] = obj[p];
      }
      return copy;
 } else {
    returnobj; }}Copy the code
    • 2. The Object Object. The assign ()

    Object.assign(target, … Sources) to implement shallow copy, the first parameter is the target object, the following parameters… Note: Object.assign() is generally used as a shallow copy of an Object, and is used to treat arrays as objects.

    // object. assign treats arrays as objects with attributes 0, 1, and 2
// Attribute 0 7 of the source array overrides attribute 0 1 of the destination array, and so on
Object.assign([1.2.3], [7.8]); / /,8,3 [7]
Object.assign([1.2], [6.7.8]); / / / June,

Copy the code
    • 3. Array. An Array concat ()
    • 4. Extension operator {… obj}

(2) Deep copy

  • Definition: to add a pointer to a new memory and make the pointer point to the new memory

  • methods

    • Shallow copy + recursion
    // Recursive shallow copy
function recursiveShallowCopy (obj){
   var copy = Array.isArray(obj) ? [] : {};
   for(let p in obj){
      if(typeof obj[p] ==='object'){
         copy[p] = recursiveShallowCopy(obj[p])
      }else{ copy[p] = obj[p]; }}return copy;

}

/ / copy
function deepCopy(obj) {
   if (typeof obj === 'object'&& obj ! =null) {
      return recursiveShallowCopy(obj);
   } else {
      returnobj; }}Copy the code
    • 2. JSON.parse(JSON.stringify())

    Serialize the original object to a JSON string by ** json.stringify (), and generate a new object by json.parse ()**.

    Defect:

    1. If the original object contains undefined, Symbol, or function, the key value will be lost

    2. If there is a re in the original object, it is converted to an empty object {} 3. If there is a Date in the original object, it is converted to a string 4. Any constructor that will discard the original Object will be converted to Object 5. If a circular reference exists in the object, it cannot be handled properly

Note: The first four drawbacks of using json.parse (json.stringify () to implement deep copy can be solved by recursion + shallow copy, but recursion + shallow copy does not solve the problem of circular reference in point 5

9. Prototype, prototype chain

Juejin. Cn/post / 684490…

Var, let, const

  • ES5 only has var. ES6 introduces let and const, and var should be avoided in development
  • Var allows variable promotion and can be used before declaration. Let and const do not
  • Var allows repeated declarations, let and const do not
  • Var, let, and const do not need an initial value
  • Let and const support block-level scope; var does not

11. Inheritance

  • Class is essentially a function, just syntactic sugar
  • How does a stereotype implement inheritance
  • How does Class implement inheritance

Reference: juejin. Cn/post / 684490… Juejin. Cn/post / 684490…

12. Map, filter, reduce usage

  • What a map does is it creates a new array, iterates through the old array, takes each element and does some transformation and puts it in the new array
  • Filter is also used to generate a new array of elements that return true when iterating through the array
  • Reduce can convert elements of an array to a value through a callback function

14. Asynchronous programming

(1) Callback function

For example,

function step1(cb) {
    console.log("step1");
    cb()
}

function step2(){
    console.log("step2");
}

step1(step2);  // step1 step2
Copy the code

(2) Generator

(3) Promise

 Understand the Pending, Resolved and Rejected  Understand and use THEN/catch/finally  Use async/await

Timer function

 setTimeout  setInterval  requestAnimationFrame

16. EventLoop

 Macro tasks and microtasks generally include the overall code script, setTimeout, setInterval, and setImmediate.  Microtasks: Native Promises (some implemented promises put the THEN method in the macro task.) 4.  Front-end security XSS simply put, the attackers do everything they can to inject executable code into the web pages     don’t let newcomers come in. The most common way to do this is to escape the input and output. CSP is to escape quotes, Angle brackets, and slashes. You essentially set up a whitelist and tell the browser exactly what external resources can be loaded and executed

CSRF CSRF is called cross-site request forgery. The principle is that the attacker constructs a back-end request address to induce users to click or automatically initiate a request through some means. If the user is logged in, the backend assumes that the user is operating and performs the corresponding logic. You can follow the following rules to defend against CSRF attacks:  The Get Request Does not modify the data  I do not Let third-party Websites access users Cookie  Interface for Stopping Third-party Websites   There is authentication information attached to the request, such as verification code and Token. Middleman attacks The attacker connects to both the server and the client. And let the other party think that the connection is secure, but in fact the entire communication process is controlled by the attacker. Attackers can not only gain access to communications between the two sides, but also modify them.   Public Wi-Fi is not recommended.  Use HTTPS to defend against man-in-the-middle attacks

  1. compatibility

 300ms Delay on the mobile end (double click scaling is supported.   300ms delay for the mobile end)  Use the FastClick library.  Generate a click event after TouchEnd and fire the click event immediately. Remove the original click event.  No scaling.)  Set the default viewport width to device-width. (The    common kernels for mobile browsers:  The iPhone and iPad are mostly WebKit Android 4.4 The kernel of the Android browser is WebKit Android 4.4 browser switched to Chromium. The kernel is a branch of Webkit. Blink IE Compatibility  Polifill means to use a code to implement some features that the browser does not provide. The following apis are not supported by Internet Explorer. Promise Fetch API Object.assign Array. From …    The React Dom stopped supporting Internet Explorer 8 starting at   The latest version of React can be polyfilled with Internet Explorer 9, Internet Explorer 10, and Internet Explorer 11