什么值得买前端面试题 2019秋季

1、网页如何通过优化js文件(包括但不仅仅局限于代码)以提高网页速度?
这个问题比较开放,要知道优化方案有很多:
外部资源引入加属性defer或async,表明异步加载,不阻塞
代码放到页面最底部或者onload里执行,可以避免阻塞dom渲染
把零碎的js合并的一个文件里,但是注意单个js文件也别太大,这样会减少http请求的次数
把js文件放入外部引入,这样http一般会缓存静态文件
使用第三方工具对待码处理:压缩 去除空格无用代码 去掉注释等等
对js代码本身优化,如注意递归 死循环  迎合垃圾回收 注意全局变量 批量操作dom注意少引起重排等

2、下列循环输出的结果是?

for (n = 1; n < 10; n++) {
    if(n==5)
    break;
    console.log(n);
}

答案:1 2 3 4
分析:考察了循环语句中break的用法。break会跳出整个循环,不再执行循环及当前循环体内break后的代码

3、如何判断bar是不是一个对象?使用type of bar == 'object' 会有什么弊端?

/*
判断什么类型
typeof bar  返回当期那类型,但是如果是引用类型,则只会返回object
bar instanceof Bar 返回布尔值,除了可以判断是否属于当前类,还可以判断是否属于继承类,
Object.prototype.toString.call(bar) 返回类型,跟typeof一样
bar.constructor.name 返回对象的构造函数,如果不继承的话,返回就是当前构造函数的名字,可以看做是当前类型,如果是别人的子类,那么返回的就是父类名字
第2和第4可以判断引用类型的具体类型,但是第4个如果人为改变了构造或者继承 就不准了
第1个和第3个不能检测 自定义引用类型的具体类型,会统一返回object. 不过第三个能检测出内置的引用类型,如array、null

判断是否为对象
综上所述,代码如下,
利用type of判断是不是引用类型,
如果是 在利用Object.prototype.toString判断是不是array
在判断是否为null即可(因为null也是oject)
*/
var bar = [] ;
if(typeof bar === 'object' && bar!==null && Object.prototype.toString.call(bar)!=='[object Array]'){
    //是对象
}

4、说出你知道的图片水平垂直居中的方法(例:图片所在的盒子div.box宽高为100px*100px)?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
           width: 100px; 
           height: 100px;
           border: red solid 1px;
        }
        img{
            width: 50px;
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="./imags/img.jpg">
    </div>
</body>
</html>

办法1:利用css3新特性,弹性盒子

.box{
     /* 利用css3弹性盒子居中:给弹性容器定义属性 让弹性子元素排列为水平和垂直居中 */
    display: flex;
    justify-content: center; 
    align-items: center;
}

办法2:利用css3新属性transform的translate

 .box img{
  /*transform  2d 3d转换均是以自己为中心,所以不用考虑自身宽高的问题*/
   transform: translate(50%,50%);
}

办法3:利用定位

.box{
    position: relative;
    
}
.box img{
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    margin: auto;
}

办法4:利用表格特性

.box{
    /* 表格单元 可以用这个属性来决定垂直排序的模式 */
    text-align: center;
    display:table-cell;
    vertical-align:middle;
}

5、如下函数运行结果是什么,为什么?

var i = 10, test = function () {
    alert(i);
    var i = 100;
};
test();

考点:变量提升
答案:弹出undefined
分析:因为函数内的i运行时,会被提升到顶部,变量提升,局部变量优先级大于全局变量

6、说出一下代码的执行结果分别是什么?

// Super类
function Super(){

};
Super.prototype.name = 'Bob';
Super.prototype.age = 20;

//Sub类
function Sub(age){
    this.age = age;
};

//Sub继承Super(基于原型链继承)
Sub.prototype = new Super();

//测试
var obj = new Sub(22);
for (var key in obj) {
    console.log(obj[key])
}

//打印 22 Bob
// for in 可以打印原型上的属性(Object.keys只遍历自身可枚举属性),因为继承关系,所以obj的原型上有name属性

考点:js继承
答案:22 Bob

7、如何用JS判断一个对象是否为空?

function isEmpty(param) {
    let temp = false;
    for(let k in param){
        if(param.hasOwnProperty(k)){ //for in 会遍历原型上的属性
            temp = true;
            break; // for in和for of都可以用break
        };
    };
    return temp;
}

const obj = {};
console.log(Object.keys(obj).length !== 0) //方法1
console.log(JSON.stringify(obj) !== '{}')//方法2
console.log(isEmpty(obj))//方法3

8、vue更新数据后,立即操作DOM元素的方法是?

// 当数据发生变化,下次 DOM 更新循环结束之后执行的回调。在修改数据之后立即使用这个方法,获取更新后的 DOM。
this.nextTick(callback)

9、已知如下代码,如何修改才能让图片的宽度为300px?注意下边代码不可修改

 <img src="1.jpg" style=" 360px!important;">

答案:给其设置一个max-width属性为300px


 

原文地址:https://www.cnblogs.com/dshvv/p/11854378.html