WEB前端开发工程师 年终福利（一、 程序题问题）
2019-01-09 本文已影响0人
吴佳浩
程序题
-
1、
var a=[];a[0]=0;``a[1]=1;``a[4]=4;请问a.length的值是多少？a[3]的输出结果是什么？
5 undefined
-
2、
var a=[5,6]; var b=a; b[0]="hello"; alert(a[0]); 请问值是多少？
"hello"
-
3、
typeof(null),typeof(undefined),typeof(NaN),typeof(NaN==NaN),说出上面代码执行结果？
object undefined number boolean
-
4、
console.log(aMrg);输出的结果是？
function doSomething(){
for(var i = 0; 4 > i; i++) {
var k = 100;
aMrg +=','+ (k + i);
}
}
var k = 1,aMrg = k;
doSomething();
aMrg +=k;
console.log(aMrg);
1,100,101,102,1031
-
5、请写出下面输出的值
console.log(undefined || 1);//值___1__
console.log(null || NaN); //值__NaN___
console.log(0 && 1); //值__0___
console.log(0 && 1 || 0); //值__0___
-
6、看下列代码，<p>标签内的文字是什么颜色的？红色
<style>
.classA{color: blue};
.classB{color: red};
</style>
<body>
<p class=”classB classA”>123</p>
</body>
-
7、
obj.foo()值是多少？
// mixins.js文件
export function mixins(...list) {
return function (target) {
Object.assign(target.prototype, ...list)
}
}
// main.js文件
import { mixins } from './mixins'
const Foo = {
foo() { console.log('foo') }
};
@mixins(Foo)
class MyClass {}
let obj = new MyClass();
obj.foo() // 'foo'
-
8、你面前有一座高塔，这座高塔有N(N > 100)个台阶，你每次只能往前迈1个或者2个台阶，请写出程序计算总共有多少种走法？
这个案例满足斐波那契定律 1，1，2，3，5，8，13，21, 34, 55, 89, 144
varn1 = 1;
var n2 = 1;
var n3 = n1 + n2;
for (var i = 3; i <= n; i++) {
n3 = n1 + n2;
n1 = n2;//往后推一项
n2 = n3;//往后推一项
}
console.log(n3);
-
9、请阅读下面的CSS代码
#left {
color: white !important;
}
#container #left {
color: red;
}
#left {
color: green !important;
}
.container #left {
color: blue;
}
则在如下html中
<div class=”container” id=”container”>
<span id=”left”>left</span>
</div>
#left最终color属性值为？绿色
-
10、下面这段代码想要循环延时输出结果0 1 2 3 4，请问输出结果是否正确，如果不正确说明为什么，并修改循环内的代码使其输出正确的结果。
for (var i = 0; i < 5; ++i) {
setTimeout(function () {
console.log(i + ‘’);
},100*i);
}
不正确，先执行FOR循环。for循环完成后，在去执行setTimeout。但是这个时候I已经是5了，所以输入了5次5
for(var i = 0; i <5; ++i) {
var a = 0;
setTimeout (function () {
console.log(a++);
},100*i);
}
-
11、完成函数showlmg()，要求能够动态根据下拉列表的选项变化，更新图片的显示
<body>
<img id=”pic” src=”img1.jpg” width=”200” height=”200”>
<br/>
<selectid=”sel” onchange=”showImg(this)”>
<option value=”img1”>城市生活</option>
<option value=”img2”>都市早报</option>
<option value=”img3”>青山绿水</option>
</select>
</body>
<script type=”text/javascript”>
Function showImg (oSel) {
};
</script>
Function showImg (oSel) {
var pic=document.getElementById('pic')
pic.src=oSel.options[oSel.selectedIndex].value
console.log(pic.src);
};
答案说明：当select发生改变的时候调用showImg函数，实参为this（select对象本身），可以通过select对象的属性来为pic的src赋值实现图片切换
-
12、完成foo()函数的内容，要求能弹出对话框提示当前选中的是第几个单选框
<html>
<head>
<meat http-equiv=”Content-Type”content=”text/html; charset=utf-8”>
</head>
<body>
<scripttype=”text/javascript”>
function foo() {
};
</script>
<form name=”form1” onsubmit=”retuen foo()”>
<input type=”radio” name = “radioGroup”>
<input type=”radio” name = “radioGroup”>
<input type=”radio” name = “radioGroup”>
<input type=”radio” name = “radioGroup”>
</form>
</body>
</html>
function foo() {
var a=document.getElementsByTagName('input')
function foo() {
for(var i=0;i<a.length;i++){
if(a[i].checked){
alert(i+1)
}
}
}
}
题粗的有问题，onsubmit只有在提交的时候才会触发这里面没有submit按钮，在提交事件触发的时候遍历哪个input表单是选中状态然后alert粗来
-
13、计算下面程序运行结果
var msg = 'hello';
function great(name, attr) {
name = 'david';
var greating = msg + name + '!';
var msg = '您好';
for (var i = 0 ; i < 10;i++) {
var next = msg + '您的id是' + i*2 + i;
}
console.log(arguments[0]);
console.log(arguments[1]);
console.log(greating);
console.log(next);
}
great('Tom');
答案：david //参数1
undefined //参数2 未传入为未定义
undefineddavid! //name虽然是参数但是参数重新赋值为david了msg因为变量声明提升所以值为undefined
您好您的id是189 //因为number+string=string所以for循环最后一次声明next=****18+9
-
14、下面这段JS输出什么，并简述为什么？
function Foo() {
var i = 0;
return function () {
console.log(i++);
}
}
var f1 = Foo()
f2 = Foo()
f1()
f1()
f2()
console.log(i);
0 //f1=Foo() 相当于f1赋值为函数Foo()的返回值f1=function（）{ console.log(i++) }
1 //因为f1=了一个function所以有了作用域，f2和f1不同，不在一个内存中
0
i is not defined 报错 //i为Foo内部的变量全局不可访问，全局中没有i变量所以会报错
-
15、请写出下面输出的值
a) var num = 1;
var fun = function () {
console.log(num);//值___undefined___
var num = 2;
console.log(num);//值___2___
}
fun();
b) varnum = 1;
function fun () {
console.log(num);//值___1____
num = 2;
console.log(num);//值___2____
}
fun();
-
16、写出以下程序执行的结果
1)var a = 10;
a.pro = 10;
console.log(a.pro + a);
NAN number对象不可以定义私有属性 namber+非数字和字符的值就等于NaN
2)var s = ‘hello’;
s.pro = ‘world’;
console.log(s.pro + s); //undefinedhello s位字符串，字符串不可以自定义属性，所以s.pro为undefined 字符串做加运算会强制拼接位字符串
3)console.log(typeof fn);
function fn() {};
var fn;
//function 函数提升优先于变量提升
4)var f = true;
if(f === true) {
var a = 10;
}
function fn() {
var b = 20;
c = 30;
}
fn();
console.log(a);
//10
-
17、请看如下的代码，写出结果
var a = 5,b = 3;
function test() {
alert(b++);
var a = 4;
alert(--a);
alert(this.a);
}
1)tese(),三次alert()的值依次是什么？335 435 535
2)new test()，三次alert()的值依次是什么？ 33undefined 43undefined53undefined //this更改了指向原来是指向window 用了new关键字后指向test test木有a属性所以为undefined
-
18、p最后显示什么颜色。怎么让p的颜色变成黑色，并简要说明css选择器优先级关系
<style>
#classA{color:yellow};
p.classB(color:red);
</style>
<body>
<p id=”classA” class=”classB”>123</p>
</body>
//p#classA{color：black}
-
19、关于正则表达式声明6位数字的邮编，一下代码正确的是(C)
A.var reg = /\d6/;
B.var reg = \d{6}\;
C.var reg = /\d{6}/;
D.var reg = new RegExp (“\d{6}”);
-
20、关于JavaScript里xml处理，一下说明正确的(A)
A.xml是种可扩展标记语言，格式更规范，是作为未来html的替代 //貌似XML是被替代的
B.Xml一般用于传输和存储数据，是对html的补充，两者的目的不同
C.在JavaScript里解析和处理xml数据时，因为浏览器的不同，其做法也不同
D.在IE浏览器里处理xml，首先需要创建ActiveXObject对象
-
21、请选择对javascript理解有误的(B)
A.javascript是网景公司开发的一种基于事件和驱动网页脚本语言
B.JScript是javascript的简称 //微软自己的浏览器才支持
C.FireFox和IE存在大量兼容性问题的主要原因在于他们对javascript的支持不同
D.AJAX技术一定要使用javascript技术
-
22、在Jquery中下面哪一个是用来追加到指定元素的末尾(B)
A.inserAfter()
B.Append()
C.appendTo()
D.After()
-
23、在javascript中定义变量var a=”35”,var b = “7”运算a % b 的结果为(C)
A.357
B.57
C.0
D.5
-
24、下面哪个属于javascript的字符型C
A.False
B.你好
C.“123”
D.Null
-
25、下面哪个属于javascript的布尔值(C)
A.1.2
B.”true”
C.false
D.null
-
26、请选择结果为真的表达式(C)
A.null instanceof Object
B.Null === undefined;
C.null == undefined
D.NaN == NaN
-
27、下列运算方式不属于逻辑运算的是(D)
A.!a
B.a&&b
C.a||b
D.a>b
-
28、声明一个对象，给它加上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);}}
-
29、以下过于Array数组对象的说法不正确的是(C)
A.对数组里数据的排序可以用sort函数，如果排序效果非预期，可以给sort函数加一个排序函数的参数
B.reverse用于对数组数据的倒序排列
C.向数组的最后位置加一个新元素，可以用pop方法 //push吧
D.unshift方法用于向数组删除一个元素
-
30、要将页面的状态显示”已经选中该文本”，下列JavaScript语句正确的是(A)
A.window.status = “已经选中该文本”
B.Document.status = “已经选中该文本”
C.Window.screen = “已经选中该文本”
D.Document.screen = “已经选中该文本”
-
31、点击页面的按钮，使之打开一个新窗口，加载一个页面，以下JavaScript代码中可执行的是(D)
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”>
<input type=”submit” value=”new”>
</form>
-
32、下面的JavaScript语句中，实现检索当前页面中的表单元素中的所有文本框，并将它们全部清空(B)
A.for(var i = 0; i <form1.elements.length; i++) {
if(form1.elements[i].type ==”text”)
form1.elements[i].value = “”;
}
B.for (var i = 0; i < document.forms.length;i++) {
if(forms[0].elements[i].type == “text”)
form[0].elements[i].value = “”;
}
C.if(document.form.elements.type == “text”)
form.elements[i].value = “”;
D.for(var i = 0; i <document.forms.length;i++) {
for(var j = 0;j <document.forms[i].elements.length;j++) {
if(document.forms[i].elements[j].type== “text”)
document.forms[i].elements[j].value= “”;
}
}
-
33、在表单(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(“无效的电话号码！”);
-
34、关于正则表达式声明6位数字的邮编，一下代码正确的是(C)
A.var reg = /\d6/;
B.var reg = \d{6}\;
C.var reg = /\d{6}/;
D.var reg = new RegExp (“\d{6}”);
-
35、下面关于cookie的说明正确的是(D)
A.Cookie设置的过期时间为3600s是指60分钟过期
B.Cookie设置的过期时间为3600s是指只要在间隔60分钟内有动作时就不过期
C.Cookie保存在服务器端
D.Cookie保存在用户本地
-
36、使用js代码实现，将下面段落中含有的链接替换成可直接点击打开的链接
<p id=”text”>这个段落里有链接
比如：http://www.abc.comm/和https://www.github.com/都是链接。
可是他们显示在网页中是，链接不可点，还得复制粘贴到地址栏打开，好麻烦
</p>
-
37、写一个方法获取url？后面的参数，并将参数对象化。
function parseQueryString(url){
var params = {};
var arr =url.split("?");
if (arr.length <= 1)
return params;
arr =arr[1].split("&");
for(var i=0, l=arr.length;i<l; i++){
var a =arr[i].split("=");
params[a[0]] = a[1];
}
return params;
}
var url ="http://witmax.cn/index.php?key0=0&key1=1&key2=2";
var ps = parseQueryString(url);
console.log(ps["key1"]);
-
38、Node.js中，一段访问redis的代码如下
var redis = require(‘redis’);
var client = redis.createClient();
client.set(‘key’, ‘value’, function (err,data) {
if(err) {
console.error(err.message)
process.exit(1)
}
cilent.get(‘key’,function(err,data) {
if(err) {
console.error(err.message);
return;
}
console.log(data);
process.exit(0);
})
});
请用Promise的异步调用方式重写
请用ES6 yield的异步调用方式重写
在经历了多个异步回调之后，如果拿到完整的堆信息(stack trace)?
-
39、用你认为合适的数据库产品，请设计数据结构，并完成一下方法(Server)；
1.当出现一次网页浏览的时候，请实现函数click(url, ip)
2.请实现查询函数pv(url)以及uv(url)
-
40、补充按钮事件的函数，确认用户是否退出当前页面，确认之后关闭窗口
<html>
<head>
<script type=”text/javasccript”>
function closeWin() {
}
</script>
</head>
<body>
<input type=”button” value=”关闭窗口” onclick=”closeWin()” />
</body>
</html>
function closeWin(){
if(confirm("您确定要关闭本页吗？")){
window.opener=null;
window.open('','_self');
window.close();
}
}
-
41、请用JavaScript实现，控制一个文本框只能输入正整数，如输入不符合条件则文本全部字体标红，要求写出完整的文本框HTML代码和JavaScript逻辑代码？
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="utf-8">
<title>只能输入正整数</title>
</head>
<body>
<inputid="txt" type="text">
<script>
var txt=document.getElementById('txt');
var color =window.getComputedStyle(txt,'').color
txt.addEventListener('keyup',function() {
var reg = newRegExp("^[0-9]*$");;
console.log(reg.test(this.value));
if(reg.test(this.value)){
this.style.color=color;
}else{
this.style.color='red';
}
});
</script>
</body>
</html>
-
42、请对以下代码进行优化
var wrap = document.getElementById(“wrap”);
for(var i = 0; i < 10; i++) {
var li = document.createElement(“li”);
var text =document.createTextNode(“hello” + i);
li.appendCChild(text);
wrap.appendChild(li);
}
-
43、请看下面的HTML，写出您的CSS使左边元素宽度为200px保持不变，右边元素随浏览器大小自适应
<div class=”outer”>
<div class=”left”></div>
<div class=”right”></div>
</div>
