The words written in the front

I am not a master, is also a small white. In the process of learning, always repeatedly forget, remember, practice, forget.. Therefore, I decided to start the summary of the pit and the written test, which will be updated and added continuously. The original address is on Github, remember to give a star if you feel good, and make progress together

Updated address: portal

Front-end interview & Written & Wrong questions guide

Css related

1. Display :none and visibility:hidden

Answer: Visually, they are the same, but they are different for manipulating the DOM. Dispaly: None invalidates the entire width and height of the dom. Visibility: Hidden just makes the element invisible, but width and its position will not change

javascript

1. Basic issues

1) Whether it can be usedtypeof bar === 'object'To check whether bar is of type object, has and risk?

The basic datatype of JS is String Number Boolean, undefined null and a complex datatype object(ES6 adds symbol).

For complex data types object, typeof NULL returns object as well, because null is essentially a placeholder object. On the other hand, Array cannot be typeof tested for data types, because object is also returned.

So, if you want to check whether a bar is an object, you can do this:

    console.log((bar ! = =null) && (tiopnuiop[yuiop[]\\]poi456/ypeof bar ==='object'))
    // If function is an object, you can use the following statement
    console.log((bar ! == nul)&& (typeof bar ==='object') | | (typeof bar ==='function'))
Copy the code

In addition, there is also the case of Array, because Array also returns object. If we do not want Array to be regarded as object, we must really recognize Array.

 console.log( bar instanceof Array)  // If array, return true
 console.log( Array.isArray(bar))  / / ES5 method
 console.log( Ojbect.prototype.toString.call(arr) === '[object Array]') 
Copy the code
2) Whether the following two functions are equivalent
function foo1()
{
  return {
      bar: "hello"
  };
}

function foo2()
{
  return
  {
      bar: "hello"
  };
}
Copy the code

Answer: not equivalent!! Notice that the second function returns undefined

console.log(foo1()); // {bar : "hellp"}
console.log(foo2()); // undefined
Copy the code

That’s why when a function returns an object, or writes curly braces, it puts {aside, because the second function js defaults to return something (empty), equivalent to

return undefined
{xxx}
// It is not necessary to write this
Copy the code
3) NaNWhat is? What type is it? How to detect a variable is itNaN?

Answer: NaN is Not A Number, but in fact it is of type Number. Typeof NaN will return Number. This thing is better because

NaN= = =NaN  //false
Copy the code

You can see that it’s not even equal to itself, so you can’t use ===. You can use the isNaN method

// Check if the variable is nan
isNaN(bar);
Object.is(bar,NaN); //ES6 method, this method will fix some minor bugs in JS
Copy the code

Object. Is () method, which requires strict equality and Object. Is (NaN,NaN) returns true

2. Scope-related issues

What is the output of the following program:

(function(){
  var a = b = 3; }) ();console.log("a defined? " + (typeofa ! = ='undefined'));
console.log("b defined? " + (typeofb ! = ='undefined'));
Copy the code

A defined? false b defined? Var a = b = 3 var a = b = 3

var a; 
b = 3;
Copy the code

In this case, b is actually declared in a global variable (the compiler declares it for you in precompilation, but not in strict mode). A is a local variable, so it is not defined outside the function.

3. This & object & Array

1) What is the following program output
var myObject = {
    foo: "bar".func: function() {
        var self = this;
        console.log("outer func: this.foo = " + this.foo);
        console.log("outer func: self.foo = " + self.foo);
        (function() {
            console.log(this);
            console.log("inner func: this.foo = " + this.foo);
            console.log("inner func: self.foo = " + self.foo);
        }());
    }
};
myObject.func();


/ / the answer
outer func: this.foo = bar
outer func: serl.foo = bar
inner func: this.foo = undefined
inner func: self.foo = bar
Copy the code

Analysis: Make clear the direction of this. Keep these rules in mind

  • Who calls this? Who this points toxxx.fun()
  • New an object, this points to the instance itselfvar c = new fun()
  • Modify the this reference using call/apply/bind.

Outer func is obviously the first case, who calls it, who this points to, and it’s always myOjbect. In the immediate function this is not bound and naturally belongs to the window so this.foo is un______

Add this to the arrow function

function a() {
    return (a)= > {
        return (a)= > {
        	console.log(this)}}}console.log(a()()())
Copy the code

Note: arrow functions do not have this; the this in this function depends only on the this of the first function outside of it that is not the arrow function. In this case, because calling a matches the first case in the previous code, this is the window. And once this is bound to the context, it will not be changed by any code.

2) Array filter, what is the following output result (2018 Pinduoduo front-end original question)
var arr = [1.2.3];
arr[10] = 9;
arr.filter((item) = > {
    return item === undefined?
})

/ / the answer
[]
Copy the code

[] — x = 7 — x = 7 So first of all, what is arR after the first two sentences

console.log(arr)
/ / [1, 2, 3, emptyx7, 9]
console.log(arr[5])
//undefined
Copy the code

As you can see from the above results, it is true that undefined is in the middle (empty is undefined). So, after filter, should not return toundefinedData?

Yeah, but when the array is filled with undefined, the array is empty, or[empty x 7] === []

According to comments little brotherYou as soon as possibleandWaste D of different dimensionsHere’s an update on the explanation. Empty is not the same as undefined. An explanation quoted from a foreign technology forum is as follows:

A) It will not crash. The JavaScript engine will make array slots 3 through 9 be “empty slots.”

b) Here, a[6] will output undefined, but the slot still remains empty rather than filled with undefined. This may be an important nuance in some cases. For Example, when using map(), empty slots will remain empty in map() ‘s output, but undefined slots will be remapped using the function passed to it:

var b = [undefined];
b[2] = 1;
console.log(b);             // (3) [undefined, empty × 1, 1]
console.log(b.map(e => 7)); // (3) [7,         empty × 1, 7]
Copy the code

Undefined is not the same as the empty slot reserved for the array, even if we print the corresponding data to show undefined, but it is different from js undefined, except arr. Filter. All functions, including arr.map(), reserve empty slots.

4. Incorrect JS decimal calculation bug

What is the return value from the following code

console.log(0.1 + 0.2);
console.log(0.1 + 0.2= =0.3);

// Answer: 0.30000000000000004
        false
Copy the code

0.1+0.2! 0.1+0.2! = 0.3

// The solution
parseFloat((0.1+0.2).toFixed(10));
Copy the code

5. Algorithm/thought related

1) Discuss implementing functions that determine whether a variable is an integerisInter(x)The implementation of the

Answer: In ES6, there is a method called number. isInteger that can be used. If you do it yourself, what’s the idea

//1 xOR operation
function isInter(x) {
    return x ^ 0 === x
}

/ / 2 integer
return Math.round(x) === x  // You can also use floor ceil

/ / to take over
return (typeof x === 'number')&&(x % 1= = =0)
Copy the code
2) Write a sum method that can be called in either of the following ways
console.log(sum(2.3)) / / 5
console.log(sum(2) (3)) / / 5
Copy the code

The answer:

1 / / method
var sum = function(x,y) {
    if(y === undefined) {
        return function(y) {
            returnx + y; }}else {
        returnx + y; }}2 / / method
var sum = function(x){
    if( arguments.length === 1) {
        return function (y) {
            returnx + y; }}else {
        console.log('here');
        return arguments[0] + arguments[1]; }}Copy the code
3) Change obJ into OBJ2 format using recursive method
obj = [
    {id:1.parent:null},
    {id:2.parent:1},
    {id:3.parent:2}
]

obj2 = {
    obj: {id: 1.parent: null.child: {
            id: 2.parent: 1.child: {
                id:,3.parent: 2}}}}Copy the code

The answer to this question is left to the friends to think about, because I did not write a very beautiful program in the exam, I will wait for sorting after Posting, welcome to discuss in the comments section of friends