web前端面试十大 难点问题

简介: web前端面试十大 难点问题

1、什么是闭包?闭包的用途是什么?闭包的缺点是什么?

定义:

闭包是函数和函数内部能访问到的变量的总和。

具体实现:在函数A中声明了函数B,并在函数B中使用了A内部的局部变量或形参,函数B以返回值或对象属性的形式能够在函数A的外部继续调用。

用途:

1)保存临时状态,在循环和定时器中可以使用当时的状态;

2)用来“封装”一些数据,如f1外部可以使用f1的内部数据,但不能直接通过f1.a获取。

缺点:1.常驻内存,增加内存使用量;2.在IE中使用不当可能造成内存泄漏。

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

扫码获取 1000+ 前端面试题 收藏以后面试用得上

WX搜索 【MST题库】小程序查看

2、call、apply、bind 的用法分别是什么?

假设要调用对象x的fn函数,args为参数数组.

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

区别在于call和apply是立即执行的,而bind只是赋值生成一个新函数,需要手动调用执行。

 

3、对于前端的本质的理解:

最开始的认识以为前端就是页面展示,需要画画页面、调整样式。经过一年的学习,知道了工作内容不止如此,内容、样式、交互的操作、动画,包括页面加载,性能等方面都是职责所在。

而结合计算机历史来看,计算机的诞生之初是做一些人类大脑较难在短时间内处理的操作和完整存储的数据。其实现在的电脑、手机的本质功能也是这样。人和计算机的交互过程就是前端如何让交互界面更加优美、过程更加流程是我理解的前端工程师的职能所在

4、对于前端工作流程的理解:

日常工作会接触一些开发,有意识得了解开发流程。接收产品的需求(对需求有疑问及时讨论),根据需求写代码(可能需要就展示数据对接后端),上线前自测并交付测试同事进行测试,对测试提的bug进行确认和修改。

当然,发挥的功效可能因人因团队而异,这个需要结合实际工作来看。

 

5、对于前端需要的技能的理解:

并不是简单的html、CSS和js就可以,提高代码的性能需要学习内存、HTTP,提高效率需要学习框架和库等。另外,想成为大佬可能不是简单的知道怎么用就可以,还要知道为什么可以这么用。

前端的技能更新迭代的速度较快,需保持一颗学习的心。

当然,学习不仅在前端技术上,还有其他方面。我在学习前端的路程中感受到了学习的快乐,却也意识到学习带来的快乐绝不应该仅局限于工作。人生的边界很远,做一个有独立思想的人。

 

6、JavaScript 获取指定字符串中出现次数最多的字符及其出现次数

此前大多数方法在遇到多个字符出现次数最多的情况便只能找出一个字符,我的方法较好地解决了这个问题,话不多说,直接上代码:

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 }

该方法返回值为对象{高频字符数组,最大出现次数},解决了大多数方法不考虑同时有多个字符出现次数最多的情况。

 

7、js怎样得出数组中某个数据最大连续出现的次数

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、消除一个数组里面重复的元素

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查找数组里面的重复的元素

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、先进行排序,然后就是其中的两两的比较,如果是相等而且还不存在b数组我们将其放在b数组里面

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);

 

扫码获取 1000+ 前端面试题 收藏以后面试用得上

WX搜索 【MST题库】小程序查看

相关文章
|
1月前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
56 3
|
1月前
|
前端开发 JavaScript
探索现代Web应用的微前端架构
【10月更文挑战第40天】在数字时代的浪潮中,Web应用的发展日益复杂多变。微前端架构作为一种新兴的设计理念,正逐步改变着传统的单一前端开发模式。本文将深入探讨微前端的核心概念、实现原理及其在实际项目中的应用,同时通过一个简单的代码示例,揭示如何将一个庞大的前端工程拆分成小而美的模块,进而提升项目的可维护性、可扩展性和开发效率。
|
22天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
31 6
|
29天前
|
消息中间件 前端开发 JavaScript
探索微前端架构:构建现代Web应用的新策略
本文探讨了微前端架构的概念、优势及实施策略,旨在解决传统单体应用难以快速迭代和团队协作的问题。微前端允许不同团队独立开发、部署应用的各部分,提升灵活性与可维护性。文中还讨论了技术栈灵活性、独立部署、团队自治等优势,并提出了定义清晰接口、使用Web组件、状态管理和样式隔离等实施策略。
|
1月前
|
监控 前端开发 JavaScript
探索微前端架构:构建可扩展的现代Web应用
【10月更文挑战第29天】本文探讨了微前端架构的核心概念、优势及实施策略,通过将大型前端应用拆分为多个独立的微应用,提高开发效率、增强可维护性,并支持灵活的技术选型。实际案例包括Spotify和Zalando的成功应用。
|
1月前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
36 3
|
1月前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
47 2
|
1月前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
66 1
|
2月前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
|
2月前
|
存储 前端开发 JavaScript
从 Web 2.0 到 Web 3.0:前端开发的历史与未来
【10月更文挑战第4天】本文探讨了从 Web 2.0 到 Web 3.0 的前端开发演变过程。Web 2.0 时代,前端开发者从静态网页设计走向复杂交互,技术框架如 jQuery、React 和 Vue 带来了巨大的变革。而 Web 3.0 以区块链技术为核心,带来了去中心化的互联网体验,前端开发者面临与区块链交互、去中心化身份验证、分布式存储等新挑战。文章总结了 Web 2.0 和 Web 3.0 的核心区别,并为开发者提供了如何应对新技术的建议,帮助他们在新时代中掌握技能、设计更安全的用户体验。
66 0
从 Web 2.0 到 Web 3.0:前端开发的历史与未来