【备战秋招Day 3】经典面试题9-12及在线编程题7-9答案

转载自IMWeb团队，知乎地址：https://zhuanlan.zhihu.com/p/27901836

经典面试题

9.在Javascript中什么是伪数组？如何将伪数组转化为标准数组？

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

10.浏览器本地存储

在较高版本的浏览器中，js提供了sessionStorage和globalStorage。在HTML5中提供了localStorage来取代globalStorage。html5中的Web Storage包括了两种存储方式：sessionStorage和localStorage。

sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。

11.线程与进程的区别

一个程序至少有一个进程,一个进程至少有一个线程.线程的划分尺度小于进程，使得多线程程序的并发性高。另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。

从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。这就是进程和线程的重要区别。

12.请说出三种减少页面加载时间的方法。

1.优化图片

2.图像格式的选择（GIF：提供的颜色较少，可用在一些对颜色要求不高的地方）

3.优化CSS（压缩合并css，如margin-top,margin-left…)

4.网址后加斜杠（如http://www.campr.com/目录，会判断这个“目录是什么文件类型，或者是目录。）

5.标明高度和宽度（如果浏览器没有找到这两个参数，它需要一边下载图片一边计算大小，如果图片很多，浏览器需要不断地调整页面。这不但影响速度，也影响浏览体验。

当浏览器知道了高度和宽度参数后，即使图片暂时无法显示，页面上也会腾出图片的空位，然后继续加载后面的内容。从而加载时间快了，浏览体验也更好了。）

6.减少http请求（合并文件，合并图片）。

前端思考题

5.在链接中应该使用诸如“Click here” 一类的笼统词汇吗？

正方:

事实证明，“Click here” 比描述性的链接更容易获得点击，因此应该使用该词汇以获得更好的点击率。

反方:

“Click here” 一类的链接损害 Web 的易用性，用户在点击之前，只能通过周围的上下文关系猜测这个链接是做什么的。Quality guidelines 建议，任何链接文字都应该明确描述该链接的目的。

和事佬:

为了提高站点的易用性，可访问性和 SEO 性能，应该始终使用描述性链接。很有趣听到有人说 “Click here” 比描述性链接可以获得更多点击率，不知道那些点击进来的人是不是看两眼就离开了。

6. 链接是否应该在新窗口打开？

在 Web 空前繁荣的今天，有关 Web 设计中的各种观点很多会成为话题，有的很快达成一致，有的则一直争议下去。

正方:

外部链接应该始终从新窗口打开，当你浏览一个站点的时候，点击了一个链接，却被带到另外一个站点，你在这个站点的会话也因此丢失，这实在令人恼怒。因此，站点内的链接可以在现有窗口打开，而站点外链接则应该在新窗口打开。

反方:

作为 Web 设计师，我们不该控制用户的行为，一个链接是否在新窗口打开，应该是用户自己的选择。剥夺用户的控制权，在用户的桌面上打开一堆窗
cc89
口或标签，这才是真正让 人恼怒的事。如果用户想打开新窗口，他们可以自己选择，而对非熟练用户，新窗口让他们丢失了“后退”按钮更让他们无所适从。

和事佬:

总体来讲，应该避免使用新窗口打开链接，但在某些场合，如打开购物车中的帮助链接，打开一个非 html 文件（如 PDF 文件），应该使用新窗口。为了提高易用性，最好在需要打开新窗口的地方，用一个小图标提示一下。

在线编程题

7.查找重复元素

将传入的数组arr中的每一个元素value当作另外一个新数组b的key，然后遍历arr去访问b[value]，若b[value]不存在，则将b[value]设置为1，若b[value]存在，则将其加1。可以想象，若arr中数组没有重复的元素，则b数组中所有元素均为1；若arr数组中存在重复的元素，则在第二次访问该b[value]时，b[value]会加1，其值就为2了。最后遍历b数组，将其值大于1的元素的key存入另一个数组a中，就得到了arr中重复的元素。

function duplicates(arr) {
//声明两个数组，a数组用来存放结果，b数组用来存放arr中每个元素的个数
var a = [],b = [];
//遍历arr，如果以arr中元素为下标的的b元素已存在，则该b元素加1，否则设置为1
for(var i = 0; i < arr.length; i++){
if(!b[arr[i]]){
b[arr[i]] = 1;
continue;
}
b[arr[i]]++;
}
//遍历b数组，将其中元素值大于1的元素下标存入a数组中
for(var i = 0; i < b.length; i++){
if(b[i] > 1){
a.push(i);
}
}
return a;
}

8.时间格式化输出

function formatDate(t,str){
var obj = {
yyyy:t.getFullYear(),
yy:(""+ t.getFullYear()).slice(-2),
M:t.getMonth()+1,
MM:("0"+ (t.getMonth()+1)).slice(-2),
d:t.getDate(),
dd:("0" + t.getDate()).slice(-2),
H:t.getHours(),
HH:("0" + t.getHours()).slice(-2),
h:t.getHours() % 12,
hh:("0"+t.getHours() % 12).slice(-2),
m:t.getMinutes(),
mm:("0" + t.getMinutes()).slice(-2),
s:t.getSeconds(),
ss:("0" + t.getSeconds()).slice(-2),
w:['日', '一', '二', '三', '四', '五', '六'][t.getDay()]
};
return str.replace(/([a-z]+)/ig,function($1){return obj[$1]});
}

我的代码：

function formatDate(oDate, sFormation) {
var add0=function zero(n){
if(n<10){
return 0+""+n;
}else{
return n;
}
}
var o = {
"yyyy":oDate.getFullYear(),
"yy":oDate.getFullYear()%100,
"MM":add0(oDate.getMonth()+1),
"M":oDate.getMonth()+1,
"dd":add0(oDate.getDate()),
"d":oDate.getDate(),
"HH":add0(oDate.getHours()),
"H":oDate.getHours(),
"hh":add0(oDate.getHours()%12),
"h":oDate.getHours()%12,
"mm":add0(oDate.getMinutes()),
"m":oDate.getMinutes(),
"ss":add0(oDate.getSeconds()),
"s":oDate.getSeconds(),
"w":function(){
var day = ["日","一","二","三","四","五","六"];
return day[oDate.getDay()];
}(),
}
for(var k in o){
sFormation = sFormation.replace(k,o[k]);
}
return sFormation;
}

9.斐波那契数列

空间复杂度：o(n)，时间复杂度：o(n)，最快 o(1)

var _fib = (function (n) {
var memory = [0, 1];
return function (n) {
for (var i = memory.length; i <= n; i++) {
memory[i] = memory[i - 1] + memory[i - 2];
}
//console.log(memory.length + ' numbers saved.');
return memory.slice(0,n+1);
};
})();

var fibonacci = function (n) {
return _fib(n)
;
}

运用大数加法：

var _fib = (function (n) {
var memory = ['0', '1'];

function add(a, b) {
var res = '',
c = 0;
a = a.split('');
b = b.split('');
while (a.length || b.length || c) {
c += ~~a.pop() + ~~b.pop();
res = c % 10 + res;
c = c > 9;
}
return res.replace(/^0+/, '');
}

return function (n) {
for (var i = memory.length; i <= n; i++) {
memory[i] = add(memory[i - 1], memory[i - 2]);
}
//console.log(memory.length + ' numbers saved.');
return memory.slice(0, n + 1);
};
})();

优化内存管理：

var _Fib = (function (n) {
var memory = ['0', '1'];

var add = function (a, b) {
var res = '',
c = 0;
a = a.split('');
b = b.split('');
while (a.length || b.length || c) {
c += ~~a.pop() + ~~b.pop();
res = c % 10 + res;
c = c > 9;
}
return res.replace(/^0+/, '');
}

return {
get: function (n) {
for (var i = memory.length; i <= n; i++) {
memory[i] = add(memory[i - 1], memory[i - 2]);
}
//console.log(memory.length + ' numbers saved.');
return memory.slice(0, n + 1);
},
clear: function () {
//console.log('Memories reset.')
memory = ['0', '1'];
}
};
})();

var fibonacci = function (n) {
if (n < 0) {
_Fib.clear();
} else {
return _Fib.get(n)
;
}
}

var fibonacci = function (n) {
return _fib(n)
;
}

额，我的代码如下，我我我。。。

function fibonacci(n) {
if(n==1){
return 1;
}else if(n==2){
return 1;
}else{
return fibonacci(n-1)+fibonacci(n-2);
}
}