iQIYI前端一面

说一说你理解的css盒模型，以及如何在css中告诉不同的盒模型来渲染布局。
答：有两种。一种是w3c的标准盒模型：盒子所占宽（高） = 设置的width(height) + margin + padding + border。一种是IE盒模型：盒子所占宽（高）= 设置width(height) + margin。因为设置的width = content + padding + border。
使用css3中的box-sizing属性，分别对应：conten-box和border-box。
JS有哪些数据类型，深复制，复制机制，参数传递机制。
答：五中基本类型：number，string，Boolean，null，undefined。一种引用类型：object。ES6新增的symbol。
深拷贝：

var deepClone = (obj)=>{
    if(obj instanceof Object){
        var newObj = obj.constructor === Object ? {} : [];
        for(let key in obj){
            if(typeof obj[key] != "object" || typeof obj[key] == null){
                newObj[key] = obj[key];
            }else{
                newObj[key] = deepClone(obj[key]);
            }
        }
    }else{
        return obj;
    }
    return newObj;
}

ES6的Object.assign(目标对, 源对象1, 源对象2...)；方法。可以实现对对象中基本类型的拷贝，但引用类型依旧是浅拷贝。

var  obj1 = { name:"111",  age:32,  child:{ name:"221", age:2}  }
var obj2 = Object.assign( {}, obj1);

obj2;   //{name: "111", age: 32, child:{ name:"221", age:2}}
obj2.name = "222";
obj2.age = 33;
obj2.child.age  = 3;
obj2;  //{name: "222", age: 33, child:{ name:"221", age:3}}
obj1;  //{name:"111",  age:32,  child:{ name:"221", age:3}}

var obj3 = obj1;  //es5中普通浅拷贝
obj3; //{name: "111", age: 32, child:{ name:"221", age:3}}
obj3.name = "333";
obj3.child.age  = 4;
obj3 === obj1;   // true
obj2;  //{name: "222", age: 33, child:{ name:"221", age:4}}

对象是堆存储，复制对象时并不会在堆内存中新生成一个相同的对象，只是多了一个保存指向这个对象指针的变量罢了。

再看参数传递机制：

var person  = {
    name : "Tom"
};
function foo(peo){
    peo.name = "Jerry";
    return peo;
}
var result = foo(person);
console.log(result.name);// Jerry
console.log(person.name);// Jerry

在该例子中，把person复制传入foo()中，peo和person指向了同一个对象，而在peo中修改了name属性，其实修改了它们共同指向的对象的name属性。

var person = {
    name : "Tom"
}; 
function foo2(peo){
    peo = {
       name : "Jerry"
    };
    return peo;
}
var result = foo2(person);
console.log(result.name);// Jerry
console.log(person.name);// Tom

上面例子中，在函数中重新定义了一个对象，也就是现在堆内存中有两个对象，所以调用后返回的值是新定义的对象的值。如果是参数是按引用传递的，那么person.name打印出来的结果为Jerry，从这点可以得出参数是按值传递的（有的地方叫做按共享传递）。
总结：函数的参数是值传递，对象类型作为参数的时候传递的是地址（指针）的值，而不是对象本身堆内存中的value。所以在函数内部用参数去修改对象，那么查找到的还是原对象，因为指向相同，所以原对象也受影响。如果新实例化一个对象赋值给该指针，那么指针指向的就是一个全新的对象了，和原来指向的对象失去联系。

下面两段代码段的输出分别是什么？（作用域，闭包）

var scope = "global";
function checkscope(){
    var scope = "local";
    function f(){
        return scope;
    }
    return f();
}
checkscope();

var scope = "global";
function checkscope1(){
    var scope = "local";
    function f(){
        console.log(scope);
    }
    return f;
}
checkscope1()();

答：都是“local”。都是闭包的使用。

前后端如何通信，标签页如何通信。
答：http请求。分析get与post的区别，以及如何让get安全请求？

最直观的区别就是：
1、GET把参数包含在URL中，POST通过request body传递参数。
2、GET在浏览器回退时是无害的，而POST会再次提交请求。 
3、GET产生的URL地址可以被Bookmark，而POST不可以。 
4、GET请求会被浏览器主动cache，而POST不会，除非手动设置。 
5、GET请求的参数会完整的被保存在历史记录里，POST不会。 
6、GET请求只能进行url编码，POST请求支持多种编码方式。 
7、对于参数类型，GET只接受ASCII字符，而POST没有限制。 
8、GET请求在URL中传递的参数是有长度限制的，而POST没有。 
9、GET比POST更不安全，因为参数直接暴露在URL中，所以不能传递敏感信息。

GET产生一个TCP数据包；POST产生两个TCP数据包。
对于GET方式的请求，浏览器会把http header和data一并发送出去，服务器响应200（返回数据）；而对于POST，浏览器先发送header，服务器响应100 continue，浏览器再发送data，服务器响应200 ok（返回数据）。
标签页通信：cookie，localStorage，sessionStorage

什么是同源政策，你平时是如何解决跨域的。
答：同源：域名，协议（http），端口都相同。同源政策目的：保证用户信息的安全，防止恶意的网站窃取数据。
浏览器同源政策及其规避方法--阮一峰
跨域全面介绍，超详细
你理解的Promise。
说一下你理解的函数节流和函数防抖（去抖），以及他们的应用场景。
答：函数节流（throttle）：是让一个函数无法在很短的时间间隔内连续调用，当上一次函数执行后过了规定的时间间隔，才能进行下一次该函数的调用。

// 函数节流
var canRun = true;
document.getElementById("throttle").onscroll = function(){
    if(!canRun){
        // 判断是否已空闲，如果在执行中，则直接return,取消这次方法执行
        return;
    }

    canRun = false;
    setTimeout(function(){
        console.log("函数节流");
        canRun = true;
    }, 300);
};

函数去抖（debounce）：让一个函数在一定间隔内没有被调用时，才开始执行被调用方法。两个方法都是用来提升前端性能，减轻浏览器压力。

// 函数防抖
var timer = false;
document.getElementById("debounce").onscroll = function(){
    clearTimeout(timer); // 清除未执行的代码，重置回初始化状态

    timer = setTimeout(function(){
        console.log("函数防抖");
    }, 300);
};

JavaScript函数节流和函数防抖之间的区别
Javascript函数节流与函数去抖

call和apply的区别和作用，以及如果让你模拟实现call函数你会怎么实现？
答：他们都可以显示的改变函数执行上下文this的指向。区别在于参数传递不同。apply只接受两个参数，第二个是数组或者类数组的形式。
call，apply，bind的三种原生实现方法
了解vue，react，angular吗？什么是前端工程化，内涵是什么？
答：一个完整的前端工程体系应该包括：1）统一的开发规范；2）组件化开发；3）构建流程。
参考：浅谈什么是前端工程化
下面的代码输出是什么？

console.log(1)
setTimeout(()=>{
    console.log(2)
    new Promise(resolve=>{
        console.log(4)
        resolve()
    }).then(()=>{
        console.log(5)
    })
},1)

new Promise(resolve=>{
    console.log(7)
    resolve()
}).then(()=>{
    console.log(8)
})

setTimeout(()=>{
    console.log(9)
    new Promise(resolve=>{
        console.log(11)
        resolve()
    }).then(()=>{
        console.log(12)
    })
},0)

结果：1 7 8 2 4 5 9 11 12

以下代码输出什么？

setTimeout(function() {
  console.log(1)
}, 0);
console.log(6);
new Promise(function executor(resolve) {
  console.log(2);
  for( var i=0 ; i<10000 ; i++ ) {
    i == 9999 && resolve();
  }
  console.log(3);
}).then(function() {
  console.log(4);
});
console.log(5);

结果：6 2 3 5 4 1
这道题应该考察我 JavaScript 的运行机制的。首先先碰到一个 setTimeout，于是会先设置一个定时，在定时结束后将传递这个函数放到任务队列里面，因此开始肯定不会输出 1 。然后肯定是直接输出6，然后是一个 Promise，里面的函数是直接执行的，因此应该直接输出 2 3 。然后，Promise 的 then 应当会放到当前 tick 的最后，但是还是在当前 tick 中。因此，应当先输出 5，然后再输出 4 。最后在到下一个 tick，就是 1 。

瀑布流布局及其实现。
多列布局。

iQIYI前端一面

你可能感兴趣的:(iQIYI前端一面)