题库

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