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(ab){
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;iarr[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
//简单实例