# 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;

    }

  }