2019最新前端JavaScript面试题集锦（二）（满满都是干货）

小鱼儿 2022-03-29 13:43 397阅读 0赞

## **40.typeof运算符返回值中有一个跟javascript数据类型不一致，它是？如何判断是不是数组？** ##

Array，Array.isArray(data)

## **41.写出函数DateDemo的返回结果，系统时间假定为今天** ##

function DateDemo()\{

var d, s="今天日期是：";

d = new Date();

s += d.getMonth() +1+ "/";

s += d.getDate() + "/";

s += d.getFullYear();

return s;

结果：今天日期是：7/21/2016

## **42.写出简单描述html标签（不带属性的开始标签和结束标签）的正则表达式，并将以下字符串中的html标签去除掉** ##

var str = “<div>这里是div里面的段落</div>”;

var reg = /<\\/?\\w+\\/?>/gi;

var str = “<div>这里是div里面的段落</div>”;

alert(str.replace(reg,”"));

</script>

## **43.截取字符串abcdefg的efg** ##

alert('abcdefg'.substring(4));

## **44.简述创建函数的几种方式** ##

第一种（函数声明）：

function sum1(num1,num2)\{

return num1+num2;

第二种（函数表达式）：

var sum2 = function(num1,num2)\{

return num1+num2;

第三种（函数对象方式）：

var sum3 = new Function("num1","num2","return num1+num2");

## **45.Javascript如何实现继承？** ##

1.构造继承法

2.原型继承法

3.实例继承法

## **46.Javascript创建对象的几种方式？** ##

1、var obj = \{\};（使用json创建对象）

如：obj.name = '张三';

obj.action = function ()

alert('吃饭');

\};

2、var obj = new Object();（使用Object创建对象）

如：obj.name = '张三';

obj.action = function ()

alert('吃饭');

\};

3、通过构造函数创建对象。

(1)、使用this关键字

如：var obj = function ()\{

this.name ='张三';

this.age = 19;

this.action = function ()

alert('吃饭');

\};

(2)、使用prototype关键字

如：function obj ()\{\}

obj.prototype.name ='张三';

obj.prototype.action=function ()

alert('吃饭');

\};

4、使用内置对象创建对象。

如：var str = new String("实例初始化String");

var str1 = "直接赋值的String";

var func = new Function("x","alert(x)");//示例初始化func

var obj = new Object();//示例初始化一个Object

## **47.js延迟加载的方式有哪些？** ##

1. defer和async

2. 动态创建DOM方式（创建script，插入到DOM中，加载完毕后callBack）

3. 按需异步载入js

## **48.哪些操作会造成内存泄漏？** ##

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。

垃圾回收器定期扫描对象，并计算引用了每个对象的其他对象的数量。如果一个对象的 引用数量为 0（没有其他对象引用过该对象），或对该对象的惟一引用是循环的，那么 该对象的内存即可回收。

1. setTimeout 的第一个参数使用字符串而非函数的话，会引发内存泄漏。

2. 闭包

3. 控制台日志

4. 循环（在两个对象彼此引用且彼此保留时，就会产生一个循环）

## **49.判断一个字符串中出现次数最多的字符，统计这个次数** ##

var str = 'asdfssaaasasasasaa';

var json = \{\};

for (var i = 0; i < str.length; i++) \{

if(!json\[str.charAt(i)\])\{

json\[str.charAt(i)\] = 1;

\}else\{

json\[str.charAt(i)\]++;

\};

var iMax = 0;

var iIndex = '';

for(var i in json)\{

if(json\[i\]>iMax)\{

iMax = json\[i\];

iIndex = i;

alert('出现次数最多的是:'+iIndex+'出现'+iMax+'次');

## **50.写一个获取非行间样式的函数** ##

function getStyle(obj,attr,value)

if(!value)

if(obj.currentStyle)

return obj.currentStyle(attr);

else\{

obj.getComputedStyle(attr,false);

else

obj.style\[attr\] = value;

## **51.字符串反转，如将 '12345678' 变成 '87654321'** ##

//思路：先将字符串转换为数组 split()，利用数组的反序函数 reverse()颠倒数组，再利 用 jion() 转换为字符串

var str = '12345678';

str = str.split('').reverse().join('');

## **52.将数字 12345678 转化成 RMB形式 如： 12,345,678** ##

//思路：先将数字转为字符， str= str + '' ;

//利用反转函数，每三位字符加一个 ','最后一位不加； re()是自定义的反转函数，最后再反转回去！

function re(str) \{

str += '';

return str.split("").reverse().join("");

function toRMB(num) \{

var tmp='';

for (var  i  =  1;  i  <=  re(num).length;  i++) \{

tmp  +=  re(num)\[i  -  1\];

if (i  %  3  ==  0  &&  i  !=  re(num).length) \{

tmp  +=  ',';

return re(tmp);

## **53.生成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--;

## **54.去掉数组中重复的数字** ##

方法一:

//思路：每遍历一次就和之前的所有做比较，不相等则放入新的数组中！

//这里用的原型 个人做法；

Array.prototype.unique = function()\{

var len = this.length,

newArr = \[\],

flag = 1;

for(var i = 0; i < len; i++, flag = 1)\{

for(var j = 0; j < i; j++)\{

if(this\[i\] == this\[j\])\{

flag = 0;        //找到相同的数字后，不执行添加数据

flag ? newArr.push(this\[i\]) : '';

return newArr;

方法二：

var arr=\[1,2,3,3,4,4,5,5,6,1,9,3,25,4\];

Array.prototype.unique2 = 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;

var newArr2=arr.unique2(arr);

alert(newArr2); //输出1,2,3,4,5,6,9,25

## **55.阶乘函数；** ##

//原型方法

Number.prototype.N = function()\{

var re = 1;

for(var i = 1; i <= this; i++)\{

re \*= i;

return re;

var num = 5;

alert(num.N());

## **56.window.location.search() 返回的是什么？** ##

http://localhost:8080/xxx?ver=1.0&id=123

返回值：?ver=1.0&id=timlq 也就是问号后面的部分

## **57.window.location.reload() 作用？** ##

刷新当前页面。

## **58.javascript 中的垃圾回收机制？** ##

在Javascript中，如果一个对象不再被引用，那么这个对象就会被GC回收。如果两个对象互相引用，而不再  被第3者所引用，那么这两个互相引用的对象也会被回收。因为函数a被b引用，b又被a外的c引用，这就是为什么  函数a执行后不会被回收的原因。

## **59.精度问题: 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

## **60.计算字符串字节数：** ##

new function(s)\{

if(!arguments.length||!s) return null;

if(""==s) return 0;

var l=0;

for(var i=0;i<s.length;i++)\{

if(s.charCodeAt(i)>255) l+=2; else l+=1;  //charCodeAt()得到的是unCode码

\}     //汉字的unCode码大于 255bit 就是两个字节

alert(l);

\}("hello world!");

## **61.匹配输入的字符：第一个必须是字母或下划线开头，长度5-20** ##

var reg = /^\[a-zA-Z\_\]\[a-zA-Z0-9\_\]\{5,20\}/,

name1 = 'leipeng',

name2 = '0leipeng',

name3 = '你好leipeng',

name4 = 'hi';

alert(reg.test(name1));

alert(reg.test(name2));

alert(reg.test(name3));

alert(reg.test(name4));

## **62.如何在HTML中添加事件，几种方法？** ##

1、标签之中直接添加 οnclick="fun()";

2、JS添加 Eobj.onclick = method;

3、绑定事件  IE： obj.attachEvent('onclick', method)；

FF: obj.addEventListener('click', method, false);

## **63.你如何优化自己的代码？** ##

代码重用

避免全局变量（命名空间，封闭空间，模块化mvc..）

拆分函数避免函数过于臃肿

注释

## **64.使用js实现这样的效果：在文本域里输入文字时，当按下enter键时不换行，而是替换成“\{ \{enter\}\}”,(只需要考虑在行尾按下enter键的情况).** ##

<html>

<head>

function back(ele,event)\{

event = event || window.event;

if(event.keyCode==13)\{

event.returnValue = false;

ele.value+="\{ \{enter\}\}"

return false;

</script>

</head>

<body>

</body>

</html>

## **65.简述readonly与disabled的区别** ##

ReadOnly和Disabled的作用是使用户不能够更改表单域中的内容.

但是二者还是有着一些区别的：

1、Readonly只针对input(text/password)和textarea有效，而disabled对于所有的表单 元素有效，包括select,radio,checkbox,button等。

2、在表单元素使用了disabled后，我们将表单以POST或者GET的方式提交的话，这 个元素的值不会被传递出去，而readonly会将该值传递出去

## **66.为什么扩展javascript内置对象不是好的做法？** ##

因为你不知道哪一天浏览器或javascript本身就会实现这个方法，而且和你扩展的实现有不一致的表现。到时候你的javascript代码可能已经在无数个页面中执行了数年，而浏览器的实现导致所有使用扩展原型的代码都崩溃了。。。

## **67.什么是三元表达式？“三元”表示什么意思？** ##

三元运算符:

三元如名字表示的三元运算符需要三个操作数。

语法是 条件 ? 结果1 : 结果2;. 这里你把条件写在问号(?)的前面后面跟着用冒号(:)分 隔的结果1和结果2。满足条件时结果1否则结果2。

## **68.变量的命名规范以及命名推荐** ##

变量，函数，方法：小写开头，以后的每个单词首字母大写 （驼峰）

构造函数，class：每个单词大写开头

基于实际情况，以动词，名词，谓词来命名。尽量言简意骇，以命名代替注释

## **69.三种弹窗的单词以及三种弹窗的功能** ##

1.alert

//弹出对话框并输出一段提示信息

function ale() \{

//弹出一个对话框

alert("提示信息！");

2.confirm

//弹出一个询问框，有确定和取消按钮

function firm() \{

//利用对话框返回的值 （true 或者 false）

if (confirm("你确定提交吗？")) \{

alert("点击了确定");

else \{

alert("点击了取消");

3.prompt

//弹出一个输入框，输入一段文字，可以提交

function prom() \{

var name = prompt("请输入您的名字", ""); //将输入的内容赋给变量 name ，

//这里需要注意的是，prompt有两个参数，前面是提示的话，后面是当对话框出来后，在对话框里的默认值

if (name)//如果返回的有内容

alert("欢迎您：" + name)

## **70.主流浏览器内核** ##

IE trident        火狐gecko    谷歌苹果webkit    Opera：Presto

## **71.JavaScript的循环语句有哪些？** ##

for,for..in,while,do...while

## **72.闭包：下面这个ul，如何点击每一列的时候alert其index？** ##

<li>这是第一条</li>

<li>这是第二条</li>

<li>这是第三条</li>

</ul>

//js

window.onload = function() \{

var lis = document.getElementById('test').children;

for (var i = 0; i < lis.length; i++) \{

lis\[i\].onclick = (function(i) \{

return function() \{

alert(i)

\};

\})(i);

\};

## **73.列出3条以上ff和IE的脚本兼容问题** ##

(1) window.event：

表示当前的事件对象，IE有这个对象，FF没有，FF通过给事件处理函数传递事件对象

(2) 获取事件源

IE用srcElement获取事件源，而FF用target获取事件源

(3) 添加，去除事件

IE：element.attachEvent(“onclick”, function) element.detachEvent(“onclick”, function)

FF：element.addEventListener(“click”, function, true) element.removeEventListener(“click”, function, true)

(4) 获取标签的自定义属性

IE：div1.value或div1\[“value”\]

FF：可用div1.getAttribute(“value”)

## **74.在Javascript中什么是伪数组？如何将伪数组转化为标准数组？** ##

伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。

## **75.请写出一个程序，在页面加载完成后动态创建一个form表单，并在里面添加一个input对象并给它任意赋值后义post方式提交到：http://127.0.0.1/save.php** ##

window.οnlοad=function()\{

var form=document.createElement("form");

form.setAttribute("method", "post");

form.setAttribute("action", "http://127.0.0.1/save.php");

var input=document.createElement("input");

form.appendChild(input);

document.body.appendChild(form);

input.value="cxc";

form.submit();//提交表单

## **76.用JavaScript实现升序排序。数据为23、45、18、37、92、13、24** ##

//升序算法

function sort(arr)\{

for (var i = 0; i <arr.length; i++) \{

for (var j = 0; j <arr.length-i; j++) \{

if(arr\[j\]>arr\[j+1\])\{

var c=arr\[j\];//交换两个变量的位置

arr\[j\]=arr\[j+1\];

arr\[j+1\]=c;

\};

return arr.toString();

console.log(sort(\[23,45,18,37,92,13,24\]));

1.  **请说出下列输出的结果**

var User = \{

count = 1，

getCount：function（）\{

return this.count;

console.log(User.getCount());

var func = User.getCount;

console.log(func());

1 undefined（因为是window对象执行了func函数）;

## **78.用程序实现找到html中id名相同的元素？** ##

<body>

<div id='div3'>id名重复的元素</div>

</form>

</body>

var nodes=document.querySelectorAll("\#form1>\*");

for(var i=0,len=nodes.length;i<len;i++)\{

var attr=nodes\[i\].getAttribute("id");

var s=1;

for(var j=i+1;j<len;j++)\{

if(nodes\[j\].getAttribute("id")==attr)\{

s++;

alert("id为："+attr+"的元素出现"+s+"次");

## **79.程序中捕获异常的方法？ js基础提及** ##

window.error

try\{\}catch()\{\}finally\{\}

1.  **下列控制台都输出什么**

<table style="width:426.1pt;"> 
 <tbody> 
 <tr> 
 <td style="vertical-align:top;width:426.1pt;"> 第1题： function setName(){ &nbsp;&nbsp;&nbsp;&nbsp;name="张三"; } setName(); console.log(name); 答案："张三" 第2题： //考点：1、变量声明提升&nbsp;2、变量搜索机制 var a=1; function test(){ &nbsp;&nbsp;&nbsp;&nbsp;console.log(a); &nbsp;&nbsp;&nbsp;&nbsp;var a=1; } test(); 答案：undefined 第3题： var b=2; function test2(){ &nbsp;&nbsp;&nbsp;&nbsp;window.b=3; &nbsp;&nbsp;&nbsp;&nbsp;console.log(b); } test2(); 答案：3 第4题： c=5;//声明一个全局变量c function test3(){ &nbsp;&nbsp;&nbsp;&nbsp;window.c=3; &nbsp;&nbsp;&nbsp;&nbsp;console.log(c); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//答案：undefined，原因：由于此时的c是一个局部变量c，并且没有被赋值 &nbsp;&nbsp;&nbsp;&nbsp;var c; &nbsp;&nbsp;&nbsp;&nbsp;console.log(window.c);//答案：3，原因：这里的c就是一个全局变量c } test3(); 第5题： var arr = []; arr[0] &nbsp;= 'a'; arr[1] &nbsp;= 'b'; arr[10] = 'c'; alert(arr.length); //答案：11 console.log(arr[5]); //答案：undefined 第6题： var a=1; console.log(a++); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//答案：1 console.log(++a); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//答案：3 第7题： console.log(null==undefined); //答案：true console.log("1"==1); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//答案：true，因为会将数字1先转换为字符串1 console.log("1"===1); &nbsp;&nbsp;&nbsp;&nbsp;//答案：false，因为数据类型不一致 第8题： typeof 1; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"number" typeof "hello"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"string" typeof /[0-9]/; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"object" typeof {}; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"object" typeof null; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"object" typeof undefined; &nbsp;&nbsp;"undefined" typeof [1,2,3]; &nbsp;&nbsp;&nbsp;&nbsp;"object" typeof function(){}; //"function" 第9题： parseInt(3.14); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//3 parseFloat("3asdf"); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//3 parseInt("1.23abc456"); parseInt(true);//"true" NaN 第10题： //考点：函数声明提前 function bar() { &nbsp;&nbsp;&nbsp;&nbsp;return foo; &nbsp;&nbsp;&nbsp;&nbsp;foo = 10; &nbsp;&nbsp;&nbsp;&nbsp;function foo() {} &nbsp;&nbsp;&nbsp;&nbsp;//var foo = 11; } alert(typeof bar());//"function" 第11题：&nbsp; //考点：函数声明提前 var foo = 1; function bar() { &nbsp;&nbsp;&nbsp;&nbsp;foo = 10; &nbsp;&nbsp;&nbsp;&nbsp;return; &nbsp;&nbsp;&nbsp;&nbsp;function foo() {} } bar(); alert(foo);//答案：1 第12题： console.log(a);//是一个函数 var a = 3; function a(){} console.log(a);3 第13题： //考点：对arguments的操作 function foo(a) { &nbsp;&nbsp;&nbsp;&nbsp;arguments[0] = 2; &nbsp;&nbsp;&nbsp;&nbsp;alert(a);//答案：2，因为：a、arguments是对实参的访问，b、通过arguments[i]可以修改指定实参的值 } foo(1); 第14题： function foo(a) { &nbsp;&nbsp;&nbsp;&nbsp;alert(arguments.length);//答案：3，因为arguments是对实参的访问 } foo(1, 2, 3); 第15题 bar();//报错 var foo = function bar(name) { &nbsp;&nbsp;&nbsp;&nbsp;console.log("hello"+name); &nbsp;&nbsp;&nbsp;&nbsp;console.log(bar); }; //alert(typeof bar); foo("world");//"hello" console.log(bar);//undefined console.log(foo.toString()); bar();//报错 第16题：&nbsp; function test(){ &nbsp;&nbsp;&nbsp;&nbsp;console.log("test函数"); } setTimeout(function(){ &nbsp;&nbsp;&nbsp;&nbsp;console.log("定时器回调函数"); }, 0) test(); 结果： test函数 定时器回调函数 &nbsp; </td> 
 </tr> 
 </tbody> 
</table>