前端笔试基础面试题第一套

1.下面代码都会输出什么？

    function a(){
        console.log(i)//undefined
        for(var i = 0; i<10; i++){
        console.log(i)//0-9
        }
        console.log(i)//10
    }
    var i = 1;
    a();
    //答案：undefined 0-9 10 若是把var改为let结果变成1 0-9 1
        
    function b () {
        console.log(1)//1
        const p = new Promise((r, j) => {
            console.log(2)
            r(3)
            j(4)
            console.log(5)
        })
        p.then(r=>console.log(r)).catch(r=>console.log(r))
        console.log(6)//6
    }
        b();
//答案：1 2 5 6 3

2.如何使用promise封装ajax操做

function  PromiseAjax (methods,url,parms) {
    return new Promise((resolve,reject)=>{
    var xhr = XMLHttpRequest();
    xhr.open(methods,url,true);
    xhr.onreadystatechange=function(){
    If(xhr.readyState==4&&xhr.status==200){
        resolve(xhr.responseText)
    }
    }
    If(methods===’get’||methods===’GET’){
    xhr.send(null)
    }else{
    xhr.send(parms)
    }
    })
}    

3.简单介绍下lterator接口和Generator函数

Iterator 的中文意思是迭代器，Generator的中文意思生成器。

Iterator 是为了实现对java容器(collection)进行遍历功能的1个接口。

传统的编程语言，早有异步编程的解决方案（实际上是多任务的解决方案）。

其中有一种叫作"协程"（coroutine），意思是多个线程互相协做，完成异步任务

Generator 函数是协程在 ES6 的实现，最大特色就是能够交出函数的执行权（即暂停执行）。

function*gen(x){
         var  y=yield x+2;
         return   y;
}

上面代码就是一个 Generator 函数。它不一样于普通函数，是能够暂停执行的，因此函数名以前要加星号，以示区别。

4.对象拷贝怎么作，若是要作到深拷贝，如何实现，写出相关伪代码。

浅拷贝只是对对象的引用地址进行了拷贝，并无开辟新的堆栈，拷贝后，

两个对象指向的是同一个引用地址，因此修改其中一个对象的属性，则另外一个对象的属性也会改变。

var obj = { age: '12' };
var newObj = obj;//此时将obj中的age属性值改变，会发现newObj中的age属性值跟着改变
obj.age = '13';  //obj: { age: '13' }  newObj: { age: '13'}

简而言之，浅拷贝是拷贝对象属性，深拷贝拷贝对象以及其全部子对象的属性

const oldObj = {
a: 1,
b: [ 'e', 'f', 'g' ],
c: { h: { i: 2 } }
};

const newObj = JSON.parse(JSON.stringify(oldObj));
console.log(newObj.c.h, oldObj.c.h); // { i: 2 } { i: 2 }
console.log(oldObj.c.h === newObj.c.h); // false
newObj.c.h.i = 'change';
console.log(newObj.c.h, oldObj.c.h); // { i: 'change' } { i: 2 }

5.对象继承有几种方式，实现一种基于原型链的继承。

1.原型链基础 2.构造函数继承 3.组合式继承

// 原型链继承
        function Show(){
            this.name="run";
        }
        function Run(){
            this.age="20"; //Run继承了Show,经过原型，造成链条
        }
        Run.prototype=new Show();
        var show=new Run();
        console.log(show.name,show.age)//结果：run

6.描述下flex布局模型，六个div分为两行，垂直居中显示，如何写出相关样式

Bigdiv{
Display:flex;
Flex-wrap:wrap;
Align-items:center;
Width:100%;
Height:100%;
}
Samlldiv{
Width:30%;
Height:40%;
Display:inline-block;
Margin:0 auto;
}

7.介绍vuex，redux其中一种的概念及实现原理

vuex是单向数据流插件，依赖vue，是vue的资源管理器

调用了一下applyMixin方法，该方法主要做用就是在全部组件的beforeCreate生命周期注入了设置this.$store这样一个对象