1.css 垂直居中
1.1. table-cell (父级盒子设置display: table-cell;vertical-align: middle; text-align: center;)
1.2. display:flex(父级盒子设置display: flex;justify-content:center;align-items:Center;)
1.3. 绝对定位和负边距（父position:relative;子 position: absolute;）
1.4. 绝对定位和0（通过position: absolute; margin:auto和top,left,right,bottom都设置为0实现居中）
1.5. translate（ position: absolute; top:50%;left:50%;width:100%;transform:translate(-50%,-50%);text-align: center;）
1.6. display:inline-block()
2.Web攻击技术
2.1. XSS（Cross-Site Scripting，跨站脚本攻击）：指通过存在安全漏洞的Web网站注册用户的浏览器内运行非法的HTML标签或者JavaScript进行的一种攻击(主要是攻击者往网页里嵌入恶意脚本，或者通过改变html元素属性来实现攻击，主要原因在于开发者对用户的变量直接使用导致进入html中会被直接编译成js，通常的get请求通过url来传参，可以在url中传入恶意脚本，从而获取信息，解决方法：特殊字符过滤。)
3.数组去重
3.1. 遍历数组法（实现思路：新建一个数组，遍历去要重的数组，当值不在新数组的时候（indexOf为-1）就加入该新数组中；）
var arr=[2,8,5,0,5,2,6,7,2];
function unique1(arr){
var hash=[];
for (var i = 0; i < arr.length; i++) {
if(hash.indexOf(arr[i])==-1){
hash.push(arr[i]);
}
}
return hash;
}
3.2. 数组下标判断法（如果当前数组的第 i 项在当前数组中第一次出现的位置不是 i，那么表示第 i 项是重复的，忽略掉。否则存入结果数组。）
function unique2(arr){
var hash=[];
for (var i = 0; i < arr.length; i++) {
if(arr.indexOf(arr[i])==i){
hash.push(arr[i]);
}
}
return hash;
}
3.3. 排序后相邻去除法(给传入的数组排序，排序后相同的值会相邻，然后遍历排序后数组时，新数组只加入不与前一值重复的值。)
function unique3(arr){
arr.sort();
var hash=[arr[0]];
for (var i = 1; i < arr.length; i++) {
if(arr[i]!=hash[hash.length-1]){
hash.push(arr[i]);
}
}
return hash;
}
3.4. 优化遍历数组法（推荐）(双层循环，外循环表示从0到arr.length，内循环表示从i+1到arr.length)
function unique4(arr){
var hash=[];
for (var i = 0; i < arr.length; i++) {
for (var j = i+1; j < arr.length; j++) {
if(arr[i]===arr[j]){
j = i+1
++i;
}
}
hash.push(arr[i]);
}
return hash;
}
3.5. ES6实现
function unique5(arr){
var x = new Set(arr);
return [...x];
}
function unique22(arr){
var hash=[];
for (var i = 0; i < arr.length; i++) {
if(arr.indexOf(arr[i])==arr.lastIndexOf(arr[i])){
hash.push(arr[i]);
}
}
return hash;
}
4.数组排序
4.1. js的sort()方法
var arr = [10, 20, 1, 2];
arr.sort(function(a,b){
if(a<b){
return -1;
}
if(a>b){
return 1;
}
return 0;
})
console.log(arr); //[1, 2, 10, 20]
4.2. 冒泡排序
var arr = [10, 20, 1, 2];
var t;
for(var i=0;i<arr.length;i++){
for(j=i+1;j<arr.length;j++){
if(arr[i]>arr[j]){
t=arr[i];
arr[i]=arr[j];
arr[j]=t;
}
}
}
console.log(arr); //[1, 2, 10, 20]
5.es6 常用的数组方法
5.1. array.concat(array1, array2,...arrayN);(合并多个数组，返回合并后的新数组，原数组没有变化。)
const array = [1,2].concat(['a', 'b'], ['name']);
// [1, 2, "a", "b", "name"]
5.2. array.every(callback[, thisArg]); 检测数组中的每一个元素是否都通过了callback测试，全部通过返回true，否则返回false。
// callback定义如下： element:当前元素值；index：当前元素下标； array:当前数组
function callback(element, index, array) {
// callback函数必须返回true或者false告知every是否通过测试
return true || false;
}
5.3. array.filter(callback[, thisArg]); 返回一个新数组，包含通过callback函数测试的所有元素
const filtered = [1, 2, 3].filter(element => element > 1);
// filtered: [2, 3];
5.4. array.find(callback[, thisArg]); 返回通过callback函数测试的第一个元素，否则返回undefined，callback函数定义同上。
const finded = [1, 2, 3].find(element => element > 1);
// finded: 2
5.5. array.findIndex(callback[, thisArg]); 返回通过callback函数测试的第一个元素的索引，否则返回-1，callback函数定义同上。
const findIndex = [1, 2, 3].findIndex(element => element > 1);
// findIndex: 1
5.6. ****
https://segmentfault.com/a/1190000012429718
6.取数组中的最大值
6.1.排序法(sort )
var arr = [12,56,25,5,82,51,22];
arr.sort(function (a, b) {
return a-b;
}); // [5,12,22,25,51,56]
var min = arr[0]; // 5
var max = arr[arr.length - 1]; // 56
6.2. 假设法(假设当前数组中的第一个值是最大值，然后拿这个最大值和后面的项逐一比较，如果后面的某一个值比假设的值还大，说明假设错了，我们把假设的值进行替换。最后得到的结果就是我们想要的。)
// 获取最大值：
var arr = [22,13,6,55,30];
var max = arr[0];
for(var i = 1; i < arr.length; i++) {
var cur = arr[i];
cur > max ? max = cur : null
}
console.log(max); // 55
// 获取最小值：
var arr = [22,13,6,55,30];
var min = arr[0];
for(var i = 1; i < arr.length; i++) {
var cur = arr[i];
cur < min ? min = cur : null
}
console.log(min) // 6
6.3. 使用 Math 中的 max/min 方法
var arr = [22,13,6,55,30];
var max = Math.max.apply(null, arr);
var min = Math.min.apply(null, arr);
console.log(max, min) // 55,6
6.4. 使用ES6的扩展运算符
var arr = [22,13,6,55,30];
console.log(Math.max(...arr)); // 55
console.log(Math.min(...arr)); // 6
7.es5,es6,es7,es8
转自：https://blog.csdn.net/xuxuan1997/article/details/82153551
8.http 协议
转自：https://www.cnblogs.com/qdhxhz/p/8468913.html
https://www.cnblogs.com/ranyonsue/p/5984001.html
9.Vue实现数据双向绑定的原理：Object.defineProperty（）
vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。
vue的数据双向绑定 将MVVM作为数据绑定的入口，整合Observer，Compile和Watcher三者，通过Observer来监听自己的model的数据变化，通过Compile来解析编译模板指令（vue中是用来解析 {{}}），最终利用watcher搭起observer和Compile之间的通信桥梁，达到数据变化 —>视图更新；视图交互变化（input）—>数据model变更双向绑定效果。
https://www.jianshu.com/p/b1dd80f4d542
https://segmentfault.com/a/1190000016344599
//简单实例
<body>
<div id="app">
<input type="text" id="txt">
<p id="show"></p>
</div>
</body>
<script type="text/javascript">
var obj = {}
Object.defineProperty(obj, 'txt', {
get: function () {
return obj
},
set: function (newValue) {
document.getElementById('txt').value = newValue
document.getElementById('show').innerHTML = newValue
}
})
document.addEventListener('keyup', function (e) {
obj.txt = e.target.value
})
</script>
