面试题集锦（JS-v2）

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

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

<scripttype=”text/javascript”>

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

x?	匹配问号前面的内容出现0 或 1 次。

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

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

</script>

61、完成foo()函数的内容，要求能够弹出对话框提示当前选中的是第几个单选框。

<html>

<head>

<metahttp-equiv=”Content-Type” content=”text/html;charset=utf-8″ />

</head>

<body>

function foo() {

//在此处添加代码

var rdo =document.form1.radioGroup;

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

if(rdo.checked){

alert(“您选择的是第”+(i+1)+”个单选框”);

}

</script>

<body>

</form>

</body>

</html>

62、完成函数showImg()，要求能够动态根据下拉列表的选项变化，更新图片的显示

<body>

function showImg (oSel) {

//在此处添加代码

var str = oSel.value;

document.getElementById(“pic”).src= str+”.jpg”;

}

</script>

<br />

</select></body>

63、截取字符串abcdefg的efg

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

64、列举浏览器对象模型BOM里常用的至少4个对象，并列举window对象的常用方法至少5个

对象：Window document location screen history navigator

方法：Alert() confirm() prompt() open() close()

65、简述列举文档对象模型DOM里document的常用的查找访问节点的方法并做简单说明

Document.getElementById 根据元素id查找元素

Document.getElementByName 根据元素name查找元素

Document.getElementTagName 根据指定的元素名查找元素

67、JavaScript的数据类型都有什么？

基本数据类型：String,Boolean,Number,Undefined,Null

引用数据类型：Object(Array,Date,RegExp,Function)

66、javascript中有哪几种数据类型，分别写出中文和英文。

string boolean number null undefined object

字符串布尔数值空值未定义对象

67、javascript中==和===的区别是什么？举例说明。

===会自动进行类型转换，==不会

68、简述创建函数的几种方式

第一种（函数声明）：

function sum1(num1,num2){

return num1+num2;

}

第二种（函数表达式）：

var sum2 = function(num1,num2){

return num1+num2;

}

匿名函数：

function(){}:只能自己执行自己

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

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

69、Javascript如何实现继承？

原型链继承，借用构造函数继承，组合继承，寄生式继承，寄生组合继承

72、Javascript创建对象的几种方式？

工厂方式，构造函数方式，原型模式，混合构造函数原型模式，动态原型方式

73、把 Script 标签放在页面的最底部的body封闭之前和封闭之后有什么区别？浏览器会如何解析它们？

如果说放在body的封闭之前，将会阻塞其他资源的加载

如果放在body封闭之后，不会影响body内元素的加载

74、iframe的优缺点？

优点：

1. 解决加载缓慢的第三方内容如图标和广告等的加载问题

2. Security sandbox

3. 并行加载脚本

缺点：

1. iframe会阻塞主页面的Onload事件

2. 即时内容为空，加载也需要时间

3. 没有语意

75、请你谈谈Cookie的弊端？

缺点：

1.`Cookie`数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。

2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。

3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

76、DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

1. 创建新节点

createDocumentFragment() // 创建一个DOM片段

createElement() // 创建一个具体的元素

createTextNode() // 创建一个文本节点

2. 添加、移除、替换、插入

appendChild()

removeChild()

replaceChild()

insertBefore() // 在已有的子节点前插入一个新的子节点

3. 查找

getElementsByTagName() // 通过标签名称

getElementsByName() // 通过元素的Name属性的值(IE容错能力较强，会得到一个数组，其中包括id等于name值的)

getElementById() // 通过元素Id，唯一性

77、js延迟加载的方式有哪些？

1. defer和async

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

3. 按需异步载入js

78、documen.write和 innerHTML 的区别？

document.write 只能重绘整个页面

innerHTML 可以重绘页面的一部分

79、哪些操作会造成内存泄漏？

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

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

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

2. 闭包

3. 控制台日志

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

83、判断一个字符串中出现次数最多的字符，统计这个次数

答：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+'次');

93、写一个获取非行间样式的函数

function getStyle(obj,attr,value)

{

if(!value)

{

if(obj.currentStyle)//ie

{

return obj.currentStyle(attr);

}

else{//标准浏览器

obj.getComputedStyle(attr,false);

}

else

{

obj.style[attr] = value;

}

94、解释jsonp的原理，以及为什么不是真正的ajax

Jsonp并不是一种数据格式，而json是一种数据格式，jsonp是用来解决跨域获取数据的一种解决方案，具体是通过动态创建script标签，然后通过标签的src属性获取js文件中的js脚本，该脚本的内容是一个函数调用，参数就是服务器返回的数据，为了处理这些返回的数据，需要事先在页面定义好回调函数，本质上使用的并不是ajax技术

99、字符串反转，如将 '12345678' 变成 '87654321'

//大牛做法；

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

var str = '12345678';

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

100、将数字 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 += ',';

}

101、生成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--;

}

102、去掉数组中重复的数字方法一；

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

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

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;

}

方法二：

(function(arr){

var len = arr.length,

newArr = [],

flag;

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

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

if(arr[i] == arr[j]){

flag = 0;

}

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

}

alert(newArr);

})([1, 1, 22, 3, 4, 55, 66]);

103、阶乘函数；987*65…1

//原型方法

Number.prototype.N = function(){

var re = 1;

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

re *= i;

}

return re;

}

var num = 5;

alert(num.N());

104、window.location.search返回的是什么？

答：查询(参数)部分。除了给动态语言赋值以外，我们同样可以给静态页面,并使用javascript来获得相信应的参数值

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

//url:http://www.sina.com/getage?number=1&year=2016

105、window.location.hash 返回的是什么？

答：锚点，返回值：#love ；

//url:http://www.sina.com/getage?#age

这时就返回”#age”

106、window.location.reload() 作用？

答：刷新当前页面。

107、阻止冒泡函数

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);

}

108、什么是闭包？写一个简单的闭包？；

答：我的理解是，闭包就是能够读取其他函数内部变量的函数。在本质上，闭包就是将函数内部和函数外部连接起来的一座桥梁。

function outer(){

var num = 1;

function inner(){

var n = 2;

alert(n + num);

}

return inner;

}

outer()();

109、javascript 中的垃圾回收机制？

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

110、看题做答：

function f1(){

var tmp = 1;

this.x = 3;

console.log(tmp); //A

console.log(this.x)； //B

}

var obj = new f1(); //1

console.log(obj.x) //2

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

分析：

这道题让我重新认识了对象和函数，首先看代码（1），这里实例话化了 f1这个类。相当于执行了 f1函数。所以这个时候 A 会输出 1，而 B 这个时候的 this 代表的是实例化的当前对象 obj B 输出 3.。代码（2）毋庸置疑会输出 3，重点代码（3）首先这里将不再是一个类，它只是一个函数。那么 A输出 1， B呢？这里的this 代表的其实就是window对象，那么this.x 就是一个全局变量相当于在外部的一个全局变量。所以 B 输出 3。最后代码由于f没有返回值那么一个函数如果没返回值的话，将会返回 underfined ，所以答案就是： 1， 3， 3， 1， 3， underfined 。

111、下面输出多少？

var o1 = new Object();

var o2 = o1;

o2.name = "CSSer";

console.log(o1.name);

如果不看答案，你回答真确了的话，那么说明你对javascript的数据类型了解的还是比较清楚了。js中有两种数据类型，分别是：基本数据类型和引用数据类型（object Array）。对于保存基本类型值的变量，变量是按值访问的，因为我们操作的是变量实际保存的值。对于保存引用类型值的变量，变量是按引用访问的，我们操作的是变量值所引用（指向）的对象。答案就清楚了： //CSSer;

112、再来一个

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); //

如果CSSer参数是按引用传递的，那么结果应该是"http://www.popcg.com/"，但实际结果却仍是"http://www.csser.com/"。事实是这样的：在函数内部修改了引用类型值的参数，该参数值的原始引用保持不变。我们可以把参数想象成局部变量，当参数被重写时，这个变量引用的就是一个局部变量，局部变量的生存期仅限于函数执行的过程中，函数执行完毕，局部变量即被销毁以释放内存。

（补充：内部环境可以通过作用域链访问所有的外部环境中的变量对象，但外部环境无法访问内部环境。每个环境都可以向上搜索作用域链，以查询变量和函数名，反之向下则不能。）

113、输出多少？

var a = 6;

setTimeout(function () {

var a = 666;//由于变量a是一个局部变量

alert(a); // 输出666，

}, 1000);

a = 66;

因为var a = 666;定义了局部变量a，并且赋值为666，根据变量作用域链，
全局变量处在作用域末端，优先访问了局部变量，从而覆盖了全局变量。

var a = 6;

setTimeout(function () {

//变量声明提前

alert(a); // 输出undefined

var a = 666;

}, 1000);

a = 66;

因为var a = 666;定义了局部变量a，同样覆盖了全局变量，但是在alert(a);之前
a并未赋值，所以输出undefined。

var a = 6;
setTimeout(function(){
alert(a);
var a = 66;
}, 1000);
a = 666;
alert(a);
//结果：666 undefined

记住：异步处理，一切OK 声明提前

114、输出多少？

function setN(obj){

obj.name='屌丝';

obj = new Object();

obj.name = '腐女';

};

var per = new Object();

setN(per);

alert(per.name); //屌丝内部

115、JS的继承性

window.color = 'red';

var o = {color: 'blue'};

function sayColor(){

alert(this.color);

}

考点：1、this的指向

2、call的用法

sayColor(); //red

sayColor.call(this); //red this指向的是window对象

sayColor.call(window); //red

sayColor.call(o); //blue

116、精度问题: 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

117、加减运算

alert('5'+3); //53 string

alert('5'+'3'); //53 string

alert('5'-3); //2 number

alert('5'-'3'); //2 number

118、什么是同源策略？

指：同协议、端口、域名的安全策略，由网景(Netscape)公司提出来的安全协议！

120、为什么不能定义1px左右的div容器？

IE6下这个问题是因为默认的行高造成的，解决的方法也有很多，例如：

overflow:hidden | zoom:0.08 | line-height:1px

121、结果是什么？

function foo(){

foo.a = function(){alert(1)};

this.a = function(){alert(2)};

a = function(){alert(3)};

var a = function(){alert(4)};

};

foo.prototype.a = function(){alert(5)};

foo.a = function(){alert(6)};

foo.a(); //6

var obj = new foo();

obj.a(); //2

foo.a(); //1

122、输出结果

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

123、计算字符串字节数：

new function(s){

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

if(""==s) return 0; //无效代码，因为上一句!s已经判断过

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!");

124、结果是：

var bool = !!2; alert(bool)；//true;

技巧：双向非操作可以把字符串和数字转换为布尔值。

125、声明对象，添加属性，输出属性

var obj = {

name: 'leipeng',

showName: function(){

alert(this.name);

}

obj.showName();

126、匹配输入的字符：第一个必须是字母或下划线开头，后面就是字母和数字或者下划线构成，长度5-20

var reg = /^[a-zA-Z_][a-zA-Z0-9_]{4,19}/,

name1 = 'leipeng',

name2 = '0leipeng',

name3 = '你好leipeng',

name4 = 'hi';

alert(reg.test(name1));

alert(reg.test(name2));

alert(reg.test(name3));

alert(reg.test(name4));

127、检测变量类型

function checkStr(str){

typeof str == 'string'? alert('true'):alert('false');

}

checkStr('leipeng');

128、如何在HTML中添加事件，几种方法？

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

2、JS添加 Eobj.onclick = method;

3、现代事件 IE9以前： obj.attachEvent('onclick', method)；

标准浏览器: obj.addEventListener('click', method, false);

129、BOM对象有哪些，列举window对象？

1、window对象，是JS的最顶层对象，其他的BOM对象都是window对象的属性；

2、document对象，文档对象；

3、location对象，浏览器当前URL信息；

4、navigator对象，浏览器本身信息；

5、screen对象，客户端屏幕信息；

6、history对象，浏览器访问历史信息；面试

posted @ 2017-01-14 10:40 波吉大王子阅读(144) 评论(0) 收藏举报

大云🐶

面试题集锦（JS-v2）

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

61、完成foo()函数的内容，要求能够弹出对话框提示当前选中的是第几个单选框。

62、完成函数showImg()，要求能够动态根据下拉列表的选项变化，更新图片的显示

63、截取字符串abcdefg的efg

64、列举浏览器对象模型BOM里常用的至少4个对象，并列举window对象的常用方法至少5个

65、简述列举文档对象模型DOM里document的常用的查找访问节点的方法并做简单说明

66、javascript中有哪几种数据类型，分别写出中文和英文。

67、javascript中==和===的区别是什么？举例说明。

68、简述创建函数的几种方式

69、Javascript如何实现继承？

72、Javascript创建对象的几种方式？

73、把 Script 标签 放在页面的最底部的body封闭之前 和封闭之后有什么区别？浏览器会如何解析它们？

74、iframe的优缺点？

75、请你谈谈Cookie的弊端？

76、DOM操作——怎样添加、移除、移动、复制、创建和查找节点。

77、js延迟加载的方式有哪些？

78、documen.write和 innerHTML 的区别？

79、哪些操作会造成内存泄漏？

83、判断一个字符串中出现次数最多的字符，统计这个次数

93、写一个获取非行间样式的函数

94、解释jsonp的原理，以及为什么不是真正的ajax

99、字符串反转，如将 '12345678' 变成 '87654321'

100、将数字 12345678 转化成 RMB形式 如： 12,345,678

101、生成5个不同的随机数；

102、去掉数组中重复的数字 方法一；

103、阶乘函数；9*8*7*6*5…*1

104、window.location.search返回的是什么？

105、window.location.hash 返回的是什么？

106、window.location.reload() 作用？

107、阻止冒泡函数

108、什么是闭包？ 写一个简单的闭包？；

109、javascript 中的垃圾回收机制？

110、看题做答：

111、下面输出多少？

112、再来一个

113、输出多少？

114、输出多少？

115、JS的继承性

116、精度问题: JS 精度不能精确到 0.1 所以 。。。。同时存在于值和差值中

117、加减运算

118、什么是同源策略？

120、为什么不能定义1px左右的div容器？

121、结果是什么？

122、输出结果

123、计算字符串字节数：

124、结果是：

125、声明对象，添加属性，输出属性

126、匹配输入的字符：第一个必须是字母或下划线开头，后面就是字母和数字或者下划线构成，长度5-20

127、检测变量类型

128、如何在HTML中添加事件，几种方法？

129、BOM对象有哪些，列举window对象？

公告

73、把 Script 标签放在页面的最底部的body封闭之前和封闭之后有什么区别？浏览器会如何解析它们？

100、将数字 12345678 转化成 RMB形式如： 12,345,678

102、去掉数组中重复的数字方法一；

103、阶乘函数；987*65…1

108、什么是闭包？写一个简单的闭包？；

116、精度问题: JS 精度不能精确到 0.1 所以。。。。同时存在于值和差值中