Also want to open the mode of looking for a job, so want to record about the front end of some interview questions, to their own did not make the topic to deepen their impression, but also is looking for a job of friends hope a little help!!

The first company interview question

What are basic data types and reference data types in JavaScript?

The basic data types include Number String Boolean Null Undefined Symbol (ES6 new data type) bigInt Reference data types are collectively called Object types, Object Array Date Function RegExpCopy the code

How are the various data types stored?

Basic data types are stored directly on the stack; The reference data type is stored in the heap, and the reference address of the data is stored in the stack. This reference address points to the corresponding data, so as to quickly find the object in the heap memory. Incidentally, stack memory is allocated automatically. Heap memory is allocated dynamically and is not automatically freed. Set the object to NULL every time you finish using it to reduce the consumption of unused memoryCopy the code

There are several ways to declare variables in javaScript

Var let constCopy the code

Js implements a function to clone a JSON object in javascript

var oldObject ="sdf";
var newObject = JSON.parse(JSON.stringify(oldObject));
console.log(newObject);
Copy the code

Sort the numbers in an array from smallest to largest

Function sortNumber(a,b) {return a - b} var arr = [1,3,5,10,7,9] arr.sort(sortNumber) console.log(arr) // 7, 9, 10]Copy the code

The second company’s front end test questions

React class creates a component and function creates a component

Note that components created using the class keyword have their own private data (this.state) and lifecycle functions; A component created using function only has props, with no private data or lifecycle functions of its own; 1. Components created using constructors are called stateless components. Components created with the class keyword are called stateful components. When are stateful components used? When should stateless components be used? If a component needs to have its own private data, stateful components created by class are recommended. If a component does not require private data, stateless components are recommended. React: Stateless components run slightly more efficiently than stateful components because they don't have their own state and lifecycle functions. The essential difference between a stateful component and a stateless component is whether there is a state attribute or a life cycle function. The difference between props and state/data in a component is that the data in props is passed from the outside; The data in state/data is private to the component; Data obtained through Ajax is generally private data. The data in props is read-only and cannot be reassigned. Data in state/data are readable and writable;Copy the code

What are the ways to optimize performance in React?

1) React improves performance by manipulating the virtual DOM without node operations to minimize interactions with the real DOM; ShouldComponentUpdate (); if the function is not changed, the function should return false, and the render function should not be rerendered. This also improves performance; 3) IMmutable is an immutable object that cannot be modified. When any data is changed, a new object is generated, and the modification is performed only on the newly generated object. In this way, the original data is not changed, which avoids copying all nodes and reduces performance loss. Immutable is implemented by sharing data structures;Copy the code

Common route configuration items in react

HashRouter Route root component, hash route withRouter route root component, hash route withRouter route root component, hash route withRouter route root component Link Route jump, no dynamic properties, use scenario, non-Tabbar NavLink Route jump, have dynamic properties, use scenario, tabBar Switch Route render, wrapped components will only be rendered one, When wrapping, it is best to place child components outside of this label and parent components inside the Redirect RedirectCopy the code

What are the methods for routing parameters in React?

Dynamic routing: Routes are defined in the /:/: format. Route forwarding is in the path +key format. Accept: this.props. Match.params; Query: When routing is defined, the value is the same as normal. For route redirection: string splicing is used. Receive: this props. The location. The search object by value: define routing: same as normal; Route jump: use objects, internal contains the object to define the path and the object to pass parameters; This.props.history. Query programmatic navigation: this.props.history. Push ({path}, {parameter})Copy the code

Pros and cons of Vue and React

A, Vue. Js

Vue.js is not really a framework because it focuses only on the view layer and is a library for building data-driven Web interfaces. Vue.js provides efficient data binding and flexible component systems through a simple API (application programming interface). Vue. Js has the following features: 1. Lightweight framework 2. Bidirectional data binding 3. Instructions 4. Plug-in advantages: 1. Simple: The official documentation is clear and easier to learn than Angular. 2. Fast: DOM updates in asynchronous batch mode. 3. Compose: Compose your application with decoupled, reusable components. 4. Compact: ~18kb min+gzip, and no dependency. 5. Powerful: Expressions & derivable properties (computed Properties) without declaring dependencies. Module-friendly: You can install via NPM, Bower, or Duo. You don't have to force all your code to conform to Angular rules. Disadvantages: 1. Newborn: Vue.js is a new project and not as mature as Angular. 2. Impact is not very strong: I googled and found that vue.js is less diverse or rich than some other well-known libraries. 3. IE8 is not supported:Copy the code

Second, the React

React is primarily used to build uIs. React allows you to pass various types of parameters, such as declaration code that helps you render UI, static HTML DOM elements, dynamic variables, and even interactive application components. React has the following features: 1. Declarative design: React uses the declarative paradigm to easily describe applications. React minimizes interaction with the DOM by emulating the DOM. 3. Flexibility: React works well with known libraries or frameworks. Advantages: 1. Fast speed: During UI rendering, React partially updates the actual DOM through micro-operations in the virtual DOM. 2. Cross-browser compatibility: The virtual DOM helped us solve the cross-browser problem by giving us a standardized API that worked even in IE8. 3. Modularity: Write separate modular UI components for your application so that when one or more components break down, you can easily isolate them. 4. One-way Data Flow: Flux is an architecture for creating a one-way data layer in JavaScript applications, which was conceptualized by Facebook with the development of the React View library. 5. Homogeneous, pure javascript: Because search engine crawlers rely on server-side responses rather than javascript execution, pre-rendering your application helps with search engine optimization. 6. Compatibility: Use RequireJS for loading and packaging, for example, while Browserify and Webpack are good for building large applications. They make difficult tasks less daunting. Disadvantages: 1. React itself is only a V, not a complete framework, so if you want a complete framework for large projects, you basically need to add ReactRouter and Flux to write large applications.Copy the code

Interview with the third company

ES6 new array method

ForEach, map, filter, every, some, reduceCopy the code

Differences between Map and filter // Similarities between Map and filter

Map () returns a new array by iterating through an array without changing the contents of the original array. Filter () returns a new array by iterating through an array without changing the contents of the original array. // Map and filter do not change the original arrayCopy the code

An array is accumulated using reduce

let array = [1, 2, 3, 4, 5]; let total = array.reduce((a, b) => { return a + b; }); console.log(total); / / 15Copy the code

The difference between for-in and for-of in javascript

To summarize, for in iterates over the array index (key name), while for of iterates over the array element value. For-in always gets the key of an object or the index of an array or string. For-of always gets the value of an object or the value of an array or string, and can also be used to traverse maps and sets.Copy the code

There are four ways to traverse a set of numbers

The for loop

There are also two statements that break out of the for loop: break and continue

for (let index=0; index < someArray.length; index++) { const elem = someArray[index]; Var I =1; var I =1; i<=10; I ++) {if(I ==5) {brack}} // continue I =5 for(var I =1; i<=10; i++) { if(i==5) {continue} }Copy the code

The for – in circulation

For-in is not a good way to loop through a set of numbers: it accesses attribute keys, not values. As a property key, the index of an array element is a string, not a number. It accesses all enumerable property keys (own and inherited), not just those of Array elements. The practical use of for-in access to inherited properties is to iterate through all the enumerable properties of an object.

for (const key in someArray) {
 console.log(key);
}
Copy the code

forEach()

someArray.forEach((elem, index) => {
 console.log(elem, index);
});
Copy the code

For – loops

for (const elem of someArray) {
 console.log(elem);
}
Copy the code