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

   一、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>

二、html5有哪些新特性

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

三、css3位移怎么作

   transform:translate(x,y)

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

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

五、如何提高网站性能？SEO优化？

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

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

六、js里面关于数组的操做有哪些？

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

七、js数组操做pop返回值是什么？push操做返回值是什么？

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

八、http协议返回码的含义

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

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

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

 我的浅理解，浅拷贝就是复制这个对象及属性值，并无从新开一个内存出来，因此原来属性变了复制过来的也跟着一块儿变；深拷贝，直接复制整个对象，开辟一个新的内存；

怎么实现js深拷贝？

十、关于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

十一、关于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和“”也表示空值，我理解为都是字符串。

 ！取反；！！取反以后再取反

   十二、js变量的提高

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

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

   解释一下，js中js在执行过程当中，变量和函数的声明会提高，声明是声明！！！表达式不会提高。提高到当前做用域下，若是变量和函数重名了，函数说了算，而后理解一下，上面的代码，就能够解释了。

1三、js做用域

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

1四、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);

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

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

      for...in...能够循环输出一个对象的属性

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

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

1六、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

1七、js垃圾机制

1八、js数组去重

1九、js数组查重

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

2一、两个数组相加

2二、js继承

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

2三、js判断字母大小写

2四、一个div里实现3个三角形

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

       ::after

       ::before

       一样来两份，就能够了

2五、js闭包

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

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

      箭头函数的this指向

2七、this指向问题

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

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

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

3一、谈谈eventloop

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

3三、ajax怎样修改头部信息

3四、localstorage和什么绑定在一块儿？