JS常见面试题

笔试：

1.prototype(原型)是什么,它是怎么使用的

是一个原型对象，所有函数都具备这个原型对象
是一个共享空间，可以通过原型对象可以给某个类扩展方法或者属性
object
通过 类名.prototype 属性名 添加一个新的扩展属性

2.怎么样创建元素节点和文本节点,怎么样删除节点

document.createElement(); document.createTextNode();
document.body.removeChild(document.querySelector(“.box”));
createremove()

3.怎样通过js给某个节点对象添加属性和属性值

div.setAttribute(‘class’,’box’)

4.Js查找元素的几种方式

1.通过标签选择器查找；
2.通过id查找；
3.通过class名查找；
document.querySelector();
document.querySelectorAll();
document.getElementsByClassName()
document.getElementsByName()
document.getElementsByTagName()
document.getElementById()

5.开始 将按钮的文字变成结束 再次点击 再次切换为开始

document.querySelector(“button”).onclick=function () {
this.innerText==”开始”?this.innerText=”结束”:this.innerText=”开始”;}

6.使用正则删除里面的特殊符号“W^%R&E第三。！方*E”写出程序运行的结果？

"W^%R&E第三。！方E".replace(/[!@#$%^&！。]/g,"")

7、 写出程序运行的结果？

for(i=0, j=0; i<10, j<6; i++, j++){
k = i + j;
}
k=10

8..写出两种继承的方式

原型继承；混合继承；

9.写一个url格式验证的正则

/ (https | http) : / / www . .+ . .+ /
https或者http 普通冒号 / / www . 非换行字符 . 非换行字符

编程

1、 实现全选、 反选 点击弹出选择内容

<input class="all" type="checkbox" value="全选"/>全选<input class="gam" type="checkbox" value="吃"/>吃<input class="gam" type="checkbox" value="喝"/>喝<input class="gam" type="checkbox" value="玩"/>玩<input class="gam" type="checkbox" value="乐"/>乐

var All=document.querySelector('.all');var gam=document.getElementsByClassName('gam');var sum=[]; All.onclick=function(){    for(var i=0;i<gam.length;i++){         if (this.checked){                gam[i].checked="checked";                sum.push(gam[i].value);                console.log(sum);             } else{                gam[i].checked=null;             };    }; }; for(var x=0;x<gam.length;x++){    gam[x].onclick=function(){        var num=0;       for(var j=0;j<gam.length;j++){          if(gam[j].checked){            num=num+1;            sum.push(gam[j].value);            console.log(sum);          }         if(num<gam.length){All.checked=null}         if(num==gam.length){All.checked='checked'}       }    } };

2、写出至少两种数组去重的函数

①Array.prototype.unquie = function () {    var obj = {};    this.forEach(function (item,index) {        obj[item] = index;    });    var result = [];    for (key in obj){        result.push(key);    }    return result;};②Array.prototype.unquie = function () {       var result = [];       this.forEach(function (item) {           if (result.indexOf(item) === -1){               result.push(item);           }       });       return result;   };③Array.prototype.unquie = function () {       var result = [];       for (var i=0;i           for (var j=i+1;j               if (this[i]===this[j]){                   j = ++i;               }           }           result.push(this[i]);       }       return result;   };④ Array.prototype.unquie = function () {       var obj = {};       var result = [];       for (var i=0;i           if (obj[this[i]] !== 1){               obj[this[i]] = 1;               result.push(this[i]);           }       }       return result;   };   console.log(["123",123,44,55,44,87,44].unquie());

3、使用js创建10个li 没给个li添加点击事件 获取li上面的内容

var datas = ["第1个","第2个","第3个","第4个","第5个","第6个","第7个","第8个","第9个","第10个"];var ul = document.createElement("ul");datas.forEach(function (item,index) {    var li = document.createElement("li");    li.textContent = item;    li.onclick = function () {      alert(this.textContent);    };    ul.appendChild(li);});document.body.appendChild(ul);

4、 写一个QQ号测吉凶的案例 使用https://www.showapi.com/api/lookPoint/863 把测试结果展示在界面上

var HOST = "http://route.showapi.com/";var STORY = "863-1";function loadData() {    var parm = "showapi_appid=42229&showapi_sign=eb56965af61e40fd90f7e43537f38877&qq=979598425";    var requst = new XMLHttpRequest();    requst.open("GET",HOST+STORY+"?"+parm,false);    requst.onload = function () {        var result = JSON.parse(requst.response);        console.log(result);        var container = document.querySelector(".container");        var content = "<h3>"+result.showapi_res_body.analysis+"</h3><p>"+result.showapi_res_body.desc+"</p>";        container.innerHTML = content;    };    requst.send();}loadData();