Ⅰ 前端面个试咋这么奇葩,笔试题根本没啥用
前端面试不一定都需要笔试。
因为像一些比较技术比较牛的前端开发工程师，它是很难接受笔试，面试的，因为笔试的内容一般都是一些基础方面的内容但是这些内容在实际应用过程中是很少用到的，所以一般笔试是很不容易通过的，但是他的技术能力是非常牛的，所以他是不会接受笔试的，有些公司也不一定需要笔试。
Ⅱ 浙江中控集团怎么样啊
浙江中控技术股份有限公司是中控科技集团的核心成员企业，致力于工厂自动化领域的现场总线与控制系统的研究开发、生产制造、市场营销及工程服务。
2019年9月2日，中华人民共和国工业和信息化部发布了"2019年国家技术创新示范企业拟认定企业名单公示"，浙江中控技术股份有限公司在列。
更多关于浙江中控技术股份有限公司的资料可以去天眼查（www.tianyancha.com）查询一下，里边数据都来自全国企业信用信息公示系统，公司正不正规上边都看得到。
天眼查可以查询包括企业工商信息、法律诉讼、法院公闷凳漏告、商标专利、向外投资、分支机构、变更信息、债券、网站备案、着作权、招投标、失信、经营蚂烂异常、企业年报、招聘及新闻动态等近50个维度的信息。
天眼查是一款都能用的商业安全工具，实现企业信息、企业发展、司法风险、经营风险、经营状况、知识产权企业工商信息、法律诉讼、法院公告、商标专利粗辩、向外投资、分支机构、变更信息、债券、网站备案、着作权、招投标、失信、经营异常、企业年报、招聘及新闻动态等40种数据维度查询，进行深度的商业“关系梳理”，专业信用报告呈现等功能，适合金融、投资、律师、咨询、记者、商务等人士。
天眼查是由北京金堤科技有限公司旗下的商业安全工具，能构建完备的集数据采集、数据清洗、数据聚合、数据建模、数据产品化为一体的大数据解决方案。该系列产品可以可视化呈现复杂的商业关系，还可以深度挖掘和分析相关数据、预警风险等。天眼查收录了全国超1.8亿家社会实体信息（包含上市信息、企业背景、企业发展等300多种数据维度），而且数据来源都是数据全部来自公开的全国企业信用信息公示系统、中国裁判文书网、中国执行信息公开网、国家知识产权局、商标局、版权局这些平台，可以查询到企业的所有相关信息，实现全量数据实时更新。
Ⅲ web前端笔试题(HTML/CSS篇)
web前端笔试题集锦(HTML/CSS篇)
导读：网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。以下是由我J.L为您整理推荐的前端开发笔试题目，欢迎参考阅读。
一、HTML/CSS
1，让一个input的背景颜色变成红色
2，div的高宽等于浏览器可见区域的高宽，浏览器滚动，div始终覆盖浏览器的整个可见区域
思路：
(1)先放置一个div1，浮动：position:absolute;top:0px;left:0px;
(2)再放置一个div2，浮动：position:absolute;top:0px;left:0px;width:100%;height:100%;
(3)在div2中放置一个div3，令其高度超过浏览器高度，使div2产生滚动条
(4)对html,body进行样式设置：width:100%;height:100%;overflow:hidden->不让浏览器产生滚动条，避免页面出现两个滚动条
(5)编写JavaScript，另div2的高度等于页面可见高度，宽度等于页面可见宽度，注意，在计算完可见高度height和可见宽度width后，要对这两个值做处理，可见宽度-div2的滚动条的宽度，滚动条的宽度我这里假设是20px
这样题目基本就完成了，不过浏览器的兼容性还不是很好。
3，IE、FF下面CSS的解释区别
(1) 让页面元素居中
ff{margin-left:0px;margin-right:0px;width:***}
ie上面的设置+text-align:center
(2) ff：不支持滤镜
ie：支持滤镜
(3) ff：支持!important
ie支持*，ie6支持_
(4) min-width,min-height
FF支持，IE不支持，IE可以用css expression来替代
(5) Css Expression
FF不支持，IE支持
(6) cursor：hand
IE下可以显示手指状，FF下不行
(7) UL的默认padding和margin
IE下ul默认有margin，FF下ul默认有padding
(8) FORM的默认margin
IE下FORM有默认margin，FF下margin默认为0
4，一个定宽元素在浏览器(IE6，IE7，Firefox)中横向居中对齐的布局，请写出主要的.HTML标签及CSS
思路：
IE6/7：text-align:center
Firefox：margin:0 auto(margin-top和margin-bottom也可以为其他数字，关键是margin-left,margin-right为auto)
5，CSS中margin和padding的区别
margin是元素的外边框，是元素边框和相邻元素的距离
Padding是元素的内边框，是元素边框和子元素的距离
6，最后一个问题是，如何制作一个combo选项，就是可以输入可以下拉菜单选择。
思路：
(1)布局select和input，让input覆盖select，除了select的下拉图标，以方便select选择
(2)编写JS，为select添加onchange事件，onchange时将input的value置成select选中的指
7，
中alt和tittle的区别
alt：图片显示不出来了就提示alt
title：鼠标划过图片显示的提示
8，用css、html编写一个两列布局的网页，要求右侧宽度为200px，左侧自动扩展。
在这里我使用了两种方式：
(1)使用position
HTML:
left
right
(2) 使用float
HTML:
固定宽度
自适应
二者的CSS公用，如下：
html,body{width:100%;height:100%;margin:0px;padding:0px;}
.container {width:100%;height:400px;position:relative;}
.fl1 {float:left;}
.left {width:100%;height:400px;background:#AFFFD0;position:absolute;}
.right {width:200px;height:400px;background:#F9AFFF;position:absolute;right:0px;top:0px;}
.clear {clear:both;overflow:hidden;height:0px;}
.container2 {width:100%;height:400px;margin-top:100px;}
.left2 {background:#afffd0;height:400px;width:200px;margin-right:-3px;}
.right2 {height:400px;background:#f9afff;}
9，解释document.getElementByIdx_x_x_x("ElementID").style.fontSize="1.5em"
em是相对长度单位，相当于当前对象内文本的字体尺寸，如果当前行内文本的字体尺寸未被指定，则相对于浏览器的默认字体尺寸。
该语句将id为ElementID的元素的字体设置为当前对象内文本的字体尺寸的1.5倍
10，Doctype? 严格模式与混杂模式-如何触发这两种模式，区分它们有何意义? 行内元素有哪些?块级元素有哪些?CSS的盒模型?
DOCTYPE是文档类型，用来说明使用的HTML或者XHTML是什么版本，其中的DTD叫文档类型定义，里面包含了文档规则，浏览器根据定义的DTD来解析页面的标识并展现出来
DOCTYPE有两种用途：一个可以进行页面的有效性验证，另一个可以区分浏览器使用严格模式还是混杂模式来解析CSS。
严格模式和混杂模式是浏览器解析CSS的两种模式，目前使用的大部分浏览器对这两种模式都支持，但是IE5只支持混杂模式。
可那个过DOCTYPE声明来判断哪种模式被触发
(1) 没有DOCTYPE声明的网页采用混杂模式解析
(2) 对使用DOCTYPE声明的网页视不同浏览器进行解析
(3) 对于浏览器不能识别的DOCTYPE声明，浏览器采用严格模式解析
(4) 在ie6下，如果在DOCTYPE声明之前有一个xml声明比如
，采用混杂模式解析，在IE7，IE8中这条规则不生效。
(5) 在ie下，如果DOCTYPE之前有任何字符，都会导致它进入混杂模式，如：
区分这两种模式可以理解浏览器解析CSS的区别，主要是在盒模式的解释上。
常见的块级元素有：DIV,FORM,TABLE,P,PRE,H1~H6,DL,OL,UL等
常见的内联元素：SPAN,A,STRONG,EM,LABEL,INPUT,SELECT,TEXTAREA,IMG,BR等
CSS盒模型用于描述为一个HTML元素形成的矩形盒子，盒模型还涉及元素的外边距，内边距，边框和内容，具体来讲最里面的内容是元素内容，直接包围元素内容的是内边距，包围内边距的是边框，包围边框的是外边距。内边距，外边距，边框默认为0。
11，CSS引入的方式有哪些? link和@import的区别?
引入css的方式有下面四种
(1) 使用style属性
(2) 使用style标签
(3) 使用link标签
(4) 使用@import引入
Link和@import区别：
(1) link属于XHTML标签，@import是CSS提供的一种方式。Link除了加载CSS外，还可以做很多事情，如定义RSS，rel连接属性等;@import只能加载CSS
(2)加载顺序不同，当页面被加载的时候，link加载的CSS随之加载，而@import引用的CSS会等到页面完全下载完之后才会加载
(3)兼容性差别，由于@import是CSS2.1提出的，所以老的浏览器不支持，IE系列的浏览器IE5以上才能识别，而link没有这个问题
使用DOM控制样式的差别，使用JavaScript控制DOM去改变样式的时候，只能操作link，@import不可以被DOM操作。
12，如何居中一个浮动元素?
一个浮动元素里面包含的元素可以水平居中，原理如下：
让浮动元素left相对于父元素container右移50%，浮动元素left的子元素left-child相对于left左移50%就可以实现left-child相对于container水平居中
垂直居中类似，不过操作的不是left而是top
13，HTML5和CSS3的了解情况
有所了解
HTML5和CSS3分别是新推出的HTML和CSS规范，前世是XHTML2和CSS2，目前还在草案阶段，不过得到了Apple，Opera，Mozilla，Google，Microsoft不同程度的支持，也开发出了不少基于他们的应用。
HTML5相对于原来的HTML规范有一些变化：
(1)DOCTYPE更简洁
(2)新增了一些语义化标签，如article,header,footer,dialog等
(3)新增了一些高级标签，如,,
CSS3相对于CSS2也新增了不少功能
(1) 选择器更加丰富
(2) 支持为元素设置阴影
(3) 无需图片能提供圆角
14，你怎么来实现下面这个设计图
(1) 切图
(2) 布局，采用两栏布局，分别左浮动
(3) 编写css代码
15，css 中id和class如何定义,哪个定义的优先级别高?
id：#***，***为HTML中定义的id属性
class:.***，***为HTML中定义的class属性
id比class的优先级高
16，用html实现如下表格(不如嵌套实用表格)
三行三列,其中第一行第一列和第二行第一列合并; 第二行第二列和第二行第三列合并(现场画表)
运行结果如下：
17，web标准网站有那些优点
(1) Web标准网站结构和布局分离，使网站的访问和维护更加容易
(2) Web标准网站结构，布局以及页面访问都标准化，使网站能在更多的web标准设备中访问，兼容性更好
(3) Web标准网站语义化更好，语义化的XHTML不仅对用户友好，对搜索引擎也友好。
;Ⅳ 有哪些经典的 Web 前端或者 JavaScript 面试笔试题
HTML、CSS部分
8.html5\CSS3有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，地理定位等功能的增加。
* 绘画 canvas 元素
用于媒介回放的 video 和 audio 元素
本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如 article、footer、header、nav、section
表单控件，calendar、date、time、email、url、search
CSS3实现圆角，阴影，对文字加特效，增加了更多的CSS选择器 多背景 rgba
新的技术webworker, websockt, Geolocation
移除的元素
纯表现的元素：basefont，big，center，font, s，strike，tt，u；
对可用性产生负面影响的元素：frame，frameset，noframes；
* 是IE8/IE7/IE6支持通过document.createElement方法产生的标签，
可以利用这一特性让这些浏览器支持HTML5新标签，
浏览器支持新标签后，还需要添加标签默认的样式：
* 当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架
<!--[if lt IE 9]>
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
9.你怎么来实现页面设计图，你认为前端应该如何高质量完成工作? 一个满屏 品 字布局 如何设计?
* 首先划分成头部、body、脚部；。。。。。
*
实现效果图是最基本的工作，精确到2px；
与设计师，产品经理的沟通和项目的参与
做好的页面结构，页面重构和用户体验
处理hack，兼容、写出优美的代码格式
针对服务器的优化、拥抱 HTML5。
10.常使用的库有哪些？常用的前端开发工具？开发过什么应用或组件？
* 使用率较高的框架有jQuery、YUI、Prototype、Dojo、Ext.js、Mootools等。尤其是jQuery，超过91%。
轻量级框架有Modernizr、underscore.js、backbone.js、Raphael.js等。
（理解这些框架的功能、性能、设计原理）
* Sublime Text 、Eclipse、Notepad、Firebug、HttpWatch、Yslow。
* 城市选择插件，汽车型号选择插件、幻灯片插件。弹出层。（写过开源程序，加载器，js引擎更好）
JavaScript原型，原型链 ? 有什么特点？
* 原型对象也是普通的对象，是对象一个自带隐式的 __proto__ 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为null的话，我们就称之为原型链。
* 原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链。
* JavaScript的数据对象有那些属性值？
writable：这个属性的值是否可以改。
configurable：这个属性的配置是否可以删除，修改。
enumerable：这个属性是否能在for…in循环中遍历出来或在Object.keys中列举出来。
value：属性值。
* 当我们需要一个属性的时，Javascript引擎会先看当前对象中是否有这个属性， 如果没有的话，就会查找他的Prototype对象是否有这个属性。
function clone(proto) {
function Dummy() { }
Dummy.prototype = proto;
Dummy.prototype.constructor = Dummy;
return new Dummy(); //等价于Object.create(Person);
}
function object(old) {
function F() {};
F.prototype = old;
return new F();
}
var newObj = object(oldObject);
12.列出display的值，说明他们的作用。position的值， relative和absolute定位原点是？
1. block 象块类型元素一样显示。
none 缺省值。向行内元素类型一样显示。
inline-block 象行内元素一样显示，但其内容象块类型元素一样显示。
list-item 象块类型元素一样显示，并添加样式列表标记。
2.
*absolute
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
*fixed （老IE不支持）
生成绝对定位的元素，相对于浏览器窗口进行定位。
*relative
生成相对定位的元素，相对于其正常位置进行定位。
* static 默认值。没有定位，元素出现在正常的流中
*（忽略 top, bottom, left, right z-index 声明）。
* inherit 规定从父元素继承 position 属性的值。
13.页面重构怎么操作？
编写 CSS、让页面结构更合理化，提升用户体验，实现良好的页面效果和提升性能。
14.语义化的理解？
html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。
搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
15.HTML5的离线储存？
localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 数据在浏览器关闭后自动删除。
16.为什么要初始化CSS样式。
因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。
当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。
*最简单的初始化方法就是： * {padding: 0; margin: 0;} （不建议）
淘宝的样式初始化：
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
17.(写)描述一段语义的html代码吧。
（HTML5中新增加的很多标签（如：<article>、<nav>、<header>和<footer>等）
就是基于语义化设计原则）
< div id="header">
< h1>标题< /h1>
< h2>专注Web前端技术< /h2>
< /div>
语义 HTML 具有以下特性：
文字包裹在元素中，用以反映内容。例如：
段落包含在 <p> 元素中。
顺序表包含在<ol>元素中。
从其他来源引用的大型文字块包含在<blockquote>元素中。
HTML 元素不能用作语义用途以外的其他目的。例如：
<h1>包含标题，但并非用于放大文本。
<blockquote>包含大段引述，但并非用于文本缩进。
空白段落元素 ( <p></p> ) 并非用于跳行。
文本并不直接包含任何样式信息。例如：
不使用 <font> 或 <center> 等格式标记。
类或 ID 中不引用颜色或位置。
18.absolute的containing block计算方式跟正常流有什么不同？
19.position跟display、margin collapse、overflow、float这些特性相互叠加后会怎么样？
20.对BFC规范的理解？（W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关 系和相互作用。）
21.iframe有那些缺点？
*iframe会阻塞主页面的Onload事件；
*iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript
动态给iframe添加src属性值，这样可以可以绕开以上两个问题。
22.css定义的权重
以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：
/*权重为1*/
div{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 div{
}
/*权重为10+1=11*/
.class1 div{
}
/*权重为10+10+1=21*/
.class1 .class2 div{
}
如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现
23.eval是做什么的？
它的功能是把对应的字符串解析成JS代码并运行；
避免使用eval，不安全，非常耗性能（2次，一次解析成js语句，一次执行）。
23.写一个通用的事件侦听器函数
`// event(事件)工具集，来源：https://github.com/markyun
markyun.Event = {
// 页面加载完成后
readyEvent : function(fn) {
if (fn==null) {
fn=document;
}
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = fn;
} else {
window.onload = function() {
oldonload();
fn();
};
}
},
// 视能力分别使用dom0||dom2||IE方式 来绑定事件
// 参数： 操作的元素,事件名称 ,事件处理程序
addEvent : function(element, type, handler) {
if (element.addEventListener) {
//事件类型、需要执行的函数、是否捕捉
element.addEventListener(type, handler, false);
} else if (element.attachEvent) {
element.attachEvent('on' + type, function() {
handler.call(element);
});
} else {
element['on' + type] = handler;
}
},
// 移除事件
removeEvent : function(element, type, handler) {
if (element.removeEnentListener) {
element.removeEnentListener(type, handler, false);
} else if (element.datachEvent) {
element.detachEvent('on' + type, handler);
} else {
element['on' + type] = null;
}
},
// 阻止事件 (主要是事件冒泡，因为IE不支持事件捕获)
stopPropagation : function(ev) {
if (ev.stopPropagation) {
ev.stopPropagation();
} else {
ev.cancelBubble = true;
}
},
// 取消事件的默认行为
preventDefault : function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
// 获取事件目标
getTarget : function(event) {
return event.target || event.srcElement;
},
// 获取event对象的引用，取到事件的所有信息，确保随时能使用event；
getEvent : function(e) {
var ev = e || window.event;
if (!ev) {
var c = this.getEvent.caller;
while (c) {
ev = c.arguments[0];
if (ev && Event == ev.constructor) {
break;
}
c = c.caller;
}
}
return ev;
}
};
24.99%的网站都需要被重构是那本书上写的？
* 网站重构：应用web标准进行设计（第2版）
25.什么叫优雅降级和渐进增强？
优雅降级：Web站点在所有新式浏览器中都能正常工作，如果用户使用的是老式浏览器，则代码会检查以确认它们是否能正常工作。由于IE独特的盒模型布局问题，针对不同版本的IE的hack实践过优雅降级了,为那些无法支持功能的浏览器增加候选方案，使之在旧式浏览器上以某种形式降级体验却不至于完全失效.
渐进增强：从被所有浏览器支持的基本功能开始，逐步地添加那些只有新式浏览器才支持的功能,向页面增加无害于基础浏览器的额外样式和功能的。当浏览器支持时，它们会自动地呈现出来并发挥作用。
26.Node.js的适用场景
高并发、聊天、实时消息推送
27.WEB应用从服务器主动推送Data到客户端有那些方式？ html5 websoket
WebSocket通过Flash
XHR长时间连接
XHR Multipart Streaming
不可见的Iframe
<script>标签的长时间连接(可跨域)
Ⅳ 那些陌生又熟悉的前端面试题
过完年需要跳槽的小伙伴还是挺多的，又要开始刷前端面试题了！会不会有一种错觉，看着这道面试题很熟，但是不知道该如何做？或者有答案又不知道是否正确？或者使用编辑器可以运行出来正确的答案，但是不知道怎么得来的，这些你都中招了吗？
JavaScript 语言是一门弱类型语言，存在许多类型错误，因此 ES6 引入了严格模式概念。
如果不加 ‘use strict’ 常规模式下就是属于非严格模式。
严格模式
在 js 文件顶部添加 ‘use strict’ 就属于严格模式，严格模式也可以指定在函数内部。
严格模式，是为 js 定义来了一种不同的解析与执行模型，在严格模式下，ECMAScipt 3 中一些不解和不确定的行为将得到处理，而且会对不安全的操作会抛出异常。‘use strict’ 会告诉浏览器引擎可以切换到严格模式执行。
严格模式与非严格模式区别
常见笔试题：
试试这道笔试题你会做吗？
要说 js 的深浅拷贝，就不得不提 js 的两大数据类型：基本数据类型和引用类型。
基本数据类型的变量名和值都存储在栈中，对于引用类型的变量名存储在栈中，而值存储在堆中。由于存储方式不同，所以导致了他们复制的时候方式不同。
赋值
基本数据类型赋值的时候，创建的基本数据类型会在内存中开辟一个新空间把值复制过来，而引用类型采用的是地址存储，如果直接把一个引用数据直接赋值给另外一个数据，就相当于直接把自己存储值的地址给了另外一个变量，所以改变一个的值，也会改变另外一个的值。
深浅拷贝是如何定义的？
假设有 p 和 P 两个变量，如果P 是拷贝了 p 的，我们通过修改 P 来观察 p 是否发生改变，如果跟着改变，就是浅拷贝，如果是不改变，就说明是深拷贝。
基本类型复制的时候会开辟新的内存空间，所以两个值是相互独立的，引用类型复制的时候就要看是复制的内存地址还是复制一个新的堆。所以深拷贝主要针对的是引用类型的数据。
浅拷贝的常见的方式：
1、直接赋值
2、Object.assign
深拷贝的常见方式：
引用数据类型最常用的就是 Object 和 Array ，引用数据内部的数据也可以是多样化的，进行深拷贝时，也要适当地根据数据结构进行合适的复制方式，具体的深拷贝方法分别有：
1、数组中只包含基本数据类型
2、对象中只包含基本数据类型
3、对象或数组里含有一层或多层引用数据类型时
深浅拷贝的常见应用主要是数据的增删改操作。
大厂笔试题：
这是一道关于 this 指向的面试题，接下来我们就说说 this 是如何指向的？
this 对象是运行时基于函数的执行环境绑定的：
看完上述 this 指向解释，你就可以做上边的那道面试题了。
如何改变 this 的指向？
call 、bind 和 apply 这三个函数都是用来改变 this 指向的，就是改变函数执行时的上下文。
修改上述面试题：
call 、bind 和 apply 改变 this 指向，最大作用就是实现代码复用。
至于 call、bind 和 apply 的区别，可以自行去了解下。
有了上边那个表，事情就变得简单了！
关系运算符进行运算时，不同类型的值会自动转化为相同类型值，然后进行
1、两边有一个是字符串一个是是数字时，字符串调用 Number 方法，将字符串转为数字，所以：
2、如果两边都是字符串时，按照字符串的 unicode 编码来转换的，所以：
3、字符串进项比较时，先比较第一位，如果不相等直接得出结果，如果第一项相等，会继续使用第二项进行比较。
4、转为布尔值都为 false 的类型分别有：undefined 、null 、0、NaN、false、‘’
5、NaN表示的是非数字，但是这个非数字也是不同的，因此 NaN 不等于 NaN，两个NaN永远不可能相等。
6、关系运算有一个数值，将另外一个值也转为 number 类型。
7、有逻辑运算的，将其他数据类型转为 boolean 值。
8、直接使用两个空数组比较，数组地址不同，所以不相等。
评论区可以留下最近你想学习的知识点，或面试题类型！
Ⅵ 前端笔试题，button标签中，type取值有哪些
button标签type属性取值有：
submit 该按钮是提交按钮（除了 Internet Explorer，该值是其他浏览器的默认值）。
button 该按钮是可点击的按钮（Internet Explorer 的默认值）。
reset 该按钮是重置按钮（清除表单数据）。
Ⅶ web前端笔试题
1. 设置元素浮动后，该元素的 display 值是多少( A )
A.block B. 不变 C. inline D. inline-block
2. 以下不是 canvas 的⽅方法是( D )
A.getContext() B. fill() C. stroke() D.controller
3. 不是 input 在 html5 新的类型的是( B )
A.datetime B. file C. color D. range
4. 对权重排序正确的是( C )
a) .list .box p
b) #list .box div span
c) .list span
d) #list #box
e) p:last-child
f) style
A.f>d>b>a>c>e
C. f>d>b>a>c=e
B. f>d>b>a>e>c
D. f>b>d>a>c=e
5.对 document load 和 document ready 描述正确的是( B )
A.$(document).ready()是当页⾯所有资源全部加载完成后，执
⾏⼀个函数
B.如果图⽚资源较多加载时间较长，onload 后等待执⾏的函数
需要等待较长时间，所以⼀些效果可能受到影响
C.onload 是当 DOM ⽂档树加载完成后执⾏⼀个函数
D.⼀般来说 load 会比$(document).ready()较快执⾏
6.["1", "2", "3"].map(parseInt) 答案是多少( A )
A.[1, NaN, NaN] B. [1, 2, NaN]
C.[NaN, NaN, NaN] D. [1, NaN]
7.以下对 Ajax 描述不正确的是( A )
A.readyState 属性请求的状态，当值为 3 时是正在加载
B.使用 XML 和 XSLT 进⾏行数据交换及相关操作
C.总共有 8 种 callback
D.abort()⽅法，停⽌当前请求
8.var temp=null，alert(typeof temp)弹出的结果是( B )
A.Null B. Object C. Undefined D. String
1. 对XMLHttpRequest对象的open⽅方法描述错误的是(BCD)
A.在 IE 上使⽤的是 XMLHttpRequest 对象是 ActiveXObject
B.在 Firefox 上使用的是 XMLHttpRequest 对象是ActiveXObject
C.XMLHttpRequest 对象只能发送 get 请求
D.XMLHttpRequest 对象只能发送 post 请求
2. 以下哪些是 javascript 的全局函数(ABC)
A.parseFloat B. eval C. setTimeout D. alert
3. 对 http 相关内容描述正确的是(BCD)
A.301 状态码是临时重定向
B.get ⽅方式只能⽀支持 ASCII 字符
C.get 在从服务器上获取资源，post 重点在向服务器发送数据
D.HTTPS 就是 HTTP 加上加密处理理
4. 以下结果正确的是(CD)
A.typeof undefined= undefined 和 typeof null=null
B.typeof “hello”==string typeof 0==Boolean
C.typeof [1,2,3]=object typeof NaN=undefined
D.typeof {name:“李华”，age:“23”}=object
5. 以下结果正确的是(AB)
A.zepto.js 适合移动端的开发，jQuery 适合 PC 端的开发
B.zepto.js 不支持 ie 浏览器器
C.vue 属于 mvc 框架
D.v-bind 实现双向绑定
6. 对 sass 描述错误的是(BD)
A.sass 和 scss 其实是同⼀一种东⻄，都称之为 Sass
B.sass 可以声明变量符号为&
C.sass 最终都将转换成 css ⽂件才被引⽤
D. sass 不可以扩展和继承
1. ⽗级⾼宽固定，子级⽔平垂直居中怎么实现(请用 2 种 flex ⽅
法实现)?
2. 写出⼀个简单的$.ajax()的请求方式?
3. 假如移动端设备的尺寸是320px要实现每1rem=16px怎么实
现?
4.使用 Javascript 打印出 1-10000 之间的所有对称数(例如 121
1331 等)
5. angular 框架之间的通信⽅式是什么，⾄少列出三种?
6. vue 的⽣命周期有⼏个阶段，简单说说它们的作用?
Ⅷ 经典的 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>
5. 使用JavaScript向网页中输出<h1>hello</h1>，以下代码中可行的是（ BD ）
A. <scripttype=”text/javascript”>
document.write(<h1>hello</h1>);
</script>
B. <scripttype=”text/javascript”>
document.write(“<h1>hello</h1>”);
</script>
C. <scripttype=”text/javascript”>
<h1>hello</h1>
</script>
D. <h1>
<scripttype=”text/javascript”>
document.write(“hello”);
</script>
</h1>
6. 分析下面的代码：
<html>
<head>
<script type=”text/javascript”>
function writeIt (value) { document.myfm.first_text.value=value;}
</script>
</head>
<body bgcolor=”#ffffff”>
<form name=”myfm”>
<input type=”text” name=”first_text”>
<input type=”text” name=”second_text”>
</form>
</body>
</html>
以下说法中正确的是（ CD ）
A. 在页面的第二个文本框中输入内容后，当鼠标离开第二个文本框时，第一个文本框的内容不变
B. 在页面的第一个文本框中输入内容后，当鼠标离开第一个文本框时，将在第二个文本框中复制第一个文本框的内容
C. 在页面的第二个文本框中输入内容后，当鼠标离开第二个文本框时，将在第一个文本框中复制第二个文本框的内容
D. 在页面的第一个文本框中输入内容后，当鼠标离开第一个文本框时，第二个文本框的内容不变
7. 下面的JavaScript语句中，（ D ）实现检索当前页面中的表单元素中的所有文本框，并将它们全部清空
A. for(vari=0;i< form1.elements.length;i++) {
if(form1.elements.type==”text”)
form1.elements.value=”";}
B. for(vari=0;i<document.forms.length;i++) {
if(forms[0].elements.type==”text”)
forms[0].elements.value=”";
}
C. if(document.form.elements.type==”text”)
form.elements.value=”";
D. for(vari=0;i<document.forms.length; i++){
for(var j=0;j<document.forms.elements.length; j++){
if(document.forms.elements[j].type==”text”)
document.forms.elements[j].value=”";
}
}
8. 在表单(form1)中有一个文本框元素(fname)，用于输入电话号码，格式如：010-82668155，要求前3位是010，紧接一个“-”，后面是8位数字。要求在提交表单时，根据上述条件验证该文本框中输入内容的有效性，下列语句中，（ A ）能正确实现以上功能
A. var str= form1.fname.value;
if(str.substr(0,4)!=”010-”|| str.substr(4).length!=8 ||
isNaN(parseFloat(str.substr(4))))
alert(“无效的电话号码！”);
B. var str= form1.fname.value;
if(str.substr(0,4)!=”010-” && str.substr(4).length!=8 &&
isNaN(parseFloat(str.substr(4))))
alert(“无效的电话号码！”);
C. var str= form1.fname.value;
if(str.substr(0,3)!=”010-”|| str.substr(3).length!=8 ||
isNaN(parseFloat(str.substr(3))))
alert(“无效的电话号码！”);
D. var str= form1.fname.value;
if(str.substr(0,4)!=”010-”&& str.substr(4).length!=8 &&
!isNaN(parseFloat(str.substr(4))))
alert(“无效的电话号码！”);
9. 关于正则表达式声明6位数字的邮编，以下代码正确的是（ C ）
A. var reg = /\d6/;
B. var reg = \d{6}\;
C. var reg = /\d{6}/;
D. var reg = new RegExp(“\d{6}”);
10. 关于JavaScript里的xml处理，以下说明正确的是（ BCD ）
A. Xml是种可扩展标记语言，格式更规范，是作为未来html的替代
B. Xml一般用于传输和存储数据，是对html的补充，两者的目的不同
C. 在JavaScript里解析和处理xml数据时，因为浏览器的不同，其做法也不同
D. 在IE浏览器里处理xml，首先需要创建ActiveXObject对象
二、问答题
1. 列举浏览器对象模型BOM里常用的至少4个对象，并列举window对象的常用方法至少5个 （10分）
对象：Window document location screen history navigator
方法：Alert() confirm() prompt() open() close()
2. 简述列举文档对象模型DOM里document的常用的查找访问节点的方法并做简单说明 （10分）
Document.getElementById 根据元素id查找元素
Document.getElementByName 根据元素name查找元素
Document.getElementTagName 根据指定的元素名查找元素
三、程序题
1、补充按钮事件的函数，确认用户是否退出当前页面，确认之后关闭窗口； （10分）
<html>
<head>
<script type=”text/javascript” >
function closeWin(){
//在此处添加代码
if(confirm(“确定要退出吗？”)){
window.close();
}
}
</script>
</head>
<body>
<input type=”button”value=”关闭窗口”onclick=”closeWin()”/>
</body>
</html>
2、写出简单描述html标签（不带属性的开始标签和结束标签）的正则表达式，并将以下字符串中的html标签去除掉（15分）
var str = “<div>这里是div<p>里面的段落</p></div>”;
//
<scripttype=”text/javascript”>
varreg = /<\/?\w+\/?>/gi;
varstr = “<div>这里是div<p>里面的段落</p></div>”;
alert(str.replace(reg,”"));
</script>
3、完成foo()函数的内容，要求能够弹出对话框提示当前选中的是第几个单选框。（10分）
<html>
<head>
<metahttp-equiv=”Content-Type” content=”text/html;charset=utf-8″ />
</head>
<body>
<script type=”text/javascript” >
function foo() {
//在此处添加代码
var rdo =document.form1.radioGroup;
for(var i =0 ;i<rdo.length;i++){
if(rdo.checked){
alert(“您选择的是第”+(i+1)+”个单选框”);
}
}
}
</script>
<body>
<form name=”form1″ >
<input type=”radio” name=”radioGroup”/>
<input type=”radio” name=”radioGroup”/>
<input type=”radio” name=”radioGroup”/>
<input type=”radio” name=”radioGroup”/>
<input type=”submit”/>
</form>
</body>
</html>
4、完成函数showImg()，要求能够动态根据下拉列表的选项变化，更新图片的显示 （15分）
<body>
<script type=”text/javascript” >
function showImg (oSel) {
//在此处添加代码
var str = oSel.value;
document.getElementById(“pic”).src= str+”.jpg”;
}
</script>
<img id=”pic”src=”img1.jpg”width=”200″ height=”200″ />
<br />
<select id=”sel”>
<option value=”img1“>城市生活</option>
<option value=”img2“>都市早报</option>
<option value=”img3“>青山绿水</option>
</select></body>
Ⅸ 腾讯WEB前端笔试题和面试题答案
腾讯WEB前端笔试题和面试题答案
能进入腾讯工作是多少人的梦想，下面我为大家搜集的一篇“腾讯WEB前端笔试题和面试题答案”，供大家参考借鉴，希望可以帮助到有需要的朋友!
一、 耐心填一填!(每空4分，共24分)
1. 为span设置类a与b,应编写HTML代码_________。
2. 设置CSS属性clear的值为_both___________时可清除左右两边浮动。
3. ____li________标签必须直接嵌套于ul、ol中。
4. CSS属性_____margin_______可为元素设置外补丁。
5. 设置CSS属性float的值为___none_________时可取消元素的浮动。
6. 文字居中的CSS代码是____text-align:center________。
二、 精心选一选!(每题4分，共16分)
1. 下列哪个样式定义后,内联(非块状)元素可以定义宽度和高度( C )
A. display:inline B. display:none C. display:block D. display:inheric
2. 选出你认为最合理的定义标题的方法( C )
A. 文章标题
B.
文章标题
C.
文章标题
D. 文章标题
3. br标签在XHTML中语义为( A )
A.换行 B.强调 C.段落 D.标题
4. 不换行必须设置( AC )
A.word-break B.letter-spacing C.white-space D.word-spacing
5. 在使用table表现数据时，有时候表现出来的'会比自己实际设置的宽度要宽，为此需要设置下面哪些属性值( AD )
A. cellpadding=”0″ B. padding:0 C. margin:0 D. cellspacing=”0″
三、判断对或错!(每题4分，共24分)
1. CSS属性font-style 用于设置字体的粗细。 ( × )
2. CSS属性overflow用于设置元素超过宽度时是否隐藏或显示滚动条。 ( √ )
3. 在不涉及样式情况下,页面元素的优先显示与结构摆放顺序无关。 ( × )
4. 在不涉及样式情况下,页面元素的优先显示与标签选用无关。 ( √ )
5. display:inline兼容所有的浏览器。 ( √ )
6. input属于窗体元素,层级显示比flash、其它元素都高。 ( × )
;