512 lines
12 KiB
Markdown
512 lines
12 KiB
Markdown
|
# web前端javascript综合水平测试 178
|
|||
|
|
|
|||
|
|
## 填空
|
|||
|
|
1. javascript 由 ECMAscript ， DOM ， BOM ，三部分组成，简单介绍一下这三部分 5
|
|||
|
|
|
|||
|
|
ECMAscript: javascript的语言规范， 包括：语法，类型，语句等等
|
|||
|
|
|
|||
|
|
DOM：文档对象模型，指的是html页面上的标签
|
|||
|
|
|
|||
|
|
BOM ：即浏览器对象模型，是浏览器提供的接口
|
|||
|
|
|
|||
|
|
2. 检测数据类型的方式有 typeof ， instanceof ， Object.prototype.toString.call() ， 三种方式什么区别 4
|
|||
|
|
|
|||
|
|
typeof: 原始值数据类型直接返回（null返回Object） , 引用值除了function 返回的是function 其他的引用值返回的是 object
|
|||
|
|
|
|||
|
|
instanceof :能检测引用值，原始值不行
|
|||
|
|
|
|||
|
|
Object.prototype.toString.call() 都可以检测
|
|||
|
|
|
|||
|
|
3. 检测NaN的数据类型结果为 [object Number] 5
|
|||
|
|
|
|||
|
|
4. js中 对象转json的方法为 JSON.stringify() ， json格式转对象的方法为 JSON.parse() 5
|
|||
|
|
|
|||
|
|
5. js 浏览器对象模型包括 window ， location ， screen ， navigator ， history ，五部份 分别介绍一下这5部分 5
|
|||
|
|
|
|||
|
|
window: 浏览器的窗口
|
|||
|
|
|
|||
|
|
location:浏览器当前url信息
|
|||
|
|
|
|||
|
|
screen:客户端屏幕信息
|
|||
|
|
|
|||
|
|
navigator:浏览器本身信息
|
|||
|
|
|
|||
|
|
history:记录历史信息
|
|||
|
|
|
|||
|
|
6. var a=1;console.log(a++) 运行的结果为： 1 5
|
|||
|
|
|
|||
|
|
js运算符的优先级 优先级从高到低依次是：（）; 一元加减 ;求幂 ; *，/ ; +,- ; = ; 4
|
|||
|
|
|
|||
|
|
7. js设置属性和属性值的方法为： object.setAttribute(attribute,value) 5
|
|||
|
|
|
|||
|
|
8. 五大主流浏览器及内核 Chrome:Webkit/blink; Safari:Webkit; IE:trident; FireFox:gecko; Opera: presto 5
|
|||
|
|
|
|||
|
|
9. jq ajax基本结构及解释 5
|
|||
|
|
|
|||
|
|
$.ajax({
|
|||
|
|
url: "address", // 网络地址
|
|||
|
|
data:obj, //传输数据
|
|||
|
|
type:"GET", //传输方法
|
|||
|
|
dataType:"json", //数据类型
|
|||
|
|
success: function (res) { //成功返回的函数方法
|
|||
|
|
console.log(res)
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
10. 本地缓存的增删改查 5
|
|||
|
|
|
|||
|
|
增：localStorage.setItem(key, obj)；
|
|||
|
|
|
|||
|
|
删：localStorage.removeItem(key);
|
|||
|
|
|
|||
|
|
改：localStorage.setItem(key, obj)；
|
|||
|
|
|
|||
|
|
查：localStorage.getItem(key);
|
|||
|
|
|
|||
|
|
11. jq选择器列举 4
|
|||
|
|
|
|||
|
|
$(".class") $("p") $("#id") $("ul li:first") $("p[target = "xxx"]")
|
|||
|
|
## 指出下面代码运行结果并分析其执行过程
|
|||
|
|
|
|||
|
|
1 . 10
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
function a(n) {
|
|||
|
|
if (n <= 1) {
|
|||
|
|
return 1
|
|||
|
|
} else {
|
|||
|
|
return n * a(n - 1)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
console.log(a(5)) //120 调用a函数递归5*4*3*2*1=120
|
|||
|
|
|
|||
|
|
var cheng=a //把函数a赋给cheng
|
|||
|
|
a=null //a的值改为null
|
|||
|
|
console.log(cheng(5)) //执行cheng时return的a找不到，故错误Error: a is not a function
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
2 10
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
function C1(name) {
|
|||
|
|
if (name) {
|
|||
|
|
this.name = name;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function C2(name) {
|
|||
|
|
this.name = name;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function C3(name) {
|
|||
|
|
this.name = name || 'join';
|
|||
|
|
}
|
|||
|
|
//c1/2/3的原型的name为tom
|
|||
|
|
C1.prototype.name = 'Tom';//调用时没有name传值，if里的语句不调用，故找原型的name为tom
|
|||
|
|
C2.prototype.name = 'Tom';//调用时没有name传值，故this.name为undefined
|
|||
|
|
C3.prototype.name = 'Tom';//调用时没有name传值，故name为false||'join'这个true，||返回第一个真值，故this.name为join
|
|||
|
|
alert((new C1().name) + (new C2().name) + (new C3().name));
|
|||
|
|
//Tomundefinedjoin
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
3 10
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
function fn()
|
|||
|
|
{
|
|||
|
|
this.user = '追梦子';
|
|||
|
|
var obj={user:"momo"}
|
|||
|
|
return {};
|
|||
|
|
}
|
|||
|
|
var a = new fn;
|
|||
|
|
console.log(a.user); //undefined
|
|||
|
|
//构造函数中的this与被创建的新对象a绑定，当函数return的值为对象时，this就指向这个被return的对象，对象里为空故.user为undefined
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
4 10
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
window.color = 'red';
|
|||
|
|
document.color = 'yellow';
|
|||
|
|
|
|||
|
|
var s1 = {color: 'blue' };
|
|||
|
|
function changeColor(){
|
|||
|
|
console.log(this.color);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
changeColor.call(); //red 默认window借用changeColor方法输出this.color及window的颜色red
|
|||
|
|
changeColor.call(window); //red 同上
|
|||
|
|
changeColor.call(document); //yellow document借用changeColor方法输出document.color及document的颜色yellow
|
|||
|
|
changeColor.call(this); //red this默认是window的故同window
|
|||
|
|
changeColor.call(s1); //blue s1借用changeColor方法输出s1.color及s1的颜色blue
|
|||
|
|
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 简答题
|
|||
|
|
1. 说明call,apply,bind 的区别几个 10
|
|||
|
|
|
|||
|
|
call参数一个个传参；
|
|||
|
|
|
|||
|
|
apply 参数放到一个数组传参；
|
|||
|
|
|
|||
|
|
bind是返回对应函数，便于稍后调用，apply、call是立即调用；
|
|||
|
|
|
|||
|
|
|
|||
|
|
2. js的typeof的返回值有哪些 10
|
|||
|
|
|
|||
|
|
number, boolean, string, undefined, object, function,
|
|||
|
|
|
|||
|
|
3. 说出数组相关的几个方法并说明作用 6
|
|||
|
|
|
|||
|
|
push() 在末端添加项 pop() 从末端移除并返回该元素
|
|||
|
|
|
|||
|
|
shift() 从首端移除并返回该元素 unshift() 从首端添加项
|
|||
|
|
|
|||
|
|
splice(p, d, items) —— 从p开始删除d个元素，并插入 items
|
|||
|
|
|
|||
|
|
4. ajax请求时的get、post的区别 5
|
|||
|
|
|
|||
|
|
使用Get请求时,参数在URL中显示, 发送数据量小 ,不安全
|
|||
|
|
|
|||
|
|
使用Get请求时,参数不会在URL中显示, 发送数据量大 ,安全
|
|||
|
|
|
|||
|
|
5. 如何阻止浏览器的默认事件 5
|
|||
|
|
|
|||
|
|
event.preventDefault();
|
|||
|
|
|
|||
|
|
6. 如何阻止事件冒泡 5
|
|||
|
|
|
|||
|
|
event.stopPropagation();
|
|||
|
|
|
|||
|
|
7. == 和===的区别 5
|
|||
|
|
|
|||
|
|
===比较类型和值，==只比较值
|
|||
|
|
|
|||
|
|
8. 局部变量和全局变量的区别 10
|
|||
|
|
|
|||
|
|
1. 作用域不同：全局作用域为整个程序，而局部为当前函数或循环等
|
|||
|
|
|
|||
|
|
2. 内存存储方式不同：全局存储在全局数据区中，局部存储在栈区
|
|||
|
|
|
|||
|
|
3. 生命期不同：全局的生命期随主程序的销毁而销毁，局部随函数或循环退出就销毁
|
|||
|
|
|
|||
|
|
4. 使用方式不同：全局声明后程序的各个部分都可以用到，局部只能在局部使用。
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 通过代码实现下面要求
|
|||
|
|
1. 通过原型链实现对象继承 10
|
|||
|
|
|
|||
|
|
**function** Parent(p) {
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
this.p = p;
|
|||
|
|
|
|||
|
|
this.psay = **function** () {
|
|||
|
|
|
|||
|
|
console.log("Parent:"+p);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
**function** Child(c) {
|
|||
|
|
|
|||
|
|
**var** c = c;
|
|||
|
|
|
|||
|
|
this.csay = **function** () {
|
|||
|
|
|
|||
|
|
console.log("childName: "+c)
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
**function** GrandChild(g) {
|
|||
|
|
|
|||
|
|
this.g = g;
|
|||
|
|
|
|||
|
|
this.gsay = **function** () {
|
|||
|
|
|
|||
|
|
console.log("grandChildName :"+ this.g);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
**let** parent = new Parent();
|
|||
|
|
|
|||
|
|
Child.prototype = parent;
|
|||
|
|
|
|||
|
|
**let** child = new Child();
|
|||
|
|
|
|||
|
|
GrandChild.prototype = child;
|
|||
|
|
|
|||
|
|
**let** grandchild = new GrandChild();
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
2. js手动实现 jq的链式操作 10
|
|||
|
|
|
|||
|
|
function Person(){};
|
|||
|
|
|
|||
|
|
Person.prototype ={
|
|||
|
|
|
|||
|
|
setName:function(name){
|
|||
|
|
|
|||
|
|
this.name = name;
|
|||
|
|
|
|||
|
|
return this;
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
setAge:function(age){
|
|||
|
|
|
|||
|
|
this.age = age;
|
|||
|
|
|
|||
|
|
return this;
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
setSex:function(sex){
|
|||
|
|
|
|||
|
|
this.sex = sex;
|
|||
|
|
|
|||
|
|
return this;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var Person= new Person(); Person.setName("Tom").setAge(24).setSex("male");
|
|||
|
|
|
|||
|
|
3. 做一个网页计算器 实现输入两个数 完成加减乘除四则运算 10
|
|||
|
|
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<input type="text" name="text" id="pre" >
|
|||
|
|
|
|||
|
|
<select id="operator">
|
|||
|
|
|
|||
|
|
<option value="+">+</option>
|
|||
|
|
|
|||
|
|
<option value="-">-</option>
|
|||
|
|
|
|||
|
|
<option value="*">*</option>
|
|||
|
|
|
|||
|
|
<option value="/">/</option>
|
|||
|
|
|
|||
|
|
</select>
|
|||
|
|
|
|||
|
|
<input type="text" name="text" id="next" >
|
|||
|
|
|
|||
|
|
<span>=</span>
|
|||
|
|
|
|||
|
|
<input type="text" id="result" readonly="true">
|
|||
|
|
|
|||
|
|
<input type="button" id="btn" value="提交" onclick="calculator();">
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
**function** calculator(){
|
|||
|
|
|
|||
|
|
**var** pre=document.getElementById("pre").value;
|
|||
|
|
|
|||
|
|
**var** next=document.getElementById("next").value;
|
|||
|
|
|
|||
|
|
**var** opra=document.getElementById("operator").value;
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
**var** result=0;
|
|||
|
|
|
|||
|
|
switch(opra) {
|
|||
|
|
|
|||
|
|
case "+":
|
|||
|
|
|
|||
|
|
result=parseFloat(pre)+parseFloat(next);
|
|||
|
|
|
|||
|
|
break;
|
|||
|
|
|
|||
|
|
case "-":
|
|||
|
|
|
|||
|
|
result=parseFloat(pre)-parseFloat(next);
|
|||
|
|
|
|||
|
|
break;
|
|||
|
|
|
|||
|
|
case "*":
|
|||
|
|
|
|||
|
|
result=parseFloat(pre)*parseFloat(next);
|
|||
|
|
|
|||
|
|
break;
|
|||
|
|
|
|||
|
|
case "/":
|
|||
|
|
|
|||
|
|
if(parseFloat(next)!=0){
|
|||
|
|
|
|||
|
|
result=parseFloat(pre)/parseFloat(next);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
else{
|
|||
|
|
|
|||
|
|
alert("除数不能为0");
|
|||
|
|
|
|||
|
|
return;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
break;
|
|||
|
|
|
|||
|
|
default:
|
|||
|
|
|
|||
|
|
break;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
document.getElementById("result").value=result;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
4. 实现一个打点计时器，要求
|
|||
|
|
1、从 start 到 end（包含 start 和 end），每隔 100 毫秒 console.log 一个数字，每次数字增幅为 1（start 和end为用户输入）
|
|||
|
|
2、返回的对象中需要包含一个 cancel 方法，用于停止定时操作
|
|||
|
|
|
|||
|
|
start = prompt('输入一个数从它开始到逐渐加一');
|
|||
|
|
|
|||
|
|
end = prompt('一直加到几为止');
|
|||
|
|
|
|||
|
|
count(start,end);
|
|||
|
|
|
|||
|
|
**function** count(start, end) {
|
|||
|
|
|
|||
|
|
console.log(start);
|
|||
|
|
|
|||
|
|
**var** temp=setInterval(**function**(){
|
|||
|
|
|
|||
|
|
if(start<end){
|
|||
|
|
|
|||
|
|
console.log(++start);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
else{
|
|||
|
|
|
|||
|
|
clearInterval(temp);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
},1000);
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
|
|||
|
|
cancel:**function**(){
|
|||
|
|
|
|||
|
|
clearInterval(temp);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
|
|||
|
|
5. 在页面上将下面的json数据，需要放到表格里
|
|||
|
|
json数据为：
|
|||
|
|
[{"title":"史莱姆1号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},{"title":"史莱姆2号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05},{"title":"史莱姆3号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},{"title":"史莱姆4号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},{"title":"史莱姆5号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05}]
|
|||
|
|
|
|||
|
|
注： title对应文章标题，auth 对应的是作者 ， contnet对应的是简介 date对应的是日期
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
**var** stu = [
|
|||
|
|
|
|||
|
|
{"title":"史莱姆1号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},
|
|||
|
|
|
|||
|
|
{"title":"史莱姆2号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},
|
|||
|
|
|
|||
|
|
{"title":"史莱姆3号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},
|
|||
|
|
|
|||
|
|
{"title":"史莱姆4号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"},
|
|||
|
|
|
|||
|
|
{"title":"史莱姆5号","auth":'咖啡不放糖',"content":"别看我只是一直史莱姆","date":"2020/03/05"}
|
|||
|
|
|
|||
|
|
]
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
<table border="1px" id="tab">
|
|||
|
|
<tr>
|
|||
|
|
<th>文章标题</th>
|
|||
|
|
<th>作者</th>
|
|||
|
|
<th>简介</th>
|
|||
|
|
<th>日期</th>
|
|||
|
|
</tr>
|
|||
|
|
</table>
|
|||
|
|
|
|||
|
|
$(document).ready(**function**() {
|
|||
|
|
|
|||
|
|
**var** s = "";
|
|||
|
|
|
|||
|
|
for(**var** i = 0; i < stu.length; i++) {
|
|||
|
|
|
|||
|
|
s = "<tr><td>" + stu[i].title + "</td><td>" + stu[i].auth + "</td><td>" +
|
|||
|
|
|
|||
|
|
stu[i].content + "</td><td>" + stu[i].date + "</td></tr>";
|
|||
|
|
|
|||
|
|
$("#tab").append(s);
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
6. 实现 fizzBuzz 函数，参数 num 与返回值的关系如下：
|
|||
|
|
1、如果 num 能同时被 3 和 5 整除，返回字符串 fizzbuzz
|
|||
|
|
2、如果 num 能被 3 整除，返回字符串 fizz
|
|||
|
|
3、如果 num 能被 5 整除，返回字符串 buzz
|
|||
|
|
4、如果参数为空或者不是 Number 类型，返回 false
|
|||
|
|
5、其余情况，返回参数 num
|
|||
|
|
|
|||
|
|
**function** fizzBuzz(num) {
|
|||
|
|
|
|||
|
|
if(num%3==0&&num%5==0){
|
|||
|
|
|
|||
|
|
return "fizzbuzz";
|
|||
|
|
|
|||
|
|
}else if(num%3==0){
|
|||
|
|
|
|||
|
|
return "fizz";
|
|||
|
|
|
|||
|
|
}else if(num%5==0){
|
|||
|
|
|
|||
|
|
return "buzz";
|
|||
|
|
|
|||
|
|
}else if(typeof(num)!="number"){
|
|||
|
|
|
|||
|
|
return false;
|
|||
|
|
|
|||
|
|
}else{
|
|||
|
|
|
|||
|
|
return num;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
}
|