途⽜前端⼯程师在线笔试题（含答案和全⾯解析）
途⽜前端⼯程师在线笔试题
知识点列表：
1. 字符串转数字
2. Math对象⽅法：round() pow() floor() ceil()
3. parseInt
4. Math对象⽅法：round() pow() floor() ceil()
5. 'use strict'
6. 对象字⾯量
7. ate()
8. array
9. window⽅法
10. jQuery筛选
11. css：盒⼦模型
12. 版本控制
13. substring
14. Math⽅法
15. Array⽅法
16. js全局属性
17. html结构
18. 浏览器端的存储技术
19. HTML5都有哪些新的JS API
20. JavaScript内部对象
21. js继承⼯作原理
22. 减低页⾯加载时间的⽅法
23. ⽂档类型
24. 为什么利⽤多个域名来存储⽹络资源会更有效？
1. 在JavaScript中定义变量var a="35", var b="7"运算a%b的结果为:
A. 357
B. 5
C. 0
D. 57
答案：C. 0
解析：js中把字符串转换成数字有三种⽅法：转换函数、强制类型转换、利⽤js变量弱类型转换。
1）转换函数
js提供了parseInt()和parseFloat()两个转换函数。前者把值转换成整数，后者把值转换成浮点数。只有对String类型调⽤这些⽅法，这两个函数才能正确运⾏；对其他类型返回的都是NaN(Not a Number)。
parseInt()⽅法还有基模式，可以把⼆进制、⼋进制、⼗六进制或其他任何进制的字符串转换成整数。基是由parseInt()⽅法的第⼆个参数指定的
parseFloat()⽅法与parseInt()⽅法的处理⽅式相似。
使⽤parseFloat()⽅法的另⼀不同之处在于，字符串必须以⼗进制形式表⽰浮点数，parseFloat()没有基模式。
1 console.log(parseInt("1245red")); //1245
2 console.log(parseFloat("1245red")); //1245
3 console.log(parseInt("1245.5red")); //1245
4 console.log(parseFloat("1245.555red")); //1245.555
5 console.log(parseInt("red")); //NaN
6 console.log(parseInt("0xA")); //10
7
8 console.log(parseInt("AF", 16)); //175 10*16+15
9 console.log(parseInt("10", 2)); //2
10 console.log(parseInt("10", 8)); //8
11 console.log(parseInt("10", 10)); //10
12
13//如果⼗进制数包含前导0，那么最好采⽤基数10，这样才不会意外地得到⼋进制的值
14 console.log(parseInt("010"));
15 console.log(parseInt("010",8)); //8
16 console.log(parseInt("010",10)); //10
17
18 console.log(parseFloat("1234red")); //1234
19 console.log(parseFloat("0xA")); //0
20 console.log(parseFloat("22.5")); //22.5
21 console.log(parseFloat("22.35.5")); //22.35
22 console.log(parseFloat("0908")); //908
23 console.log(parseFloat("blue")); //NaN
2）强制类型转换
使⽤强制类型转换可以访问特定的值，即使它是另⼀种类型的。ECMAScript中可⽤的3种强制类型转换有：
Boolean(value)——把给定的值转换成Boolean型；
Number(value)——把给定的值转换成数字（可以是整数或浮点数）；
String(value)——把给定的值转换成字符串。
⽤这三个函数之⼀转换值，将创建⼀个新值，存放由原始值直接转换成的值。这会造成意想不到的后果。
当要转换的值是⾄少有⼀个字符的字符串、⾮0数字或对象时，Boolean()函数将返回true。如果该值是空字符串、数字0、undefined或null，它将返回false。 1//当要转换的值是⾄少有⼀个字符的字符串、⾮0数字或对象时，Boolean()函数将返回true。
2//如果该值是空字符串、数字0、undefined或null，它将返回false。
3 console.log(Boolean("")); //false
4 console.log(Boolean("hi")); //true
5 console.log(Boolean(100)); //true
6 console.log(Boolean(null)); //false
7 console.log(Boolean(0)); //false
8 console.log(Boolean(new Object())); //true
9 console.log(Boolean({})); //true
10var a;
11 console.log(Boolean(a)); //false---undefined
12
13//Number()的强制类型转换与parseInt()和parseFloat()⽅法的处理⽅式相似，只是它转换的是整个值，⽽不是部分值。
14 console.log(Number(false)); //0
15 console.log(Number(true)); //1
16 console.log(Number(undefined)); //NaN
17 console.log(Number(null)); //0
18 console.log(Number("5.5")); //5.5
19 console.log(Number("5.6.7")); //NaN
20 console.log(Number("5red")); //NaN
21 console.log(Number(new Object())); //NaN
22 console.log(Number(100)); //100
23 console.log(Number(a)); //NaN
24
25//String()转换成字符串
26 console.log(String(null)); //null
27 console.log(String(true)); //true
28 console.log(String(undefined)); //undefined
29 console.log(String(100)); //100
30 console.log(String(10.5)); //10.5
31 console.log(String(new Object())); //[object Object]
32 console.log(String(a)); //undefined
33 console.log(String({p1:1,p2:2})); //[object Object]
34 console.log(String({})); //[object Object]
35 console.log(String(function b(){var c = 1;})); //function b(){var c = 1;}
36 console.log(String(10*10)); //100
3）利⽤js弱类型进⾏转换
1var str="012.345";
2var x = str-1;
3 console.log(x); //11.345
4
5var str2 = "012.3456red";
6var x = str2-2;
7 console.log(x); //NaN
所以本题中，虽然a，b是字符串，但是对其进⾏加减乘除数学运算时，会由于js的弱类型特征⾃动转换计算，35%7=0. 故结果为0。
2. 以下代码运⾏结果是：var a=11.45; document.und(a));
A. 11
B. 12
C. 11.4
D. 11.5
答案：A
解析：round() ⽅法可把⼀个数字舍⼊为最接近的整数。对于 0.5，该⽅法将进⾏上舍⼊。例如，3.5 将舍⼊为 4，⽽ -3.5 将舍⼊为 -3。
1 console.und(3.5)); //4
2 console.und(-3.5)); //-3
3 console.und(-3.500000001)); //-4
4 console.und(3.49)); //3
5 console.und(-3.49)); //-3
要注意不完全是四舍五⼊！！当是正数时是四舍五⼊，是负数时，若⼩数正好0.5则会进⾏上舍⼊，若不是正好0.5，则会向更偏向的那⼀⽅舍⼊。
3. 下⾯代码运⾏结果是：var s1=parseInt( "10*22" ); document.write(s1);
A. 1022
B. 220
C. 10
D. 200
答案：10
解析：类型转换⽅法同第⼀题。因为10*22是⼀个字符串，则进⾏parseInt转换时只会从前取数字部分。
4. Math对象的哪个⽅法可以返回⼤于等于参数的整数？
A. round()
B. pow()
C. floor()
D. ceil()
答案：D
解析： A. round()⽅法第⼆题解析过，是取与 x 最接近的整数，不⼀定⼤于等于参数
B. pow(x, y)返回x的y次幂的值。x,y都是必须的且必须是数字。如果由于指数过⼤⽽引起浮点溢出，则该⽅法将返回 Infinity。
C. floor() ⽅法可对⼀个数进⾏下舍⼊。该⽅法执⾏的是向下取整计算，它返回的是⼩于或等于函数参数，并且与之最接近的整数。
D. ceil() ⽅法可对⼀个数进⾏上舍⼊。该⽅法执⾏的是向上取整计算，它返回的是⼤于或等于函数参数，并且与之最接近的整数。
5. "use strict"; var o={p:1,p:2};console.log(o); 会产⽣什么结果？
A. 语法错误
B. o={p:1}
C. o={p:2}
D. o={p:1, p:2}
答案：A
解析：严格模式下，对象不能有重名的属性。正常模式下，如果对象有多个重名属性，最后赋值的那个属性会覆盖前⾯的值。严格模式下，这属于语法错误。
严格模式详解参考：
我尝试结果是：
IE：
使⽤严格模式：（报错）
不使⽤严格模式：（不报错）
Chrome:
⽤不⽤严格模式都不报错：
Firefox：
⽤不⽤严格模式都不报错：
6. var o={p:1,p:2}; console.log(o); 会产⽣什么结果？
A. 语法错误
B. o={p:1}
C. o={p:2}
D. o={p:1, p:2}
答案： C
解析：不在严格模式下执⾏，p关键字会被覆盖
7. var o={a:2, m: function(){return this.a+1;}}; var ate(o); p.a=12; console.log(p.m()); 输出值是多少？
A. 1
B. 2
C. 3
D. 13
答案：D
解析：ate(proto [, propertiesObject ]) 是E5中提出的⼀种新的对象创建⽅式，第⼀个参数是要继承的原型，如果不是⼀个⼦函数，可以传⼀个null，第⼆个参数是对象的属性描述符，这个参数是可选的。
propertiesObject 参数的详细解释：（默认都为false）
数据属性
writable：是否可任意写
configurable：是否能够删除，是否能够被修改
enumerable：是否能⽤ for in 枚举
value：值
访问属性：
get(): 访问
set(): 设置
上⾯说第⼀个参数是要继承的原型，就是说新创建的对象o的原型就是ate()中传⼊的参数。可以console.log(p)看题⼲中得到的p：
就是说，create(arg)中的参数其实是赋给了创建的对象的原型。⽽根据原型链的作⽤下，p的函数m中调⽤的this.a 应该是12. 以上。
如果要使⽤ate()⽅法创建⼀个普通的空对象，类似 var o = {}，则参数设置为：Object.prototype。参数不能为空，会报错。
如果传⼊参数是Object呢？Object本⾝其实是⼀个函数，所以输出的结果是⼀个函数：
⽽如果参数是null，则会创建⼀个没有原型的空对象：
8. 下⾯代码运⾏结果是
a=new Array(2,4,,4,5,6};
sum=0;
for(i=1;i<a.length;i++){
sum += a[i];
}
document.write(sum);
A. 21
B. 19
C. 2, 4, 4, 5, 6
D. 24456
答案：19
解析：很简单，i是从1开始的，所以是从第⼆个数组开始求和
9. window的哪个⽅法可以显⽰输⼊框
A. confirm()
B. open()
C. alert()
D. prompt()
答案：D. prompt()
解析：
confirm() ⽅法⽤于显⽰⼀个带有指定消息和OK 及取消按钮的对话框。如果⽤户点击确定按钮，则confirm() 返回true。如果点击取消按钮，则confirm() 返回false.
open() 打开（弹出）⼀个新的窗体
window.open(url, name, features, replace);
url -- 要载⼊窗体的URL
name -- 新建窗体的名称(也可以是HTML 属性的取值，⽬标)
features -- 代表窗体特性的字符串，字符串中每个特性使⽤逗号分隔
replace -- ⼀个布尔值，说明新载⼊的页⾯是否替换当前载⼊的页⾯，此参数通常不⽤指定
alert() ⽅法⽤于显⽰带有⼀条指定消息和⼀个 OK 按钮的警告框。
prompt() ⽅法⽤于显⽰可提⽰⽤户进⾏输⼊的对话框。
1//confirm
2if(confirm("Press a button")){
3//....
4 } else {字符串截取在线
5//...
6 }
7//prompt()
8var name = prompt("Please enter your name: ", "");
9if(name != null && name != ""){
10//.....
11 }
10. 下⾯哪种不属于jquery的筛选？
A. 过滤
B. ⾃动
C. 查
D. 串联
答案：B
解析：
1. 串联函数
1. andSelf()：加⼊先前所选的加⼊当前元素中
<
<div><p>test</p></div>
$('div').find('p').andSelf().addClass("class1");
//result
<div><p class="class1">test</p></div>
2. end()：回到最近的⼀个"破坏性"操作之前。即，将匹配的元素列表变为前⼀次的状态。如果之前没有破坏性操作，则返回⼀个空集。所谓的"破坏性"就是指任何改变所
匹配的jQuery元素的操作。这包括在 Traversing 中任何返回⼀个jQuery对象的函数--'add', 'andSelf', 'children', 'filter', 'find', 'map', 'next', 'nextAll', 'not', 'parent',
'parents', 'prev', 'prevAll', 'siblings' and 'slice'--再加上 Manipulation 中的 'clone'。
2. 查函数
1. add(exp): 把与表达式匹配的元素添加到jQuery对象中。这个函数可以⽤于连接分别与两个表达式匹配的元素结果集。
2. children([expr])：取得⼀个包含匹配的元素集合中每⼀个元素的所有⼦元素的元素集合。可以通过可选的表达式来过滤所匹配的⼦元素。注意：parents()将查所有祖
辈元素，⽽children()之考虑⼦元素⽽不考虑所有后代元素。
3. find(expr)：搜索所有与指定表达式匹配的元素。这个函数是出正在处理的元素的后代元素的好⽅法。
4. next([expr]): 取得⼀个包含匹配的元素集合中每⼀个元素紧邻的后⾯同辈元素的元素集合。这个函数只返回后⾯那个紧邻的同辈元素，⽽不是后⾯所有的同辈元素
（可以使⽤nextAll）。可以⽤⼀个可选的表达式进⾏筛选。
5. nextAll([expr]): 查当前元素之后所有的同辈元素。
6. offsetParent(): 返回第⼀个匹配元素⽤于定位的⽗节点。这返回⽗元素中第⼀个其position设为relative或者absolute的元素。此⽅法仅对可见元素有效。
7. parent([expr]): 取得⼀个包含着所有匹配元素的唯⼀⽗元素的元素集合。
8. parents([expr]): 取得⼀个包含着所有匹配元素的祖先元素的元素集合（不包含根元素）。
9. prevAll([expr]): 查当前元素之前所有的同辈元素;
10. siblings([expr]): 取得⼀个包含匹配的元素集合中每⼀个元素的所有唯⼀同辈元素的元素集合。
3. 过滤函数
1. eq(insex): 获取第N个元素.这个元素的位置是从0算起。
2. filter(expr): 筛选出与指定表达式匹配的元素集合。这个⽅法⽤于缩⼩匹配的范围。⽤逗号分隔多个表达式
3. filter(fn): 筛选出与指定函数返回值匹配的元素集合
4. hasClass(class): 检查当前的元素是否含有某个特定的类，如果有，则返回true。这其实就是 is("." + class)
5. is(expr): ⽤⼀个表达式来检查当前选择的元素集合，如果其中⾄少有⼀个元素符合这个给定的表达式就返回true。
6. map(callback): 将⼀组元素转换成其他数组（不论是否是元素数组);
7. not(expr): 删除与指定表达式匹配的元素
8. slice(start,[end]): 选取⼀个匹配的⼦集;
11. 使⽤（_）在元素的width属性中减去padding值计算容器的宽度
A. cale()
B. box_sizing
C. background-size
D. 以上都不是
解析：
cale()是什么？没到啊。css3中有⼀个calc()可以通过计算来确定CSS属性值。
box-sizing：以特定的⽅式定义匹配某个区域的特定元素。
box-sizing: content-box|border-box|inherit;
background-size：规定背景图像的尺⼨：
background-size: length|percentage|cover|contain; （设定宽⾼（宽，⾼） | 以⽗元素的百分⽐来设置背景图像的宽度和⾼度 | 把背景图像扩展⾄⾜够⼤，以使背景图像完全覆盖背景区域 | 把图像图像扩展⾄最⼤尺⼨，以
12. 哪个⼯具不能⽤来做PHP的版本控制？
A. CVS
B. CDN(静态资源管理)
C. SVN
D. VSS
解析：
CVS（Concurrent Versions System）⽼牌的版本控制系统，它是基于客户端/服务器的⾏为使得其可容纳多⽤户，构成⽹络也很⽅便。这⼀特性使得CVS成为位于不同地点的⼈同时处理数据⽂
件（特别是程序的源代码）时的⾸选。
使⽤静态资源库可以访问线上资源⽂件，⽐如jquery库、bootstrap库
SVN是Subversion的简称，是⼀个开放源代码的版本控制系统，相较于RCS、CVS，它采⽤了分⽀管理系统，它的设计⽬标就是取代CVS。互联⽹上很多版本控制服务已从CVS迁移到
Subversion。
VSS 的全称为 Visual Source Safe 。作为 Microsoft Visual Studio 的⼀名成员，它主要任务就是负责项⽬⽂件的管理，⼏乎可以适⽤任何软件项⽬。管理软件开发中各个不同版本的源代码和⽂
档，占⽤空间⼩并且⽅便各个版本代码和⽂档的获取，对开发⼩组中对源代码的访问进⾏有效的协调。
综上，应该选B吧？和版本控制⽆关。
13. 以下代码运⾏结果是
var mystring=" I am a student";
var a=mystring.substring(9,13);
document.write(a);
A. stud
B. tuden
C. udent
D. uden
答案：D
解析：substring() ⽅法⽤于提取字符串中介于两个指定下标之间的字符。返回是⼀个新的字符串，该字符串值包含stringObject的⼀个⼦字符串，其内容是从start处到stop-1 处的所有字符，其长
度为stop减start。
14.产⽣⼀个0~7之间(含0,7)的随机整数，正确的是
A. Math.floor(Math.random()*6)
B. Math.floor(Math.random()*7)
C. Math.floor(Math.random()*8)
D. il(Math.random()*8)
答案：C
解析：
1 console.log(Math.floor(Math.random()*6)); //0 1
2
3
4 5
2 console.log(Math.floor(Math.random()*7)); //0 1 2
3
4
5 6
3 console.log(Math.floor(Math.random()*8)); //0 1 2 3
4
5
6 7
4 console.il(Math.random()*8)); // 1 2 3 4
5
6
7 8
floor是向下取整，ceil是向上取整。
15. Array对象的哪个⽅法向数组的末尾添加⼀个或更多元素，并返回新的长度
A. concat()
B. pop()
C. push()
D.shift()
答案：C
解析：
concat()向数组的副本添加新的元素，返回新的数组，原数组不受影响at(arrayX,arrayX,......,arrayX)返回新的数组，原数组不受影响
join()
把数组的所有元素放⼊⼀个字符串。元素通过指定的分隔符
进⾏分隔。
arr.join(separator)返回⼀个字符串
pop()删除并返回数组的最后⼀个元素arrayObject.pop() arrayObject 的最后⼀个元素
push()向数组的末尾添加⼀个或更多元素，并返回新的长度arrayObject.push(newelement1,newelement2,....,newelementX)
把指定的值添加到数组后的新长度。
reverse()颠倒数组中元素的顺序serve()该⽅法会改变原来的数组，⽽不会创建新
shift()删除并返回数组的第⼀个元素arrayObject.shift()数组原来的第⼀个元素的值。
如果数组是空的，那么 shift() ⽅法将不进undefined 值。请注意，该⽅法不创建新数原有的 arrayObject
slice()从某个已有的数组返回选定的元素arrayObject.slice(start,end)
返回⼀个新的数组，包含从 start 到
end （不包括该元素）的
该⽅法并不会修改数组，⽽是返回⼀个⼦
数组中的⼀段元素，应该使⽤⽅法 Array.s
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论