面试题-4-27

总结今日面试题。

1、如何让一个物体水平垂直居中某个区域？

这是一个老生常谈了。分物体不确定宽高和确定宽高。

不确定宽高：利用flex布局

  <div class="wraper">
    <div class="inner">内容</div>
  </div>


    .wraper{
       400px;
      height: 400px;
      border: solid 1px red;
      display: flex;
      justify-content: center;
      align-items: center;
    }

不确定宽高：利用CSS3的transform属性和绝对定位配合。

    .wraper{
       400px;
      height: 400px;
      border: solid 1px red;
      position: relative;
    }
    .inner{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
    }

不确定宽高：利用table、table-cell。这里需要嵌套三层。

  <div class="wraper">
    <div class="ok">
      <span class="innerBox">内容</span>
    </div>
  </div>

    .wraper{
      display: table;
    }
    .wraper .ok{
      display: table-cell;
      text-align: center;
      vertical-align: middle;
    }
    .wraper .innerBox{
      background: blue;
    }

确定宽高：绝对定位四个方向设为0；margin设为auto。

    .wraper{
       400px;
      height: 400px;
      border: solid 1px red;
      position: relative;
    }
    .inner{
       100px;
      height: 100px;
      background: yellow;
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }

确定宽高：利用负margin值，margin负值为元素宽高的一半。和transform有相通之处。

    .wraper{
       400px;
      height: 400px;
      border: solid 1px red;
      position: relative;
    }
    .inner{
       100px;
      height: 100px;
      background: yellow;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -50px;
      margin-top: -50px;
    }

2、什么是盒模型？

盒模型本质就是指一个盒子，它包括元素内容、内边距、边框、外边距。

盒模型有两种：标准盒模型和怪异盒模型（IE）。

标准盒模型：box-sizing:content-box; 也是默认的，此时设置的width/height就只是content的宽度和高度。

怪异盒模型：box-sizing:border-box; 此时设置的width/height包括content+padding+border。

3、说明= 、==、===、的区别？

= ：是赋值操作。

== ：先转换类型再比较。

类型相同则比较大小。

null == undefined  返回true

一个字符串一个数值，则会把字符串转化为数值型在进行比较。

如果一方为true则转化为1，为false则转化为0，再比较。

如果一个是对象一个是字符串或者数值，则会把对象转化为基础类再进行比较。

其他比较都不相等。

=== ：类型不同，不相等。

都是数值，值相同则相等。

类型一样，值一样 才相等。

对于引用类型，引用同一个对象或者函数才相等。

都为null 或者都为undefined ，相等。

都为NaN不相等，因为每一个NaN都不相等，只能用isNaN判断NaN。isNaN(NaN)返回true。

4、JavaScript中undefined和not defined的区别？

undefined并不是程序报错，而是程序允许的一个值。它是js语言中定义的五个原始类中的一个。这个类中只有一个值就是undefined

not defined 是运行代码时，遇到没有定义就拿来运算的变量时，抛出的错误。如下代码：

var a;
console.log(a)
console.log(typeof a)
console.log(typeof b)
console.log(b)

第一个返回undefined值。第二个返回的是undefined是这个类，第三个也是undefined这个类，第四个会报错。

5、写出下面代码的结果。

console.log([]==true)
// false
console.log(null==undefined)
// true
console.log(0 === -0)
// true
console.log(1/0 === 1/-0)
// false
console.log(true=='1')
// true
console.log((12,5,6,7,13))
// 这里考察的是逗号运算符。
// 逗号运算符多用于声明多个变量。
var num1 = 1, num2 = 2;
// 此外还可以用于赋值。
// 用于赋值时，总返回表达式的最后一项
// 因此输出 13

function show(a){
  var b = a();
  return b();
}
var a = function () {
  console.log('test');
  return function(){
    console.log('show');
    // return 2;
  }
}
console.log(show(a))

上面代码会先 console一个 test 然后是 show 最后是 undefined。

函数show执行时，给它传了一个函数a作为参数，a执行返回一个函数赋给b，并且console出 test，show 把函数b的执行结果返回出来，b执行结果会console出 show，但是由于没有return返回值，因此会返回一个undefined。函数没有返回值时会返回一个undefined。

如果加上return 2，结果就会是 test 、show 、2。

var a= function () {
  console.log('test');
}
function show(a){
  console.log(a);
  return function(){
    console.log(2);
  }
}
console.log(show(a)())

结果是先console出 函数a，然后是2，然后是undefined。过程和上面类似。

var json = {
  a:1,
  b:2,
  c:function(){console.log('test');return 10;}
};
var arr = [3,2,1];
function show(a){
  console.log(a[0]+json.a+arguments[1].c());
  return arguments[1].c()+arguments[0][0];
}
console.log(show(arr,json))

先说结果是：test、14、test、13。

首先来说，JavaScript函数有个内置的对象arguments对象。它包含了函数调用的参数数组。在函数show里console一下就可以直到了。

因此，arguments[0] 就是 arr arguments[1] 就是 json，所以里面的两个数据就可以使用了。

6、document.write() 和 innerHTML 的区别？

document.write() 是直接写入到页面的内容流，会导致页面的重绘。

innerHTML 是页面DOM元素的一个属性，可以精确到某一个元素身上进行修改，只是重绘页面的一部分。

7、什么是图片预加载和懒加载？

预加载：就是在页面加载完成之前，提前加载图片。当用户需要查看时直接从本地缓存中渲染，从而减少用户等待时间，提高体验效果。这种做法是牺牲服务器性能换取更好的用户体验。

懒加载：就是延迟加载图片或符合某些条件才加载图片。好处是：减少不必要的访问数据库次数。主要目的是作为服务器前端优化，减少请求数。

8、cookie、sessionStorage、localStorage 的区别？

cookie：保存在浏览器端，只能保存字符串类型，以文本的方式，存储较小，安全性低（cookie欺骗，cookie截获）。始终在同源的HTTP请求中携带。

sessionStorage(会话存储)：关闭浏览器窗口即销毁。

localStorage(本地存储)：长期有效，用户不删除就会一直存在。

上面两个是H5 webstorage提供：存储数据大小差不多，都是存在客户端，不与服务端交互通信。只能存储字符串类型，对于复杂对象可以使用JSON对象的stingfy和parse来处理。

三个的共同点：都是保存在浏览器端，都是同源的。

9、Ajax是什么？同步异步的区别？

Ajax是一种无需重新加载整个页面就可以进行局部页面刷新的技术。它是异步的JavaScript和xml技术。

Ajax原理：简单来说就是通过XmlHttpRequest对象向服务器发送异步请求，从服务器获取数据，然后通过JavaScript来操作DOM而更新页面。

XmlHttpRequest是Ajax的核心机制.

Ajax优点：页面无刷新、异步方式与服务器通信。

Ajax缺点：干掉了back按钮，即对浏览器后退机制的破坏。安全问题、如跨站点脚本攻击、SQL注入等。对搜索引擎支持较弱。

同步和异步：

JavaScript是单线程的。也就意味着执行完一个任务之后才会执行另一个任务。所有任务分为两种，一种是同步任务，一种是异步任务。

同步任务是指在主线程上排队执行的任务，只有前一个任务执行完毕才能执行后一个任务；异步任务是不进入主线程，而是在任务队列，主线程执行完毕，任务队列请求执行，该任务才会进入主线程执行。

10、事件委托、事件冒泡、事件捕获。

事件委托：利用事件冒泡来给父元素绑定事件，监听子元素的事件行为，并确定是哪个子元素的事件。优点：能够减少dom操作、提高代码性能。

事件冒泡：IE的事件流叫做事件冒泡，即事件开始时由最具体的元素接收，然后逐级向上传播到不具体的节点。由内到外。所有现代浏览器都支持事件冒泡。

事件捕获：它的思想是从不具体的节点应该更早的接收事件，而最具体的节点应该最后接收到事件。由外到内。