Web前端面试题之JavaScript部分

今天小编要跟大家分享的文章是关于web前端面试题中HTML/CSS部分的内容。准备参加web前端面试的小伙伴们来和小编一起看一看吧，希望能够对大家有所帮助！

JavaScript部分

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)进行值复制。

/**

* 对象克隆

* 支持基本数据类型及对象

* 递归方法

*/

functionclone(obj){

varo;

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(vari = 0;i obj.length;i++){

o.push(clone(obj[i]));

}

}else{

o = {};

for(varkinobj){

o[k] = clone(obj[k]);

}

}

}

break;

default:

o = obj;

break;

}

returno;

}

3、如何消除一个数组里面重复的元素?

// 方法一：

vararr1 =[1,2,2,2,3,3,3,4,5,6],

arr2 = [];

for(vari = 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、想实现一个对页面某个节点的拖曳?如何做?(使用原生JS)。

5、在Javascript中什么是伪数组?如何将伪数组转化为标准数组?

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

functionlog(){

varargs = 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”中字母个数或统计最多字母数。

varstr = "aaaabbbccccddfgh";

varobj = {};

for(vari=0;istr.length;i++){

varv = 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 inobj){

document.write(obj[key].value +'='+obj[key].count+' ');// a=4 b=3 c=4 d=2 f=1 g=1 h=1

}

10、写一个function，清除字符串前后的空格。(兼容所有浏览器)

functiontrim(str){

if(str & typeof str === "string"){

returnstr.replace(/(^s*)|(s*)$/g,"");//去除前后空白符

}

}

以上就是小编今天为大家分享的关于Web前端面试题之JavaScript部分的文章，希望本篇文章能够对正在从事web前端工作的小伙伴们有所帮助。想要了解更多web前端相关知识记得关注达内web培训官网。最后祝愿小伙伴们面试成功！

【免责声明：本文图片及文字信息均由小编转载自网络，旨在分享提供阅读，版权归原作者所有，如有侵权请联系我们进行删除。】