2019-08-02

1 在默认的情况下，使用h1标签呈现出什么效果?
块级元素，字体加黑加粗，fontsize：24px
2 position的relative和absolute 定位原点在哪里？
单独使用：
relative 定位原点为元素本来的位置，没有脱离文档流；absolute相对于浏览器定位，脱离文档流，不占位置
两者一起使用，子absolute，父relative
相对于父元素定位

3 什么是Fragment？在我们定义组件的时候return里最外层包裹的div往往不想渲染到页面，那么就要用到我们的Fragment组件了，具体使用如下：
import React, { Component, Fragment } from 'react';
render(){
return(
<Fragment>
<div><input /><button>提交</button></div>
<ul>
<li>学习react<li/>
<li>Learning React</li>
</ul>
<Fragment/>
)
}

4 ajax请求时，如何解析json数据

答案：使用JSON.parse将json字符串转化为js对象 ，使用 JSON.stringify()将js对象转化为JSON数据

5 call和apply的区别
javascript中每一个function都会有call()和apply（）的方法
function.call(this,can1,can2,can3)
function.apply(this,can) 或者 function.apply(this,[ can1,can2,can3])

call方法的参数可以是多个，可以合并多个函数，apply的参数只能是两个，只能合并一个参数;
第一个参数不一定传this，也可以是其他函数，对象。调用的时候改变this指向
他俩的作用就是，扩充函数赖以运行的作用域
6 slice（）方法
slice方法用于截取字符串或者截取数组元素。返回一段新的数据，不影响原数据。
slice（start,end） 有两个参数，statr和end代表起始位置和结束位置，start从0开始计数，0代表第一位；end从-1开始计数，代表最后一位，-2代表倒数第二位;第二个参数位置不取

7 判断是否为引用类型数据
typeof value ： 可判断 object， array， function regexe ，new String（），new Number（） 类型，都返回object
判断是否是Object类型？ 判断是否是Array类型？判断是否是Date类型？..... :
Object.prototype.toString.call(value) : 返回 '[object Object]' ，'[object Function]' ， '[object Array]' ，....
截取类型 Object.prototype.toString.call(value).slice(8,-1) 返回Object ，Function 等

8 检测浏览器模式

function isPCBroswer() {

  let e = navigator.userAgent.toLowerCase()
      , t = "ipad" == e.match(/ipad/i)
      , i = "iphone" == e.match(/iphone/i)
      , r = "midp" == e.match(/midp/i)
      , n = "rv:1.2.3.4" == e.match(/rv:1.2.3.4/i)
      , a = "ucweb" == e.match(/ucweb/i)
      , o = "android" == e.match(/android/i)
      , s = "windows ce" == e.match(/windows ce/i)
      , l = "windows mobile" == e.match(/windows mobile/i);
  return !(t || i || r || n || a || o || s || l)
}

9 请讲一下h5的特点

代码清晰简洁，有更多的描述性标签

支持移动开发
1)更多的描述性标签：HTML5引入非常多的描述性标签，例如用于定义头部(header)、尾部(footer)、导航区域(nav)、侧边栏(aside)等标签，使开发人员非常方便的构建页面元素。

2)良好的多媒体支持：对于先前的以插件的方式播放音频、视频带来的麻烦，HTML5有了解决方案，audio标签和video标签能够方便的实现应变。

3)更强大的Web应用：HTML5提供了令人称奇的功能，某些情况下，你甚至可以完全放弃使用第三方技术。

4)跨文档消息通信：Web浏览器会组织不同域间的脚本交互或影响，但是对于可信任的脚本或许就是麻烦。HTML5引入了一套安全且易于实现的应对方案。

5)Web Sockets:HTML5提供了对Web Sockets的支持。

6)客户端存储：HTML5的Web Storage和Web SQL Database API，可以在浏览器中构建Web应用的客户端持久化数据。

7)更加精美的界面：HTML5+CSS3组合渲染出来的界面效果有时候是无法想象的精美。

8)更强大的表单：HTML5提供了功能更加强大的表单界面控件，使用非常方便。

9)提升可访问性：内容更加清晰，使用户的操作更加简单方便，体验提升。

10)先进的选择器：CSS3选择器可以方便的识别出表格的奇偶行、复选框等，代码标记更少。

11)视觉效果：精美界面的一部分，阴影、渐变、圆角、旋转等视觉效果。

10 检测数据类型的方法有哪些？
typeof
instanceof
constructor

var o={}; alert(o.constructor == Object);  //true
var a=[];alert(o.constructor==Array); //true
 (10).constructor    number

toString

var data=1
console.log(Object.prototype.toString.call(data) )   
 打印值    [object Number]

11 typeof求解的值可能有哪些？
number string function symbol object undefined nulll

12 数据类型的隐士转换有哪些
1 == '1' true
1 + '1' '11'
'1' -1 0
显示转换
number（） toString（ ） parseInt（） parseFloat（） boolean

13 != ” 和 “ !== ” 的区别？
!= 会做数据隐式类型转换，转换完数据类型在做比较
！== 同类型才比较 ，先比较类型，再比较数值

14 js中Object的keys()方法和values()方法还有entries()方法各有什么作用？

Object.keys() : 对obj的索引循环

let obj = {
    name:"张三",
    sex:"男",
    age:20,
    height:150
}
 
for(let key of  Object.keys(obj )){
   console.log(key)
}

// name
// sex
// age
// height

Object.values() : 对obj的值循环

for(let key of object.values(obj)){
 console.log(key )
}
// 张三
// 男 
// 20 
// 150

Object.entries(): 对obj的值循环

for ( let val of Object.entries(obj)){
    console.log(val)
}
 
// (2) ["name", "张三"]
// (2) ["sex", "男"]
// (2) ["age", 20]