【面经】2018金山WPS前端笔试题 & 面试题
Q: 通过键名访问对象的成员
下面代码输出了什么？
var a={},
b={key:'b'},
c={key:'c'};
a[b]=123;
a[c]=456;
console.log(a[b]);A
答案为456，因为键名只能为字符串，传入对象只会被转为字符串[object Object]，a[b],a[c]都等价于a[“[object Object]”]。
Q: 数组的索引值转换
控制台输出了啥？
var arr = [];
arr['a'] = a;
console.log(arr.length);
arr['2'] = 2;
console.log(arr.length);
arr.length = 0;
console.log(arr); A
0, 3, [];
‘a’, ‘2’作为arr的索引值都会被自动转化成整数类型。’a’转为NaN，存不进去，数组长度不变。’2’转为arr，数组长度就变为3，即便前两个值没有被赋值。
T: 字符串对象
Q1：考察字符串对象的类型
function judge(val) {
switch(val) {
case "A":
console.log(1);
break;
case "string":
console.log(2);
break;
case "undefined":
console.log(3);
break;
case undefined:
console.log(4);
break;
default:
console.log(5);
break;
}
}
judge(new String("A"));A1
5；
new的方式创建出一个object，虽说new String(“A”) == ’A’，但switch语句判定用的是全相等啊，兄dei~
Q2： 考察字符串变量与字符串对象的共性
JavaScript中如何检测一个变量是一个String类型？请写出函数实现
A2:
function (v) {
return v.constructor === String;
}Q3： 字符串处理
请用js去除字符串空格？
A3:
//去除所有空格
function removeAllSpaceOfStr (str) {
return str.replace(/\s*/g, "");
} extend:
//去除两边空格(正则、trim)
str = str.replace(/^\s*|\s*$/g, "");
str = str.trim();
//去除左边空格(正则、trim)
str = str.replace(/^\s*/, "");
str = str.trimLeft();
//去除右边空格(正则、trim)
str = str.replace(/\s*$/g, "");
str = str.trimRight();Q4:
如何获取浏览器URL中查询字符串中的参数？
A4:
function getParams () {
let str = window.location.href.split('?')[1];
let arr = str.split('&');
let params = {};
for (let i = 0; i < arr.length; i++) {
params[arr[i].split('=')[0]] = arr[i].split('=')[1];
}
return params;
}T： DOM操作
Q1:
怎样使用原生js添加、移除、移动、复制、创建和查找节点？
A1:
1）创建新节点
createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点
2）添加、移除、替换、插入、复制
appendChild() //添加
removeChild() //移除
replaceChild() //替换
insertBefore() //插入
cloneChild()
3）查找
getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性
T： 算法
对于一个排好序的数组，如果当中有两个数的和为某个给定的数target，返回true，否则false，事件复杂度O(n) 。
A
function search(arr, target) {
if (!arr.length) return -1;
let head = 0;
let tail = arr.length;
while(head !== tail && head < tail) {
if (arr[head] === target) return head;
if (arr[tail] === target) return tail;
head++;
tail--;
}
return -1;
}Q:数据结构
用javascript实现map的数据结构，使得外部只能通过map提供的接口访问数据
A:
//TODO
Q: 网络协议
列出http协议头部信息并简述其作用。
A
- General
- Request URL： 请求地址
- Request Method： 请求类型
- Status Code： 状态码
- Remote Address： 请求发送的目标IP地址 - Request Headers
- Accept：浏览器可接受的MIME类型
- Accept-Charset：告知服务器，客户端支持哪种字符集
- Accept-Encoding：浏览器能够进行解码的数据编码方式
- Accept-Language：浏览器支持的语言。
- Referer：请求页面url
- Content-Type：内容类型
- Content-Length：请求正文的长度
- User-Agent: 包含客户端的操作系统、浏览器和其它属性等信息。
- Host： 服务器主机地址
- X-Requested-With： null为同步请求，XMLHttpRequest为ajax的异步请求 - Response Headers
- Date： 响应时间
- Content-Type： 发送给客户端的实体正文的媒体类型
- Content-length： 正文长度
- Cache-control： 用来操作缓存的工作机制；
- Transfer-Encoding： 定义请求的传输编码
- Connection： 允许客户端或服务器中任何一方关闭底层的连接双方都会要求在处理请求后关闭或者保持它们的TCP连接。
Cache-control详解： https://blog.csdn.net/qq_33301113/article/details/75676276
https://www.cnblogs.com/azhai-biubiubiu/p/6048901.html
Q: 设计模式
用js实现一个单例模式
A
var Cat = function() {}
Cat.getInstance = function () {
var instance;
return function () {
return instance || new Cat();
}
} ();Q： 网络
从输入URL到浏览器显示页面，问浏览器其中的工作流程。
A
1. 输入网址。
2. 浏览器查找域名的IP地址。
3. 浏览器给web服务器发送一个HTTP请求
4. 网站服务的永久重定向响应
5. 浏览器跟踪重定向地址 现在，浏览器知道了要访问的正确地址，所以它会发送另一个获取请求。
6. 服务器“处理”请求，服务器接收到获取请求
7. 服务器发回一个HTTP响应
8. 浏览器开始显示HTML
9. 浏览器发送请求，以获取嵌入在HTML中的对象。
参考：https://www.cnblogs.com/xianyulaodi/p/6547807.html
Q： 机制
浏览器是如何渲染显示页面的？
A
- 流程
- 获取资源： 获取html文本，逐步解析，遇到外部资源如css、js文件则发出获取请求。
- 构建对象模型：浏览器会将HTML解析成一个DOM树，类似的，把css解析成CSSDOM。
- 渲染树的构建：根据DOM树和CSSOM来构造 Rendering Tree，tree包含了所有可见内容及其样式信息。
- 渲染树的布局：顾名思义就是计算出每个节点在屏幕中的位置，输出一个“盒模型”
- 渲染树的绘制：将渲染树中的每个节点转换成屏幕上的实际像素。 - 特性
- 阻塞： 默认同步执行的脚本会阻塞DOM的解析，外部脚本获取后会被立即执行，然后再继续构建DOM。默认情况CSS则会阻塞渲染。
- 渲染流程是自上而下、逐步完成的，为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。