【备战秋招Day 4】经典面试题13-16及在线编程题10-12答案

转载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

1. rgb 中每个 , 后面的空格数量不固定

2. 十六进制表达式使用六位小写字母

3. 如果输入不符合 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; i<sRGB2.length; i++){
        var 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 驼峰格式，请完成此转换功能

1. 以 - 为分隔符，将第二个起的非空单词首字母转为大写

2. -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; i<arr.length; i++){
        if(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;
 }