前端知识点汇总（来自b站视频分享）

• 1、css 三角形角标  {案例蓝色箭头朝下}
•        div{ width:0; height:0; border-width:10px; border-color:blue transparent transparent transparent;border-style:solid dashed dashed dashed；}     
• 2、水平垂直居中
•       div{ width:100px;
            height:100px;
•             position:absolute;
•             top:0;
•             right:0;
•             bottom:0;
•             margin:auto;
•           } 
•       父级控制子集居中 .parent{ display:flex; justify-content:center; align-items:center;}
• 3、css 一行文本超出
•       { overflow:hidden;
•         text-overflow:ellipsis;
•         white-space:nowrap;
•       }
• 4、多行文本超出显示
•      { display:-webkit-box;
•        -webkot-box-orient:vertical;
•        -webkit-line-damp:3;
•        overflow:hidden;
•      }
• 5、ios手机容器滚动条滑动不流畅
•      {overflow:auto;
•      -webkit-overflow-scrowing:touch;
•      }
• 6、解决ios audio无法自动播放、循环不播放的问题
•      var music = document.getElementById('video');
•      var state = 0;
•      document.addElementListener('touchstart',function(){ 
•              if(state == 0){
•                 music.play();
•                 state = 1;
•              }
•      },false);
•     document.addElementListener('weixinJSBridgeReady',function(){
•          music.play();
•     },false);
•     循环播放
•     music.onended = function(){
•          music.load();
•          music.play();
•     }
• 7、contenteditable  <div contenteditable="true"></div>  通过这个属性把标签变为可编辑状态只有input事件没有change事件也不能像表单一样通过maxlength控制最大长度
• 8、calc 
•       div{width:calc(25%-20px); }
• 9、Date   获取当前时间毫秒值     方式一   Date.now()  方式二 new  Date（）- 0   方式三  new Date().getTime()   
•                 创建date对象兼容性问题    //window和安卓支持，ios和mac不支持 new Date('2021-11-20')  //window和安卓支持，ios和mac支持 new Date('2021/11/20')    
• 10、解析get参数    通过replace方式获取url中的参数键值对，可以快速解析get参数
•         const q = {};
•         location.search.replace(/([^?&=]+)=([^&]+]/g,(_,k,v)=>q[k]=v));
•         console.log(q);
• 11、解析连接url   //快速创建a标签  const aEle = document.createElement('a')   
•                              //给a标签赋值href路径   aEle.href = '/test.html'; 
•                              //访问aEle中属性 
•                                                               aEle.protocol;//获取协议
•                                                               aEle.pathname;获取path
•                                                                。。。。。。。。。。。
• 12、Object.keys,values,entries
•        const obj = {name:'ch',age:'20'};
•          Object.keys(obj); //['name','age']
•          Object.values(obj); //['ch','20']
•          const l = Object.entries(obj); //[[name:'ch'],['age':'20']]  obj对象转换为数组
•          const m = new Map(l)  转换为map
• 13、合并空运算符
•         const name = ''
•         console.log(name || 'ch')   //ch  给系统默认值用法
•         console.log(name ?? 'ch')   //''
•