2019春招备战
1. 如何让IE8及以下支持HTML5？ 答：使用html5shiv.js或respond.js
<!--[if lt IE 9]>
<script src = "html5shiv.js"></script>
<script src = "respond.js"></script>
<![endif]-->
2.sessionStorage、localStorage和cookie的区别
共同点：都是保存在浏览器端，且同源的。
不同点：1.cookie数据始终在同源的http请求中携带（即使是不需要的），即cookie始终在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径的概念，可以规定cookie只属于某个路径。
2.存储大小限制不同：cookie数据不能超过4KB，sessionStorage和localStorage可以达到5MB。
3.数据有效期不同：cookie数据有效期默认浏览器会话结束，可以设置过期时间；sessionStorage仅在浏览器会话结束之前有效，可手动删除；localStorage有效期为永久，可手动删除；
4.作用域不同：sessionStorage在不同的浏览器窗口中无法共享，即使是同一个页面；localStorage和cookie在所有同源窗口中是共享的。
3.js和java的区别
出身不同：js是网景公司推出的脚本语言，java是sun公司推出的程序设计语言；
语言类型不同：js是动态类型语言，java是静态类型语言；
变量不同：js的变量是弱类型，即变量可以存储任意类型的数据，解释器在运行时检查其数据类型，java的变量是强类型的，声明时必须规定其数据类型；
代码格式不同：js可以装载到HTML文档里，其独立的文档格式为*.js,java的代码以字符串的形式保存在独立的文档中，格式为*.class;
4.css画圆和三角
画圆：border-radius:50%(宽高相同时) border-radius:100px(宽高为200px)
画三角：width:0;height:0;border:100px solid transparent;border-top-color:red;
复合样式：border-radius:左上 右上 右下 左下;border-radius:左上 右上/左下 右下;border-radius:左上/右下 右上/左下;border-radius:四角一样; 单位：px/%
分样式：border-top-left-radius border-top-right-radius border-bottom-left-radius border-bottom-right-radius
css3圆角属性 IE8及以下不支持
5.post和get区别
- get请求一般用于获取数据，速度快，post请求一般用于更新数据，速度相对慢；
- get请求的参数拼接在url后面，不安全，post请求的参数作为HTTP消息的实体内容发送到服务器，相对安全；
- get请求的数据大小一般2~8KB，post请求的数据比较大，大小受服务器的设定限制；
- get请求会被浏览器缓存，post请求默认不被缓存。
6.post提交数据方式 Content-type规定http消息主体以何种方式编码，服务器以此对主体进行解析。
- application/x-www-form-urlencoded
- application/json
- multipart/form-data
- text/xml
7.sort([callback]) 对数组进行排序，返回排序后的数组，会改变原数组。 无参、有参（参数必须为回调） 待手写函数
- 无参：按照数组元素的首字符的unicode码进行升序 [1,2,5,3,0,1].sort() //[0,1,1,2,3,5] [1,2,5,"b",3,0,1,"a"].sort() //[0, 1, 1, 2, 3, 5, "a", "b"]
- 有参：arr.sort((a,b) => a-b) 升序 arr.sort((b,a) => b-a) 降序 无法对字母进行升序排序 [1,2,1,"b","a"].sort((a,b)=>a-b) //[1, 1, 2, "b", "a"]
8.css隐藏元素的几种方法及区别
- display:none;元素从页面上彻底消失，不占据空间，其他元素会占据它原来的空间，这就导致了浏览器的重排和重绘，无法触发点击事件；
- visibility:hidden;元素从页面上消失，他占据的空间依然保留着，所以浏览器只会重绘不会重排，无法触发点击事件；
- opacity:0;视觉隐藏，透明度设为0，占据空间，依然存在页面中，可以触发点击事件。
9.重排和重绘
浏览器渲染是基于流式布局模型的
重排(回流/reflow)：浏览器渲染界面是根据渲染对象的信息，计算出渲染对象的几何信息（DOM对象的位置和尺寸大小），将其安置在界面上的正确位置，当DOM对象发生改变（大小、布局、消失）时，重新计算DOM结构，重新布局界面，引发重排；
触发重排的条件：
- 页面初始化
- 元素尺寸改变——外边距，大小，边框，填充
- 浏览器窗口大小改变
- 添加或删除可见的DOM元素
- 元素位置改变，或使用动画
- 元素内容改变，引起宽高改变
重绘：当一个元素的外观发生改变的时候，浏览器会根据元素的新属性重新绘制元素的外观。
触发重绘的条件：color,border-radius,background,box-shadow等等。
重排必定引发重绘，重绘不一定引发重排。
10.找出数组中的最大值
(1).Math.max()：传入一组参数，返回最大值，不传参数返回-Infinity，当参数中存在不能转成数值的参数时，返回NaN。例1：ES6结合扩展运算符 Math.max(...[1,2,3,4,5]) //5 例2：ES5结合apply()方法 ,apply()方法可以将数组转成一组参数传入Math.max()方法 Math.max.apply(null,[1,2,3,4,5]) //5
(2).sort()：arr.sort((a,b) => b-a) 最大值arr[0]
(3).for循环
var arr = [1,2,3,4,10,7];
var max = arr[0];
for(var i = 0;i < arr.length;i++){
max = max < arr[i+1] ? arr[i+1] : max;
}
reduce()：
11.数组去重
(1).var newarr = [...new Set(arr)] Array.from(new Set(arr))
(2).双重for循环，外层循环元素，内层循环比较值，值相同删除后者，数组长度也减1
let arr1 = [1,1,2,2,3,3,4];
let len = arr1.length;
function quchong(arr) {
for (let i = 0;i < len;i++){
for (let j = i+1;j < len;j++){
if (arr[i] === arr[j]){
arr.splice(j,1);
len--;
j--;
}
}
}
console.log(arr);
}
quchong(arr1); //[1,2,3,4]
(3).
let arr1 = [1,1,2,2,3,3,4]; let len = arr1.length;
function quchong1(arr){
let newarr = [];
for (let i = 0;i < len;i++){
for (let j = i+1;j < len;j++){
if (arr[i] === arr[j]){
continue;
}
}
newarr.push(arr[i]);
}
console.log(newarr);
}
quchong1(arr1); //[1,2,3,4]
12.margin:50%;相对于父级宽度。padding:50%;相对于父级宽度。
13.事件委托或事件代理
javascript高级程序设计：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。
个人理解：当页面上需要触发事件的元素过多时，为了避免内存泄漏，我们借助事件冒泡机制，将子元素的事件委托到父元素身上。
为什么要使用事件委托：在js中，添加到页面上的事件处理程序的数量将直接关系到页面的整体运行性能，因为需要不断的与DOM节点进行交互，访问DOM节点的次数也就越多，引起浏览器重绘和重排的次数就越多，就会延长整个浏览器的交互就绪时间。
事件委托原理：借助事件冒泡原理
优点：可以节省内存，减少事件注册，新増子元素时，无须再对其进行事件绑定。
缺点：如果所有事件都用事件委托，可能出现事件误判。
<ul id="box">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
let ulbox = document.getElementById("ul");
ulbox.onclick = function (ev) {
let e = ev || window.event;
let target = e.target || e.srcElement;
if (target.nodeName.toLowerCase() == "li"){
console.log("我其实点击的是li");
}
}
14.标准盒模型和IE盒模型（怪异盒模型）
标准盒模型：box-sizing:content-box;
盒子的宽度：width+padding(左右)+border(左右)+margin(左右);
盒子的高度：height+padding(上下)+border+(上下)+margin(上下);
IE盒模型：box-sizing:border-box;
盒子的宽度：width(content+border+padding)+margin(左右);
盒子的高度：height(content+border+padding)+margin(上下);
切换盒模型：box-sizing
15.H5语义化标签
使用语义化标签的好处：
- 代码结构清晰，易于阅读，利于维护
- 有利于seo搜索引擎优化
- 方便其他设备解析，如屏幕阅读器，盲人阅读器，移动设备
16.this指向问题
this是js的一个关键字，this指向在函数定义时是无法确定的，只有在函数调用时才能确定，this指向直接调用它的对象。
- 函数自执行：get() 相当于作为window对象的方法执行，this指向window对象；
- 作为对象的方法调用：obj.get() this指向obj，a.b.get() this指向b;
- 构造函数：let person = new Person() 构造函数的this指向实例化对象;
- 箭头函数的this：箭头函数没有自己的this，它使用外层代码块的this。
17.正则表达式
正则表达式：一套规则，用于检索、替换、校验符合某个(模式)规则的字符串。
正则对象创建方法：1.对象字面量 let reg = /124/; 2.构造函数 let reg = new RegExp("124");
reg.test(str) 用于检测字符串是否匹配某个模式，true匹配，false不匹配。reg.test("124fefe"); //true
18.删除数组元素的方法
arr.shift()：删除并返回数组的第一个元素,改变原数组；[2,3,4].shift() //2
arr.pop()：删除并返回数组的最后一个元素，改变原数组；[2,3,4].shift() //4
arr.splice(index,howmany,item1,...,itemN)：向数组中添加，删除或替换元素，返回被删除元素组成的数组，会改变原数组
index：索引 howmany：删除几个 item1,...,itemN：向数组添加的元素
删除：[1,2,3].splice(0,2) //[1,2] 原数组：[3]
添加：[1,2,3].splice(1,0,2) //[] 原数组：[1,2,2,3]
替换：[1,2,3].splice(1,1,5) //[2] 原数组：[1,5,3]
19.长度为10的数组，在其索引为15的位置上添加元素会报错吗？为什么？
不会
20.http和https的区别
http:超文本传输协议，常用于web浏览器和服务器之间传递信息，不进行任何的数据加密；
https:以安全为目的的通道，即http的安全版，在http的基础上加入了SSL协议，SSL依据证书来验证服务器的身份，并为浏览器和服务器的通信加密；
https主要作用：1.建立一个信息安全通道,保证数据传输的安全；2.确认网站的真实性。
http和https的区别：
- https协议需要到ca申请证书，一般免费证书较少，需要花费一定的费用
- http协议明文传输，不对数据加密，https协议是由SSL+HTTP协议构建的可进行加密、身份认证的网络协议，比http安全
- http协议的，默认端口是80，https的默认端口是443.
https优点：1.安全，非绝对安全；2.有利于网站排名；
https缺点：1.握手阶段费时，页面加载时间延长近50%；2.需要花钱；3.连接缓存不如http高效。
http切换到https：http改为https。兼容：去掉http头部，//www.baidu.com，http入口自动加http，https入口自动加https。