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题库】小程序查看

相关文章
|
21天前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
239 91
|
3天前
|
Web App开发 前端开发 Linux
「offer来了」浅谈前端面试中开发环境常考知识点
该文章归纳了前端开发环境中常见的面试知识点,特别是围绕Git的使用进行了详细介绍,包括Git的基本概念、常用命令以及在团队协作中的最佳实践,同时还涉及了Chrome调试工具和Linux命令行的基础操作。
「offer来了」浅谈前端面试中开发环境常考知识点
|
3天前
|
前端开发 API
(WEB前端编辑DWG)在线CAD如何实现图形识别功能
mxcad 提供的图形识别功能可帮助用户快速识别和提取 CAD 图纸中的各种图形,如直线、多段线、弧线、圆及图块,显著提升设计效率。此功能不仅适用于图形分类,还能进行数量统计和快速定位,减少手动操作。用户可通过 API 进行二次开发,自定义识别逻辑。具体步骤包括打开在线示例、选择识别功能、设置识别参数并开始识别。更多开发文档请关注公众号:梦想云图网页 CAD。
|
5天前
|
存储 前端开发 JavaScript
浅谈Web前端安全策略xss和csrf,及又该如何预防?
该文章详细讨论了Web前端安全中的XSS(跨站脚本攻击)和CSRF(跨站请求伪造)攻击原理及其防范措施,帮助读者了解如何保护Web应用程序免受这两种常见安全威胁的影响。
浅谈Web前端安全策略xss和csrf,及又该如何预防?
|
5天前
|
XML 缓存 JavaScript
提升对前端的认知,不得不了解Web API的DOM和BOM
该文章强调了在前端开发中理解和掌握DOM(文档对象模型)和BOM(浏览器对象模型)的重要性,并介绍了它们的相关操作和应用。
提升对前端的认知,不得不了解Web API的DOM和BOM
|
20天前
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
29 11
|
13天前
|
编解码 前端开发 JavaScript
web端 本地调用摄像头、前端摄像头
web端 本地调用摄像头、前端摄像头
|
20天前
|
前端开发
|
20天前
|
弹性计算 前端开发 容器
【前端web入门第六天】02 flex布局
Flex布局是一种现代CSS布局模式,通过给父元素设置`display: flex`,其子元素可自动挤压或拉伸。它包含弹性容器和弹性盒子,主轴默认为水平方向,侧轴为垂直方向。主轴对齐方式由`justify-content`属性控制,侧轴对齐方式包括`align-items`(针对所有子元素)和`align-self`(针对单个子元素)。修改主轴方向使用`flex-direction`属性,`flex`属性用于控制子元素在主轴上的伸缩比例。此外,`flex-wrap`属性允许子元素换行,而`align-content`属性则定义多行对齐方式。
|
20天前
|
前端开发
【前端web入门第五天】01 结构伪类选择器与伪元素选择器
本文介绍了CSS中的结构伪类选择器和伪元素选择器。结构伪类选择器如`nth-child`可根据元素结构关系进行选择,例如将列表中首个`&lt;li&gt;`元素背景设为绿色。伪元素选择器用于创建装饰性内容。