Ten difficult questions about web front-end interviews

1. What is a closure? What is the purpose of closures? What are the disadvantages of closures?

definition:

The closure is the sum of the function and the variables that can be accessed inside the function.
Specific implementation: Function B is declared in function A, and local variables or formal parameters inside A are used in function B. Function B can be continuously called outside function A in the form of return value or object properties.

Uses:
1) To save the temporary state, the current state can be used in loops and timers;
2) To "encapsulate" some data, for example, the internal data of f1 can be used outside f1, but it cannot be obtained directly through f1.a.

Disadvantages: 1. Permanent memory, increase memory usage; 2. Improper use in IE may cause memory leaks.

let fa=function(){
let a=1;
let fb=function(){console.log(a)}
window.fb=fb;
}
fa();  //调用f1将f2挂在window上
window.fb();  //结果为1,在f1外调用f2,打印出f1的局部变量a

Scan the code to get 1000+ front-end interview questions collection to try later

Insert picture description here

2. What are the usages of call, apply and bind?

Suppose you want to call the fn function of object x, and args is an array of parameters.

fn.call(x,...args)
fn.apply(x,args)
fn.bind(x,args)()

The difference is that call and apply are executed immediately, while bind is just an assignment to generate a new function, which needs to be manually invoked and executed.

 

3. Understanding of the essence of the front end:

The first realization was that the front end was the page display, which needed to draw the page and adjust the style. After a year of study, I learned that the work content is more than that. The content, style, interactive operation, animation, including page loading, performance, etc. are all responsibilities.


From the perspective of computer history, the birth of computers was to do some operations and complete storage of data that were difficult for the human brain to process in a short time. In fact, the essential functions of modern computers and mobile phones are also like this. The interaction process between humans and computers is the front end . How to make the interaction interface more beautiful and the process more flow is the function of the front-end engineer that I understand .

4. Understanding of front-end workflow:

Daily work will be exposed to some development, consciously understand the development process. Receive product requirements (discuss in time if there are questions about the requirements), write code according to the requirements (may need to display data to connect to the backend), self-test before going online and deliver test colleagues to test, confirm and modify the bugs raised by the test.
Of course, the effect may vary from person to team. This needs to be combined with actual work.

 

5. Understanding of the skills required by the front-end:

It's not just html, CSS, and js. To improve code performance, you need to learn memory and HTTP, and to improve efficiency, you need to learn frameworks and libraries. In addition, wanting to be a big boss may not simply know how to use it, but also why it can be used like this.
The front-end skills update and iterate faster, so you need to keep a learning heart.
Of course, learning is not only in front-end technology, but also other aspects. I felt the joy of learning while learning the front-end, but I also realized that the joy of learning should never be limited to work. The boundaries of life are far away. Be a person with independent thinking.

 

6. JavaScript gets the most frequent characters in the specified string and their number of occurrences

In the past, most methods can only find one character when it encounters the most frequent occurrence of multiple characters. My method solves this problem well. Without much to say, just go to the code:

let str = 'abbcccdddddeeeeeeefffffff';//特意给定字符e和f都出现了7次
function findCharMore(str){
	let charNum = {};
	/*遍历字符串,得到对象{字符:出现次数}*/
	for(let i=0;i < str.length;i++){
		let e = str.charAt(i);
		if(charNum[e]){
			charNum[e]++;
		}else{
			charNum[e] = 1;
		}
	}
	let {maxCharArr,count} = {maxCharArr:[],count:0};
	/*遍历对象,找出出现次数最多的元素*/
    for (let key in charNum) {
    	/*出现次数更多则需剔除先前的元素并添加当前元素*/
        if (count < charNum[key]) {
			count = charNum[key];
			maxCharArr.shift();
			maxCharArr.push(key);
        }
        /*出现次数相同则在数组添加元素*/
        if (count == charNum[key] && maxCharArr.indexOf(key) == -1) {
			maxCharArr.push(key);
        }
    }
    /*返回对象{高频字符数组,最大出现次数}*/
	return {maxCharArr,count}
}
console.log(findCharMore(str));
//打印结果:{ maxCharArr: [ 'e', 'f' ], count: 7 }

The return value of this method is an object {高频字符数组,最大出现次数}, which solves the situation where most methods do not consider the occurrence of multiple characters at the same time.

 

7. How does js find the maximum number of consecutive occurrences of a certain data in an array

var test=[1,2,3,3,2,2,2,3,3,3,3,5,3,3,3,3,3] ;
var j = 0 ;
var max = 0 ;
for(var i = 0;i<test.length;i++){
if(test[i] == 3){
      j++;
 }else{
if(j>max){
    max = j;
  }
    j = 0 ;
 }
}
if(j>max) max = j ;
alert(max);

8. Eliminate duplicate elements in an array

JavaScript中indexOf函数方法是返回String对象内第一次出现子字符串的字符位置。使用方法:

strObj.indexOf(subString[,  startIndex])
//其中strObj是必选项。String 对象或 文字。
//subString是必选项。要在 String  对象中查找 的子字符串。
//starIndex是 可选项。该 整数值指出在 String  对象内开始查找的 索引。如果省略,则从字符串的开始
JavaScript中indexOf()函数方法返回一个整数值,指出  String 对象内子字符串的开始位置。如果没有找到子字符串,则返回 -1。如果 startindex 是负数,则 startindex  被当作零。如果它比最大的字符位置索引还大,则它被当作最大的可能索引。
var arr1 =[1,2,2,2,3,3,3,4,5,6]
var arr2 = [];
for(var i = 0,len = arr1.length; i< len; i++){
if(arr2.indexOf(arr1[i]) === -1){
arr2.push(arr1[i]);
}
}
console.log(arr2);

 

9, js finds duplicate elements in the array

1》for循环indexof()

var a=[1, 2, 2, 3, 4, 2, 2,5,36,4,78,3,3,3,3];

var b=[];

for (var i =0; i <a.length; i++) {
if(b.indexOf(a[i])==-1 && a.indexOf(a[i])!==a.lastIndexOf(a[i])){
b.push(a[i]);

}

}

console.log(b);

10. Sort first, and then compare the two of them. If it is equal and there is no b array, we will put it in the b array

var a=[1, 2, 2, 3, 2,3,3,3,3];

var b =[];

a.sort(function(a,b){
return a-b;

});

 

for (var i = 0; i <a.length; i++) {
if(a[i]==a[i-1] && b.indexOf(a[i])==-1){
b.push(a[i]);

}

}

console.log(b);

 

Scan the code to get 1000+ front-end interview questions collection to try later

Insert picture description here

Guess you like

Origin blog.csdn.net/weixin_42981560/article/details/109047956