preface

After the Lantern Festival, I went to Shanghai to find a job, and now I have entered the job, and I am writing a record of the interview, which includes the pen test and the face test. There are some not written in, and I am ready to open another one. I haven’t written for a long time, and I am writing very slowly. If you like it, you can click wave like, or pay attention to it, I hope you can gain something after reading this article.

Front-end advanced accumulation, public account, GitHub

subsequent

Record of interview questions (Part 2)

Q: When do you encounter cross-domain problems? What are the solutions?

  • The cross-domain problem is caused by the same origin policy that the browser enforces for security purposes, which restricts the access from different sourcesdocument,The scriptAnd cognate meansThe domain name, protocol, and port of the two urls must be identical.
  • Script tag jSONp cross-domain, Nginx reverse proxy, Node.js middleware proxy cross-domain, back-end set the security domain name in the header information, back-end set CORS on the server.

Q: How do I determine if a variable is an object or an array?

There are several ways to judge arrays and objects, respectively, and prototype.tostring.call () is the most compatible.

The function isObjArr (value) {if (Object. The prototype. ToString. Call (value) = = = "[Object Array]") {the console. The log (' value is an Array of '); } else if (Object. The prototype. ToString. Call (value) = = = '[Object Object]') {/ / this method compatibility better console. The log (' value is objects'); }else{console.log('value is not an array or an object ')}}Copy the code

Ps: Never use Typeof to determine objects and arrays, because both types return “object”.

Q: The execution sequence or mechanism of timers.

This question is often asked, some of them ask the timer mechanism directly, some of them ask the execution order in the form of a question and then ask me why that is.

To cut a long story short, here’s what we need to remember: Because js is single-threaded, when the browser encounters setTimeout or setInterval, it will first execute the current code block. Before this, it will push the timer into the event queue of the browser. After the browser completes the execution of the current code, it will see if there is any task in the event queue, and then execute the timer code. So even if you set the timer to 0 it will still execute the current code first.

Above is a chestnut I wrote, if you are not clear, you can take a look at the Js Event Loop (Event Loop) mechanism and examples I wrote before.

Q: What is the difference between the title and Alt attributes in HTML?

This question was asked once. At that time, I only remembered that the Alt attribute is used for img tags, and the contents in the Alt attribute will appear when the image is invalid, and the title attribute is used to mark the title of the page. At that time, the interviewer asked me if there were any other differences. I…

Then I found an article to look at, a bit of posture:

<img SRC ="#" Alt =" Alt message "/> //1. <img SRC ="#" Alt ="title ="title "/> // 2 <img SRC ="#" Alt ="title" /> // 2 <img SRC ="#" Alt ="title "/> // 2 When the picture does not output information, the Alt information will be displayed and the title information will appear. // When the picture is normal output, the Alt information will not appear and the title information will appearCopy the code

Here’s something else about the title attribute:

The title attribute can be used on all tags except base, basefont, head, HTML, meta, param, script, and title. Use the title attribute for additional descriptive and non-essential information. The title attribute has a good use for adding descriptive text to links, especially when the link itself is not very clear about the purpose of the link.Copy the code

Q: Standard box model and IE Weird box model

This question is usually asked on a written test, such as:

<div style="width:100px; height="100px; border:10px; padding:10px;" ></div>Copy the code

What is the width of this box under the W3C standard box model and IE’s weird Box model?

Total width =content100px+border 10px*2+padding 10px*2 //140px Total width =content60px+ border 10px*2+padding 10px*2 //100pxCopy the code

Ps:

Box - sizing: content - box | | border - box; //css3 box-sizing to border-box will use the weird box model. When the width of the weird box is less than the width of the border+padding, the content width will change to 0 and the box width will be spread by the total width of the border and paddingCopy the code

What is the difference between ES5 inheritance and ES6 inheritance?

Inheritance in ES5 is implemented through the Prototype or constructor mechanism. Inheritance in ES5 is essentially creating the instance object of the child class and then adding the methods of the Parent class to this (parent-.apply (this)).

ES6 has a completely different inheritance mechanism, essentially creating an instance object of the parent class, this (so you must first call the super() method of the parent class), and then modifying this using the constructor of the child class.

Specifically: ES6 defines classes with the class keyword, which contains constructors, and extends between classes with the extends keyword. Subclasses must call the super method in the constructor method, otherwise the new instance will report an error. Because a subclass doesn’t have its own this object, it inherits from its parent class’s this object and then processes it. If the super method is not called, the subclass does not get this object.

Ps: The super keyword refers to an instance of the parent class, which is the this object of the parent class. In the subclass constructor, use this keyword only after super is called, otherwise an error is reported.

Q: What new attributes are available in CSS3?

This can be divided into borders, backgrounds, gradients, shadows, 2D to 3D and so on. For example, border (border-RADIUS, border-shadow, border-image) and so on.Copy the code

For details, see the novice tutorial: link. The same goes for HTML5’s new properties, which you can Google for yourself.

Q: What HTTP status codes do you know?

2xx:2 indicates a successful request. 3xx:3 indicates a redirection. 4xx:4 indicates a client errorCopy the code

This question is not difficult, in the written interview have encountered, coincidentally, I have summarized a similar article before.

Q: How do I de-duplicate an array?

This question comes up several times, and many interviewers are not satisfied that you only have one or two options.

1. Remove the weight of the Set structure.

This is the new data structure Set provided by ES6. It is similar to an array, but the member values are unique and there are no duplicate values.

let unique= [...new Set(array)]; //es6 Set data structure is similar to an array. Member values are unique, and duplicate values are automatically deduplicated. === === === === ==Copy the code

2, iterate, add the value to the new array, use indexOf() to determine whether the value exists, already exist, do not add, to achieve the effect of reduplication.

let a = ['1','2','3',1,NaN,NaN,undefined,undefined,null,null, 'a','b','b']; let unique= arr =>{ let newA=[]; Arr.foreach (key => {if(newa.indexof (key)<0){newa.push (key) => {if(newa.indexof (key)<0){ }}); return newA; } console.log(unique(a)) ; / / / "1", "2", "3", 1, NaN, NaN, undefined, null, "a", "b"] / / ps: this method can not distinguish NaN, there will be two NaN. There is a problem. The next one is better.Copy the code

3, iterate, add an array of values to an Object’s property name, and assign a value to the property. The Object cannot add the same property name to the Object, and then use object.keys to return an array of the Object’s enumerable properties. This array is the deduplicated array.

let a = ['1', '2', '3', 1,NaN,NaN,undefined,undefined,null,null, 'a', 'b', 'b']; const unique = arr => { var obj = {} arr.forEach(value => { obj[value] = 0; }) return object.keys (obj); // Return object.keys (obj); } console.log(unique(a)); // 'object.keys (Object)' returns an array of enumerable properties of this Object, which is the deduplicated array} console.log(unique(a)); //["1", "2", "3", "NaN", "undefined", "null", "a", "b"]Copy the code

Note:

This method will number, NaN, undefined, null, into a string, because the object’s attribute name is a string, according to the demand, think about or Set to the simplest and most effective.

Q: What are the methods of vertical center?

  • Use it for single line textThe height and line heightSet the same height.
  • position+marginSet the parent element:position: relative;The child elementsheight: 100px; position:absolute; top: 50%; margin: -50px 0 0 0;(high)
  • position+transform: Sets the parent elementposition:relative, child element:position: absolute; top: 50%; transform: translate(0, -50%);(variable)
  • Joker Flex layout (IE10 +), set parent elementdisplay:flex; align-items: center;(variable)

There are many similar, in the practical application, you may use one or two methods, interested in reading this article

Q: Flips a string

The reverse()+join() method is used to convert the string into an array.

let str="hello word"; let b=[...str].reverse().join(""); //drow ollehCopy the code

subsequent

Record of interview questions (Part 2)

summary

What I want to say is: during the period of looking for a job, there must be their own play is not good, or not the problem, must be in the evening when they learn to summarize, in a problem above as far as possible not to fall twice, learned is their own.

Above is the recent interview encountered some problems record summary, in fact, there are still some problems did not write out, for a long time did not write the article, writing very slow, a little tired. Make a flag for yourself and write another one next week. I hope you read this article, can harvest, thank you for reading.

I hope that after watching the friends can point to like, also can follow me, your support is the biggest encouragement to me.

Front-end advanced accumulation, public account, GitHub

The above 2018.3.18

Reference links:

The difference between title and Alt

CSS- Standard box model & Weird box model

Common JS algorithm interview questions collection, ES6 implementation

11 implementations of vertical centering of THE CSS