题库

1.v-show和v-if之间的区别
v-show：元素是一直存在的，当v-show为false时，元素display:none只是隐藏了而已，生命周期的钩子函数不会执行。

v-if：判断是否加载固定的内容，如果为真，则加载；为假时，则不加载，生命周期的钩子函数会执行。

用处：用在权限管理，页面条件加载。
语法：v-if=“判断表达式”

一般的，v-if有更高的切换消耗，而v-show有更多的初始化渲染消耗。如果需要频繁的切换而对安全性无要求，使用v-show。如果在运行时，条件不可能改变，则使用v-if较好。

2.简述JS的数据类型？
JS的数据类型可以分为2中：
基本数据类型，字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol(ES6新增)
引用数据类型, 对象(Object)、数组(Array)、函数(Function)。
3.JS==和===之间的区别

• ==两个等是转换类型对比值的，
• ===三个等是不会进行转换的，也就是类型不同，一定不会相等的；

 1 =="1" //true
 1 === "1" //false

4.如何将一个元素水平垂直居中显示？

1. 文本元素：line-height+text-align:center
2. 块级元素

3. ①Flex布局

    .main{
       width: 100%;
       height: 100%;
       display: flex;
       }
    .son{ 
    margin: auto 
    }   

4. ②Flex布局

    .main{
       width: 100%;
       height: 100%;
       display: flex;
       justify-content: center;
       align-items: center
       }
    .son{  }   

5. ③position + transform

    .main{
       width: 100%;
       height: 100%;
       }
    .son{ 
       position: absolute;
       left: 50%;
       top: 50%;
       background-color: red;
       transform: translate3d(-50%,-50%，0)
     }   

5.如果浏览器不兼容bind方法，你如何封装bind方法？

1. 完整版

   if (!Function.prototype.bind) {
       Function.prototype.bind = function (oThis) {
           if (typeof this !== 'function') {
               // closest thing possible to the ECMAScript 5
               // internal IsCallable function
               throw new TypeError('Function.prototype.bind - what is trying to be bound is not callable');
           }
   
           var aArgs = Array.prototype.slice.call(arguments, 1),
               fToBind = this,
               fNOP = function () {},
               fBound = function () {
                   console.log(this)
                   // this instanceof fBound === true时,说明返回的fBound被当做new的构造函数调用
                   return fToBind.apply(this instanceof fBound ?
                       this :
                       oThis,
                       // 获取调用时(fBound)的传参.bind 返回的函数入参往往是这么传递的
                       aArgs.concat(Array.prototype.slice.call(arguments)));
               };
   
           // 维护原型关系
           if (this.prototype) {
               // Function.prototype doesn't have a prototype property
               fNOP.prototype = this.prototype;
           }
           // 下行的代码使fBound.prototype是fNOP的实例,因此
           // 返回的fBound若作为new的构造函数,new生成的新对象作为this传入fBound,新对象的__proto__就是fNOP的实例
           fBound.prototype = new fNOP();
   
           return fBound;
       };
     }

2. 简易版

    if (!Function.prototype.bind) {
    //将bind方法挂在Function的原型上
      Function.prototype.bind = function (oThis) {
        let args = Array.prototype.slice.call(arguments, 1);
        let fToBind = this;
        let fBound = function (...ags) {
            return fToBind.apply(oThis, args.concat(ags))
         }
        return fBound;
       }
     }

6.简析new关键字实例化一个对象的作用？
new关键字内部干了如下三件事（已知构造函数为Func）：

1. 创建一个空对象，并使该空对象继承Func.prototype；
2. 执行构造函数，并将this指向刚刚创建的新对象；

3. 返回新对象

   function _new(...args) {
      let constructor = args.shift();
      //创建一个空对象， 继承构造函数的prototype 的属性
      let context = Object.create(constructor.prototype);
      //执行构造函数
      let result = constructor.apply(context, args);
      return (typeof result === 'object' && result != null) ? result : context
   }

7.说说你对标签语义化的理解

① 让标签有自己的含义；
② html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
③ 在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的；
④ 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO；
⑤ 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。
8.清除浮动的方法
1.父级div定义 height

• 原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。
• 优点：简单、代码少、容易掌握
• 缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

2，结尾处加空div标签 clear:both

• 原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
• 优点：简单、代码少、浏览器支持好、不容易出现怪问题
• 缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好

3，父级div定义 伪类:after 和 zoom

• 原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
• 优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）
• 缺点：代码多、不少初学者不理解原理，要两句代码结合使用才能让主流浏览器都支持

4，父级div定义 overflow:hidden

• 原理：必须定义width或zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度
• 优点：简单、代码少、浏览器支持好
• 缺点：不能和position配合使用，因为超出的尺寸的会被隐藏。

9.深度克隆函数deepclone?

• JSON

  function deepclone(object){
     return JSON.parse(JSON.stringify(object))  
  }
  

• 递归

   function deepClone(obj) {
   var _toString = Object.prototype.toString;
  
  // null, undefined, non-object, function
  if (!obj || typeof obj !== 'object') {
       return obj;
     }
  
   // DOM Node
   if (obj.nodeType && 'cloneNode' in obj) {
     return obj.cloneNode(true);
   }
  
   // Date
   if (_toString.call(obj) === '[object Date]') {
     return new Date(obj.getTime());
   }
  
   // RegExp`请输入代码`
   if (_toString.call(obj) === '[object RegExp]') {
     var flags = [];
     if (obj.global) {
         flags.push('g');
     }
     if (obj.multiline) {
         flags.push('m');
     }
     if (obj.ignoreCase) {
         flags.push('i');
     }
  
     return new RegExp(obj.source, flags.join(''));
    }
  
   var result = Array.isArray(obj) ? [] :
        obj.constructor ? new obj.constructor() : {};
   
    for (var key in obj) {
       result[key] = deepClone(obj[key]);
   }
   
   return result;
     }

10.Javascript有哪些方法定义对象

• 对象字面量：var obj = {};
• 构造函数：var obj = new Object();
• Object.create():let obj = Object.create(Object.prototype);

11.localStorage和sessionStorage的异同

• localStorage有效期为永久，sessionStorage有效期为顶层窗口关闭前
• 同源文档可以读取并修改localStorage数据，sessionStorage只允许同一个窗口下的文档访问，如通过iframe引入的同源文档。
• Storage对象通常被当做普通javascript对象使用：通过设置属性来存取字符串值，也可以通过setItem(key, value)设置，getItem(key)读取，removeItem(key)删除，clear()删除所有数据，length表示已存储的数据项数目，key(index)返回对应索引的key

12.typeof有哪几种结果？
string ,number,undefined , boolean, function, object
13.CSS3新特性

• CSS3实现圆角（border-radius），阴影（box-shadow），
• 对文字加特效（text-shadow），线性渐变（gradient），旋转（transform）
• transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
• 增加了更多的CSS选择器 ，多背景 rgba
• 在CSS3中唯一引入的伪类是 ::selection.
• 媒体查询，多栏布局
• border-image