HTML5面试题目汇总
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML5面试题目汇总相关的知识，希望对你有一定的参考价值。
分类：1、怎样添加、移除、移动、复制、创建和查找节点？
1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2）添加、移除、替换、插入
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
2、实现一个函数clone，可以对JavaScript中的5种主要的数据类型（包括Number、String、Object、Array、Boolean）进行值复制。
/**
-
对象克隆
-
支持基本数据类型及对象
-
递归方法
*/
function clone(obj) {
var o;
switch (typeof obj) {
case "undefined":
break;
case "string":
o = obj + "";
break;
case "number":
o = obj - 0;
break;
case "boolean":
o = obj;
break;
case "object": // object 分为两种情况 对象（Object）或数组（Array）
if (obj === null) {
o = null;
} else {
if (Object.prototype.toString.call(obj).slice(8, -1) === "Array") {
o = [];
for (var i = 0; i obj.length; i++) {
o.push(clone(obj[i]));
}
} else {
o = {};
for (var k in obj) {
o[k] = clone(obj[k]);
}
}
}
break;
default:
o = obj;
break;
}
return o;
}
3、如何消除一个数组里面重复的元素？
// 方法一：
var arr1 =[1,2,2,2,3,3,3,4,5,6],
arr2 = [];
for(var i = 0,len = arr1.length; i< len; i++){
if(arr2.indexOf(arr1[i]) < 0){
arr2.push(arr1[i]);
}
}
document.write(arr2); // 1,2,3,4,5,6
4、javascript的typeof返回哪些数据类型
Object number function boolean underfind
5、在Javascript中什么是伪数组？如何将伪数组转化为标准数组？
伪数组（类数组）：无法直接调用数组方法或期望length属性有什么特殊的行为，但仍可以对真正数组遍历方法来遍历它们。典型的是函数的argument参数，还有像调用getElementsByTagName,document.childNodes之类的,它们都返回NodeList对象都属于伪数组。可以使用Array.prototype.slice.call(fakeArray)将数组转化为真正的Array对象。
function log(){
var args = Array.prototype.slice.call(arguments);
//为了使用unshift数组方法，将argument转化为真正的数组
args.unshift(‘(app)‘);
console.log.apply(console, args);
};
6、Javascript中callee和caller的作用？
caller是返回一个对函数的引用，该函数调用了当前函数；
callee是返回正在被执行的function函数，也就是所指定的function对象的正文。
7、请描述一下cookies，sessionStorage和localStorage的区别
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
web storage和cookie的区别
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生。
8、手写数组快速排序
关于快排算法的详细说明，可以参考阮一峰老师的文章快速排序
“快速排序”的思想很简单，整个排序过程只需要三步：
（1）在数据集之中，选择一个元素作为”基准”（pivot）。
（2）所有小于”基准”的元素，都移到”基准”的左边；所有大于”基准”的元素，都移到”基准”的右边。
（3）对”基准”左边和右边的两个子集，不断重复第一步和第二步，直到所有子集只剩下一个元素为止。
9、统计字符串”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
}
10、写一个function，清除字符串前后的空格。（兼容所有浏览器）
function trim(str) {
if (str & typeof str === "string") {
return str.replace(/(^s*)|(s*)$/g,""); //去除前后空白符
}
}
11、IE和DOM事件流的区别
1.执行顺序不一样
2.参数不一样
3.事件加不加on
4.this指向问题
12、IE和标准下有哪些兼容性的写法
Var ev = ev || window.event
document.documentElement.clientWidth || document.body.clientWidth
Var target = ev.srcElement||ev.target
13、ajax请求的时候get 和post方式的区别
一个在url后面 一个放在虚拟载体里面
有大小限制
安全问题
应用不同 一个是论坛等只需要请求的，一个是类似修改密码的
14、call和apply的区别
Object.call(this,obj1,obj2,obj3)
Object.apply(this,arguments)
15、ajax请求时，如何解释json数据
使用eval parse 鉴于安全性考虑 使用parse更靠谱
16、Scope作用范围
考虑下面的JavaScript代码：
(function() { var a = b = 5；})()；console.log(b)；
会输出什么样的结果？
回答：
上面的代码会打印 5。
这个问题的诀窍是，这里有两个变量声明，但 a 使用关键字var声明的。代表它是一个函数的局部变量。与此相反，b 变成了全局变量。这个问题的另一个诀窍是，它没有使用严格模式 (‘use strict’；) 。如果启用了严格模式，代码就会引发ReferenceError的错误：B没有定义（b is not defined）。请记住，严格模式，则需要明确指定，才能实现全局变量声明。比如，你应该写：
(function() { ‘use strict’； var a = window.b = 5；})()；console.log(b)；
17、创建“原生”（native）方法
给字符串对象定义一个repeatify功能。当传入一个整数n时，它会返回重复n次字符串的结果。例如：
console.log(‘hello’.repeatify(3))；
应打印 hellohellohello。
回答：
一个可能的实现如下所示：
String.prototype.repeatify = String.prototype.repeatify || function(times) { var str = ‘’； for (var i = 0； i < times； i++) { str += this； } return str；}；
这个问题测试的是开发者有关JavaScript继承和prototype的知识点。这也验证了开发者是否知道该如果扩展内置对象（尽管这不应该做的）。
这里的另一个要点是，你要知道如何不覆盖可能已经定义的功能。通过测试一下该功能定义之前并不存在：String.prototype.repeatify = String.prototype.repeatify || function(times) {/* code here */}；
当你被要求做好JavaScript函数兼容时这种技术特别有用。
18、声明提升（Hoisting）
执行这段代码，输出什么结果。
function test() { console.log(a)； console.log(foo())； var a = 1； function foo() { return 2； }}test()；
回答：
这段代码的结果是 undefined 和 2。
原因是，变量和函数的声明都被提前了（移到了函数的顶部），但变量不分配任何值。因此，在打印变量的时候，它在函数中存在（它被声明了），但它仍然是 undefined 。表示换句话说，上面的代码等同于以下内容：function test() { var a； function foo() { return 2； } console.log(a)； console.log(foo())； a = 1；}test()；
19、this在JavaScript中如何工作的
下面的代码会输出什么结果？给出你的答案。
var fullname = ‘John Doe’；var obj = { fullname： ‘Colin Ihrig’， prop： { fullname： ‘Aurelio De Rosa’， getFullname： function() { return this.fullname； } }}；console.log(obj.prop.getFullname())；var test = obj.prop.getFullname；console.log(test())；
回答：
答案是Aurelio De Rosa和John Doe。原因是，在一个函数中，this的行为，取决于JavaScript函数的调用方式和定义方式，而不仅仅是看它如何被定义的。
在第一个 console.log()调用中，getFullname() 被调用作为obj.prop对象的函数。所以，上下文指的是后者，函数返回该对象的fullname。与此相反，当getFullname()被分配到test变量时，上下文指的是全局对象（window）。这是因为test是被隐式设置为全局对象的属性。出于这个原因，该函数返回window的fullname，即定义在第一行的那个值。
以上是关于HTML5面试题目汇总的主要内容，如果未能解决你的问题，请参考以下文章