初中级web前端工程师的面试题分享

1、html三栏布局有几种(就是左右固定，中间自适应)

浮动布局float、定位布局、flex布局、表格布局、css3栅栏布局

<style media="screen">    //浮动布局float
      .layout.float .left{
        float:left;
        width:300px;
        background: red;
      }
      .layout.float .center{
        background: yellow;
      }
      .layout.float .right{
        float:right;
        width:300px;
        background: blue;
      }
 </style>
 
<style>
        .layout.absolute .left-center-right>div{   //定位布局
          position: absolute;
        }
        .layout.absolute .left{
          left:0;
          width: 300px;
          background: red;
        }
        .layout.absolute .center{
          left: 300px;
          right: 300px;
          background: yellow;
        }
        .layout.absolute .right{
          right:0;
          width: 300px;
          background: blue;
        }
</style>
 
<style>
        .layout.flexbox{    //flex布局
          margin-top: 110px;
        }
        .layout.flexbox .left-center-right{
          display: flex;
        }
        .layout.flexbox .left{
          width: 300px;
          background: red;
        }
        .layout.flexbox .center{
          flex:1;
          background: yellow;
        }
        .layout.flexbox .right{
          width: 300px;
          background: blue;
        }
</style>
 
<style>
        .layout.table .left-center-right{    //表格布局
          width:100%;
          height: 100px;
          display: table;
        }
        .layout.table .left-center-right>div{
          display: table-cell;
        }
        .layout.table .left{
          width: 300px;
          background: red;
        }
        .layout.table .center{
          background: yellow;
        }
        .layout.table .right{
          width: 300px;
          background: blue;
        }
</style>

2、html5有哪些新特性

字体样式、圆角、视频、音频、canvas、svg、sessionstorge、localstorage........

3、css3位移怎么做

transform:translate(x,y)

4、垂直居中有几种方法？

定位，表格下（text-justify），display:flex(align-item,text-justify)

5、如何提升网站性能？SEO优化？

减少http请求；图片、样式、js压缩再使用；使用cdn；样式、脚本尽量使用外链；减少dom操作；html语义化；

网站头部title,keywords,description正确描述；html语义化；

6、js里面关于数组的操作有哪些？

jion;concat;pop;push;splice;slice;

7、js数组操作pop返回值是什么？push操作返回值是什么？

pop返回删掉数组最后的那个元素;push增加元素返回长度

8、http协议返回码的含义

4xx：客户端错了；5xx：服务端错了；2xx：成功

9、js深拷贝和浅拷贝的问题

<script type="text/javascript">
	var a={
		name:'aa'
	};
	var b = a;
	a.name = "cc";
	console.log(b.name); //浅拷贝cc
</script>

个人浅理解，浅拷贝就是复制这个对象及属性值，并没有重新开一个内存出来，所以原来属性变了复制过来的也跟着一起变；深拷贝，直接复制整个对象，开辟一个新的内存；

怎么实现js深拷贝？

10、关于typeof

  console.log(typeof(a))                 //object
  console.log(typeof('a'))               //string
  console.log(typeof(1))                //number
  console.log(typeof(null))                //object
  console.log(typeof(undefined))     //undefined
  console.log(typeof(false))             //boolean

11、关于null、undefined

    console.log(!!0)     //false
    console.log(null==null)  //true
    console.log(null!=null)  //false
    console.log(!! undefined)  //false
    console.log(!! "")  //false
    console.log(!! null)  //false
    console.log(null == undefined)  //true
    console.log(null == 0) //false
    console.log(null == "")  //false
    console.log(0 == undefined) //false
    console.log（0 == “”）  //true

其实很好理解的，0，null，undefined，“”单独存在的时候，都是表示false;但是null表示为空值；undefined表示未定义的；0和“”也表示空值，我理解为都是字符串。

！取反；！！取反之后再取反

12、js变量的提升

看下面的，最后执行结果————tt/undefined

b();   //tt
console.log(a);   //undefined
var a = "bb";
function b(){
  console.log("tt");
}

解释一下，js中js在执行过程中，变量和函数的声明会提升，声明是声明！！！表达式不会提升。提升到当前作用域下，如果变量和函数重名了，函数说了算，然后理解一下，上面的代码，就可以解释了。

13、js作用域

这个很好理解，就是还真不知道怎么说，答曰全部变量和局部变量，网上查一下，官方说法如下：在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。

14、js原型与原型链

每个对象创建都会有一个prototype的原型属性，当这个对象的某个属性不存在时就会去他的prototype上查找，而prototype又有自己的prototype,然后如此循环，就是原型链。。。

个人理解：只有函数才有prototype属性，可能这个说法不大准确，但大多数用的时候就这意思，如

scar.color==car.prototype   //true   具体我也不多说，大家可以自己查一下

function car(){
       this.name = "bmw";
}
car.prototype.color="#f00";
var scar = new car();
console.log(scar.color==car.prototype);

15、for循环 ，衍生问题，for...in...，forEach...，map

主要还是要注意for循环里面函数作用域的问题，看清楚循环里面是函数还是对象。。。

for...in...可以循环输出一个对象的属性

forEach 比较轻便...可以看出不用定义变量计算数组的长度，但是，他不能中断循环，这就忧桑了，讲真，我基本不用

map map() 方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。返回的指定函数一定要有返回值，不然他哪来的值组成新数组呢，不都得undefined

16、settimeout（携程）

js是单线程的，从上到下开始执行，遇到setTimeout、鼠标点击等事件，异步执行它们，同步任务就先执行完毕（我这里都是简而言之的）

下面执行结果：333,444,222

setTimeout(function(){
    	console.log(222);
    },100);
console.log(333);
console.log(444);

那么，问题又来了，settimeout，一定是在100ms后执行的么？显然不是的，具体参考：https://www.cnblogs.com/zichi/p/4604053.html

17、js垃圾机制

18、js数组去重

19、js数组查重

20、单例模式和观察者模式用代码表示出来

21、两个数组相加

22、js继承

构造继承、原型继承（携程）

23、js判断字母大小写

24、一个div里实现3个三角形

css设置div三边边框和高度同样大小，div设置box-sizing,三边框中其中两边颜色设置transprent,就可以获得一个小三角；

::after

::before

同样来两份，就可以了

25、js闭包

简而言之，函数里面的一些变量和函数表达式，可以通过里面的函数访问这个函数的变量，防止全局变量的污染以及变量的改变

26、ES6使用过吗？使用箭头函数有什么好处？

箭头函数的this指向

27、this指向问题

28、浏览器存储的问题（cookie、localstorage、sessionstorage区别，cookie是如何实现的）

29、原生js的增删改查是如何实现的

30、删除数组中出现次数最多的元素并将其输出；

31、谈谈eventloop

32、js事件委托事件冒泡如何实现的

33、ajax怎样修改头部信息

34、localstorage和什么绑定在一起？