转载IMWeb团队,知乎地址:https://zhuanlan.zhihu.com/p/27913880
经典面试题
13.null和undefined的区别?
null是一个表示”无”的对象,转为数值时为0;undefined是一个表示”无”的原始值,转为数值时为NaN。当声明的变量还未被初始化时,变量的默认值为undefined。
null用来表示尚未存在的对象,常用来表示函数企图返回一个不存在的对象。
undefined表示”缺少值”,就是此处应该有一个值,但是还没有定义。典型用法是:
(1)变量被声明了,但没有赋值时,就等于undefined。
(2) 调用函数时,应该提供的参数没有提供,该参数等于undefined。
(3)对象没有赋值的属性,该属性的值为undefined。
(4)函数没有返回值时,默认返回undefined。
null表示”没有对象”,即该处不应该有值。典型用法是:
(1) 作为函数的参数,表示该函数的参数不是对象。
(2)作为对象原型链的终点。
14 .new操作符具体干了什么呢?
1、创建一个空对象,并且 this 变量引用该对象,同时还继承了该函数的原型。
2、属性和方法被加入到 this 引用的对象中。
3、新创建的对象由 this 所引用,并且最后隐式的返回 this 。
15 .哪些操作会造成内存泄漏?
内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。如果一个对象的引用数量为 0(没有其他对象引用过该对象),或对该对象的惟一引用是循环的,那么该对象的内存即可回收。
setTimeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏。
闭包、控制台日志、循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)
16.对Node的优点和缺点提出了自己的看法?
*(优点)因为Node是基于事件驱动和无阻塞的,所以非常适合处理并发请求,
因此构建在Node上的代理服务器相比其他技术实现(如Ruby)的服务器表现要好得多。
此外,与Node代理服务器交互的客户端代码是由javascript语言编写的,
因此客户端和服务器端都用同一种语言编写,这是非常美妙的事情。
*(缺点)Node是一个相对新的开源项目,所以不太稳定,它总是一直在变,
而且缺少足够多的第三方库支持。看起来,就像是Ruby/Rails当年的样子。
前端思考题
7.时至今日前端canvas还是否有深入学习的必要?
现在手机和PC的性能越来越好,而且adobe animation、bodymovin和lottie等工具也渐渐进入大众的视野,似乎一般情况下的需求都可以由设计完成。徒手写酷炫的canvas的技能似乎越来越边缘化了,人写与软件生产最大区别是什么?是性能问题吗?按照目前硬件发展速度,性能还会是一个问题吗?canvas本身学习成本高,开发思维和一般意义前端不同,诚然尖端的游戏引擎、渲染、数据可视化、webgl方面肯定是需要人才的,但是低端的可替代性,其陡峭的学习曲线,是否可以说明其生态的恶化?低端的人没有实践场景我觉得是很难走到高端的。
8.你如何对网站的文件和资源进行优化?
有效的解决方案包括:
文件合并
文件最小化/文件压缩
使用CDN托管
缓存的使用
在线编程题
10.颜色字符串转换
将 rgb 颜色字符串转换为十六进制的形式,如 rgb(255, 255, 255) 转为 #ffffff
rgb 中每个 , 后面的空格数量不固定
十六进制表达式使用六位小写字母
如果输入不符合 rgb 格式,返回原始输入
function rgb2hex(sRGB) {
var regexp=/rgb\((\d+),\s*(\d+),\s*(\d+)\)/;
var ret=sRGB.match(regexp);
if(!ret){
return sRGB;
}else{
var str='#';
for(var i=1;i<=3;i++){
var m=parseInt(ret[i]);
if(m<=255&&m>=0){
str+=(m<16?'0'+m.toString(16):m.toString(16));
}else{
return sRGB;
}
}
return str;
}
}
我的代码:
function rgb2hex(sRGB) {
var sRGB2 = sRGB.replace(/(?:\(|\)|rgb|RGB)*/g,"").split(",");
var strHex = "#";
for(var i=0; ivar hex = Number(sRGB2[i]).toString(16);
if(hex === "0"){
hex += hex;
}
strHex += hex;
}
if(strHex.length !== 7){
strHex = sRGB;
}
return strHex;
}
11.将字符串转换为驼峰格式
css 中经常有类似 background-image 这种通过 - 连接的字符,通过 javascript 设置样式的时候需要将这种样式转换成 backgroundImage 驼峰格式,请完成此转换功能
以 - 为分隔符,将第二个起的非空单词首字母转为大写
-webkit-border-image 转换后的结果为 webkitBorderImage
function cssStyle2DomStyle(sName) {
return sName.replace(/(?!^)\-(\w)(\w+)/g, function(a, b, c){
return b.toUpperCase() + c.toLowerCase();
}).replace(/^\-/, '');
}
function cssStyle2DomStyle(sName) {
var arr = sName.split('');
//判断第一个是不是 '-',是的话就删除
if(arr.indexOf('-') == 0)
arr.splice(0,1);
//处理剩余的'-'
for(var i=0; iif(arr[i] == '-'){
arr.splice(i,1);
arr[i] = arr[i].toUpperCase();
}
}
return arr.join('');
}
我的代码:
function cssStyle2DomStyle(sName) {
var result = new Array();
result = sName.split("-");
var string = "";
for (i = 0; i < result.length; i++) {
result[i] = result[i].slice(0, 1).toUpperCase()+ result[i].slice(1);
string = string + result[i];
}
string = string.slice(0, 1).toLowerCase() + string.slice(1);
return string;
}
12.求二次方
为数组 arr 中的每个元素求二次方。不要直接修改数组 arr,结果返回新的数组
function square(arr) {
return arr.map(function(item,index,array){
return item*item;
})
}
function square(arr) {
//声明一个新的数组存放结果
var a = [];
arr.forEach(function(e){
//将arr中的每一个元素求平方后,加入到a数组中
a.push(e*e);
});
return a;
}