前端基础试题

一、基础知识测试 (40分)

01、JS中的数据类型都有哪些?以及之间的区别?

答:String(字符串),Number(数字,可以带小数),Boolean(true/false),Array(数组),Object(对象),function(函数),Null(值为空),undefined(未赋值)。其中Array、Object、function是引用数据类型,其余均为基本数据类型

02、检测数据类型的四种方式?(常见面试题)

答:1、typeof(A)返回A的原始链顶端数据类型(不能判断null、array);    2、A instanceof  B     判断A是否是B的一个实例,返回true/false(Array是Object的一个实例,Array.prototype.__proto__ 指向Object.prototype);3、A.constructor ==  B  判断A的构造函数是不是 类型B,即判断A是否是B的一个实例对象(不能判断null、undefined)  4.Object.prototype.toString.call(A)    返回[object B] ,其中B就是对象A的类型

03、常用浏览器的内核都有哪些?(常见面试题)

答:

Trident:IE系列

webkit:Safari

Blink:现在的chrome,Opera

Gecko :Firefox

04、指出以下定义变量错误的方式

A:var _zhufeng='珠峰';
B:var 8zhufeng='珠峰';
C:var $zhufeng='珠峰';
D:var zhu-feng='珠峰';
E:var parent='培训';
F:var default='培训';

答:A:无错误        B:首字符必须是下划线、$或者ASCII字母          C:无错误        D:字符只能包含数字,字母,下划线               E:parent是Windows保留关键字                        F:default 是Js保留关键字

05、以下哪种方式可以弹出‘珠峰’?

A:<div onclick="alert("珠峰")"></div>
B:<div onclick="alert('珠峰')"></div>
C:<script>
      alert('珠峰');
   </script>
D:<script src='js/zhufeng.js'>
      alert('珠峰');
   </script>

答:C

06、写出下面程序的输出结果(腾讯面试题)

var num = parseFloat('width:100px');

if(num===100){

 alert(1);

}else if(num===NaN){

 alert(2);

}else if(typeof num==='number'){

 alert(3);

}else{

 alert(4);

}

答:   alert(3);

07、写出下面程序输出几次,结果分别是多少?(腾讯面试题)

for(var i=0;i<10;i+=2){

     if(i<=5){

        i++;

        continue;

     }else{

         i+=3;

         break;

      }

      console.log(i);

}

console.log(i);

答:输出 9    第一次循环执行i++,然后结束本次循环执行i+=2;第二次循环同第一次;第三次循环执行i+=3,然后结束for循环,执行for循环外面的console.log(i)

08、向下面数组末尾追加一个值100你有几种办法?(至少两种)

var ary = [12,14,13,35,16,28];

答:方式1: ary = [12,14,13,35,16,28,100];  

       方式2:ary[6]=100;       或    ary[ary.length]=100;

       方式3:ary.push[100];

       方式4:ary.slice(ary.length,0,100)

       方式5:ary.concat([100]);

09、把下面的数组进行排序(降序)

var ary = [12,14,13,35,16,28];

答:ary.sort((a,b)=>a-b);


     

10、实现找到数组第n项第m项(包括n和m)的内容,返回一个新的数组(百度面试题)

答:  方式1:function cut(array,n,m){ return array.slice(n,m+1);}         

                      arr=cut(arr,N,M);

         方式2:Array.prototype.myCut=(n,m)=>this.slice(n,m+1);

                      arr.myCut(N,M);

11、完成以下字符串处理需求(常见面试题)

var time = '2017-10-20';

//->需要获取的结果是 ‘2017/10/20’

答:time.replace(/-/g,"/");

12、简述字符串截取方法substrsubstringslice三者间的区别?(联想面试题)

答:substr(start,length) start可以为负数,第二个参数可省,默认到结束;substring(start,end) 不接受负参数,默认到结束;slice(start,end) 接受负参数

13、获取 2~93 之间的随机整数(包含2也包含93)

答:Math.floor(Math.random()*92+2);//每种输出结果的分布区间相同

       Math.round(Math.random()*91+2); //输出结果为  2、93的分布区间只有其他整数的一半

14、写出下面代码的输出结果?(腾讯面试题)var result = 1+null+true+undefined+'珠峰培训'+false+[]+undefined+null;
答:Number(null)=0;Number(true)=1;Number(undefined)=NaN;String(false)='false';String([])='';String(undefined)='undefined';String(null)='null';相加数字转字符串,相减、乘、除,字符串转数字

15、写出下面代码的输出结果?(腾讯面试题)

A:console.log([]==false) B:console.log(![]==false)

答:    A:true    B:true   

16、写出下面代码的输出结果?A:3-'1px'?alert(2):alert(3);B:3+'1px'?alert(4):alert(3);
答:A:alert(2)   B:alert(4)

17、函数中,想要接收执行时候传递的实参信息,有哪些办法?

答:(emmm,这题我没理解题目意思,大概是要说闭包之类的?)

18、如下

<body>

 <script>

 //=>在JS中动态创建一个div,并且把其添加到body的末尾

 </script>

</body>

答:var newDiv=document.createElement("div");

     document.body.appendChild(newDiv);

19、如下

<body>

 <div id='box' class='box'></div>

 <script>

 //=>在JS中获取这个元素对象(一个元素对象,不是元素集合),你有哪些办法可以实现?

 </script>

</body>

答: 方式1 document.getElementById('box');
   方式2 document.querySelector('#box');
   方式3 document.querySelector('.box');

20、分析下面的代码,写出运行的结果(百度面试题) 
A:

var a = 12;

var b = a;

b = 13;

console.log(a);

答:12 ,基础数据类型赋值采用值传递。

B:

var a = {n:12};

var b = a;

b['n'] = 13;

console.log(a.n);

答:13,引用数据类型赋值采用引用传递,b = a使得b指向了a的所指对象。b['n']调用了b所指的对象,把属性n设置为13。而a所指对象与b相同。

C:

var a = {n:12};

var b = a;

b = {n:13};

console.log(a.n);

答:13,引用数据类型赋值采用引用传递,b = a使得b指向了a的所指对象。b = {n:13};使得b指向了一个新对象{n:13}。

二、综合实战测试 60分:每题15分

1、补充代码实现最后的效果(任意数求和)

function sum(){

 //=>在这里实现你的代码

}

var total = sum(10,20,'30','珠峰','40');

console.log(total); //=>100

答:      let s=0;
             for(let i=0;i<arguments.length;i++){
                 if(!isNaN(parseInt(arguments[i]))){
                     
                     s+=parseInt(arguments[i]);
                 }
             }
             return s;

2、补充代码实现最后的结果(常见面试题)

function queryURLParameter(url){

 //=>在这里实现你的代码

}

var str = 'http://www.zhufengpeixun.com/stu/?name=zxt&age=28&sex=0#teacher';

var result = queryURLParameter(str);

//=>result的结果为:

/*

 {

 name:'zxt',

 age:28,

 sex:0,

 HASH:'teacher'

 }

*/

答:      let obj={};
             let data=url.split("?")[1].replace("#","&HASH=").split("&");
             for(let i=0;i<data.length;i++){
                 let tmpObj = data[i].split("=");                 
                 obj[tmpObj[0]] = tmpObj[1];                 
             }
             return obj;

3、看需求文档,实现相关的JS代码

在珠峰毕业后,你成功进入了一家上市公司,公司专门是为用户提供 “车牌号摇号” 服务的;现在公司的领导想让你实现一个随机摇号功能: 
1、车牌号开始必须是:京A、京C、京E、京F、京G、京B、京O 
2、车牌号是五位,分别由26个大写字母0~9十个数字组成 
3、当用户点击页面上的摇号按钮,你编写的程序给用户随机生成一个车牌号,用户感觉不满意,还可以重新摇号,但是最多只能摇三次

<div class='box'>

 <!--P:存放生成的车牌号-->

 <p id='licensePlate'></p>

 <input type='button' value='摇号' id='shakeBtn'/>

</div>

<script>

 //=>完成你的JS代码,实现老板安排的需求

</script>

答:

let clickTime=0;
let a = document.getElementById('shakeBtn');
a.setAttribute("onclick","rollNumber()");

function rollNumber(){
     if(clickTime<3){         
         document.getElementById('licensePlate').innerHTML=getNumber();         
         clickTime++;
     }
     else{
         alert("三次摇号机会已用完!");
     }
 }
function randomFromArr(arr){
    return arr[Math.floor(Math.random()*arr.length)];
}
function getNumber(){
    const capitalAmount=26;//26个大写字母
    const numberAmount=10;//10个一位数
    const contentLength=5;//5位车牌号
    let charHead=["京A","京C","京E","京F","京G","京B","京O"] ;
    let charContent=[];    
    for(let i=0;i<capitalAmount;i++){
        charContent.push(String.fromCharCode(i+65));
    }
    for(let i=0;i<numberAmount;i++){
        charContent.push(i);
    }
    let carNumber=randomFromArr(charHead);
    for(let i=0;i<contentLength;i++){
        carNumber+=randomFromArr(charContent);
    }
    return carNumber;
}

4、看需求文档,实现相关的JS代码(常见面试题)

给#box下的li实现奇偶行变色(颜色自己定) 
鼠标滑过li背景高亮展示,鼠标离开回归原有颜色 
鼠标点击li弹出 ‘我是第N行’,例如:点击第一个li弹出 ‘我是第1行’…

 
<ul id='box'>

 <li></li>

 <li></li>

 ...

</ul>

<script>

 //=>完成你的JS代码,实现相关需求

</script>

答:var lis=document.getElementById('box').children;
       console.log(lis);
       var     old="";
       for(let i=0;i<lis.length;i++){         
           if (i%2==0){    
               lis.item(i).style.backgroundColor="rgb(193,193,193)";
           }    
           else{
                lis.item(i).style.backgroundColor="gray";
           }    
            lis.item(i).onmouseover=function(){ old=this.style.backgroundColor; this.style.backgroundColor="red"};
            lis.item(i).onmouseout=function(){ this.style.backgroundColor=old; };
            lis.item(i).onclick=function(){alert("我是第"+(i+1)+"行");}
       }  

以上答案都是自己写的,如果有不好或者不对的地方,望指正。

原题链接:http://www.zhufengpeixun.cn/main/jsNode/test.html

猜你喜欢

转载自blog.csdn.net/qq_34283722/article/details/87858333
今日推荐