1. 数组的反转
1.1 利用数组的Array.reverse()方法
var arr=[1,2,3,4,5,6,7,8]; arr.reverse();//[8, 7, 6, 5, 4, 3, 2, 1]
1.2
function turn(){
var arr1=[1,2,3,4,5,6,7,8];
for(var i = 0;i<arr1.length/2;i++){
var temp=arr1[i];
arr1[i] = arr1[arr1.length-1-i];
arr1[arr1.length-1-i] = temp;
}
}
turn();
2. 一个数组对象，获取其中的某个属性中的最大值，并且按照从大到小的顺序排序，有几种方法？
1.方法一for循环遍历
var arr = [{ name : 'qqq', age : '111'}, {name : 'qqq', age : '13' }, { name : 'qqq', age : '1' }, { name : 'qqq', age : '17' }, { name : 'qqq', age : '21' }, { name : 'qqq', age : '16' }];
let maxArr=[];
let max;
let serchMax= function (arrays){
for(var i = 0; i< arrays.length; i++ ){
for(let item in arrays[i]){;
let age = Number(arrays[i][item])
if(item == "age"){
if( max > age){
max=max;
}else{
max=age;
}
maxArr.push(age);
}
}
}
console.log('最大值为'+max);
//maxArr.sort();//按照字母顺序排序
console.log(maxArr);
var aa=maxArr.sort((a,b)=>a-b);//按照数字从小到大的顺序排序
console.log('从小到大'+aa);
var bb=maxArr.sort((a,b)=>b-a);//按照数字从小到大的顺序排序
console.log('从大到小'+bb);
}
serchMax(arr);
3. Call和apply的区别
fn.call(obj,10,20,30);
fn.apply(obj,[10,20,30]);
改变this的指向，通常call()方法的性能更好
4. 回调函数
//=>回调函数：把一个函数B作为实参传递给另外一个函数A，函数A在执行的时候可以执行传递进来的函数B（可执行，可传值，可改变this，回调函数中的this通常指向的window，也可以return返回值）
function each(arr,callBack){
//callBack:function(item,index){}
for (let i = 0; i < arr.length; i++) {
let item =arr[i],
index = i;
callBack(item,index);//可传值
callBack.call(arr,item,index);//可通过call方法把毁掉含住中的指向window的this变为指向当前的数组
let flag = callBack.call(arr,item,index);
}
}
each([10,20,30,40],function(item,index){
//=>this:指向现在的原始数组
})
5. 清除浮动的方法
- 其后添加一个空标签并且设置为clear：both===》缺点，多加了一个无意义的标签
- 给父元素加入：overflow：hidden
- 最常用的给父元素加伪类样式
div：after{
content：“ ”；
clear：both；
display：table
}
6. 行内元素和块级元素
行内：a b span input img select label textarea
块级元素：div ul li p h1 dl表格元素
不管块级元素还是行内元素，区别主要是三个方面:一是排列方式，二是宽高边距设置，三是默认宽度。
块级元素会独占一行，而内联元素和内联块元素则会在一行内显示。
块级元素和内联块元素可以设置 width、height 属性，而内联元素设置无效。
块级元素的 width 默认为 100%，而内联元素则是根据其自身的内容或子元素来决定其宽度。
而行内块级元素又同时拥有块级元素和行内元素的特点。
7. 盒子模型
Margin =>border =>padding =>content
W3C盒子模型(标准盒模型)
根据 W3C 的规范，元素内容占据的空间是由 width 属性设置的，而内容周围的 padding 和 border 值是另外计算的；即在标准模式下的盒模型，盒子实际内容（content）的width/height=我们设置的width/height;盒子总宽度/高度=width/height+padding+border+margin。
.box {
width: 200px;
height: 200px;
box-sizing: content-box; //标准盒子模型
border: 20px solid black;
padding: 50px;
margin: 50px;
}
IE盒子模型(怪异盒模型)
在该模式下，浏览器的 width 属性不是内容的宽度，而是内容、内边距和边框的宽度的总和；即在怪异模式下的盒模型，盒子的（content）宽度+内边距padding+边框border宽度=我们设置的width(height也是如此)，盒子总宽度/高度=width/height + margin = 内容区宽度/高度 + padding + border + margin。
.box {
width: 200px;
height: 200px;
box-sizing: border-box; //IE盒子模型
border: 20px solid black;
padding: 50px;
margin: 50px;
}
8. Html5新标签及其兼容性
新标签：1.语义化标签：header，footer，aside，nav，dialog，section，time
2.canvas，svg绘图
3.多媒体元素audio，video，embed，source
4.本地存储localStorage，sessionStorage，websocket
9. HTTP请求
HTTP基于TCP/IP通信协议来传递数据
1.HTTP请求报文由3部分组成（请求行+请求头+请求体）：
请求行：请求方法、请求地址、协议名称和版本号
请求头：Referer、User-Agent、Accept、Cookie、Cache-Control、Content-Length等属性。Content-Length可用于服务端判断消息接受完的条件
请求体：GET请求与POST请求传递方式不同(Message Body)
Accept：请求的对象类型。如果是“/”表示任意类型，如果是指定的类型，则会变成“type/”。
Accept-Language：使用的语言种类。
Accept-Encording：页面编码种类。
Accept-Charset：页面字符集。说到这里，需要解释以下字符集和编码的区别。字符集通常对应着一种语言，将语言中的所有字符集合起来就可以视为一种字符集，这样我们可以看出，中文并非是一种字符集，因为中文无法使用一些字符来进行表示；而编码则是将字符转换为计算机所能识别的2进制数的一种方式，例如常说的unicode，UTF-8，ANSI等等，我们在访问一些国外网站会出现乱码的原因就是因为我们浏览器所使用的编码与页面所使用的编码不能互相识别。我们常说的BIG5和GB2312都是编码。
User-Agent：提供了客户端浏览器的类型和版本。
Host：连接的目标主机，如果连接的服务器是非标准端口，在这里会出现使用的非标准端口。
Connection：对于HTTP连接的处理，keep-alive表示保持连接，如果是在响应报文中发送页面完毕就会关闭连接，状态变为close。
2.HTTP响应报文由三部分组成（响应行+响应头+响应体）：
响应行：
①报文协议及版本；
②状态码及状态描述；
响应头：
③响应报文头，也是由多个属性组成；
响应体：
④响应报文体，即我们真正要的“干货”
ps:响应状态码
1xx 消息，一般是告诉客户端，请求已经收到了，正在处理，别急...
2xx 处理成功，一般表示：请求收悉、我明白你要的、请求已受理、已经处理完成等
3xx 重定向到其它地方。它让客户端再发起一个请求以完成整个处理。
4xx 处理发生错误，责任在客户端，如客户端的请求一个不存在的资源，客户端未被授权，禁止访问等。
5xx 处理发生错误，责任在服务端，如服务端抛出异常，路由出错，HTTP版本不支持等。
10. cookie机制
客户端请求服务器，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。服务器还可以根据需要修改Cookie的内容。
在HTTP协议中，cookie的交互过程是这样的：首先是三次握手建立TCP连接，然后客户端发出一个http request，这个request中不包含任何cookie信息
当服务器收到这个报文后，针对request method作出响应动作，在响应报文的实体部分，加入了set-cookie段，set-cookie段中给出了cookie的id，过期时间以及参数path，path是表示在哪个虚拟目录路径下的页面可以读取使用该cookie，将这些信息发回给客户端后，客户端在以后的http request中就会将自己的cookie段用这些信息填充。
11. 数组去重
- forEach方法（利用第三个参数为当前数组，无法跳出循环）
let arr1 = [1, 2, 1, 3, 1];
let arr2 = [];
arr1.forEach(function (self, index, arr) {
arr.indexOf(self) === index ? arr2.push(self) : null;
});
console.log(arr2);
//=》forEach方法跳出循环用try.....catch()
try {
var arr = [1, 2, 3, 4];
arr.forEach(function (item, index) {
//跳出条件
if (item === 3) {
throw new Error("LoopTerminates");
}
//do something console.log(item);
});
} catch (e) {
if (e.message !== "LoopTerminates") throw e;
};
2.Es6提供的方法
//ES6里新添加了两个方法，set(set是一种新的数据结构，它可以接收一个数组或者是类数组对象，自动去重其中的重复项目)
//Array.from（类数组对象、可迭代对象转化为数组）。
var arr = [1, 2, 3, 2, 4, 5, 5, null, null, undefined, undefined, NaN, NaN]
const item = new Set(arr);
const newArr = Array.from(item);
console.log(newArr, '去重后的数组')//[1, 2, 3, 4, 5, null, undefined, NaN] "去重后的数组"
3.普通做法
const list = [1,2,3,4,5,3,4,5,3,6];
console.log(noRepeat(list),'去重后');//[1, 2, 3, 4, 5, 6] "去重后"
//ie8以下不支持indexOf()方法
function noRepeat(arr) {
var newArr = [];
for(var i = 0; i < arr.length; i++) {
if(newArr.indexOf(arr[i]) == -1) {
newArr.push(arr[i]);
}
}
return newArr;