您的位置:

web原生js面试,web开发面试

web原生js面试,web开发面试

更新:

本文目录一览:

有哪些经典的 Web 前端或者 JavaScript 面试笔试题

一、不定项选择题 (每题3分,共30分)

1. 声明一个对象,给它加上name属性和show方法显示其name值,以下代码中正确的是( D )

A. var obj = [name:"zhangsan",show:function(){alert(name);}];

B. var obj = {name:”zhangsan”,show:”alert(this.name)”};

C. var obj = {name:”zhangsan”,show:function(){alert(name);}};

D. var obj = {name:”zhangsan”,show:function(){alert(this.name);}};

2. 以下关于Array数组对象的说法不正确的是( CD )

A. 对数组里数据的排序可以用sort函数,如果排序效果非预期,可以给sort函数加一个排序函数的参数

B. reverse用于对数组数据的倒序排列

C. 向数组的最后位置加一个新元素,可以用pop方法

D. unshift方法用于向数组删除第一个元素

3. 要将页面的状态栏中显示“已经选中该文本框”,下列JavaScript语句正确的是( A )

A. window.status=”已经选中该文本框”

B. document.status=”已经选中该文本框”

C. window.screen=”已经选中该文本框”

D. document.screen=”已经选中该文本框”

4. 点击页面的按钮,使之打开一个新窗口,加载一个网页,以下JavaScript代码中可行的是( AD )

A. input type=”button” value=”new”

onclick=”open(‘new.html’, ‘_blank’)”/

B. input type=”button” value=”new”

onclick=”window.location=’new.html’;”/

C. input type=”button” value=”new”

onclick=”location.assign(‘new.html’);”/

D. form target=”_blank”action=”new.html”

inputtype=”submit” value=”new”/

/form

js基础面试题1-10道

1.document load 和 document ready 的区别

参考答案:文档解析过程中,ready在加载图片等外部资源前触发,load在之后触发。如果页面中要是没有图片之类的媒体文件的话ready与load是差不多的,但是页面中有文件就不一样了,所以还是推荐大家在工作中用ready

解析:

DOM文档解析:

页面加载完成有两种事件

1.load是当页面所有资源全部加载完成后(包括DOM文档树,css文件,js文件,图片资源等),执行一个函数

缺点:如果图片资源较多,加载时间较长,onload后等待执行的函数需要等待较长时间,所以一些效果可能受到影响

代码形式:

2.$(document).ready()是当DOM文档树加载完成后执行一个函数 (不包含图片,css等)所以会比load较快执行

在原生的jS中不包括ready()这个方法,Jquery才有,jquery中有 $().ready(function)。

代码形式为:

参与互动

2.JavaScript 中如何检测一个变量是一个 String 类型?

参考答案:三种方法(typeof、constructor、Object.prototype.toString.call())

解析:

参与互动

3.请用 js 去除字符串空格?

参考答案:replace 正则匹配方法、str.trim()方法、JQ 方法:$.trim(str)方法

解析:

方法一:replace 正则匹配方法

去除字符串内所有的空格:str = str.replace(/s*/g, "");

去除字符串内两头的空格:str = str.replace(/^s*|s*$/g, "");

去除字符串内左侧的空格:str = str.replace(/^s*/, "");

去除字符串内右侧的空格:str = str.replace(/(s*$)/g, "");

示例:

方法二:str.trim()方法

trim()方法是用来删除字符串两端的空白字符并返回,trim 方法并不影响原来的字符串本身,它返回的是一个新的字符串。

缺陷:只能去除字符串两端的空格,不能去除中间的空格

示例:

方法三:JQ 方法:$.trim(str)方法

$.trim() 函数用于去除字符串两端的空白字符。

注意:$.trim()函数会移除字符串开始和末尾处的所有换行符,空格(包括连续的空格)和制表符。如果这些空白字符在字符串中间时,它们将被保留,不会被移除。

示例:

参与互动

4.js 是一门怎样的语言,它有什么特点

参考答案:

1.脚本语言。JavaScript 是一种解释型的脚本语言, C、C++等语言先编译后执行, 而 JavaScript 是在程序的运行过程中逐行进行解释。

2.基于对象。JavaScript 是一种基于对象的脚本语言, 它不仅可以创建对象, 也能使用现有的对象。

3.简单。JavaScript 语言中采用的是弱类型的变量类型, 对使用的数据类型未做出严格的要求, 是基于 Java 基本语句和控制的脚本语言, 其设计简单紧凑。

4.动态性。JavaScript 是一种采用事件驱动的脚本语言, 它不需要经过 Web 服务器就可以对用户的输入做出响应。

5.跨平台性。JavaScript 脚本语言不依赖于操作系统, 仅需要浏览器的支持。

参与互动

5.== 和 === 的不同

参考答案: == 是抽象相等运算符,而 === 是严格相等运算符。 == 运算符是在进行必要的类型转换后,再比较。 === 运算符不会进行类型转换,所以如果两个值不是相同的类型,会直接返回 false 。使用 == 时,可能发生一些特别的事情,例如:

如果你对 == 和 === 的概念不是特别了解,建议大多数情况下使用 ===

参与互动

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

参考答案:

1)创建新节点

2)添加、移除、替换、插入

3)查找

参与互动

7.事件委托是什么

参考答案:利用事件冒泡的原理,让自己的所触发的事件,让他的父元素代替执行!

解析:

1、那什么样的事件可以用事件委托,什么样的事件不可以用呢?

2、为什么要用事件委托

3、事件冒泡与事件委托的对比

4、事件委托怎么取索引?

拓展:

参考

参与互动

8.require 与 import 的区别

参考答案:两者的加载方式不同、规范不同

第一、两者的加载方式不同,require 是在运行时加载,而 import 是在编译时加载

require('./a')(); // a 模块是一个函数,立即执行 a 模块函数

var data = require('./a').data; // a 模块导出的是一个对象

var a = require('./a')[0]; // a 模块导出的是一个数组 ====== 哪都行

import $ from 'jquery';

import * as _ from '_';

import {a, b, c} from './a';

import {default as alias, a as a_a, b, c} from './a'; ======用在开头

第二、规范不同,require 是 CommonJS/AMD 规范,import 是 ESMAScript6+规范

第三、require 特点:社区方案,提供了服务器/浏览器的模块加载方案。非语言层面的标准。只能在运行时确定模块的依赖关系及输入/输出的变量,无法进行静态优化。

import 特点:语言规格层面支持模块功能。支持编译时静态分析,便于 JS 引入宏和类型检验。动态绑定。

参与互动

9.javascript 对象的几种创建方式

参考答案:

第一种:Object 构造函数创建

这行代码创建了 Object 引用类型的一个新实例,然后把实例保存在变量 Person 中。

第二种:使用对象字面量表示法

对象字面量是对象定义的一种简写形式,目的在于简化创建包含大量属性的对象的过程。也就是说,第一种和第二种方式创建对象的方法其实都是一样的,只是写法上的区别不同

在介绍第三种的创建方法之前,我们应该要明白为什么还要用别的方法来创建对象,也就是第一种,第二种方法的缺点所在:它们都是用了同一个接口创建很多对象,会产生大量的重复代码,就是如果你有 100 个对象,那你要输入 100 次很多相同的代码。那我们有什么方法来避免过多的重复代码呢,就是把创建对象的过程封装在函数体内,通过函数的调用直接生成对象。

第三种:使用工厂模式创建对象

在使用工厂模式创建对象的时候,我们都可以注意到,在 createPerson 函数中,返回的是一个对象。那么我们就无法判断返回的对象究竟是一个什么样的类型。于是就出现了第四种创建对象的模式。

第四种: 使用构造函数创建对象

对比工厂模式,我们可以发现以下区别:

1.没有显示地创建对象

2.直接将属性和方法赋给了 this 对象

3.没有 return 语句

4.终于可以识别的对象的类型。对于检测对象类型,我们应该使用 instanceof 操作符,我们来进行自主检测:

同时我们也应该明白,按照惯例,构造函数始终要应该以一个大写字母开头,而非构造函数则应该以一个小写字母开头。

那么构造函数确实挺好用的,但是它也有它的缺点:

就是每个方法都要在每个实例上重新创建一遍,方法指的就是我们在对象里面定义的函数。如果方法的数量很多,就会占用很多不必要的内存。于是出现了第五种创建对象的方法

第五种:原型创建对象模式

使用原型创建对象的方式,可以让所有对象实例共享它所包含的属性和方法。

如果是使用原型创建对象模式,请看下面代码:

当为对象实例添加一个属性时,这个属性就会屏蔽原型对象中保存的同名属性。

这时候我们就可以使用构造函数模式与原型模式结合的方式,构造函数模式用于定义实例属性,而原型模式用于定义方法和共享的属性

第六种:组合使用构造函数模式和原型模式

解析: 参考

参与互动

10.JavaScript 继承的方式和优缺点

参考答案:六种方式

面试Web前端需要注意什么?会面试哪些问题?

作为一名HTML5前端工程师,为了工作,为了就业我们免不了要参加各种各样的面试。为此总结了面试前的注意事项:

第一:注意自己的仪容仪表

面试之前,一定要再次从头到脚地将自己的仪容仪表检查一遍。检查时主要包括,自己的牙缝是不是还有食物残渣,所以你需要就近找一个卫生间,如果没有卫生间就近找一个角落也是可以的,但是切记一定不要在大庭广众之下。因此,为了给自己整理出着装的时间请在约定时间前20分钟到达。

第二:再次检查面试时所需的资料是否都已带全

这些资料主要包括:身份证明、学历文凭证明、个人简历、以往作品等等,如果这些东西齐全之后,需要对这些资料做一个整理与排序。因为没有哪个面试官希望看到面试者拿出一堆“莫名其妙”的东西塞给他,让他自己再一页一页的翻找自己需要的内容,如果说这些资料在面试官手中不小心散落一地,结果可想而知。这样的求职者在面试官眼中也一定不是一个让人放心、有条不紊的员工。当然如果检查时发现资料没有带全,也不要紧张。反而你要庆幸幸亏及时检查,也有足够的时间组织语言去向面试官解释。

第三:面试之前将通信工具调成振动或关闭状态

虽然说面试者与面试官之间是一个平等的关系,但毕竟你是去人家公司求职的,始终处于一个被动的状态,所以最起码的尊重还是要做到的。曾经有调查显示,对于面试过程中接电话或是被电话打断的求职者,会被HR减分。

第四:等候面试官时,仔细观察多了解面试公司

在等候面试官时,可以暗自观察一下公司的大体情况比如员工的着装风格、公司的LOGO或是贴在墙上的企业文化、公司的环境等等,一来可以在接下来的面试过程中表现出自己对公司的认同感,二来也可以让自己对求职公司多些了解,以确定是否要接受这里的工作。如果你身边有公司的资料宣传架,不妨取一本翻看一下,也会增加HR对你的好感。

第五:放松心情,保持自信

面试时一定要保持一定的自信,这样也会给面试官留下很好的印象。面试只是你步入工作的第一步,即便是失败了那也是人生重要的经历。失败是为了更好的迎接下一个挑战。

作为一名web前端工程师千万不要觉得懂技术面试就能万事大吉了,像以上五点细节性的东西也是一定要掌握的。

面试题系列:

网页链接

Web前端岗位面试题有哪些

前端面试题汇总,基本上会有四大类问题,具体如下:

一、HTML

1、Doctype作用?严格模式与混杂模式如何区分?它们有何意义?

2、HTML5 为什么只需要写 !DOCTYPE HTML?

3、行内元素有哪些?块级元素有哪些? 空(void)元素有那些?

4、页面导入样式时,使用link和@import有什么区别?

5、介绍一下你对浏览器内核的理解?

6、常见的浏览器内核有哪些?

7、html5有哪些新特性、移除了那些元素?如何处理HTML5新标签的浏览器兼容问题?如何区分 HTML 和 HTML5?

8、简述一下你对HTML语义化的理解?

9、HTML5的离线储存怎么使用,工作原理能不能解释一下?

10、浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?

11、请描述一下 cookies,sessionStorage 和 localStorage 的区别?

12、iframe有那些缺点?

13、Label的作用是什么?是怎么用的?(加 for 或 包裹)

14、HTML5的form如何关闭自动完成功能?

15、如何实现浏览器内多个标签页之间的通信? (阿里)

16、webSocket如何兼容低浏览器?(阿里)

17、页面可见性(Page Visibility)API 可以有哪些用途?

18、如何在页面上实现一个圆形的可点击区域?

19、实现不使用 border 画出1px高的线,在不同浏览器的Quirksmode和CSSCompat模式下都能保持同一效果。

20、网页验证码是干嘛的,是为了解决什么安全问题?

21、tite与h1的区别、b与strong的区别、i与em的区别?

二、css

1、介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?

2、CSS选择符有哪些?哪些属性可以继承?

3、CSS优先级算法如何计算?

4、CSS3新增伪类有那些?

5、如何居中div?如何居中一个浮动元素?如何让绝对定位的div居中?

6、display有哪些值?说明他们的作用。

7、position的值relative和absolute定位原点是?

8、CSS3有哪些新特性?

9、请解释一下CSS3的Flexbox(弹性盒布局模型),以及适用场景?

10、用纯CSS创建一个三角形的原理是什么?

11、一个满屏 品 字布局 如何设计?

三、常见兼容性问题?

1、li与li之间有看不见的空白间隔是什么原因引起的?有什么解决办法?

2、经常遇到的浏览器的兼容性有哪些?原因,解决方法是什么,常用hack的技巧 ?

3、为什么要初始化CSS样式。

4、absolute的containing block计算方式跟正常流有什么不同?

5、CSS里的visibility属性有个collapse属性值是干嘛用的?在不同浏览器下以后什么区别?

6、position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样?

7、对BFC规范(块级格式化上下文:block formatting context)的理解?

8、CSS权重优先级是如何计算的?

9、请解释一下为什么会出现浮动和什么时候需要清除浮动?清除浮动的方式

10、移动端的布局用过媒体查询吗?

11、使用 CSS 预处理器吗?喜欢那个?

12、CSS优化、提高性能的方法有哪些?

13、浏览器是怎样解析CSS选择器的?

14、在网页中的应该使用奇数还是偶数的字体?为什么呢?

15、margin和padding分别适合什么场景使用?

16、抽离样式模块怎么写,说出思路,有无实践经验?[阿里航旅的面试题]

17、元素竖向的百分比设定是相对于容器的高度吗?

18、全屏滚动的原理是什么?用到了CSS的那些属性?

19、什么是响应式设计?响应式设计的基本原理是什么?如何兼容低版本的IE?

20、视差滚动效果,如何给每页做不同的动画?(回到顶部,向下滑动要再次出现,和只出现一次分别怎么做?)

21、::before 和 :after中双冒号和单冒号 有什么区别?解释一下这2个伪元素的作用。

22、如何修改chrome记住密码后自动填充表单的黄色背景 ?

23、你对line-height是如何理解的?

24、设置元素浮动后,该元素的display值是多少?(自动变成display:block)

25、怎么让Chrome支持小于12px 的文字?

26、让页面里的字体变清晰,变细用CSS怎么做?(-webkit-font-smoothing: antialiased;)

27、font-style属性可以让它赋值为“oblique” oblique是什么意思?

28、position:fixed;在android下无效怎么处理?

29、如果需要手动写动画,你认为最小时间间隔是多久,为什么?(阿里)

30、display:inline-block 什么时候会显示间隙?(携程)

31、overflow: scroll时不能平滑滚动的问题怎么处理?

32、有一个高度自适应的div,里面有两个div,一个高度100px,希望另一个填满剩下的高度。

33、png、jpg、gif 这些图片格式解释一下,分别什么时候用。有没有了解过webp?

34、什么是Cookie 隔离?(或者说:请求资源的时候不要让它带cookie怎么做)

35、style标签写在body后与body前有什么区别?

四、JavaScript

1、介绍JavaScript的基本数据类型。

2、说说写JavaScript的基本规范?

3、JavaScript原型,原型链 ? 有什么特点?

4、JavaScript有几种类型的值?(堆:原始数据类型和 栈:引用数据类型),你能画一下他们的内存图吗?

5、Javascript如何实现继承?

6、Javascript创建对象的几种方式?

7、Javascript作用链域?

8、谈谈This对象的理解。

9、eval是做什么的?

10、什么是window对象? 什么是document对象?

11、null,undefined的区别?

12、写一个通用的事件侦听器函数(机试题)。

13、[“1”, “2”, “3”].map(parseInt) 答案是多少?

14、关于事件,IE与火狐的事件机制有什么区别? 如何阻止冒泡?

15、什么是闭包(closure),为什么要用它?

16、javascript 代码中的”use strict”;是什么意思 ? 使用它区别是什么?

17、如何判断一个对象是否属于某个类?

18、new操作符具体干了什么呢?

19、用原生JavaScript的实现过什么功能吗?

20、Javascript中,有一个函数,执行时对象查找时,永远不会去查找原型,这个函数是?

21、对JSON的了解?

22、[].forEach.call($$("*"),function(a){ a.style.outline="1px solid #"+(~~(Math.random()*(124))).toString(16) }) 能解释一下这段代码的意思吗?

23、js延迟加载的方式有哪些?

24、Ajax 是什么? 如何创建一个Ajax?

25、同步和异步的区别?

26、如何解决跨域问题?

27、页面编码和被请求的资源编码如果不一致如何处理?

28、模块化开发怎么做?

29、AMD(Modules/Asynchronous-Definition)、CMD(Common Module

Definition)规范区别?

30、requireJS的核心原理是什么?(如何动态加载的?如何避免多次加载的?如何 缓存的?)

31、让你自己设计实现一个requireJS,你会怎么做?

32、谈一谈你对ECMAScript6的了解?

33、ECMAScript6 怎么写class么,为什么会出现class这种东西?

34、异步加载的方式有哪些?

35、documen.write和 innerHTML的区别?

36、DOM操作——怎样添加、移除、移动、复制、创建和查找节点?

37、.call() 和 .apply() 的含义和区别?

38、数组和对象有哪些原生方法,列举一下?

39、JS 怎么实现一个类。怎么实例化这个类

40、JavaScript中的作用域与变量声明提升?

41、如何编写高性能的Javascript?

42、那些操作会造成内存泄漏?

43、JQuery的源码看过吗?能不能简单概况一下它的实现原理?

44、jQuery.fn的init方法返回的this指的是什么对象?为什么要返回this?

45、jquery中如何将数组转化为json字符串,然后再转化回来?

46、jQuery 的属性拷贝(extend)的实现原理是什么,如何实现深拷贝?

47、jquery.extend 与 jquery.fn.extend的区别?

48、jQuery 的队列是如何实现的?队列可以用在哪些地方?

49、谈一下Jquery中的bind(),live(),delegate(),on()的区别?

50、JQuery一个对象可以同时绑定多个事件,这是如何实现的?

51、是否知道自定义事件。jQuery里的fire函数是什么意思,什么时候用?

52、jQuery 是通过哪个方法和 Sizzle 选择器结合的?(jQuery.fn.find()进入Sizzle)

53、针对 jQuery性能的优化方法?

54、Jquery与jQuery UI有啥区别?

55、JQuery的源码看过吗?能不能简单说一下它的实现原理?

56、jquery 中如何将数组转化为json字符串,然后再转化回来?

57、jQuery和Zepto的区别?各自的使用场景?

58、针对 jQuery 的优化方法?

59、Zepto的点透问题如何解决?

60、jQueryUI如何自定义组件?

61、需求:实现一个页面操作不会整页刷新的网站,并且能在浏览器前进、后退时正确响应。给出你的技术实现方案?

62、如何判断当前脚本运行在浏览器还是node环境中?(阿里)

63、移动端最小触控区域是多大?

64、jQuery 的 slideUp动画 ,如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后的反复执行,该如何处理呢?

65、把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别?浏览器会如何解析它们?

66、移动端的点击事件的有延迟,时间是多久,为什么会有? 怎么解决这个延时?(click 有 300ms 延迟,为了实现safari的双击事件的设计,浏览器要知道你是不是要双击操作。)

67、知道各种JS框架(Angular, Backbone, Ember, React, Meteor, Knockout…)么? 能讲出他们各自的优点和缺点么?

68、Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法?

69、解释JavaScript中的作用域与变量声明提升?

70、那些操作会造成内存泄漏?

71、JQuery一个对象可以同时绑定多个事件,这是如何实现的?

72、Node.js的适用场景?

(如果会用node)知道route, middleware, cluster, nodemon, pm2, server-side rendering么?

73、解释一下 Backbone 的 MVC 实现方式?

74、什么是“前端路由”?什么时候适合使用“前端路由”? “前端路由”有哪些优点和缺点?

75、知道什么是webkit么? 知道怎么用浏览器的各种工具来调试和debug代码么?

76、如何测试前端代码么? 知道BDD, TDD, Unit Test么? 知道怎么测试你的前端工程么(mocha, sinon, jasmin, qUnit..)?

77、前端templating(Mustache, underscore, handlebars)是干嘛的, 怎么用?

78、简述一下 Handlebars 的基本用法?

79、简述一下 Handlerbars 的对模板的基本处理流程, 如何编译的?如何缓存的?

80、用js实现千位分隔符?(来源:前端农民工,提示:正则+replace)

检测浏览器版本版本有哪些方式?

81、我们给一个dom同时绑定两个点击事件,一个用捕获,一个用冒泡,你来说下会执行几次事件,然后会先执行冒泡还是捕获

web原生js面试,web开发面试

本文目录一览: 1、有哪些经典的 Web 前端或者 JavaScript 面试笔试题 2、js基础面试题1-10道 3、面试Web前端需要注意什么?会面试哪些问题? 4、Web前端岗位面试题有哪些 有

2023-12-08
达内web前端js笔记(达内jsd)

本文目录一览: 1、web前端里的js技术 2、《web前端笔记7》js字符—获取、查找、遍历、提取、替换方法总结 3、达内web前端开发讲的什么内容 4、2020年自学Web前端要掌握的知识点有哪些

2023-12-08
java面试札记,java面试笔试题大汇总

2022-11-23
js考试编程题(js编程面试题)

本文目录一览: 1、有哪些经典的 Web 前端或者 JavaScript 面试笔试题 2、js少儿编程这道题怎么做啊 3、js做一些编程题。 4、C语言的编程题用js怎么写:输入三个整数,按从大到小的

2023-12-08
java客户端学习笔记(java开发笔记)

2022-11-14
java开发工程师面试宝典大全,JAVA工程师面试

2022-11-20
用js开发web应用(js网页开发)

本文目录一览: 1、为什么 Web 前端开发不抛弃 HTML 和 CSS,用纯 JavaScript 开发 2、让你的 Node.js Web 应用程序更快的 10 个技巧 3、直接用js jsp进行

2023-12-08
重学java笔记,java笔记总结

2022-11-23
java笔试复习(Java笔试题)

2022-11-14
htmljs编程笔记(html代码笔记)

本文目录一览: 1、html代码和JS代码有什么区别 2、如何在html中调用js函数 3、JavaScript学习笔记之数组基本操作示例 4、HTML5初学者笔记 5、《web前端笔记7》js字符—

2023-12-08
jsp程序开发学习笔记2,jsp程序设计题库

本文目录一览: 1、《JSP&Servlet学习笔记》pdf下载在线阅读,求百度网盘云资源 2、林信良编著jsp&servlet学习笔记第2版课后答案吗 3、jsp有没有快速掌握的办法呀? 4、要学J

2023-12-08
java面试宝典,java面试宝典pdf

2023-01-10
源生js编程的,原生js开发

本文目录一览: 1、jq中的$(this)也就是选择当前元素用源生js怎么表示? 2、JS编程是什么意思? 3、js是什么编程语言呀? 4、js那么多坑,为什么没有人开发一种语音来替代它 jq中的$(

2023-12-08
web的js是什么,javascript什么

2022-11-24
微信Web开发详解

2023-05-16
java学习笔记(java初学笔记)

2022-11-14
java笔试题分类总结,java面试题及答案整理

2022-11-16
java笔试面试题整理第八波,java程序员面试笔试真题与解

2022-11-21
golang笔试,go的面试题

2022-11-27
荐java面试(怎么面试java开发)

2022-11-10