Summarize some basic front-end knowledge. Some knowledge may be asked during the front-end interview, so making a record will also help others check. If there are any questions, you can point them out and actively correct them.

Variable types and calculations

What are the types of typeof 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 code

Type conversion

• Explicit type conversion
  • Number function
    • Number: after conversion or number
    • String: if it can be parsed into a value, it is the corresponding value. If not, it is NaN. If it is an empty string, it is 0
    • Boolean: true is 1, false is 0
    • undefined: NaN
    • null: 0
    • object: first execute valueOf to see whether it can be converted. If not, execute toString to see whether it can be converted. If not, report an error
  • String function
    • Number: convert to corresponding string
    • String: or the corresponding string
    • Boolean value: true is' true ', false is' false'
    • undefined: undefined
    • null: null
    • object: first execute toString to see whether it can be converted. If not, execute valueOf to see whether it can be converted. If not, report an error
  • Boolean
    The following are false and others are true
    • NaN
    • null
    • undefined
    • 0
    • ""
    • false
• Implicit type conversion
  • Four arithmetic
  • Judgment statement
• Wonderful type conversion interview questions

  

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

Except obj Except for a = = null, use = = =, = = when you want to use it, it must be defined
obj.a == null after conversion, it is actually obj a == null || obj. a == undefined

What are the built-in JS functions

    Object
    Array
    Boolean
    Number
    String
    Function
    Date
    RegExp
    Error
 Copy code

What types of JS variables are stored

• 1. Value type
• 2. Reference type (space saving, common memory block)

Difference: the change of one value type will not affect others. The change of reference type will change because of the common memory block

How to understand JSON

JSON is an object of JS and a data format. The two APIs in JSON are as follows

1. Converts a JSON string to a JSON object parse()
2. Converts a JSON object to a JSON string stringify()

Use object prototype. ToString gets 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 code

Prototype and prototype chain

Five rules of prototype

1. All reference types can add custom attributes
2. All reference types have their own implicit proto types
3. Functions have their own explicit prototype s
4. The implicit prototypes of all reference types point to the display prototypes of the corresponding constructors
5. When a user-defined attribute of a reference type is used, if there is no such attribute, it will be deleted__ proto__ (that is, the prototype of the corresponding constructor)

How to accurately determine whether a variable is an array type

arr instanceof Array

instanceof determines what reference type a reference type is through__ proto__ (look up the implicit prototype layer by layer. Can you find the prototype of the corresponding constructor)

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 {
    return ele.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 code

Describe the process of new an object

1. Create a new object
2. this points to the new object
3. Execute code to assign value to this
4. return this

function Foo(name) {
  this.name = name;
  // return this;  //  This step will be performed by itself
}

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

Scope and closure

Variable promotion

The following two situations will improve:

1. Variable definition
2. Function description

There are several different usage scenarios for this

1. Use in constructor (constructor itself)
2. Used as an object property (the object that invokes the property)
3. Used as a normal function (window)
4. call, apply, bind (the first parameter 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 code

Create 10 a tags and click 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 code

How to understand scope

1. Free variable
2. The scope chain and free variables cannot be found, and they can be found level by level
3. Two scenarios of closures
   1. Functions are passed as variables
   2. Function as return value

Application of closure in practical development

// Judge whether a number has appeared
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 code

Single threaded and asynchronous

The difference between synchronization and asynchrony, give an example of synchronization and asynchrony respectively

Synchronization will block code, but asynchrony will not alert is synchronous and setTimeout is asynchronous

Written test questions about setTimeout

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

Scenarios where the front end uses asynchrony

1. Scheduled tasks: setTimeout, setInterval
2. Network request: ajax request, dynamic img loading
3. Event binding

Asynchrony is required when waiting, because it will not block like synchronization

Date and Math

Knowledge points:

date

console.log(Date.now());  // Gets the current number of milliseconds
var dt = new Date();  // Get current time
console.log(dt.getTime());  // The 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()); // Time (0-23)
console.log(dt.getMinutes()); // Score (0-59)
console.log(dt.getSeconds()); // Seconds (0-59)
Copy 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 (traverse all elements)

var arr = ['a', 'b', 'c', 'd'];
arr.forEach(function (item, index) {
  console.log(item + ',' + index);
})
Copy code

• map (reassemble the array to generate a new array)

// map to generate 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 code

• Sort (sort array)

// sort, which will change the original array
var arr = [1, 23, 3, 4];
var result = arr.sort(function (a, b) {
  // Sort from small to large
  return a - b;

  // Sort from large to small
  // return b - a;
})
console.log(result);
Copy code

• Filter (filter qualified elements)

var arr = [1, 2, 3, 4];
var result = arr.filter(function (item, index) {
  if (item < 3) {
    return true
  }
})
console.log(result);
Copy 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 code

• some (judge whether at least one element meets the condition)

var arr = [1, 2, 3, 4];
var result = arr.some(function (item, index) {
  if (item < 3) {
    return true
  }
})
console.log(result);  // true
 Copy code

• join (combine arrays into strings according to conditions)

var arr = [1, 2, 3, 4];
var result = arr.join(',');
console.log(result);
Copy code

• reverse (invert array)

var arr = [1, 2, 3, 4];
var result = arr.reverse();
console.log(result);
Copy code

Common object APIs

• for in
• hasOwnProperty (check whether the property is owned by the object and exclude the property 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 code

Question:

Get current date

function formatDate(dt) {
  if (!dt) {
    dt = new Date();
  }
  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 + '-' + month + '-' + date;
}

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

Obtain a random number in a string format with consistent length

function randomStr(len) {
  var random = Math.random();
  random = random + '0000000000'; // Prevent the automatically generated number from reporting an error when it does not meet the length, and forcibly convert it into a string
  return random.substr(0, len)
}

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

Write a general forEach function that can traverse 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 code