Summarize some basic knowledge of the front end, some knowledge may be asked in the front end interview, so make a note, also help others to check, if there is any problem, can point out, will actively correct.

Variable types and calculations

What types of typeof are available in JS

    console.log(typeof undefined);  //undefined
    console.log(typeof 123);  //number
    console.log(typeof '123');  //string
    console.log(typeof true); //boolean
    console.log(typeof [1.2.3]);  //object
    console.log(typeof {"id": 11}); //object
    console.log(typeof null); //object
    console.log(typeof console.log);  //function
Copy the code

Type conversion

  • Explicit type conversion
    • Number function
      • Number: the number remains after conversion
      • String: the corresponding value if it can be parsed as a value, NaN if not, and 0 if it is an empty string
      • Boolean values: true is 1, false is 0
      • Undefined: NaN
      • Null: 0
      • Object: Run valueOf first to see whether the conversion can be performed. If not, run toString again to see whether the conversion can be performed. If not, an error is reported
    • String functions
      • Number: converts to the corresponding string
      • String: The corresponding string
      • Boolean values: true for ‘true’, false for ‘false’
      • Undefined: undefined
      • Null: null
      • Object: Execute toString first and check whether the conversion can be performed. If valueOf cannot be performed, check whether the conversion can be performed. If valueOf cannot be performed, an error is reported
    • Boolean

      These are false and the others are true
      • NaN
      • null
      • undefined
      • 0
      • “”
      • false
  • Implicit type conversion
    • arithmetic
    • statement
  • Weird type switching interview questions

When to use= =, when to use= = =

Besides obj. A = = null, use = = = = = to use must be defined when obj. A = = null after transformation is actually the obj. A = = null | | obj. A = = is undefined

What are the built-in functions in JS

    Object
    Array
    Boolean
    Number
    String
    Function
    Date
    RegExp
    Error
Copy the code

What types of JS variables are stored in

  • 1. The value type
  • 2. Reference types (space saving, common memory blocks)

Difference: changing one value type does not affect the other, reference type changes all change because of the common memory block

How to Understand JSON

JSON is a JS object and a data format. The two apis in JSON are as follows

  1. Convert JSON strings into JSON objectsJSON.parse()
  2. Convert JSON objects to JSON stringsJSON.stringify()

useObject.prototype.toStringGets the type of an object

var toString = Object.prototype.toString;

toString.call(new Date); // [object Date]
toString.call(new String); // [object String]
toString.call(Math); // [object Math]
toString.call(/s/); // [object RegExp]
toString.call([]); // [object Array]

/ / Since JavaScript 1.8.5
toString.call(undefined); // [object Undefined]
toString.call(null); // [object Null]
Copy the code

Prototype and prototype chain

Five rules of prototyping

  1. All reference types can be added with custom attributes
  2. All reference types have their own implicit stereotype (PROTO)
  3. Functions have their own explicit prototype
  4. All implicit stereotypes of reference types point to the display stereotype of the corresponding constructor
  5. When a custom attribute of a reference type is used, if it is not available, the reference type’s __proto__ (the prototype of the corresponding constructor) will be looked for

How to determine exactly if a variable is an array type

arr instanceof Array

Instanceof determines what a reference type is by looking at __proto__.

Write an example of prototype chain inheritance

function Element(ele) {
  this.ele = document.getElementById(ele);
}

Element.prototype.html = function(val) {
  var ele = this.ele;
  if (val) {
    ele.innerHTML = val;
    return this;
  } else {
    returnele.innerHTML; }}; Element.prototype.on =function(type, fn) {
  var ele = this.ele;
  ele.addEventListener(type, fn);
  return this;
}

var element = new Element('main');

element.html('hello').on('click'.function() {
  alert('handleClick');
});
Copy the code

Describes the process of new an object

  1. Create a new object
  2. This refers to this new object
  3. Execute code to assign this
  4. return this
function Foo(name) {
  this.name = name;
  // return this; // This step is performed by itself
}

var f = new Foo('shiyanping');
Copy the code

Scope and closure

Variable ascension

The following two conditions will be improved:

  1. Variable definitions
  2. Function description

This can be used in several different scenarios

  1. Used in a constructor (the constructor itself)
  2. Used as an object property (the object calling the property)
  3. Used as a normal function (window)
  4. Call, apply, bind (first argument executed)
var a = {
  name: 'A'.fun: function() {
    console.log(this.name); }}; a.fun();//this === a
a.fun.call({ name: 'B' });  //this === { name: 'B' }
var fun1 = a.fun;
fun1(); //this === window
Copy the code

Create 10 A labels and click on each to pop up the corresponding serial number

var i;
for (i = 0; i < 10; i++) {
  (function(i) {
    // Function scope
    var a = document.createElement('a');
    a.innerHTML = i + '<br>';
    a.addEventListener('click'.function(e) {
      e.preventDefault();
      alert(i);
    });
    document.body.appendChild(a);
  })(i);
}
Copy the code

How to understand scope

  1. Free variables
  2. Scope chain, and free variable search, can not find a step up to find
  3. Two scenarios for closures
    1. Functions are passed as variables
    2. Function as the return value

Application of closures in real development

// Determine if a number appears
function isFirst() {
  var _list = [];
  return function(id) {
    if (_list.indexOf(id) >= 0) {
      return false;
    } else {
      _list.push(id);
      return true; }}; }var first = isFirst();
first(10);
first(10);
first(20);
Copy the code

Single threaded and asynchronous

The difference between synchronous and asynchronous, give an example of synchronous and asynchronous

Synchronization blocks code, but asynchrony does not. Alert is synchronous and setTimeout is asynchronous

SetTimeout pen questions

console.log(1);
setTimeout(function() {
  console.log(2);
}, 0);
console.log(3);
setTimeout(function() {
  console.log(4);
}, 1000);
console.log(5);
// output: 1,3,5,2,4
Copy the code

The front-end uses asynchronous scenarios

  1. Scheduled task: setTimeout, setInterval
  2. Web request: Ajax request, dynamic IMG load
  3. event

Asynchrony is required in all cases where waiting is required because it does not block like synchronization

The date and the Math

Knowledge:

The date of

console.log(Date.now());  // Get the current number of milliseconds
var dt = new Date(a);// Get the current time
console.log(dt.getTime());  // Number of milliseconds of the current time
console.log(dt.getFullYear());  / / year
console.log(dt.getMonth()+1); // month (0-11)
console.log(dt.getDate());  // day (0-31)
console.log(dt.getHours()); // when (0-23)
console.log(dt.getMinutes()); // 分 (0-59)
console.log(dt.getSeconds()); // second (0-59)
Copy the code

Math

  • Math.random()– Returns a random number between 0 and 1
  • Math.abs(x)– Returns the absolute value of the number
  • Math.ceil(x)– Round up
  • Math.floor(x)– Round down

Common array apis

  • ForEach (iterate over all elements)
var arr = ['a'.'b'.'c'.'d'];
arr.forEach(function (item, index) {
  console.log(item + ', ' + index);
})
Copy the code
  • Map (Reassemble arrays to generate new arrays)
// map generates a new array without changing the format of the original array
var arr = ['a'.'b'.'c'.'d'];
var result = arr.map(function (item, index) {
  return index + '/' + item;
})
console.log(result);
Copy the code
  • Sort (sort an array)
// sort will change the original array
var arr = [1.23.3.4];
var result = arr.sort(function (a, b) {
  // Sort from smallest to largest
  return a - b;

  // Sort from largest to smallest
  // return b - a;
})
console.log(result);
Copy the code
  • Filter (Filter the elements that match the criteria)
var arr = [1.2.3.4];
var result = arr.filter(function (item, index) {
  if (item < 3) {
    return true}})console.log(result);
Copy the code
  • Every (judge whether all elements meet the requirements)
var arr = [1.2.3.4];
var result = arr.every(function (item, index) {
  if (item < 3) {
    return true}})console.log(result);   // false
Copy the code
  • Some (Determine if at least one element is eligible)
var arr = [1.2.3.4];
var result = arr.some(function (item, index) {
  if (item < 3) {
    return true}})console.log(result);  // true
Copy the code
  • Join (combine strings based on conditional logarithmic groups)
var arr = [1.2.3.4];
var result = arr.join(', ');
console.log(result);
Copy the code
  • Reverse (reverse an array)
var arr = [1.2.3.4];
var result = arr.reverse();
console.log(result);
Copy the code

Common object apis

  • for in
  • HasOwnProperty (Checks if properties are owned by the object, excluding properties found from the prototype chain)
 var obj = {
  x: 10.y: 20.z: 30
}

for (var key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key + ':'+ obj[key]); }}Copy the code

Question:

Get the current date

function formatDate(dt) {
  if(! dt) { dt =new Date(a); }var year = dt.getFullYear();
  var month = dt.getMonth() + 1;
  var date = dt.getDate();

  if (month < 10) {
    month = '0' + month;
  }

  if (date < 10) {
    date = '0' + date;
  }

  return year + The '-' + month + The '-' + date;
}

var nowDate = new Date(a);var formatDate = formatDate(nowDate);
console.log(formatDate);
Copy the code

Gets a random number in a string format of consistent length

function randomStr(len) {
  var random = Math.random();
  random = random + '0000000000'; // Prevent automatically generated numbers from not meeting the length of the error and cast to a string
  return random.substr(0, len)
}

console.log(randomStr(20));
Copy the code

Write a generic forEach function that iterates through objects and arrays

function forEach(obj, fn) {
  if (obj instanceof Array) {
    obj.forEach(function (item, index) { fn(index, item); })}else {
    for (var key in obj) {
      if(obj.hasOwnProperty(key)) { fn(key, obj[key]); }}}}var arr = [1.2.3.4];
forEach(arr, function (index, item) {
  console.log(index + ', ' + item);
});

var obj = {
  x: 10.y: 20
};
forEach(obj, function (index, item) {
  console.log(index + ', ' + item);
});
Copy the code

Read the last two songs

  1. Please give a thumbs-up to your favorite friends. If you feel helpful to people around you, please share it with your fingers. Thank you so much for taking the time to read this, and thank you for your likes and shares.
  2. I hope you pay attention to my public account, the first time the new article to the public account, the public account mainly sent some personal essays, reading notes, and some technical hot spots and real-time hot spots, and there is a very attractive my own money lottery oh ~