欢聚时代2017前端笔试C卷

最新推荐文章于 2024-08-25 13:39:45 发布

原创最新推荐文章于 2024-08-25 13:39:45 发布 · 2.9k 阅读

5 ·

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

文章标签：

#前端开发 #欢聚时代

各大公司面试题专栏收录该内容

28 篇文章

订阅专栏

本文精选了一系列JavaScript面试题目，涵盖严格模式、数据类型、DOM操作、动画性能对比等多个方面，帮助读者深入理解JavaScript的核心概念和技术细节。

1、使用了"use strict"后，以下哪些描述错误
正确答案: A B C
"use strict";
var x = 17;
with (obj) {
x;
}
//会报obj未定义的错误

"use strict";
var x;
delete x;
//运行正常

function f(a){
"use strict";
a = 42;
return a==arguments[0];
}
f(5); //运行结果为true

function f(str){
"use strict";
return eval(str);
}
f(‘alert(1)’);
//运行正常，弹窗1的对话框
解析：
A：严格模式下禁止使用with语句，因为with语句无法在编译时就确定属性到底归属哪个对象。
B：严格模式下无法删除变量。只有configurable设置为true的对象属性，才能被删除。
C：严格模式下arguments不再追踪参数的变化，在函数内部，参数a被重新赋值为42，但arguments[0]仍然为5。
2、以下输出结果为true的有
正确答案: A B C
’’==false
’’==0
’’==[]
’’=={}
解析：==先将待比较的操作数转换为Number类型
‘’、false、0、[]、都可以转换为number类型
{}转换为number类型是NaN
3、以下代码执行的结果是（）
var a = 0;
function b(c) {
console.log(a);
var a = 1;
arguments[0] = 2;
console.log(c);
console.log(a);
}
b(3);
console.log(a);
正确答案: A
undefined,2,1,0
1,2,2,0
undefined,3,1,0
undefined,3,2,0
解析：非严格模式下，arguments追踪参数的变化
4、以下代码的执行后将输出（）
var a = 0;
var obj = {
a:'obj',
b:function(a){
setTimeout(function(){
console.log(this.a);
},1000)
}
}
obj.b(1);
正确答案: C
undefined
’obj’
0
1
解析：setTimeout函数中的this指向的是window对象
5、以下运算结果不是number类型的是
正确答案: D
"a"-1
1/0
0 && "a"
new Number(1)
解析：D项创建的是对象
var x="a"-1;
console.log(x); //NaN
console.log(typeof x); //number
var y=1/0;
console.log(y); //Infinity
console.log(typeof y); //number
var z=0 && "a";
console.log(z); //0
console.log(typeof z); //number
var w=new Number(1);
console.log(w); //[Number: 1]
console.log(typeof w); //object
6、[“1", "2", "3"].map(parseInt)的执行结果是？
正确答案: D
["1", "2", "3"]
[1, 2, 3]
[0, 1, 2]
其他
解析：parseInt函数的参数有两个，第二个参数表示的是参数1的进制
map方法在调用callback函数时,会给回调函数传递三个参数:当前正在遍历的元素, 元素索引, 原数组本身.
parseInt会忽略第三个参数，但不会忽略第二个参数，即parseInt将元素的索引当做进制数来用，故：
[ 1, NaN, NaN ]
7、下面代码执行后，foo.x的值是？( )
var foo = {n: 1};
var bar = foo;
foo.x = foo = {n: 2};
正确答案: D
1
2
程序报错
其他
解析：
foo指向对象{n:1}
bar指向对象{n:1}
首先foo断开原来的指向，指向{n:2}，查找foo.x当然找不到，故undefined
若将此题改成：
var foo = {n: 1,x:1};
var bar = foo;
foo.x = foo = {n: 2};
更有迷惑力，其实结果还是undefined
8、关于SVG和CANVAS，下面陈述正确的有?
正确答案: D F
SVG做动画性能要优于CANVAS
CANVAS做动画性能要优于SVG
SVG产生的dom数量比CANVAS要少
CANVAS产生的dom数量比SVG要少
CANVAS可以使用css设置动画样式
SVG可以使用css设置动画样式
解：CANVAS产生的dom数量比SVG要少、SVG可以使用css设置动画样式
SVG 是一种使用 XML 描述 2D 图形的语言。 Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas ：
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏，其中的许多对象会被频繁重绘
SVG ：
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序（比如谷歌地图）复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
不适合游戏应用
9、下述可正确注释html代码的有？
正确答案: C
// <div></div>
# <div></div>

/* <div></div> */
10、下述片段中，el指向的dom是？ ( )
html:
<div id=”foo”>
<p id=”foo”></p>
</div>
javascript:
var el = document.getElementById('foo');
正确答案: C
<div id=”foo”></div>
<p id=”foo”></p>
无法获取值
解析：id必须唯一，否则无法获取值
11、typeof function( ){} 输出的是_____
答案：function
12、在ES6中提供了__用于二进制的操作。
答案：ArrayBuffer、TypeArray、DataView
连续的内存缓冲区、特定类型的数组、工具类
13、请写出HTML5新增的布局标签_____
答案：header、footer、nav、aside、hgroup、section、figure、menu、artical
14、请使用CSS3画出一个线性渐变，渐变的方向是从右上角到左下角，起点颜色是从白色到黑色，请写出标准的写法____
答案：background:line-gradient(to bottom left,#fff,#000);
15、Doctype 严格模式与混杂模式的区别在哪里?
答案：
1）、<!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。
2）、严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。
3）、在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
4）、DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。
严格模式主要有以下限制：
变量必须声明后再使用
函数的参数不能有同名属性，否则报错
不能使用with语句
不能对只读属性赋值，否则报错
不能使用前缀0表示八进制数，否则报错
不能删除不可删除的属性，否则报错
不能删除变量delete prop，会报错，只能删除属性delete global[prop]
eval不会在它的外层作用域引入变量
eval和arguments不能被重新赋值
arguments不会自动反映函数参数的变化
不能使用arguments.callee
不能使用arguments.caller
禁止this指向全局对象
不能使用fn.caller和fn.arguments获取函数调用的堆栈
增加了保留字（比如protected、static和interface）
设立”严格模式”的目的，主要有以下几个：
消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;
消除代码运行的一些不安全之处，保证代码运行的安全；
提高编译器效率，增加运行速度；
为未来新版本的Javascript做好铺垫。
16、null和undefined的区别，null == undefined的结果是？
答案：
null是一个表示无的空对象，转为数值是0，undefined是一个表示无的原始值，转为数值是undefined
对象的属性未定义时undefined
声明变量未定义时undefined
函数调用时参数为赋值时undefined
函数没有返回之时默认undefined
null==undefined的结果是true
17、background-position:top left,其中top，left对应的css盒子模型中的哪个矩形框的左上角，可以修改它的默认值吗？如果可以如何修改？
答案：background-position相对于padding-box
通过修改background-origin:content-box | padding-box | border-box
18、css属性float的属性值有哪些，描述它们的作用
答案：
left:元素向左浮动。
right:元素向右浮动。
none :默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit:规定应该从父元素继承 float 属性的值。
19、sass是什么？它有哪些好处和坏处？
答案：CSS预处理器，
好处：可以使用变量、mixin、函数、规则嵌套、颜色处理等，
坏处：css的文件体积和复杂度不可控、调试难度增加、成本等
20、function fun(n,o){
console.log(o);
return {
fun:function(m){
return fun(m,n);
}
}
}
var a = fun(0).fun(1);a.fun(2);a.fun(3);
var b = fun(0).fun(1).fun(2).fun(3);
var c =fun(0);c.fun(1);c.fun(2);c.fun(3);
三行a,b,c的输出分别是什么？
答案：
undefined、0、1、1
undefined、0、1、2
undefined、0、0、0
21、ECMAScript和javaScript的关系？
答案：JavaScript包含核心（ECMAScript）、文档对象模型（DOM）、浏览器对象模型（BOM）
22、那些操作会造成内存泄漏？
答案：闭包、setTimeout函数的第一个参数使用字符串而不是函数时、控制台日志、对象的循环引用、从外到内执行appendChild、
给DOM对象用attachEvent绑定事件、反复重写同一个属性
23、你是否了解或使用过MVC框架，简单陈述下你对MVC的理解
答案：MVC 是一种使用 MVC（Model View Controller 模型-视图-控制器）设计创建 Web 应用程序的模式：
Model（模型）表示应用程序核心（比如数据库记录列表）；
View（视图）显示数据（数据库记录）；
Controller（控制器）处理输入（写入数据库记录）；
优点：
分层有助于管理复杂的应用程序、分层同时也简化了分组开发；
每个部分都可以独立的改变而不影响其他部分，从而大大提高了应用的灵活性和重用性；
24、求 10000 以内 3 和 5 的倍数和，写出JavaScript实现函数
答案
var getSum=function(num){
if (!num||(typeof num!='number')) {
return 0;
}
var sum=0;
for(var i=0;i<num;i++){
if (i%3==0||i%5==0) {
sum+=i;
}
}
return sum;
}
25、请编写一个JavaScript函数，实现清除数据中重复的元素
答案
var del=function(arr){
if (!arr||arr.length==0) {
return [];
}
return [...new Set(arr)];
}
26、用纯css实现某个元素的双边框效果，边框大小都为5，如图

答案：用outline或box-shadow
（1）background:yellow;
border:5px solid red;
outline: 5px solid black;
（2）background:yellow;
box-shadow：5px 5px 5px 5px red;
box-shadow：10px 10px 10px 10px black;
27、请用html和css实现以下效果（移动设备），要求
①三个圆形icon大小为80px，固定不变，
②被三个圆形icon划分的四个间距相等，
③黑色背景需要占满移动设备的宽度

答案：
<div class="icon-list">
<div class="icon 1"></div>
<div class="icon 2"></div>
<div class="icon 3"></div>
</div>

.icon-list{
width:100%; height:100px;
background:#f00;
display:flex;
justify-content:space-between; /*三个真实元素之间有间距且相等*/