js面试代码题
题目和答案来源于网络，不保证答案的准确性哦！
1、如何判断某变量是否为数组数据类型？
方法一.判断其是否具有“数组性质”，如slice()方法。可自己给该变量定义slice方法，故有时会失效
方法二.obj instanceof Array 在某些IE版本中不正确
方法三.方法一二皆有漏洞，在ECMA Script5中定义了新方法Array.isArray(), 保证其兼容性，最好的方法如下：
if(typeof Array.isArray==="undefined")
{
Array.isArray = function(arg){
return Object.prototype.toString.call(arg)==="[object Array]"
};
}
2、已知ID的Input输入框，希望获取这个输入框的输入值，怎么做？
document.getElementById(“ID”).value
3、希望获取到页面中所有的checkbox怎么做？(不使用第三方框架)
var domList = document.getElementsByTagName(‘input’)
var checkBoxList = [];
var len = domList.length; //缓存到局部变量
while (len--) { //使用while的效率会比for循环更高
if (domList[len].type == ‘checkbox’) {
checkBoxList.push(domList[len]);
}
}
4、设置一个已知ID的DIV的html内容为xxxx，字体颜色设置为黑色(不使用第三方框架)
var dom = document.getElementById(“ID”);
dom.innerHTML = “xxxx”
dom.style.color = “#000”
5、当一个DOM节点被点击时候，我们希望能够执行一个函数，应该怎么做？
①直接在DOM里绑定事件：
②在JS里通过onclick绑定：xxx.onclick = test；
③通过事件添加进行绑定：xxx.addEventListener('click',test, false);
IE：xxx.attachEvent('onclick', test);
6、编写一个数组去重的方法 ，数组排序
①Array.prototype.unique1 = function () {
var n = []; //一个新的临时数组
for (var i = 0; i < this.length; i++) //遍历当前数组
{
//如果当前数组的第i已经保存进了临时数组，那么跳过，
//否则把当前项push到临时数组里面
if (n.indexOf(this[i]) == -1){
n.push(this[i])；
}
}
return n;
}
②Array.prototype.unique2 = function()
{
var n = {},r=[]; //n为hash表，r为临时数组
for(var i = 0; i < this.length; i++) //遍历当前数组
{
if (!n[this[i]]) //如果hash表中没有当前项
{
n[this[i]] = true; //存入hash表
r.push(this[i]); //把当前数组的当前项push到临时数组里面
}
}
return r;
}
③Array.prototype.unique3 = function()
{
var n = [this[0]]; //结果数组
for(var i = 1; i < this.length; i++) //从第二项开始遍历
{
//如果当前数组的第i项在当前数组中第一次出现的位置不是i，
//那么表示第i项是重复的，忽略掉。否则存入结果数组
if (this.indexOf(this[i]) == i){
n.push(this[i]);
}
}
return n;
}
7、看代码给答案。
var a = new Object();
a.value = 1;
b = a;
b.value = 2;
alert(a.value);
答案：2（考察引用数据类型细节）
8、已知数组var stringArray = [“This”, “is”, “Baidu”, “Campus”]，Alert出”This is Baidu Campus”。
答案：alert(stringArray.join(“”))
9、输出今天的日期，以YYYY-MM-DD的方式，比如今天是2014年9月26日，则输出2014-09-26
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth() + 1;
month = month < 10 ? '0' + month : month; // 变成两位
var day = d.getDate();
day = day < 10 ? '0' + day : day;
alert(year + '-' + month + '-' + day);
10、将字符串“{$id} {$name}
答案：“{$id} {$id}_{$name}”.replace(/{\$id}/g,’10’).replace(/{\$name}/g, ‘Tony’);
alert标签名
alert标签名
alert标签名
alert标签名
这是第一条
这是第二条
这是第三条
11、为了保证页面输出安全，我们经常需要对一些特殊的字符进行转义，请写一个函数escapeHtml，将<, >, &, “进行转义
function escapeHtml(str) {
return str.replace(/[<>”&]/g, function(match) {
switch (match) {
case “<”:
return “<”;
case “>”:
return “>”;
case “&”:
return “&”;
case “\””:
return “"”;
}
});
}
12、foo = foo||bar ，这行代码是什么意思？为什么要这样写？
答案：if(!foo) foo = bar; //如果foo存在，值不变，否则把bar的值赋给foo。
短路表达式：作为”&&”和”||”操作符的操作数表达式，这些表达式在进行求值时，只要最终的结果已经可以确定是真或假，求值过程便告终止，这称之为短路求值。
13、看下列代码，将会输出什么?(变量声明提升)
var foo = 1;
function(){
console.log(foo);
var foo = 2;
console.log(foo);
}
答案：输出undefined 和 2。上面代码相当于：
var foo = 1;
function(){
var foo;
console.log(foo); //undefined
foo = 2;
console.log(foo); // 2;
}
函数声明与变量声明会被JavaScript引擎隐式地提升到当前作用域的顶部，但是只提升名称不会提升赋值部分。
14、用js实现随机选取10–100之间的10个数字，存入一个数组，并排序。
var iArray = [];
funtion getRandom(istart, iend){
var iChoice = istart - iend +1;
return Math.floor(Math.random() * iChoice + istart;
}
for(var i=0; i<10; i++){
iArray.push(getRandom(10,100));
}
iArray.sort();
15、把两个数组合并，并删除第二个元素。
var array1 = ['a','b','c'];
var bArray = ['d','e','f'];
var cArray = array1.concat(bArray);
cArray.splice(1,1);
16、请实现，鼠标点击页面中的任意标签，alert 该标签的名称（注意兼容性）
div
b
方法2：
div
b
17、请指出以下代码的性能问题，并进行优化。
var info="淘家趣（www.taojiaqu.com）是一个关注潮流的资讯类购物网站。";
info+="提供新鲜好玩的家装资讯，电子科技，家趣产品。";
info+="精选的趣家商品，创意的家趣装修。";
info+="淘-趣家优品，享-生活乐趣。";
info=info.split("，");
for(var i=0 in info){
alert(info[i]);
};
更改后：
火狐测试后，平均时间块2-3毫秒，有可以改进的还望指出...
1.字符串相加效率比较慢
2.考虑到代码要的效果，可以用数组直接实现，省去 info.split()
var info=new Array();
var info[0]="淘家趣（www.taojiaqu.com）是一个关注潮流的资讯类购物网站。提供新鲜好玩的家装资讯";
var info[1]="电子科技，家趣产品。精选的趣家商品";
var info[2]="创意的家趣装修。淘-趣家优品";
var info[3]="淘-趣家优品，享-生活乐趣。";
for(var i=0,max=info.length;i
alert(info[i]);
}
18、请给出异步加载js方案，不少于两种。
默认情况javascript是同步加载的，也就是javascript的加载时阻塞的，后面的元素要等待javascript加载完毕后才能进行再加载，对于一些意义不是很大的javascript，如果放在页头会导致加载很慢的话，是会严重影响用户体验的。
1.defer（只支持IE）
2.async规定一旦脚本可用，则会异步执行，只适用于外部脚本
3.创建script，插入到DOM中，加载完毕后callBack
19、请设计一套方案，用于确保页面中js加载完全。
20、对 string 对象进行扩展，使其具有删除前后空格的方法。
1.用prototype添加方法
String.prototype.trim=function(){
return this.replace(/(^\s*)|(\s*$)/g, "");
}
2.利用 substring() 函数
String.prototype.deletSpace = function(){
var str = this; //提取需要操作的字符串
while(str[0] == " "){ //删除前面的空格
str = str.substring(1);
}
while(str[str.length - 1] == " "){ //删除后面的空格
str = str.substring(0,str.length-1);
}
return str;
}
21、完成一个正则表达式，验证用户是否输入正确的身份证号码。
var string='35021119920102353X';
var stringExp=new RegExp(/^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/);
alert(stringExp.test(string)); //true
//15位或18位，如果是15位，必需全是数字
//如果是18位，最后一位可以是数字或字母Xx，其余必需是数字
22、.写个函数获取非行间样式。
function getStyle(obj,attr){ //获取非行间样式，obj是对象，attr是值
if(obj.currentStyle){ //针对ie获取非行间样式
return obj.currentStyle[attr];
}else{
return getComputedStyle(obj,false)[attr]; //针对非ie
};
}
23、js创建对象的几种方式。
第一种模式：工厂方式
var lev=function(){ return "脚本之家"; };
function Parent(){
var Child = new Object();
Child.name="脚本";
Child.age="4";
Child.lev=lev;
return Child;
};
var x = Parent();
alert(x.name);
alert(x.lev());
第二种模式：构造函数方式
var lev=function(){ return "脚本之家"; };
function Parent(){
this.name="脚本";
this.age="30";
this.lev=lev;
};
var x =new Parent();
alert(x.name);
alert(x.lev());
第三种模式：原型模式
var lev=function(){
return "脚本之家";
};
function Parent(){ };
Parent.prototype.name="李小龙";
Parent.prototype.age="30";
Parent.prototype.lev=lev;
var x =new Parent();
alert(x.name);
alert(x.lev());
第四种模式：混合的构造函数，原型方式（推荐）
function Parent(){
this.name="脚本";
this.age=4;
};
Parent.prototype.lev=function(){
return this.name;
};
var x =new Parent();
alert(x.lev());
第五种模式：动态原型方式
function Parent(){
this.name="脚本";
this.age=4;
if(typeof Parent._lev=="undefined"){
Parent.prototype.lev=function(){ return this.name; } Parent._lev=true; }
};
var x =new Parent();
alert(x.lev());
24、如何在页面上实现一个圆形的可点击区域？
（1）map+area或者svg
（2）border-radius
（3）纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等
25、js操作获取和设置cookie
//创建cookie
function setCookie(name, value, expires, path, domain, secure) {
var cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);
if (expires instanceof Date) {
cookieText += '; expires=' + expires;
}
if (path) {
cookieText += '; expires=' + expires;
}
if (domain) {
cookieText += '; domain=' + domain;
}
if (secure) {
cookieText += '; secure';
}
document.cookie = cookieText;
}
//获取cookie
function getCookie(name) {
var cookieName = encodeURIComponent(name) + '=';
var cookieStart = document.cookie.indexOf(cookieName);
var cookieValue = null;
if (cookieStart > -1) {
var cookieEnd = document.cookie.indexOf(';', cookieStart);
if (cookieEnd == -1) {
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart + cookieName.length, cookieEnd));
}
return cookieValue;
}
//删除cookie
function unsetCookie(name) {
document.cookie = name + "= ; expires=" + new Date(0);
}
26、请写出js内存泄漏的问题。
在IE下的JS编程中，以下的编程方式都会造成即使关闭IE也无法释放内存的问题，下面分类给出：
1、给DOM对象添加的属性是一个对象的引用。范例：
var MyObject = {};
document.getElementById('myDiv').myProp = MyObject;
解决方法：
在window.onunload事件中写上: document.getElementById(‘myDiv’).myProp = null;
2、DOM对象与JS对象相互引用。范例：
function Encapsulator(element) {
this.elementReference = element;
element.myProp = this;
}
new Encapsulator(document.getElementById('myDiv'));
解决方法：
在onunload事件中写上: document.getElementById(‘myDiv’).myProp = null;
3、给DOM对象用attachEvent绑定事件。范例：
function doClick() {}
element.attachEvent("onclick", doClick);
解决方法：
在onunload事件中写上: element.detachEvent(‘onclick’, doClick);
4、从外到内执行appendChild。这时即使调用removeChild也无法释放。范例：
var parentDiv = document.createElement("div");
var childDiv = document.createElement("div");
document.body.appendChild(parentDiv);
parentDiv.appendChild(childDiv);
解决方法：
从内到外执行appendChild:
var parentDiv = document.createElement("div");
var childDiv = document.createElement("div");
parentDiv.appendChild(childDiv);
document.body.appendChild(parentDiv);
5、反复重写同一个属性会造成内存大量占用(但关闭IE后内存会被释放)。范例：
for(i = 0; i < 5000; i++) {
hostElement.text = "asdfasdfasdf";
}
这种方式相当于定义了5000个属性！
解决方法：
其实没什么解决方法~~~就是编程的时候尽量避免出现这种情况咯~~
27、事件绑定和普通事件有什么区别？
事件绑定就是针对dom元素的事件，绑定在dom元素上
普通事件即为非针对dom元素的事件；
例如：
普通事件
var btn = document.getElementById("hello");
btn.onclick = function(){
alert(1);
};
btn.onclick = function(){
alert(2);
}; //这个事件只会弹出2；
事件绑定
var btn = document.getElementById("hello");
btn.addEventListener("click",function(){
alert(1);
},false);
btn.addEventListener("click",function(){
alert(2);
},false); //这个事件首先会弹出1，然后在弹出2；
28、用递归方式写个长度为n的斐波纳契数列
①function febArr(n){
if(n<2){
return n;
}else{
return febArr(n-1)+febArr(n-2)
}
}
②function febArr(n){
var arr=[];
for(var i=0;i<=n;i++){
if(i==0||i==1){
arr[i]=i;
}else{
arr[i]=arr[i-1]+arr[i-2];
}
}
return arr[n];
}
29、for(var i=0;i<5;i++){
setTimeout(function(){console.log(i)},i*1000);
}
输出（5,5,5,5,5）
如果想要输出（0，1，2，3，4），代码为：
for(var i=0;i<5;i++){
(function(i){
setTimeout(function(){console.log(i)},i*1000)
})(i)
}
30、统计字符串”aaaabbbccccddfgh”中字母个数或统计最多字母数。
var str = "aaaabbbccccddfgh";
var obj = {};
for(var i=0;istr.length;i++){
var v = str.charAt(i);
if(obj[v] & obj[v].value == v){
obj[v].count = ++ obj[v].count;
}else{
obj[v] = {};
obj[v].count = 1;
obj[v].value = v;
}
}
for(key in obj){
document.write(obj[key].value +'='+obj[key].count+' '); // a=4 b=3 c=4 d=2 f=1 g=1 h=1
}
31、写一个function，清除字符串前后的空格。（兼容所有浏览器）
function trim(str) {
if (str & typeof str === "string") {
return str.replace(/(^s*)|(s*)$/g,""); //去除前后空白符
}
}
32、var numberArray = [3,6,2,4,1,5]; （考察基础API）
1) 实现对该数组的倒排，输出[5,1,4,2,6,3]；（reverse()）
2) 实现对该数组的降序排列，输出[6,5,4,3,2,1]
function combo(msg){
var arr=msg.split("-");
for(var i=1;i
arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);
}
msg=arr.join("");
return msg;
}
33、已知有字符串foo=”get-element-by-id”,写一个function将其转化成驼峰表示法”getElementById”。
function combo(msg){
var arr=msg.split("-");
for(var i=1;i
arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);
}
msg=arr.join("");
return msg;
}
34、看下列代码输出为何？解释原因。
var a;
alert(typeof a); // undefined
alert(b); // 报错
解释：Undefined是一个只有一个值的数据类型，这个值就是“undefined”，在使用var声明变量但并未对其赋值进行初始化时，这个变量的值就是undefined。而b由于未声明将报错。注意未申明的变量和声明了未赋值的是不一样的。
35、看下列代码,输出什么？解释原因。
var a = null;
alert(typeof a); //object
解释：null是一个只有一个值的数据类型，这个值就是null。表示一个空指针对象，所以用typeof检测会返回“object”
。
36、看下列代码,输出什么？解释原因。
var undefined;
undefined == null; // true
1 == true; // true
2 == true; // false
0 == false; // true
0 == ''; // true
NaN == NaN; // false
[] == false; // true
[] == ![]; // true
undefined与null相等，但不恒等（===）
一个是number一个是string时，会尝试将string转换为number
尝试将boolean转换为number，0或1
尝试将Object转换成number或string，取决于另外一个对比量的类型
所以，对于0、空字符串的判断，建议使用 “===” 。“===”会先判断两边的值类型，类型不匹配时为false。
37、实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制
// 方法一：
Object.prototype.clone = function(){
var o = this.constructor === Array ? [] : {};
for(var e in this){
o[e] = typeof this[e] === "object" ? this[e].clone() : this[e];
}
return o;
}
//方法二：
/**
* 克隆一个对象
* @param Obj
* @returns
*/
function clone(Obj) {
var buf;
if (Obj instanceof Array) {
buf = []; //创建一个空的数组
var i = Obj.length;
while (i--) {
buf[i] = clone(Obj[i]);
}
return buf;
}else if (Obj instanceof Object){
buf = {}; //创建一个空对象
for (var k in Obj) { //为这个对象添加新的属性
buf[k] = clone(Obj[k]);
}
return buf;
}else{ //普通变量直接赋值
return Obj;
}
}
38、小雨是一条可爱的小狗(Dog)，它的叫声很好听(wow)，每次看到主人的时候就会乖乖叫一声(yelp)。从这段描述可以得到以下对象：
function Dog() {
this.wow = function() {
alert(’Wow’);
}
this.yelp = function() {
this.wow();
}
}
小雪和小雨一样，原来也是一条可爱的小狗，可是突然有一天疯了(MadDog)，一看到人就会每隔半秒叫一声(wow)地不停叫唤(yelp)。请根据描述，按示例的形式用代码来实。（继承，原型，setInterval） 代码如下：
function MadDog() {
this.yelp = function() {
var self = this;
setInterval(function() {
self.wow();
}, 500);
}
}
MadDog.prototype = new Dog();
//for test
var dog = new Dog();
dog.yelp();
var madDog = new MadDog();
madDog.yelp();
39、下面这个ul，如何点击每一列的时候alert其index?（闭包）
代码如下：
// 方法一：
var lis=document.getElementById('2223').getElementsByTagName('li');
for(var i=0;i<3;i++)
{
lis[i].index=i;
lis[i].οnclick=function(){
alert(this.index);
};
}
//方法二：
var lis=document.getElementById('2223').getElementsByTagName('li');
for(var i=0;i<3;i++)
{
lis[i].index=i;
lis[i].οnclick=(function(a){
return function() {
alert(a);
}
})(i);
}
40、javascript实现避免页面按钮重复提交
function preventAjax(obj,num){
obj.disabled = true;
var num = num;
var types =obj.type;
if(types == 'submit'){
var text = obj.value;
var time1 = setInterval(function(){
obj.value = num;
num--;
if(obj.value <= 0 ){
clearInterval(time1);
obj.disabled = false;
obj.value = text;
}
},1000);
}else{
var text = obj.innerHTML
var time1 = setInterval(function(){
obj.innerHTML = num;
num--;
if(obj.innerHTML <= 0 ){
clearInterval(time1);
obj.disabled = false;
obj.innerHTML = text;
}
},1000);
}
}
41、js对象的深度克隆
Object.prototype.deepClone=function(){
function cloneObj(){}
cloneObj.prototype=this;
var obj=new cloneObj();
for(var o in obj){
if(typeof(obj[o])=="object")obj[o]=obj[o].deepClone();
}
return obj;
}
42、字符串反转，如将 '12345678' 变成 '87654321'。
//思路：先将字符串转换为数组 split()，利用数组的反序函数 reverse()颠倒数组，再利用 jion() 转换为字符串
var str = '12345678';
str = str.split('').reverse().join('');
43、将数字 12345678 转化成 RMB形式 如： 12,345,678。
//思路：先将数字转为字符， str= str + '' ;
//利用反转函数，每三位字符加一个 ','最后一位不加； re()是自定义的反转函数，最后再反转回去！ for(var i = 1; i <= re(str).length; i++){
tmp += re(str)[i - 1];
if(i % 3 == 0 && i != re(str).length){
tmp += ',';
}
}
44、生成5个不同的随机数；
//思路：5个不同的数，每生成一次就和前面的所有数字相比较，如果有相同的，则放弃当前生成的数字！
var num1 = [];
for(var i = 0; i < 5; i++){
num1[i] = Math.floor(Math.random()*10) + 1; //范围是 [1, 10]
for(var j = 0; j < i; j++){
if(num1[i] == num1[j]){
i--;
}
}
}
45、阻止冒泡函数
function stopPropagation(e) {
e = e || window.event;
if(e.stopPropagation) { //W3C阻止冒泡方法
e.stopPropagation();
} else {
e.cancelBubble = true; //IE阻止冒泡方法
}
}
document.getElementById('need_hide').onclick = function(e) {
stopPropagation(e);
}
46、解释原因
①function changeObjectProperty (o) {
o.siteUrl = "http://www.csser.com/";
o = new Object();
o.siteUrl = "http://www.popcg.com/";
}
var CSSer = new Object();
changeObjectProperty(CSSer);
console.log(CSSer.siteUrl); // http://www.csser.com/
答：在函数内部修改了引用类型值的参数，该参数值的原始引用保持不变。我们可以把参数想象成局部变量，当参数被重写时，这个变量引用的就是一个局部变量，局部变量的生存期仅限于函数执行的过程中，函数执行完毕，局部变量即被销毁以释放内存。
（补充：内部环境可以通过作用域链访问所有的外部环境中的变量对象，但外部环境无法访问内部环境。每个环境都可以向上搜索作用域链，以查询变量和函数名，反之向下则不能。）
②var a = 6;
setTimeout(function(){
alert(a);
var a = 66;
}, 1000);
a = 666;
alert(a);
// 666, undefined;
定义了局部变量a，覆盖了全局变量，但是在alert(a);之前 a并未赋值，所以输出undefined。
记住： 异步处理，一切OK 声明提前
47、JS的继承性
window.color = 'red';
var o = {color: 'blue'};
function sayColor(){
alert(this.color);
}
sayColor(); //red
sayColor.call(this); //red
this-window对象
sayColor.call(window); //red
sayColor.call(o); //blue
48、精度问题: JS 精度不能精确到 0.1 所以 。。。。同时存在于值和差值中
var n = 0.3,m = 0.2, i = 0.2, j = 0.1;
alert((n - m) == (i - j)); //false
alert((n-m) == 0.1); //false
alert((i-j)==0.1); //true
49、加减运算
alert('5'+3); //53 string
alert('5'+'3'); //53 string
alert('5'-3); //2 number
alert('5'-'3'); //2 number
50、输出结果
①var a = 5;
function test(){
a = 0;
alert(a);
alert(this.a); //没有定义 a这个属性
var a;
alert(a)
}
test(); // 0, 5, 0
new test(); // 0, undefined, 0 由于类它自身没有属性a， 所以是undefined
②var bool = !!2;
alert(bool)；//true;
双向非操作可以把字符串和数字转换为布尔值。
③
(function test(){
var a=b=5;
alert(typeof a);
alert(typeof b);
})();
alert(typeof a);
alert(typeof b); //number number undefined number
④var iNum = 0;
for(var i = 1; i< 10; i++){
if(i % 5 == 0){
continue;
}
iNum++;
}
alert(iNum); //8
51、
定义一个log方法，让它可以代理console.log的方法。
可行的方法一：
function log(msg) {
console.log(msg);
}
log("hello world!") // hello world!
如果要传入多个参数呢？显然上面的方法不能满足要求，所以更好的方法是：
function log(){
console.log.apply(console, arguments);
};
52、用js写个原生的ajax过程
window.οnlοad=function(){
document.getElementsByTagName('a')[0].οnclick=function(){
if (window.XMLHttpRequest){
var xmlhttp=new XMLHttpRequest();
}else{
var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
var method='GET';
var url=this.href;
xmlhttp.open(method,url);
xmlhttp.send();
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4){
if(xmlhttp.status==200||xmlhttp.status==304){
var txt=xmlhttp.responseText;
var json=eval('('+txt+')');
document.getElementById('name').innerHTML='姓名'+json.ruei.name;
document.getElementById('age').innerHTML='年龄'+json.ruei.age;
document.getElementById('job').innerHTML='工作'+json.ruei.job;
}
}
}
return false;
}
}