19年面试总结

基础知识点

 

1.水平垂直居中

1. 子绝父相,子盒子设置绝对定位,设置top:50%;left:50%,margin-top:-50%;margin-left:-50%;
2. 子绝父相,子盒子设置绝对定位,设置 left & top & right & bottom为0;margin: auto;
3. 伸缩盒子,父元素设置flex;justify-content: center;align-items: center;
4. 利用transform属性,需要设置子绝父相,设置top:50%;left:50%;transform:translate(-50%, -50%);

2.圣杯布局

1. 中间盒子设置宽度100%,左右margin,留出左右盒子的位置
2. 左右盒子在通过定位至左右

3.兼容性问题

1. 标签样式在不同的浏览器各自的margin 和padding差异较大, 解决方案：css里 *{margin:0;padding:0;}
2. 当在a标签中嵌套img标签时，在某些浏览器中img会有蓝色边框；解决方案：给img添加border：0；或者是border：none；
3. 图片默认有间;隙解决方案：1）给img标签添加左浮动float：left；2）给img标签添加display：block。

 

4.清除浮动的方法？（重点）
      1.父级div定义height
      2.结尾处家空div标签clear:both
      3.父级div定义 伪类:after和zoom
     4.父级div定义 overflow:hidden

 

5.前端优化技巧

1. 压缩css，js，图片
   2.减少http请求次数，合并css，js 合并图片（雪碧图）
   3.使用cdn
   4.减少dom元素数量
   5.图片懒加载
   6.静态资源另外用无cookie得域名
   7.减少dom的访问（缓存dom）
   8.巧用事件委托
   9.样式表置顶，脚本置低

6.this指向问题

　　一般来说,谁调用,this就指向谁,特殊情况除外

　　普通函数调用，此时 this 指向 window

　　定时器函数， 此时 this 指向 window

更改this指向的三个方法

　　1.call( )方法调用一个函数,其具有一个指定的this值

　　　　fn.call(改变其this指向, [指定的参数] ) 如果指定了null或者undefired,则内部this指向window

　　　　应用场景:①借用构造函数

　　　　　　　　②借用其他对象的方法

　　2.apply( )方法调用一个函数,其具有一个指定的this值,作为一个数组提供的参数

　　　　fn.apply(var1, var2) 应用:把数组展开

　　　　应用场景:把数组展开,传递给调用的方法

　　3.bind 不会调用函数,会返回一个新的函数

　　　　应用场景:①改变定时器内部的this,②改变事件处理函数的this

 

7、json字符串转化方法

json.parse(str); //由json字符串转换为json对象

json.stringify(obj); //将json对象转化为json字符

 

进阶知识点

 

1、设置分页符

 1 function farmat(mun) {
 2         if (mun === null) return;
 3         var m = parseint(mun).tostring();
 4         var len = m.length;
 5         if (len <= 3) return m;
 6         var n = len % 3;
 7         if (n > 0) {
 8             return m.slice(0,n)+","+m.slice(n,len).match(/\d{3}/g).join(",")
 9         } else {
10             return m.slice(n,len).match(/\d{3}/g).join(",")
11         }
12     }
13     var a =farmat(1000000)
14     console.log(a);

 

2、只能输入数字和小数点

1 function clearnonum(obj){ 
2     obj.value = obj.value.replace(/[^\d.]/g,"");  //清除“数字”和“.”以外的字符  
3     obj.value = obj.value.replace(/\.{2,}/g,"."); //只保留第一个. 清除多余的  
4     obj.value = obj.value.replace(".","$#$").replace(/\./g,"").replace("$#$","."); 
5     obj.value = obj.value.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3');//只能输入两个小数  
6     if(obj.value.indexof(".")< 0 && obj.value !=""){//以上已经过滤，此处控制的是如果没有小数点，首位不能为类似于 01、02的金额 
7         obj.value= parsefloat(obj.value); 
8     } 
9 }

 

4、统计每一个字符串出现的次数

 1 //字符串
 2 var strs = "asdasdadd";
 3         function getmaxstr(str){
 4             if(str.length == 1){return str;}
 5             var newarr = [];
 6             for(var i = 0 ; ss= str.length, i<ss; i++ ){
 7                 if(!newarr[str.charat(i)]){
 8                     newarr[str.charat(i)] = 1;
 9                 }else{
10                     newarr[str.charat(i)] +=1;
11                 }
12             }
13             console.log(newarr);
14             var maxkey='';
15             var maxvalue=1;//设定一个值
16             for(var k in newarr){
17                 if(newarr[k]> maxvalue){//根据这个值做判读 将数组中的每个元素 与这个值做比较！ 如果大于他，那么将住宿
18                     maxvalue = newarr[k];//出现的次数
19                     maxkey = k;//次数最多的 字母
20                 }
21             }
22             console.log(maxkey);
23             return maxkey;
24         }
25         getmaxstr(strs);

 1 //数组
 2 var arr =["a","b","c","c","c","d"];
 3     array.prototype.diaohuan=function(arr){
 4         var newarr=[];
 5         for(var i = 0; i<this.length; i++){
 6             if(!newarr[this[i]] ){
 7                 newarr[this[i]] = 1;
 8             }else{
 9                 newarr[this[i]] +=1;
10             }
11         }
12         console.log(newarr);
13         var maxkey = 1;
14         var maxvalue ="";
15         for (var k in newarr){
16             if(newarr[k] > 1){
17                 maxvalue =newarr[k];
18                 maxkey = k;
19             }    
20         }
21         return maxkey;
22         console.log(maxvalue);
23     }
24       alert(arr.diaohuan());

 

高难度知识点

 

怎样引入一个第三方的包？

 

require与import的区别：

 

遵循规范：
require 是 amd规范引入方式
import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法

调用时间：
require是运行时调用，所以require理论上可以运用在代码的任何地方
import是编译时调用，所以必须放在文件开头

本质：
require是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把require的 
结果赋值给某个变量
import是解构过程，但是目前所有的引擎都还没有实现import，我们在node中使用babel支持 
es6，也仅仅是将es6转码为es5再执行，import语法会被转码为require

 

在那调用第三方支付接口？为什么？

 

前端调接口和后端调接口各有什么区别，优势与特点

一般支付接口都是由后端和支付单位联系调取的,前端调接口容易被劫持,不安全.