前端知识总结

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

//简单实例

    

你可能感兴趣的:(前端知识总结)