MU Lesson Net-front javascrpt basic interview Skills-study notes

Chapter Catalogue:

• JS basic knowledge (above)--explain the JS basic grammar-related questions, analysis principles and solutions. This chapter explains the first part of the basics: types and calculations of variables. And JS "Three mountains"-the first mountain in prototypes, scopes and Asynchrony: prototypes.
• JS basic Knowledge (middle)--to explain the JS Basic grammar-related surface questions, analysis principles and solutions. This chapter explains the JS "three mountains"-prototype, scope.
• JS basic knowledge (bottom)--Explain the JS Basic grammar related to the face questions, analysis principle and solution method. This chapter explains the third part of the basics: JS "Three mountains"-scopes, closures and asynchrony.
• JS-WEB-API (top)--explain the specific application of JS in the browser of the question. Includes DOM operations, BOM operations, event bindings, Ajax, and storage for these categories of topics.
• Js-web-api (next)--explain the specific application of JS in the browser face questions. Includes DOM operations, BOM operations, event bindings, Ajax, and storage for these categories of topics.
• Development environment----------explain the problems of the front-end development environment, such as Ide,git, modularization, packaging tools, and on-line process, which the interviewer may ask during the interview.
• Operating environment--------explains the problems related to JS code running in the browser, such as page loading and rendering, performance optimization, security, these categories of topics.

The first part: JS Basics (I.)

1 variable types and calculations

Variable type: value type, reference type.

Value types: Values do not affect each other, including: number, String, Boolean.

Reference type: Pointer to object, including: object, array, function.

Reference type features: can be infinitely extended familiar.

2 typeof operator

typeofUndefined//undefinedtypeof' ABC '//stringtypeof123// Numbertypeof true 　　　　　　   //Booleantypeof{}//Objecttypeof[]//Objecttypeof NULL 　　　　　　   //ObjecttypeofConsole.log//function

There are five types of typeof: Undefined string Number Boolean object.

typeof can only differentiate between value types: undefined string number Boolean.

Null: Reference type, object, null pointer.

Function: A special reference type.

3 variable calculation-forced type conversion

A string concatenation

b = = operator

c If statement

D Logical Operation

The = = operator is special, in the expression null = = undefined, null and undefined are converted to false, so the judgment result is true. 0 and an empty string ' the same.

　　　　　　

Console.log (&& 0)    //  0         //10 was converted to trueconsole.log ("| |　　' abc ') //  ' abc '  //' was converted to false　Console.log (!WINDOW.ABC)   //  True      //window.abc is converted to false.

Determine whether a variable will be treated as true or false:

var a = +;  Console.log (!! a);

The IF will be treated as false with: 0 NaN ' null undefined false

4 Prototypes and prototype chains

Constructor: The first letter of the function name is capitalized.

function Foo (name,age) {      this. Name = name;        this. Age = Age  ;         // return this;                    The default is this line }varnew Foo (' Zhangsan '); // var f1 = new Foo (' Lisi ', +);          Create multiple Objects

New procedure for an object: the constructor is equivalent to a template, this.xx = XX; this.xxx = xxx; (Assignment) Of course, you can also not assign a value to the parameter. When the new function executes, this becomes an empty object, then assigns a value, and then return this.

Creates a new object->this to this new object, the execute code, which returns this as the this assignment.

Constructor extension:

var a = {} is actually a syntax sugar for var a = new Object ();

var a = [] is actually the syntactic sugar of var a = new Array ();

function Foo () {...} is actually var Foo = new Function (...) The grammatical sugar;

The structural function of the syntactic sugars is more readable and performance is better.

Use instanceof to determine whether a function is a constructor of a variable.

How to tell if a variable is an array: variable instanceof array

5 prototype rules and examples

5 prototype Rules:

A all reference types: arrays, objects, functions, all with object attributes, which are free to extend properties (except null).

b All reference types: arrays, objects, functions, all have a __proto__ property (implicit prototype), and the property value is a normal object.

C All functions have a prototype property (explicit prototype), and the property value is also a normal object.

D All reference types: Array, object, function, __proto__ property value points to its constructor's prototype property value.

e when trying to get a property of an object, if the object itself does not have this property, then it will go to its __proto__ (that is, its constructor of the prototype) to look for.

For (...) Looping the properties of the object itself: in the Advanced browser, the properties from the prototype have been masked in the for in, but it is recommended that you add judgment to ensure the robustness of the query.

var item;  for inch f) {    if(F.hasownproperty (item)) { ///hasOwnProperty function method returns a Boolean value that indicates whether an object has a native property of the specified name,　　　　Returns True if no return is false. Console.log (item);

}

6 prototype chain

F.tostring ()//To go to f.__proto__.__proto__ to find.

　　　　　

7 instanseof

The method used to determine which constructor the reference type belongs to.

F instanceof Foo's judgment logic is: F __proto__, layer by layer upward, can correspond to Foo.prototype, and then try to determine the F instanceof object (the previous layer of Foo is object).

8 Execution context

Range: A <script> or a function.

Global: Variable declaration, function declaration. Section script

Functions: Variable definitions, function declarations, this,argument. Function

Pay attention to distinguishing function declarations from function expressions!

The execution context takes the declaration of all variables and the declaration of the function out before executing the first line of code.

9 this

This is performed to confirm the value and cannot be confirmed when defined.

Several usage scenarios for this:

A as a constructor execution

B Execute As object property

C executes as a normal function this is the window

D Call Apply Bind

10 scopes

No block-level scopes

Only functions and global scopes

11 Scope Chain

Free variables: Variables not defined for the current scope

The parent scope of a function refers to the place where the function is defined

Note that the function and the global do not mix the same variable!

12 closures

Closure applications are mainly used for encapsulating variables and converging permissions.

13 Async and Single thread

Because JavaScript is a single-threaded language, you can only do one thing at a time

When does it need to be asynchronous? What are the scenarios where the front end uses a single stroke?

A timed task: Settimeout,setinterval

B Network request: Ajax request, dynamic load

C Event Binding

The difference between asynchronous and synchronous:

A synchronization blocks code execution, and async does not

b Alert is synchronous, settimeout is asynchronous

14 Other topics

Date:

 Date.now () //  Gets the current time in milliseconds  var  dt = new   date (); Dt.gettime ()  //  Get the number of milliseconds  dt.getfully Ear () //  year  Dt.getmonth () //  month (0-11)  dt.getdate () //  day (0-31)  dt.gethours () //  hour (0-23)  dt.getminutes () //  minutes (0-59)  dt.getseconds () //  seconds ( 0-59)  

Math:

Get random Number: Math.random () returns 0.XXX with indeterminate number of digits

Application: Clear Cache. When you continue to access the same link, you will not get the actual access effect, then add a random after the link, will change each time, to clear the effect of the cache.

Array API:

ForEach                 // traverse all elements every                   // determine if all elements meet the required conditions some                    //  Determine if there is at least one element that meets the required criteria, returns TRUE or falsesort                    // sorting map                     // reassembly of elements, Generate a new array filter                  // filter elements that match the criteria

Sort

var arr = [1,3,5,2,4]; var arr2 = Arr.sort (function(A, b   ) {return A-A;          // Sort from big to small   // return b-a;         }) Console.log (arr); Console.log (ARR2);

The arr and arr2 returned in this example are sorted arrays, and the sort method changes the original array after execution.

Map

var arr = [n/a]; var arr2 = Arr.map (function(item,index) {   return ' <b> ' +item+ ' </b > ';}) Console.log (ARR2);        //["<b>1</b>", "<b>2</b>", "<b>3</b>"]

Filter

var arr = [1,2,3,4]; var arr2 = Arr.filter (function(item,index) {   if(item>2)         return true ;}) Console.log (ARR2);        //[3,4]

Object API:

var obj = {  x:+,  y: $,  z:+  var  Key for in obj) {  if(Obj.hasownproperty (key)) {     Console.log (Key,obj[key])   }  }

Output Result:

X 100

Y 200

Z 300

MU Lesson Net-front javascrpt basic interview Skills-study notes