标签：面试题 console log 对象 元素 混合 2020 var name

1.vue?特点?

(1)vue是基于mvvm和mvc的设计思想,mvvm是model->view->viewmodel的缩写,model层代表数据模型,也可以之间在model中定义修改数据和操作业务的逻辑,view代表视图,它可以将复杂的数据模型转换成UI展现出来，viewmodel是一种同步的view和model对象。
(2)在mvvm架构下，view和model之间是没有直接联系的，而是通过viewmodel进行交互，model和viewmodel之间的交互是双向的，因此view的数据会同步到model上，而model的数据会反应到view上。
(3)viewmodel通过双向数据绑定让view和model连接在一起，view和model之间的同步工作是自动的，而不是人为干涉，所以开发者只需关注业务逻辑，不需要手动绑定，不需要关注数据状态的同步问题，复杂的数据状态维护完全由mvvm统一管理。
//解读
mvvm和mvc是程序设计思想
model是数据
view是视图
viewmodel是视图模型
//特点
vue数据驱动通过数据来显示视图，而不是节点操作，核心只关注图层，易学，轻量，灵活，适用于移动端项目，渐进式框架。

2.双向数据绑定原理?
vue采用数据劫持结合发布者,–订阅的模式,通过Object.defineProperty()来劫持各个属性的setter和getter,当数据变动时发布消息给订阅者，来触发相应的监听回调。

3.vue的生命周期?

1.beforecreate:初始前,vue的实例$el和数据对象data都为undefined，还未初始化
2.craeted:初始后，vue的实例数据对象data有了，$el还没有
3.beforemount:载入前，vue的实例和数据对象都初始化，但还是挂载之前未虚拟的dom节点，data.message还未替换
4.mounted:载入后,vue的实例挂载完成，data.message成功渲染
5.beforeUpdate和updated:更新前和更新后,当data变化后，会触发beforeUpdate和updated
6.beforedestory：销毁前,在destory后，对data的改变不会再触发周期函数，vue的实例已解除事件的监听以及和dom的绑定，但是dom结构依然存在
7.destoryed：销毁后，就什么也没有了

4.vuex？vuex的五种属性？
vuex是一个专门未vue.js应用开发的状态管理模式，它采用的是集中式存储管理，应用所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生改变，状态存储是响应式的，适用于大型的单页面应该和多人协作开发。

state：vuex的基本状态，用来存储变量.
geeter:获取最新值，可以做取值前的一些操作，拿到的是被操作后的值
mutation:修改器，用来修改state的状态，唯一修改方式
action:action和mutation功能大致相同，不同之处在于action提交的就是mutation，而不是直接状态更改的地方，action可以进行任意异步操作
module:模块化，向store注入其他子模块，用于多人开发多模块

5.ES6的数据类型?
1.Number、string、Boolean、null、undefined、object
ES6新增symbol类型:表示独一无二的值，称为字符类型
Symbol():函数前不能使用new命令，否则会报错，这是因为symbol是一个原始类型的值，不是对象，由于symbol不是对象，所以不能添加属性，基本上它是一种类型于字符串的数据类型，它可以接收一个字符串作为参数，表示对symbol实例的描述，主要为了在控制台显示，或者转为字符串时，比较容易区分。

  let  a1=Symbol('foo');
    console.log(a1);//Symbol(foo)
    let  a2=Symbol('Tom');
    console.log(a2);//Symbol(Tom)
    //没有参数
    let s1=Symbol();
    let s2=Symbol();
    console.log(s1===s2);//false //即使参数表示相等，但不恒等
    //有参数
    let s3=Symbol('1');
    let s4=Symbol('1');
    console.log(s3===s4);//false//即使参数表示相等，但不恒等
   //转为字符串
   let s5=Symbol('my symbol');
    console.log(typeof String(s5));//Symbol(my symbol) //string类型
    console.log(s5.toString());//Symbol(my symbol)
  //转为boolean
  let s6=Symbol('my symbol');
  console.log(Boolean(s6));//true
  //作为属性名的symbol
  let s7=Symbol();
  //2.1
  let aa={};//定义一个对象
  console.log(aa[s7]='hello world')//hello world
  //2.2
  let aa2={//在对象中之间储存
   [s7]:'javascript'
  }
  console.log(aa2[s7]);//javascript
  //symbol两个值相同时，可以使用symbol.for();实现
  let s8=Symbol.for('TOM')
  let s9=Symbol.for('TOM')
  console.log(s8===s9);//true
    

6.行内元素和块级元素和行内块元素？
行内:和相邻的元素在一行显示，宽高都是不可控的，主要由内容撑开的，margin和padding可以设置,就是里面图片与文字的大小.
块级:总是独占一行，下一个元素必须另起一行显示，宽和高,margin和padding都是可以控制的.
行内块:和相邻的元素在一行显示，行内块具有块级元素一样的特性，可以设置宽和高，margin和padding。

7.module模式下的两种使用方法？
vue的前端两种模式：hash模式和history模式

//hash模式
即地址栏url的#号(此hash不是密码学里面的散列运算)代表网页的index.html的print位置,浏览器读取url后会自动将print位置滚动至可视区域，
(使用方法：一是使用锚点、二是使用id属性)

特点:hash模式虽然在URL中但不包括在http请求中，对后端完全没有影响，因此改变hash不会重新加载页面。

//history模式
利用H5的history interface中新增的pashState()和popState()方法（需要特定浏览器支持）这两个方法适用于浏览器的历史记录栈，在当前已有的back、forward、go基础之上，只是当它们执行修改时，虽然改变了当前URL，但浏览不会立即向后端发送请求。

//后端请求时?
1.hash模式：仅hash符号之前的内容会被包含在请求中：如：“http://abc.com”
因此对于后端来说即使没有做到对路由的全覆盖也不会返回404错误
2.history模式：前端的URL必须和实际向后端发送的请求的URL一致，如：“http://abc.com/helloworld/id”.如果后端缺少"helloworld/id"的路由处理将返回404错误。

8.vue组件的三种传值方式?
父传子:props
子传父：$emit
非父传子：定义一个公共的bus.js，作为中间仓库来传值

9.router路由下的几种跳转方式?
四种方式:
1.router-link:不带参数和带参数
不带参数：:to="{name:‘home’}"
带参数: :to="{name:‘home’,params:{id:id}}"
:to="{name:‘home’,query:{id:id}}"
query：传参数(类似与get和post和url后面会显示参数，但路由不可配置）
2.router.push():
跳转指定的url路径，并向history栈中添加一个记录，点击后退会返回上一页
3.router.replace():
跳转指定url路径，但是history不会有记录，点击返回会跳转到上上个页面就是直接替换当前页面，传参跟push一样
4.router.go():
向前或者向后跳转n个页面，n可以为正数或者负数

10.当浏览器为0px或者1px怎么做？
那是因为IE浏览器的默认行高造成的，
解决方式：over：hidden，zoom：0.08，line-height: 1px，

11.标准模式和怪异模式区别？
标准模式下:内容=content
怪异模式下:内容=content+padding+border
1.span设置宽和高:标准下宽和高都不会生效,怪异模式下则会生效
2.margin:0 auto:标准下可以使元素水平居中，怪异却会失效
3.元素溢出处理:标准下，overflow取值为：visible，怪异模式下该溢出会被当做扩展box来对待，即元素的大小由内容决定，溢出不会裁剪，元素框自动调整，包含溢出的内容
4.内联元素的尺寸:标准下:non-replaced inline元素无法自定义大写，怪异模式下:定义这些元素的width.height属性可以影响这些元素，显示的尺寸.
5.元素中的字体：标准下:css对font的属性都可以继承的，怪异模式下:对table元素，字体的某些元素将不会从body等其他封装元素继承中得到

12.H5新增属性？
H5的更新加强了浏览器的功能，减少插件的使用。

//1.html语义结构化
canvas:画布，表示位图区域
audio：音频
video:视频
sesstionStorage:会话存储
localStorage：持久储存

//2.语义标签
header:头部
footer:底部
nav:导航栏
section：具体内容
article：文章
aside：侧边栏

//3.新的表单控件
email:邮箱
url:必须输入地址
number：必须输入数值
range：滑动栏（可max大，min小值）
date：日期（年月日）
month：月和年

//4.新的属性
contenteditable="true"使用这个文件可以编辑，并且这个属性可以继承的
autocomplate：设置表单成功提交的数据，下一次有提示，一般会关闭这个功能
placeholder：提示信息
required：是否必须填写
pattern：正则验证表单内容
multiple：输入框可以输入多个值，一般和email控件一起使用
maxLength：最大值
minLength：最小值
step：规定数字间隔
hidden：隐藏，填写hidden属性的标签会被隐藏
draggable：元素是否能被拖动

13.vue路由守卫？
1.vue全局钩子:分为前置守卫和后置钩子
beforeEach和afterEach
2.vue组内钩子
beforeRouterEnter：在渲染该组件的路由被confirm前调用
beforeRouterUpdate:在当前路由改变，但是依然渲染该组件调用
beforeRouterLeave：导航离开该组件的对应路由时被调用
3.vue单独路由独享组件:
它是在路由配置上直接定义的

14.span设置宽和高100px，为什么可以用浮动来设置宽高?
因为Float浮动和定位，会把display属性转换成inline-block

15.JS(原型、原型链、构造函数、工厂模式)？

  //工厂模式
       function Person(name,age,student) {//首字母大写是构造函数
       var person1=new Object();//new一个对象
       person1.name=name;
       person1.age=age;
       person1.student=student;
       person1.seyName=function() {
           alert(this.name+","+this.age+"岁"+","+this.student)
       };
       return person1;
    }
    var zhangsan=Person("张三",12,"初一学生");
        zhangsan.seyName();//调用第一份录用
    var lisi=Person("李四",13,"初二学生");
         lisi.seyName();//调用第二份录用
    var wangwu=Person('王五',34,'博士生')   
        wangwu.seyName();//调用第三份录用

    //构造函数
    //首字母大写，可以用this指向当前作用域的对象,无return返回值
    function Person3(name,age,job){
      this.name=name;
      this.age=age;
      this.job=job;
      this.sayName=function(){
        alert(this.name+','+this.age);
      }
    }
    var qingqing=new Person3('青青',21);
    var xiaoming=new Person3('小明',17);
    qingqing.sayName();
    xiaoming.sayName();

原型:
javascript规定,每一个函数都有一个prototype对象属性,指向另一个对象（原型链上面的）prototype（对象属性）的所有属性和方法,都会被构造函数的实例继承.这意味着,我们可以把那些不变(公用)的属性和方法直接定义在prototype对象属性上。
prototype就是调用构造函数所创建的那个实例对象的原型（proto）
prototype可以让所有对象实例共享它所包含的属性和方法.也就是说,不必在构造函数中定义对象信息，而是可以直接将这些信息添加到原型中。

   //原型模式
    function Person1(){};//构造函数空的
    Person1.prototype.name='李宁';//每一个函数都有一个prototype属性
    Person1.prototype.age=29;//这里不能使用this
    Person1.prototype.sayName=function(){//通过原型
      alert(this.name+','+this.age);//名字和年龄
    }
    var lili=new Person1();//
    lili.sayName();//李宁 29

原型链:
javascript,每个对象都会在内部生成一个_proto_属性,当我们访问一个对象属性时，如果这个对象不存在就会去_proto_指向的对象里面找，一层一层找下去,这就是javascript原型链的概念。js中所有的东西都是对象,所有的东西都由object衍生而来,即所有东西原型链的终点指向null。

//原型链模式
    function Person(){};//构造函数空
      Person.prototype.name='赵六'//通过prototype对象指向父类对象，直到object对象为止
      Person.prototype.sayName=function(){
        alert('hello world')
    }
    var  zhaoliu=new Person()
    console.log(zhaoliu.name);//赵六//在实例中查找自身
   
    console.log(zhaoliu.hasOwnProperty('name'));//false//使用hasOwnProperty检查自身属性
    console.log('name' in zhaoliu)//true//使用in检查是否包含该属性(包含原型里面的属性)

16.JS隐式转换和显示转换（变量、运算符）？
隐式转换:
1.undefined与null相等，但不恒等（===）
2.一个是number一个是string时，会尝试将string转换为number
3.隐式转换将boolean转换为number，0或1

  //隐式转换
    //1.undefined 与null相等 ，但不恒等(==)
    console.log(undefined==null);//true
    console.log(undefined==true);//false
    console.log(undefined==false);//false
    //双重否定!!等于肯定
    var f={};
    console.log(f);//true或false
    //字符串连接符与算术运算符隐式转换(+)
    //2.1.字符串连接符+会把其他数据类型调用string()方法转成字符串然后拼接
    console.log(1+'true');//'1true'
    //2.2算数运算符会把其他数据类型调用number()方法转成数字然后做加法计算
    console.log(1+true);//2
    //2.3 undefined会转换成number(undefined)=NaN,所以1+NaN=NaN
    console.log(1+undefined);//NaN
    //2.4 null会转换成Number(null)=0,所以1+0=1
    console.log(1+null);//1
    //关系运算符会把其他类型转换成number类型，在进行比较
    //3.1  '2'转换成number('2')=2,所以2>10=false
    console.log('2'>10);//false

    //当关系运算符两边都是字符串的时候，此时同时转成number然后比较关系
    console.log('2'==='2');//true
    //运算并不是按照number形式转成数字，而是按照字符串对应的unicode(统一编码)转数字
    //3.2  unicode(统一编码)转数字
    console.log('2'.charCodeAt());//50
    console.log('10'.charCodeAt());//49

显示转换:
显示转换一般指使用Number、String和Boolean三个构造函数，
手动将各种类型的值，转换成数字、字符串或者布尔值.

   //显示转换
    /*
    显示转换一般是指使用number、string、boolean三个构造函数，手动将各种类型的值，
    转换成数字、字符或者布尔值
    */
    //Number
    console.log(Number('1234'));//1234
    //String
    console.log(String(1234));//字符串类型1234
    //Boolean
    console.log(Boolean(isNaN===isNaN));//true
    console.log(Boolean(NaN));//false

17.浏览器打开一个页面发生了什么?
1.浏览器根据域名找到对应的IP地址（远程服务器）
2.浏览器与远程服务器建立连接（tcp连接，三次握手 ）
3.浏览器与远程服务器发送和接收数据
4.浏览器与远程服务器断开连接

18.JS预解析（变量提升）？
1.变量预解析
只有用var定义变量才会进行变量提升，在ES6中let变量是不会进行变量提升的

    /*
    1.预解析就是js引擎会把变量和函数声明放到当前作用域最前面，变量只声明不赋值
    2.预解析把变量的声明提前了(提到当前所在作用域的最前面)，
    函数声明也会被提前(提到当前作用域的最前面)
    3.预解析中变量的提升，只会在当前作用域中提升，提到当前的作用域最上面，
    函数中的变量只会提前到函数的作用域中最前面，不会出去。
    */
    //1.预解析
    console.log(a);//undefined
    var a=5;
    console.log(a);//5
    //2.函数提升和变量提升
    f1();
    var num=20;//这个变量的声明会提升到变量使用之前
    function f1(){
      console.log(num);//undefined
    }

    //函数提升会把作用域提升到当前作用域的最上面，
    function f2(){
      console.log('hello world');
    }
    f2();//又调用了一边，vue javascript
    function f2(){
      console.log('vue javascript');//vue javascript  vue javascript
    }
    f2();

19.移动端（兼容问题，弹性盒子）？
1.ios下input type=button 属性disabled=true，会出现样式文字和背景异常
解决方法：opacity=1解决
2.对非点击元素（label，span）实现监听click事件，部分ios版本下不会生效
解决方法: css增加 cursor：poiner解决
3.h5底部输入框被键盘遮挡问题
当输入框在最底部，点击输入框的时候，键盘会遮盖输入框，
解决方法:

var oHeight = $(document).height(); //浏览器当前的高度
   
   $(window).resize(function(){
 
        if($(document).height() < oHeight){//页面高度小于浏览器高度
         
        $("#footer").css("position","static");//静态定位
    }else{
         
        $("#footer").css("position","absolute");//绝对定位
    }
        
   }

4.移动端click事件300s的延迟事件?
解决方法：FastClick

window.addEventerListenter('load',function()){

FastClick.attch(document.body);

},false)//默认false
/*
绑定事件默认是false，false则表明绑定在冒泡阶段，true表明该事件监听绑定在捕获阶段
事件冒泡:一个元素接收到事件的时候，会把它的元素传给他的父级元素一直到window(里往外找：box2、box1、box)
事件捕获:从最不具体的元素接收到最具体的元素，会从祖级层层往下找(外往里找：box、box1、box2)
*/

5.不让 Android 手机识别邮箱

6.禁止 iOS 识别长串数字为电话 7.overflow:scroll 或者在auto上滑动卡顿问题？ 解决方法：加入-webkit-overflow-scrolling：touch； 8.禁止 iOS 弹出各种操作窗口 -webkit-touch-callout:none 9.iOS 系统中文输入法输入英文时，字母之间可能会出现一个六分之一空格 可以通过正则去掉 this.value = this.value.replace(/\u2006/g, ''); 10.禁止ios和android用户选中文字 -webkit-user-select:none 11.fixed定位缺陷 ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位 android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位 ios4下不支持position:fixed 解决方案： 可用iScroll插件解决这个问题 12.阻止旋转屏幕时自动调整字体大小 html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;} 13.往返缓存问题 点击浏览器的回退，有时候不会自动执行js，特别是在mobilesafari中。这与往返缓存(bfcache)有关系。

解决方法 ：window.onunload = function(){};

14. iOS6下伪类:hover
    除了之外的元素无效；
    在Android下则有效。类似div#topFloatBar_l:hover #topFloatBar_menu { display:block; }
    这样的导航显示在iOS6点击没有点击效果，只能通过增加点击侦听器给元素增减class来控制子元素。

弹性盒模型？
弹性布局（即采用Flex布局的为Flex容器，布局元素中的子元素为容器成员Flex项目）
rem（始终相对于html大小，即页面根元素）、
em（em是相对其父元素）、
特点：使用em/rem做单位，可以使包裹文字的元素随着文字的缩放而缩放。

20.ES6(箭头函数的this)？
箭头函数体内的this对象，就是定义该函数时所在的作用域指向的对象，而不是使用时所在的作用域指向的对象。

  //第一种解析
    var name = 'window'; // 其实是window.name = 'window'
    var A = {
       name: 'A',
      sayHello: function(){
      console.log(this.name)
   }
}
/*
sayhello()是定义在A对象中的，当我们使用call()方法可以指向其它对象:前提是带参，如果不带参指向window全局
*/
A.sayHello();// 输出A
    var B = {
    name: 'B'
}

A.sayHello.call(B);//输出B
A.sayHello.call();//不传参数指向全局window对象，输出window.name也就是window

//第二种解析
  var name = 'window'; // 其实是window.name = 'window'
  var A={
    name:'A',
    sayHello:()=>{
      console.log(this.name);
    }
  }
  A.sayHello();//z这里箭头函数this指向window
   /*
  这里为什么指向window？
  因为该函数所在的作用域指向的对象，作用域是指函数内部，这里的箭头函数指向sayhello
  它所在的作用域是指外层js环境，因为没有其它函数包裹，最外层的js环境指向的对象是window对象，所以这里的this
  指向是window对象
  */  

 //第三种解析
  var name='window';
  var A={//对象A
    name:'A',
    sayHello:function(){
      var s=()=>console.log(this.name);//A
      return s;//返回箭头函数s
    }

  }
  var sayHello=A.sayHello();//变量赋值
  sayHello();//调用作用域
  var B={//对象B
    name:'B'
  }
  sayHello.call(B);//A
  sayHello.call();//A
  //用箭头函数改变了this指向A
  /*
  1.该函数所在的作用域：箭头函数s所在的作用域是sayHello,
  因为sayHello是一个函数.
  2.作用域指向的对象:A.sayHello指向对象A
  所以箭头函数s中的this就是指向A
  */
  /*
  call和apply方法?
  相同:调用一个对象的方法，用另一个对象替换当前对象。
  call可以传递多个参数.
  apply只能传递两个参数，一个是对象，一个是数组.
  */
 

21.如何获取节点上的ID？
1.Jquery中获取ID

$("#name").text();//ID里面的内容
//当不知道当前页面的ID时，可以通过这个方法获取，从而使用正确的ID
$(this).attr("id");//通过选择器获取当前元素的ID

2.DOM元素ID

document.getElementById("id").可以获取html标签里的id.
document.querySelector("#app")

3.获取所有DOM元素ID

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>遍历获取html页面所有元素id</title>
</head>
<body>
  <div id='app a1 a2 a3'>
    <div id='a4 a5'>内容1</div>
    <div id="a6 a7">内容2</div>
    <div id="a8 a9">内容3</div>
  </div>
  <script>
    var tineid=document.getElementsByTagName('div')
    for(var i=0;i<tineid.length;i++){//循环遍历所有
      var dm=tineid[i];
      console.log(dm.id)
    }
  </script>
</body>
</html>

22.CSS3和CSS2区别?

css3与css2区别总结：

1、css3是css2的升级版本，在css2的基础上增加了一些新的属性。
2、CSS2推荐的是一套内容和表现效果分离的方式，CSS3语言开发是朝着模块化发展的。

CSS3增加的特性:
比如定义圆角、背景颜色渐变、背景图片大小控制和定义多个背景图片等很多，这个是CSS2上没有的效果，现在新版本的浏览器基本都支持CSS3，比如IE9、FF4+、chrome11+，但是要用CSS3开发网站的话，要考虑的是还在用低版本浏览器的用户。

标签：面试题,console,log,对象,元素,混合,2020,var,name
来源： https://blog.csdn.net/weixin_46409887/article/details/110281785

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。