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

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<p>里面的段落</p></div>”;

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

var str = “<div>这里是div<p>里面的段落</p></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、标签之中直接添加 onclick="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.onload=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]));

请说出下列输出的结果

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题：

function setName(){

name="张三";

}

setName();

console.log(name);

答案："张三"

第2题：

//考点：1、变量声明提升 2、变量搜索机制

var a=1;

function test(){

console.log(a);

var a=1;

}

test();

答案：undefined

第3题：

var b=2;

function test2(){

window.b=3;

console.log(b);

}

test2();

答案：3

第4题：

c=5;//声明一个全局变量c

function test3(){

window.c=3;

console.log(c); //答案：undefined，原因：由于此时的c是一个局部变量c，并且没有被赋值

var c;

console.log(window.c);//答案：3，原因：这里的c就是一个全局变量c

}

test3();

第5题：

var arr = [];

arr[0] = 'a';

arr[1] = 'b';

arr[10] = 'c';

alert(arr.length); //答案：11

console.log(arr[5]); //答案：undefined

第6题：

var a=1;

console.log(a++); //答案：1

console.log(++a); //答案：3

第7题：

console.log(null==undefined); //答案：true

console.log("1"==1); //答案：true，因为会将数字1先转换为字符串1

console.log("1"===1); //答案：false，因为数据类型不一致

第8题：

typeof 1; "number"

typeof "hello"; "string"

typeof /[0-9]/; "object"

typeof {}; "object"

typeof null; "object"

typeof undefined; "undefined"

typeof [1,2,3]; "object"

typeof function(){}; //"function"

第9题：

parseInt(3.14); //3

parseFloat("3asdf"); //3

parseInt("1.23abc456");

parseInt(true);//"true" NaN

第10题：

//考点：函数声明提前

function bar() {

return foo;

foo = 10;

function foo() {}

//var foo = 11;

}

alert(typeof bar());//"function"

第11题：

//考点：函数声明提前

var foo = 1;

function bar() {

foo = 10;

return;

function foo() {}

}

bar();

alert(foo);//答案：1

第12题：

console.log(a);//是一个函数

var a = 3;

function a(){}

console.log(a);////3

第13题：

//考点：对arguments的操作

function foo(a) {

arguments[0] = 2;

alert(a);//答案：2，因为：a、arguments是对实参的访问，b、通过arguments[i]可以修改指定实参的值

}

foo(1);

第14题：

function foo(a) {

alert(arguments.length);//答案：3，因为arguments是对实参的访问

}

foo(1, 2, 3);

第15题

bar();//报错

var foo = function bar(name) {

console.log("hello"+name);

console.log(bar);

};

//alert(typeof bar);

foo("world");//"hello"

console.log(bar);//undefined

console.log(foo.toString());

bar();//报错

第16题：

function test(){

console.log("test函数");

}

setTimeout(function(){

console.log("定时器回调函数");

}, 0)

test();

结果：

test函数

定时器回调函数