As the front end of the three musketry JavaScript, can be said to be the most important, is the front-end development of the essential foundation, because of JavaScript, to make the static page produced some dynamic effects, how much do you know about JavaScript? This article has compiled some Javascript basics from personal learning in order to fill in the gaps.

1. Tell me about the major browsers and their kernels that you know

2. The data types in JS are divided into several types and what are they

  • Simple data types: number, string, Boolean, NULL, undefined, symbol

  • Complex data types: Object, array, and function

    Note: Simple datatypes have no properties and methods, and the value of simple datatypes is immutable. The value itself is stored in stack memory. Reference data is stored and copied at one address, and changing one will change the other

3. Understanding stack memory and heap memory

  • Stack memory Stack memory stores some relatively simple data and heap memory address, for example

When num is changed, num1 does not change because num is changed

  • Heap memory Heap memory is the storage of some complex data, the data is stored in heap memory, the address of the data is stored in stack memory, for example

Obj and obj1 refer to the same space in the heap. Changing obj and obj1 is actually changing the same data

3. What are typeof returned values

Number, string, Boolean, undefined, object, function

  • Typeof TYPEOF Mandatory string

  • Typeof NULL, Typeof object, and Typeof array all return Object

  • Return false: 0 “” null NaN undefined undefined expression

4. How do I check if an object is an array

  • The first method:instanceofThe Prototype operator tests whether an object has a constructor’s prototype property in its prototype chain.

Analysis process:

The arr.__proto__ attribute points to array. prototype, the prototype object from which the arR constructor is constructed. Constructor === Array arr. Constructor === Array Arr. Constructor === Array arr. Constructor === Array

Note: However, this method has a loophole and may not be accurate because we can change the “this” of an object. We won’t go into too much detail here

  • The second method:Object.prototype.toStringTo borrowObjectMethod on the prototype to implement detection array

Analysis process:

ToString methods are methods on Object prototypes, like function and Array, which override toString methods as instances of Object. From the knowledge of prototype chain, we can know that when we call toString method, we cannot directly call the toString method on Object prototype, but call the rewritten method. Therefore, if we want to get the specific type of the Object, we should use the toString method on the Object prototype borrowed by Call, as explained in the MDN documentation

  • The third method:Array.isArrayThis method takes a parameter that determines whether the value passed is an Array

Analysis process:

This method is a new method in ES5, which can directly determine whether the parameter is an array type, the MDN documentation explains

5. Increment and decrement operators and logical operators

  • ++Operators: written to the end is called postincrement, written to the front is called preincrement
Let a = 10 let b = ++a ++ console.log(a) // 12 console.log(b) // 22 // Plus plus a is a plus 1 assigns it to itself, so a is 11, plus 11, so b is 11 plus 11 is 22, and then a++, A becomes 12 let a = 5 let b = a++ + ++a +a ++ console.log(b) // 19 console.log(a) // 8 let a = 10 let b = a-- ++ +a console.log(b) // 20 console.log(a) // 10Copy the code

  • — operator: Same as the increment operator, but not much more

  • Logical operator

    • The whole truth is true only when a false is a false

    • | | : that’s false, before all is false false There is a true is true

    • ! : takes the inverse conversion to a Boolean value

6. Bubble sort

  • The primary version

    • The result of comparing each value in the array in pairs is that the largest number is at the end of the array
    let arr = [23, 46, 45, 39, 66, 82] for (let i = 0; i < arr.length - 1; I ++) {if (arr[I] > arr[I + 1]) {let temp = arr[I] arr[I + 1] = arr[I + 1] arr[I + 1] = temp} console.log(arr) // Analysis: Array from arr[0] pairwise compared to the following number, a total of five times. So length minus 1, I up to 4. When I is 4, arr[4] is compared to arr[5], that is, arr. Length-2 is compared to arr. Length-1Copy the code
    • By running the result of the comparison multiple times, the largest number is pushed back one at a time, so a for loop controls how many times the comparison is performed
    for (j = 0; j < arr.length - 1; j++) {
    for (let i = 0; i < arr.length - 1; i++) {
      if (arr[i] > arr[i + 1]) {
            let temp = arr[i]
              arr[i] = arr[i + 1]
              arr[i + 1] = temp
      }
      }
} 
Copy the code

  • Advanced version

    // The number of the number of the number of the number of the number of the number of the number of the number of the number of the number of the number of the number of the number of the number of the number of the number of the number of the number of the number of the number of the number of On the first lap, we did 5 pairs of comparisons, and on the second lap, since we already found the largest number, we can do it once less. Let arr = [23, 46, 45, 39, 66, 82] for (j = 0; j < arr.length - 1; j++) { for (let i = 0; i < arr.length - 1 - j; If (arr[I] > arr[I + 1]) {let temp = arr[I] arr[I + 1] arr[I + 1] = temp}}}Copy the code

  • Final version If in the sorting process, the array is already sorted, the following times do not need to be sorted

    • Hypothesis establishment method
    Let arr = [80,100,90,65,54] i < arr.length; I ++) {if (arr[I] >= 60) {console.log(' all pass ')}else {console.log(' all fail ')} 0; i < arr.length; I ++) {if (arr[I] < 60) {console.log(' not all passed ')}Copy the code

    When sorting, we assume that the array is sorted, so we don’t have to sort it again. In other words, as long as the latter term is greater than the former term, then the hypothesis is not true

    for (let i = 0; i < arr.length; I++) {if (arr [I] > arr) [I + 1] {the console. The log (' assumption failed ')}Copy the code
    • Optimize bubble sorting
    let arr = [23, 46, 45, 39, 66, 82]
for (j = 0; j < arr.length - 1; j++) {
    let flag = true
    for (let i = 0; i < arr.length - 1 - j; i++) {
    	if (arr[i] > arr[i + 1]) {
            flag = false
            let temp = arr[i]
        	arr[i] = arr[i + 1]
        	arr[i + 1] = temp
    	} else if (flag == true){
            break
        }
	}
} 
Copy the code

7. Describe the shallow copy and deep copy

  • Shallow copy: Copies a layer of attributes of an object. If there are other objects in the object, only the address is copied. Modifying one of them will affect each other and is suitable for copying simple data types
let obj = {
    name: 'zs',
    age: 18,
    money: 1000
}
function Copy(obj) {
    let newObj = {}
    for (let k in obj) {
        newObj[k] = obj[k]
    }
    return newObj
}
console.log(Copy(obj)) 
Copy the code
  • Deep copy: Copies multiple layers of an object, if any, recursively
let obj = { name: 'zs', age: 18, money: 1000, smoke: { brand: 'suyan', num: 20 } } function Copy(obj) { let newObj = {} for (let k in obj) { newObj[k] = typeof obj[k] === 'object'? Copy(obj[k]) : obj[k]} return newObj} console.log(Copy(obj)) // Changing obj does not affect newObjCopy the code

8. Tell me what you understand about prototypes and prototype chains

Functions have the Prototype property, which is an object we call a prototype object; Each object has a __proto__ property, which points to the prototype object, which is also an object and has a __proto__ property, so that layer by layer forms a chain structure, which we call the prototype chain

9. Understanding closures

When the internal function refers to the variable of the external function, it forms a closure. The closure will cause the original scope chain not to be released, resulting in a memory leak. In some places, it is not specific to say that an internal function is stored outside to form a closure. The internal function is stored outside to make it easier to call the internal function, and the reason for nesting functions is that local variables are needed. If it is a global variable, it will not serve the purpose of closure

  • Advantages of closures: form private space, avoid global pollution; Persistent memory, which holds data

  • Disadvantages of closures: memory leaks caused by persistent memory. The solution is to avoid nesting functions. The variable is set to null, allowing the garbage collector to reclaim and free memory

Classic case: Click Li to get the subscript

<ul>
  <li>111</li>
  <li>222</li>
  <li>333</li>
  <li>444</li>
  <li>555</li>
</ul>
  var lis = document.querySelectorAll('li')
  for (var i = 0; i < lis.length; i++) {
    (function (j) {
      lis[j].onclick = function () {
        console.log(j)
      }
    })(i)
  } 
Copy the code

10. Differences between call, apply and bind methods

  • Both the call and apply methods can call functions, and the first argument inside the method can be modified to point to this

  • The call method can take multiple arguments, except for the first argument, which identifies this as pointing to. The other arguments are passed to the function as arguments. The apply method takes at most two arguments. The first argument identifies this as pointing to, and the second argument is an array or pseudo-array, each of which is passed to the function as an argument

  • The bind method cannot automatically call a function; it creates a copy of the function, and the this bound to the new function points to the new function returned by Bind

11. What are the pseudo-arrays

  • Function argument list arguments

  • List of DOM objects and list of childNodes childNodes

  • Jquery objects such as $(“div”)

12. What is the difference between a pseudo-array and a real array, and how can a pseudo-array be converted to a real array

The difference between

  • A pseudo-array is actually an object. A real Array is an Array

  • Pseudo-arrays have the length property, but the length cannot be changed. The length of real numbers can be changed

  • Pseudo-arrays do not have the methods of real arrays, such as push, slice, and so on

conversion

  • Call calls an array method

  • The array. from method creates a new, shallow-copy Array instance from an array-like or iterable

  • ES6 new syntax extension operator

One thing to note here is that when you use your own pseudo-array, the extension operator can’t convert a real array. You’ll find that your pseudo-array will fail due to the lack of an Iterator

13. Know about array dimensionality reduction (flattening)

  • Lends a concat method on an array prototype

    Let arr = [1, 2, 3, 4, 5]] Array. The prototype. Concat. Apply [], (arr)Copy the code

  • Use the concat method and extension operator for arrays

    Let arr = [1,2,3,[4,5]] []. Concat (... arr)Copy the code

Note: the above two methods can only implement one layer of nesting, if it is multiple layers of nesting use the following two methods

  • Use the array. some method to determine whether an Array still exists in the Array. If so, join the Array with the expansion operator and concat

    Let arr = [1, 2, 3, 4, [5, 6]]] while (arr. Some (item = > Array. The isArray (item))) {arr = [] concat (... arr); } console.log(arr);Copy the code

  • The flat function in ES6 flattens arrays

    Let arr = [1,2,3,[4,[5,6]] arr. Flat (InfinityCopy the code

14. var const letWhat are the differences

  • Var contains variable promotion, let const does not

  • Let const has already been declared (has already been declared

  • Let const declarations have block-level scope; var does not

  • A const variable is a constant and cannot be changed, but it can be added to an object or an array

15. This refers to the problem

  • Function call mode, this points to window

  • Constructor call pattern, this points to the newly created instance object

  • Method invocation pattern, this refers to the object calling the method

  • In the context call pattern, the call and apply methods, this refers to the first parameter within the method; In the bind method, the this binding of the new function created by bind is the new function in bind

  • In the event handler,this refers to the current element that triggered the event

  • In timers,this points to the window

  • There is no this in the arrow function to point to the problem; its this is the same as this in the outer scope

  • This in anonymous functions always refers to window

16. How do you understand object orientation and how does it differ from process orientation

  • Object orientation is an idea of software development, which is to regard the program as an object and encapsulate the attributes and methods in order to improve the flexibility, reusability and extensibility of the code. Object orientation has three main features: encapsulation inheritance polymorphism. Encapsulation refers to the ability to store properties or methods in an object, inheritance refers to the ability to derive properties or methods from another class, and polymorphism refers to the ability to write functions or methods that can be run in multiple ways. The advantage of object-oriented development is that it is easy to maintain and expand, reduce the workload and shorten the development cycle, but the disadvantage is that the performance is low

  • Process oriented is a process-centered programming idea, is to solve the problem into a step by step, what to do after doing, and then use functions to implement these steps step by step, when using a call can be. The advantage of procedural is higher performance than object-oriented, because class invocation needs to be instantiated, the cost is relatively large, more consumption of resources; For example, SCM, embedded development, Linux/Unix and so on generally adopt process-oriented development, performance is the most important factor, the disadvantage is not object-oriented as easy to maintain, easy to expand, easy to reuse

17. Array deduplication method

// const arr = [1,2,3,3,4,5,5,5,7] const arr. ForEach (item =>{if(! Newarr.push (item)}}) console.log(newArr) Const arr = [1,2,3,3,4,5,5,5,7] const set = new set (arr) const newArr = [...set] //... The expand operator can expand arrays or objectsCopy the code

The last

To help you quickly master JavaScript, here is a free JavaScript learning guide to share with you.

The Javascript Learning Guide documentation covers the core of the Javascript language, lexical structures, types, values and variables, expressions and operators, statements, objects, arrays, functions, classes and modules, pattern matching for regular expressions, subsets and extensions of Javascript , Server-side javascript/client-side javascript, javascript in Web browsers, Window objects, scripted documents, scripted CSS, event handling, etc. The content is rich and detailed, and the partners who have won the first-line Internet company Offfer are all reading it.

Each knowledge point has a left navigation bookmark page, it is very convenient to see, because the content is more, the following part of the content and pictures.

object

  • Create an object
  • Properties to query and set
  • Delete the properties
  • Test attributes
  • Enumerated attribute
  • Property getter and setter
  • Properties of attributes

An array of

  • Create an array
  • Read and write array elements
  • The sparse array
  • The length of the array
  • The addition and removal of array elements
  • Array traversal
  • Multidimensional array

function

  • The function definitions
  • A function call
  • The arguments and parameters of a function
  • As a function of values
  • As a function of namespace
  • closure
  • Function properties, methods, and constructors

Class and module

  • Class and prototype
  • Class and constructor
  • Java-style class inheritance in javascript
  • The expansion of the class
  • Classes and types
  • Object-oriented technology in javascript
  • A subclass

Pattern matching of regular expressions

  • Definition of a regular expression
  • String methods for pattern matching
  • The regexp object

Subsets and extensions of javascript

  • A subset of the set of javascript
  • Constants and local variables
  • Deconstruction assignment
  • The iteration
  • Function shorthand
  • More than the catch clause
  • e4x: ecmascript for xml



Javascript in a Web browser

  • Client-side javascript
  • Embed javascript in HTML
  • Execution of javascript programs
  • Compatibility and interoperability
  • accessibility
  • security
  • Client framework



The window object

  • The timer
  • Browser location and navigation
  • Browsing history
  • Browser and screen information
  • dialog
  • Error handling
  • The document element that is an attribute of the Window object

If you have programming experience in other languages, this document will help you understand that JavaScript is a high-end, dynamic, weakly typed programming language that is well suited to object-oriented and functional programming styles.

Here I will this complete version of JS study guide electronic version of the document to provide, interested friends can find me to take a study! (Pure free a share, I hope to bring substantial help to you)

Quick start channel:Click here to receive the electronic version of the Javascript Study Guide.

Your support, my motivation; I wish you a bright future and continuous offer!!