Previous points here: ↓
Summary of JS interview questions (I)
Summary of JS interview questions (II)
Summary of JS interview questions (III)
Summary of JS interview questions (IV)
Summary of JS interview questions (V)
51. The click event on the mobile terminal is delayed. How long is it and why? How to solve this delay?

Reference answer:

1. 300 ms
2. Because the browser will wait for a period of time after capturing the first click. If the user does not make the next click within this period of time, the browser will handle the click event. If the user clicks for the second time during this period, the browser will handle the double-click event.
3. Recommend fastclick.js

52. Explain the scope and variable declaration promotion in JavaScript?

Reference answer:

• My understanding of scope is a closed space that will only affect a certain scope without affecting the outside world. In such spaces, external variables cannot be accessed externally, but external variables can be accessed internally.
• All declarations are promoted to the top of the scope
• The same variable declaration is made only once, and therefore all other declarations are ignored
• The function declaration takes precedence over the variable declaration, and the function declaration is promoted together with the definition

53. Applicable scenario of node.js?

Reference answer: for example: RESTFUL API, real-time chat, single page APP with powerful client logic. Specific examples include localized online music application, localized online search application, localized online APP, etc.

Resolution: reference resources

54. The difference between bind, call and apply

Reference answer:

call and apply are actually the same. The difference is that when parameters are passed, they are passed one by one or in the form of an array.

Both call and apply take effect at the time of call, changing the caller's this point.

let name = 'Jack'
const obj = {name: 'Tom'}
function sayHi() {console.log('Hi! ' + this.name)}

sayHi() // Hi! Jack
sayHi.call(obj) // Hi! Tom

bind also changes the point of this, but it does not take effect when called, but returns a new function.

const newFunc = sayHi.bind(obj)
newFunc() // Hi! Tom

55. Considerations for using constructors

Reference answer:

1. Generally, the first letter of a constructor needs to be capitalized, because when we see that the first letter of a function is capitalized, we think it is a constructor, which needs to be used with the new keyword to create a new instance (object)
2. When the constructor is called, it needs to be used with the new keyword.
3. Add some attributes and methods to the instance in the form of this + attribute name inside the constructor.
4. Constructors generally do not need a return value. If there is a return value

- 4.1 If the return value is a basic data type, the constructor is called, and the return value is still the object created.
- 4.2 If the return value is a complex data type, this is the return value when calling the constructor return The later complex data type.

56. How to get browser version information

Reference answer:

window. navigator. userAgent

57. How to realize file breakpoint continuous transmission

Reference answer:

The core content of breakpoint continuation is to "slice" the file and then transfer it to the server one by one, but this seemingly simple upload process has countless holes.

The first is the identification of files. After a file is divided into several pieces, how to tell the server how many pieces you have cut, and how the server should merge the files you uploaded, all of which should be considered.

Therefore, before uploading the file, we should have a "handshake" process with the server, tell the server the file information, and then agree the size of the slice with the server. After reaching a consensus with the server, we can start the subsequent file transmission.

The foreground should transfer each piece of file to the background. After success, the front end and back end should be identified for subsequent breakpoints.

When the file transmission is interrupted, the user can select the file again to judge whether part of the file has been uploaded through the identification. If so, we can continue to transmit the file according to the last progress to achieve the function of continuous transmission.
With HTML5's File api, cutting files is much easier than thought.

Just use slice method

var packet = file.slice(start, end);

The parameter start is the position where the slice starts, and end is the position where the slice ends. The units are bytes. By controlling start and end, the file can be partitioned

as

file.slice(0,1000);
file.slice(1000,2000);
file.slice(2000,3000);
// ......

After slicing the file, the next thing to do is to transfer the fragments to the server.
If the line drops in the middle, you have to get the location of the last uploaded file from the server next time, and then start uploading the next file content from this location.

Resolution: reference resources

58. Common methods of array

Reference answer:

1. Array. map()

This method calls a provided function for each element in the array, and the result is returned as a new array without changing the original array

let arr = [1, 2, 3, 4, 5];
let newArr = arr.map(x => x * 2);
//arr= [1, 2, 3, 4, 5] the original array remains unchanged
//newArr = [2, 4, 6, 8, 10] returns a new array

2. Array. forEach()

This method is to execute each element in the array and pass it into the provided function. There is no return value. Directly change the original array. Pay attention to the difference from the map method

let arr = [1, 2, 3, 4, 5];
num.forEach(x => x * 2);
// arr = [2, 4, 6, 8, 10] array change, pay attention to distinguish it from map

3. Array. filter()

This method judges all elements and returns the elements that meet the conditions as a new array

let arr = [1, 2, 3, 4, 5]
const isBigEnough => value => value >= 3
let newArr = arr.filter(isBigEnough)
//newNum = [3, 4, 5] the element satisfying the condition is returned as a new array

4. Array. every()

This method is to judge all elements and return a Boolean value. If all elements meet the judgment conditions, it returns true, otherwise it is false:

let arr = [1, 2, 3, 4, 5]
const isLessThan4 => value => value < 4
const isLessThan6 => value => value < 6
arr.every(isLessThan4) //false
arr.every(isLessThan6) //true

5. Array. some()

This method is to judge all elements and return a Boolean value. If all existing elements meet the judgment conditions, it returns true. If all elements do not meet the judgment conditions, it returns false:

let arr = [1, 2, 3, 4, 5]
const isLessThan4 => value => value < 4
const isLessThan6 => value => value > 6
arr.some(isLessThan4) //true
arr.some(isLessThan6) //false

6. Array. reduce()

This method is the return function of all element calls. The return value is the final result. The passed in value must be the function type:

let arr = [1, 2, 3, 4, 5];
const add = (a, b) => a + b;
let sum = arr.reduce(add);
//sum = 15 is equivalent to the effect of accumulation

There is also an array. Reducereight () method corresponding to it. The difference is that it operates from right to left

7. Array. push()

This method is to add a new element after the array. This method changes the length of the array:

let arr = [1, 2, 3, 4];
arr.push(5);
console.log(arr); //[1, 2, 3, 4, 5]
console.log(arr.length); //5

8. Array. pop()

This method deletes the last element after the array and returns the array. This method changes the length of the array:

let arr = [1, 2, 3, 4, 5];
arr.pop();
console.log(arr); //[1, 2, 3, 4]
console.log(arr.length); //4

9. Array. shift()

This method deletes the first element after the array and returns the array. This method changes the length of the array:

let arr = [1, 2, 3, 4, 5];
arr.shift();
console.log(arr); //[2, 3, 4, 5]
console.log(arr.length); //4

1. Array.unshift()

This method adds one or more elements to the beginning of the array and returns the length of the new array:

let arr = [1, 2, 3, 4, 5];
arr.unshift(6, 7);
console.log(arr); //[6, 7, 2, 3, 4, 5]
console.log(arr.length); //7

1. Array.isArray()

To judge whether an object is an array, the Boolean value is returned:

Array.isArray([1, 2, 3, 4]);  // --> true
 
var obj = {
    a: 1,
    b: 2
};
Array.isArray(obj);  // --> false
 
Array.isArray(new Array);  // --> true
 
Array.isArray("Array");  // --> false

1. Array.concat()

This method is a method that can splice multiple arrays into one array:

let arr1 = [1, 2, 3]
arr2 = [4, 5]
let arr = arr1.concat(arr2)
console.log(arr) //[1, 2, 3, 4, 5]

1. Array.toString()

This method converts an array to a string:

let arr = [1, 2, 3, 4, 5];
let str = arr.toString()
console.log(str) // 1,2,3,4,5

1. Array.join()

This method also converts an array to a string:

let arr = [1, 2, 3, 4, 5];
let str1 = arr.toString()
let str2 = arr.toString(',')
let str3 = arr.toString('##')
console.log(str1) // 12345
console.log(str2) // 1,2,3,4,5
console.log(str3) // 1##2##3##4##5

You can see the difference between toString and toString through the example. You can set the interval between elements~

1. Array.splice (start position, number of deleted elements)

Universal method can realize addition, deletion and modification:

let arr = [1, 2, 3, 4, 5];
let arr1 = arr.splice(2, 0 'haha')
let arr2 = arr.splice(2, 3)
let arr1 = arr.splice(2, 1 'haha')
console.log(arr1) //[1, 2, 'haha', 3, 4, 5] add an element
console.log(arr2) //[1, 2] delete three elements
console.log(arr3) //[1, 2, 'haha', 4, 5] replace an element

59. Common string operations

Reference answer:

• charAt(index): returns the string at the specified index
• charCodeAt(index): returns the Unicode value of the character at the specified index
• concat(str1, str2,...): connect multiple strings and return a copy of the connected string
• fromCharCode(): converts Unicode values to actual strings
• indexOf(str): returns the first occurrence of str in the parent string. If not, it returns - 1
• lastIndexOf(str): returns the position of the last occurrence of str in the parent string. If not, it returns - 1
• match(regex): searches for strings and returns all matches of regular expressions
• replace(str1, str2):str1 can also be a regular expression. Replace str1 with str2
• search(regex): searches a string based on a regular expression and returns the first matching location
• slice(start, end): returns a substring with a character index between start and end (excluding)
• split(sep, limit): splits a string into character arrays. Limit is the maximum number of splits performed from scratch
• substr(start, length): returns a substring of length starting from the position of the character index start
• substring(from, to): returns a substring with a character index between from and to (not included)
• toLowerCase(): converts a string to lowercase
• toUpperCase(): converts a string to uppercase
• valueOf(): returns the original string value

60. Concept and role of scope

Reference answer:

• Scope: a functional area
• The concept of scope: an area that protects variables
• Scope: variables declared inside the scope cannot be obtained outside the scope, but variables declared outside the scope can be obtained inside the scope.