WPS金山笔试题
21号那天参加了WPS金山的现场笔试，听宣讲会感觉我会爱上金山啊，而且我也加了他们食堂的微博，每天都会更新菜单，太爽了吧，哇~~~~~~
1、“i am Front Engineer”.split("").reverse().join("")；输出的是？
2、
var obj = { a:1; b:function(){console.log(this.a)} }; var a = 2; var foo = obj.b; obj.b(); //? foo(); //? obj.b.call(window); //?
3、写一个冒泡排序
4、居中div？居中浮动元素？居中绝对定位的div？
//居中DIV .wrap { background: yellow; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; } .center { background: green; width: 100px; height: 100px; } //居中浮动 .div1{ width: 600px; height: 600px; background: yellow; display: flex; align-items: center; justify-content: center; } .div2{ height: 200px; width: 200px; background: green; float: left; } //居中绝对定位 .div1{ width: 600px; height: 600px; background: yellow; position: relative; } .div2{ height: 200px; width: 200px; background: green; position: absolute; margin: auto; left: 0; right: 0; top: 0; bottom: 0; }
5、JS实现数组去重
http://mp.weixin.qq.com/s?__biz=MzAxODE2MjM1MA==&mid=210557250&idx=2&sn=4a631b5f93043d5877b14cd23f6015cf
// 最简单数组去重法 function unique1(array){ var n = []; //一个新的临时数组 //遍历当前数组 for(var i = 0; i < array.length; i++){ //如果当前数组的第i已经保存进了临时数组，那么跳过， //否则把当前项push到临时数组里面 if (n.indexOf(array[i]) == -1) n.push(array[i]); } return n; }
6、性能优化有哪些？
第二次笔试
1、alert(1&&2)输出为2
2、sum(2,3)=>5; sum(2)(3)=>5; 写出sum函数http://www.jb51.net/article/61752.htm
3、计算从1到n的整数中共出现多少个0
思路：利用正则，将数值转换为数组
//参考 //数值转为数组http://bbs.csdn.net/topics/330203558 var s = "001002003" var re = new RegExp(".{1}","g") //大括号里为：以多少位截取 var a = [] while ((n=re.exec(s)) != null){ a[a.length] = n[0] } for(i in a) alert(a[i])
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> window.onload = function(){ function cou(n){ var count = 0; for(var i = 1;i <= n;i++){ var re = new RegExp(".{1}","g") var a = [] while ((x=re.exec(i)) != null){ a[a.length] = x[0] } // alert(a); for(var j = 0;j < a.length;j++){if(a[j]==0)++count;} } // return count; alert(count); } cou(110); } </script> </head> <body></body> </html>
4、使用DOM操作来添加、替换、插入、删除和查询节点
创建：var oDiv = document.createElement('div');
插入：1.appendChild()：把节点插入到父节点的末尾。document.body.appendChild(oDiv); 2.insertBefore()：把节点插入到父节点的某个兄弟节点的前面。
var oP = createElement('p'); //创建一个p节点
document.body.insertBefore(oP,oDiv); //把p节点插入到div的前面
删除：document.body.removeChild(oP);
查找：getElementById()；getElementsByTagName()
替换：document.body.replaceChild(oSpan,oBox);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> function CreateNode() { var pnode = document.createElement('p'); var tnode = document.createTextNode('烟花三月下扬州'); pnode.appendChild(tnode); document.body.appendChild(pnode); } function ReplaceNode() { var pnode = document.createElement('p'); var tnode = document.createTextNode('故人西辞黄鹤楼'); pnode.appendChild(tnode); //获取要替换的p节点 var oldnode = document.getElementsByTagName('p')[0]; // oldnode.replaceNode(pnode, oldnode); //此种方法只支持IE oldnode.parentNode.replaceChild(pnode,oldnode);//通用的 } function RemoveNode() { var oldnode = document.getElementsByTagName('p')[0]; //oldnode.parentNode返回的是p节点的父节点，这里就是body，然后使用body节点的removeChild方法删除其下面的pnode节点 oldnode.parentNode.removeChild(oldnode); } </script> </head> <body> <input id="Button1" type="button" value="创建节点" onclick="CreateNode();"/><br/> <input id="Button2" type="button" value="替换节点" onclick="ReplaceNode();"/><br/> <input id="Button3" type="button" value="删除节点" onclick="RemoveNode();"/> </body> </html>
jQuery：
一、jQuery操作DOM - 查询 html(): 读取或修改节点的HTML内容，类似于JavaScript中的innerHTML属性 text(): 读取或修改节点的文本内容，类似于JavaScript中的textContent属性 val(): 读取或修改节点的value属性值，类似于 JavaScript 中的value值 属性操作：attr(): 读取或者修改节点的属性；removeAttr(): 删除节点的属性 二、jQuery操作DOM - 样式操作 样式操作 - attr("class","") 获取和设置 - addClass("") 追加样式 - removeClass("") 移除样式 - removeClass() 移除所有样式 - toggleClass("") 切换样式 - hasClass("") 是否有某个样式 - css("") 读取css的值 - css("","") 设置多个样式 三、jQuery操作DOM - 遍历节点 遍历节点 - children()/children(selector) 只考虑直接子节点 - next()/next(selector) 下一个兄弟节点 - prev()/prev(selector) 上一个兄弟节点 - siblings()/siblings(selector) 其他兄弟 - find(selector) 查找满足选择器的所有后代 - parent() 父节点(没有选择器) 四、jQuery操作DOM - 创建、插入、删除 创建 DOM 节点 - jQuery 使用 $()工厂函数来创建节点，向$()工厂函数传递的 HTML 代码字符串 - jQuery 允许通过 HTML 代码字符串直接创建元素节点、文本节点及属性节点 插入 DOM 节点 - 内部插入节点 - append() 作为最后一个子节点添加进来 - prepend() 作为第一个子节点添加进来 - 外部插入节点 - after() 作为下一个兄弟节点添加进来 - before() 作为上一个兄弟节点添加进来 删除 DOM 节点 - remove() 只考虑直接子节点 - remove(selector) 按选择器定位后删除 - empty() 清空节点 五、jQuery操作DOM - 替换 替换 DOM 节点 - replaceWith(): 将所有匹配的元素替换为指定的 HTML 或 DOM 元素 - replaceAll(): 颠倒了的replaceWith()方法 六、jQuery操作DOM - 复制 复制 DOM 节点 - clone() - clone(true): 复制的节点也具有行为(事件处理)
5、用原生JS实现一个函数，功能是对JS对象的深度克隆
http://www.cnblogs.com/ginowang42/archive/2013/04/11/3014419.html
var deepClone = function (obj) { var _tmp,result; _tmp = JSON.stringify(obj); result = JSON.parse(_tmp); return result; } var obj1 = {family:{brother:"wangzhipeng",father:"wanglicai",mother:"sunaiyun"},name:"gino",sex:"male",age:"27"}; var obj2 = deepClone(obj1); obj1.family.brother = "close"; console.log(obj1); console.log(obj2);
6、一个页面从输入URL到页面加载显示完成，这个过程发生了什么？
一般会经历以下几个过程：
1、首先，在浏览器地址栏中输入url
2、浏览器先查看浏览器缓存-系统缓存-路由器缓存，如果缓存中有，会直接在屏幕中显示页面内容。若没有，则跳到第三步操作。
3、在发送http请求前，需要域名解析(DNS解析)，解析获取相应的IP地址。
4、浏览器向服务器发起tcp连接，与浏览器建立tcp三次握手。
5、握手成功后，浏览器向服务器发送http请求，请求数据包。
6、服务器处理收到的请求，将数据返回至浏览器
7、浏览器收到HTTP响应
8、读取页面内容，浏览器渲染，解析html源码
9、生成Dom树、解析css样式、js交互
10、客户端和服务器交互
11、ajax查询
其中，步骤2的具体过程是：
- 浏览器缓存：浏览器会记录DNS一段时间，因此，只是第一个地方解析DNS请求；
- 操作系统缓存：如果在浏览器缓存中不包含这个记录，则会使系统调用操作系统，获取操作系统的记录(保存最近的DNS查询缓存)；
- 路由器缓存：如果上述两个步骤均不能成功获取DNS记录，继续搜索路由器缓存；
- ISP缓存：若上述均失败，继续向ISP搜索。
浙公网安备 33010602011771号