2020年前端笔试面试题(三.JavaScript)

刘子华
141 阅读13分钟

三、Javascript篇

1.Javascript中callee和caller的作用？

  • caller是返回一个对函数的引用，该函数调用了当前函数；

  • callee是返回正在被执行的function函数，也就是所指定的function对象的正文。

2.什么是事件代理？

  • JavaScript事件代理则是一种简单的技巧，通过它你可以把事件处理器添加到一个父级元素上，这样就避免了把事件处理器添加到多个子级元素上。

  • 当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制。

3.javascript的typeof返回哪些数据类型

  • typeof 返回值有六种可能： "number," "string," "boolean," "object," "function," 和 "undefined"

4.js中的split、slice、splice函数区别？

a . string.split(separator,limit):

  • 该方法是将string分割成片段来创建一个字符串数组,可选参数limit可以限制被分割的片段数量
  • separator参数可以是字符串,或者正则表达式,separator是一个空字符,会返回一个单字符的数组。
  • limit是返回的数量限制
//"hello world".split('',1);//["h"]
//"hello world".split('',5);//["h", "e", "l", "l", "o"]
//"hello world".split('',-1);//["h", "e", "l", "l", "o", " ", "w", "o", "r", "l", "d"]
//"hello world".split(' ',2);//["hello", "world"]
//"hello world".split(' ',3);//["hello", "world"]

b .string.slice(start,end)

  • slice方法复制string的一部分来构造一个新的字符串
//"hello world".slice(0,5);//"hello"
//"hello world".slice(0,-1);//"hello worl"

c.数组的splice:

  • array.splice(start,deleteCount,item...)
  • splice方法从array中移除一个或多个数组，并用新的item替换它们。
  • 参数start是从数组array中移除元素的开始位置,默认从0开始，参数deleteCount是要移除的元素的个数。
//var a=['a','b','c'];//var b=a.splice(1,1,'e','f');  //a=['a','e','f','c'],b=['b']
  • Jquery/Bootstrap/React等框架类库

5、常见浏览器端存储技术有哪些？

cookie:

  • cookie会随着每次HTTP请求头信息一起发送，无形中增加了网络流量，另外，cookie能存储的数据容量有限，根据浏览器类型不同而不同，IE6大约只能存储2K。

Flash ShareObject:

  • 这种方式能能解决上面提到的cookie存储的两个弊端，而且能够跨浏览器，应该说是目前最好的本地存储方案。不过，需要在页面中插入一个Flash，当浏览器没有安装Flash控件时就不能用了。所幸的是，没有安装Flash的用户极少。
  • 缺点： 需要安装Flash插件。

Google Gear:

  • Google开发出的一种本地存储技术。
  • 缺点： 需要安装Gear组件。

userData:

  • IE浏览器可以使用userData来存储数据，容量可达到640K，这种方案是很可靠的，不需要安装额外的插件。
  • 缺点： 它仅在IE下有效。

sessionStorage:

  • 使用于Firefox2+的火狐浏览器，用这种方式存储的数据仅窗口级别有效，同一个窗口（或者Tab）页面刷新或者跳转，都能获取到本地存储的数据，当新开窗口或者页面时，原来的数据就失效了。
  • 缺点： IE不支持、不能实现数据的持久保存。

globalStorage:

  • 使用于Firefox2+的火狐浏览器，类似于IE的userData。
1//赋值

2 globalStorage[location.hostname]['name'] = 'tugai'; 

3//读取

4 globalStorage[location.hostname]['name']; 

5//删除

6 globalStorage[location.hostname].removeItem('name');
缺点：IE不支持。

localStorage:

  • localStorage是Web Storage互联网存储规范中的一部分，现在在Firefox 3.5、Safari 4和IE8中得到支持。
  • 缺点： 低版本浏览器不支持。
  • 结论： Flash shareobject是不错的选择，如果你不想在页面上嵌入Flash，可以结合使用userData(IE6+)和globalStorage(Firefox2+)和localStorage(chrome3+)实现跨浏览器。

6.制作一个网站的流程有哪些？

1.咨询:

  • 网站的一个目的，服务宗旨，总体的色调，主体内容...包括网站的上线时间，预算。

2.计划:

  • 项目的一个建议书，这里罗列出前期咨询沟通的所有细节，包括一些不确认因素

3.准备一个合同:

  • 没有合同决不搞任何交易。有合同那基本上可以保证您和客户都不会再随意更改了。

4.做一些研究:

  • 这种网站同行是如何做的，竞争对手是如何做的，例如有没有必要做一些seo优化等

5.制作一个网站地图:

  • 网站的框架图，骨架。网站的组织架构，易于分工操作

6.准备网站所需的材料:

  • 图像，视频，音频材料等

7.开始网站的设计、coding阶段

8.建立测试站点

9.启动网站

7.介绍js的基本数据类型

  • Undefined、Null、Boolean、Number、String

8.js有哪些内置对象？ 

  • 数据封装类对象：Object、Array、Boolean、Number 和 String

  • 其他对象：Function、Arguments、Math、Date、RegExp、Error          

9.this对象的理解

  • this总是指向函数的直接调用者（而非间接调用者）；如果有new关键字，this指向new出来的那个对象；在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window。                                              

10.eval是做什么的？

  • 它的功能是把对应的字符串解析成JS代码并运行；应该避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。由JSON字符串转换为JSON对象的时候可以用eval，var obj =eval('('+ str +')')。

11.DOM怎样添加、移除、移动、复制、创建和查找节点                           

// 创建新节点
                                              
createDocumentFragment() //创建一个DOM片段
                                           
createElement() //创建一个具体的元素
                                             
createTextNode() //创建一个文本节点
                                              
// 添加、移除、替换、插入
                                              
appendChild()
                                              
removeChild()
                                              
replaceChild()
                                             
insertBefore() //在已有的子节点前插入一个新的子节点

// 查找
                                              
getElementsByTagName() //通过标签名称
                                              
getElementsByName() //通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)

getElementById() //通过元素Id，唯一性

12.null和undefined的区别？

null是一个表示"无"的对象，转为数值时为0；undefined是一个表示"无"的原始值，转为数值时为NaN。

undefined：
                             
（1）变量被声明了，但没有赋值时，就等于undefined。
                                              
（2) 调用函数时，应该提供的参数没有提供，该参数等于undefined。
                                              
（3）对象没有赋值的属性，该属性的值为undefined。
                                              
（4）函数没有返回值时，默认返回undefined。
                                        
null：
                                    
（1）作为函数的参数，表示该函数的参数不是对象。

（2）作为对象原型链的终点。
                                             

13.new操作符具体干了什么呢?

  • （1）创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型。

  • （2）属性和方法被加入到 this 引用的对象中。

  • （3）新创建的对象由 this 所引用，并且最后隐式的返回 this 。

14. JSON 的了解？

  • JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小。

  • 格式：采用键值对，例如：{'age':'12', 'name':'back'}                                      

15.call() 和 apply() 的区别和作用？

  • apply()函数有两个参数：第一个参数是上下文，第二个参数是参数组成的数组。如果上下文是null，则使用全局对象代替。

  • 如：function.apply(this,[1,2,3]);

  • call()的第一个参数是上下文，后续是实例传入的参数序列。

  • 如：function.call(this,1,2,3);

 16.你有哪些性能优化的方法？

  • （1）减少http请求次数：CSS Sprites, JS、CSS源码压缩、图片大小控制合适；网页Gzip，CDN托管，data缓存 ，图片服务器。

  • （2）前端模板 JS+数据，减少由于HTML标签导致的带宽浪费，前端用变量保存ajax请求结果，每次操作本地变量，不用请求，减少请求次数

  • （3） 用innerHTML代替DOM操作，减少DOM操作次数，优化javascript性能。

  • （4）当需要设置的样式很多时设置className而不是直接操作style。

  • （5）少用全局变量、缓存DOM节点查找的结果。减少IO读取操作。

  • （6）避免使用CSS Expression（css表达式)又称Dynamic properties(动态属性)。

  • （7）图片预加载，将样式表放在顶部，将脚本放在底部 加上时间戳。

17.哪些常见操作会造成内存泄漏？

  • 1.内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
  • 2.垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么该对象的内存即可回收。
  • 3.setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。
  • 4.闭包、控制台日志、循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）。

18.线程与进程的区别

  • 1.一个程序至少有一个进程,一个进程至少有一个线程。线程的划分尺度小于进程，使得多线程程序的并发性高。
  • 2.另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。
  • 3.线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。
  • 4.从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

19、谈一谈JavaScript作用域链

  • 当执行一段JavaScript代码（全局代码或函数）时，JavaScript引擎会创建为其创建一个作用域又称为执行上下文（Execution Context），在页面加载后会首先创建一个全局的作用域，然后每执行一个函数，会建立一个对应的作用域，从而形成了一条作用域链。每个作用域都有一条对应的作用域链，链头是全局作用域，链尾是当前函数作用域。

  • 作用域链的作用是用于解析标识符，当函数被创建时（不是执行），会将this、arguments、命名参数和该函数中的所有局部变量添加到该当前作用域中，当JavaScript需要查找变量X的时候（这个过程称为变量解析），它首先会从作用域链中的链尾也就是当前作用域进行查找是否有X属性，如果没有找到就顺着作用域链继续查找，直到查找到链头，也就是全局作用域链，仍未找到该变量的话，就认为这段代码的作用域链上不存在x变量，并抛出一个引用错误（ReferenceError）的异常。

20、如何理解JavaScript原型链

  • JavaScript中的每个对象都有一个prototype属性，我们称之为原型，而原型的值也是一个对象，因此它也有自己的原型，这样就串联起来了一条原型链，原型链的链头是object,它的prototype比较特殊，值为null。

  • 原型链的作用是用于对象继承，函数A的原型属性(prototype property)是一个对象，当这个函数被用作构造函数来创建实例时，该函数的原型属性将被作为原型赋值给所有对象实例，比如我们新建一个数组，数组的方法便从数组的原型上继承而来。

  • 当访问对象的一个属性时, 首先查找对象本身, 找到则返回; 若未找到, 则继续查找其原型对象的属性(如果还找不到实际上还会沿着原型链向上查找, 直至到根). 只要没有被覆盖的话, 对象原型的属性就能在所有的实例中找到，若整个原型链未找到则返回undefined

21.JavaScript如何实现继承？

  • 构造继承
  • 原型继承
  • 实例继承
  • 拷贝继承
  • 原型prototype机制或apply和call方法去实现较简单，建议使用构造函数与原型混合方式。
        function Parent(){
            this.name = 'wang';
        }

        function Child(){
            this.age = 28;
        }
        Child.prototype = new Parent();//继承了Parent，通过原型
        var demo = new Child();
        alert(demo.age);
        alert(demo.name);//得到被继承的属性

23、你做的页面在哪些流览器测试过？

  • IE内核浏览器：360，傲游，搜狗，世界之窗，腾讯TT。 

  • 非IE内核浏览器：firefox opera safari chrome 。

23、著名的前端框架都有哪些的呢？

  • 布局框架：bootstrap、easy UI、 Flutter 等。

  • Js动效框架：jquery、angular.js 等。

24、做一个网页设计师或者前端工程师，平常访问学习的IT网站都有哪些？

  • （1）、W3Cshool,MDN,网道,菜鸟教程
  • （2）、掘金
  • （3）、segmentFault
  • （4）、csdn
  • （5）、博客园
  • （6）、知乎论坛
  • （7）、简书

25、切图工作是UI设计师来做？还是前端工程师来做？

  • 对于app工程师，也就是ios和Android工程师，大多由UI设计师来完成切图。

  • 对于web前端工程师，也就是PC端、浏览端，大多有web前端工程师自己完成切图。

26、切图工程师、前端工程师、UI设计师、美工、网页设计师区别是什么？

  • (1)UI设计师俗称美工，不过UI设计师工作高端、名字大气、工资上档次，不过大多公司都称呼UI为美工，你也不要介意的，不管他们怎么称呼的，反正就是做网站设计图的就OK，别人怎么称呼不重要的了，只要你拿了高工资就是UI设计师了： UI的主要任务是设计。了解用户的意图，分析网站配色，基本布局。绘制出一个网站效果图。 UI需要掌握的知识体系应该包括网页设计，UI(User Interface)用户界面人机交互、操作逻辑、界面美观的整体设计，UED(user experience design)用户体验设计--简单来说就是如何使得网站更加便于交互。

  • (2)前端开发： 美工在完成设计效果图之后，由前端开发人员将其制作成为适合浏览器查看的HTML页面。 由于现在移动互联网的大规模流行，加上各个不同厂商的浏览器的激烈竞争，前端开发的主要任务简单来说就是使网页在不同浏览器不同分辨率不同设备上提供相似或相近的浏览体验。 前端开发需要掌握的知识体系主要是兼容性问题的解决，流畅完美的交互体验。具体到技术细节上就是HTML，CSS，JavaScript，各大公司各种不同内核的浏览器、各种各样的JS库、简单的与后台交互的知识。

27、对前端工程师这个职位你是怎么样理解的？

  • a. 前端是最贴近用户的程序员，前端的能力就是能让产品从 90分进化到 100 分，甚至更好

  • b. 参与项目，快速高质量完成实现效果图，精确到1px；

  • c. 与团队成员，UI设计，产品经理的沟通；

  • d. 做好的页面结构，页面重构和用户体验；

  • e. 处理hack，兼容、写出优美的代码格式；

  • f. 针对服务器的优化、拥抱最新前端技术。

  • 28、平时是如何学习前端开发知识？

avatar
文章
阅读
粉丝