前端面试题(含笔试)（一）

 1.判断字符串是这样组成的，第一个必须是字母，后面可以是字母，数字，下划线，总长度为5-20

    let reg = /^[a-zA-Z]\w{4,19}$/;
    console.log(reg.test('123'));     //false
    console.log(reg.test('s23faaw'));  //true
    console.log(reg.test('D234242a__dkjhfdfhskafgfdsgsf'));  //false
    console.log(reg.test('D23424$#@$@fhskafgfdsgsf'));    //false

2.截取字符串abcdefg中的efg
   

 let str1='abcdefg';
    let start=str1.indexOf('e');
    let newStr=str1.substring(start);
    console.log(newStr);

3.判断字符串中字符出现次数最多的字符，并统计次数
    //(把字符串放在json对象中，key为字符，value为出现的次数)
 

  let str2 ='abcbbccsdhwwcc';
    let oChar='';
    let obj={};
    for (let i =0 ;i<str2.length;i++){
        let count=1;
        oChar=str2.charAt(i);
        if (obj[oChar]) {
            continue;
        }
        for (let j =i+1;j<str2.length;j++){
            if (oChar===str2.charAt(j)){
                count++;
            }
        }
        obj[oChar]=count;
    }
    console.log(obj);
    //比较value选出最大值
    let max=1;
    let char='';
    for (let key in obj){
        if (max<obj[key]){
            max=obj[key];
            char=key;
        }

    }
    console.log('出现次数最多的字符是：'+char,'次数为：'+max);
    //出现次数最多的字符是：c 次数为：5

 4.编写一个方法，求一个字符串的字节长度
    //假设一个英文字符占一个字节，一个中文字符占两个字节
   

 let  str3='jsj定界符非金属矿';
    let len =str3.length;
    let bytes = len;
    for (let i = 0 ;i<len;i++){
        if (str3.charCodeAt(i)>255){
            bytes++;
        }
        console.log(str3.charCodeAt(i))
    }
    console.log(len);
    console.log(str3+'字节长度为'+bytes);

    //jsj定界符非金属矿字节长度为17

 5.数组去重
 

  // 方法一
    let arr=[1,23,22,21,1,2,2,23];
    let set2 = new Set(arr);
    let newArr = Array.from(set2);
    console.log(newArr)
    // 方法二
    for (let i = 0; i<arr.length;i++){
        for (let j =i+1;j<arr.length;j++){
            if (arr[i]===arr[j]){
                arr.splice(j,1);
                j--;
            }
        }
    }
    console.log(arr)
    /*Array(5)
    0: 1
    1: 23
    2: 22
    3: 21
    4: 2
    length: 5__proto__: Array(0)
*/

 

6.写出3个典型的this使用 

    /*
    * <1> 多个相同DOM元素绑定相同事件时，例如多个button绑定onclick事件，需要this指向点击事件发生的button元素
    * <2>在react中组件中自定义方法的实现需要改变this的指向该组件
    * <3>在构造函数中：constructor（）{this.name=name;this.age=age...}
    *
    *
    * */

7.规避javascript中多人开发函数重名的问题 

    /*
    *<1> 把方法写在类里，只要注意类名不同就行
    * <2> 提前人员沟通好命名规范，在自己那部分的开发的函数命名加上唯一的前缀
    *
    * */

8.javascript中面向对象继承的实现 

    // es5
      function Parent(name,age) {
          //console.log(this);
          this.name=name;
          this.age =age;
      }
      Parent.prototype.getCount = function () {
          console.log('我是父方法')
      }
      function Child(job) {
          //console.log(this);
          Parent.call(this,'张三',18,);
          this.job=job
      }
      for (let key in Parent.prototype){
          Child.prototype[key]=Parent.prototype[key];
      }
      Child.prototype.getChild= function () {
          console.log('我是子方法')
      };
      let ch = new Child('student');
      console.log(ch)

结果 

// es6
    class Parent2{
          constructor(name,age){
              this.name = name;
              this.age=age
          }
          getCount(){
              console.log('我是父方法')
          }
    }
    class Child2 extends Parent2{
          constructor(name,age,job){
              super(name,age);
              this.job = job;
          }
          getChlid(){
              console.log('我是子方法')
          }
    }

    let ch2 = new Child2('李四',19,'student');
      ch2.getCount();
    console.log(ch2);

结果

9.火狐浏览器下和IE浏览器下事件兼容问题

    <1>在火狐浏览器下必须传入一个参数ev，在其他浏览器下不用 因此做兼容性处理
       

    function fn1(ev) {
              var  ev = window.event || ev;
            }

    /<2> event 的事件源，IE为ev.srcElement ,火狐为ev.target
           

 function fn2(ev) {
               var ev = window.event || ev;
               var  _this = ev.srcElement || ev.target;
            }

    /<3>事件监听，
        （1） 火狐为element.addEventListener('事件名称不加on',要做的事fn，是否捕获)正序             执行，this指向element
        （2）低版本的IE为element.attachEvent('事件名称'，function)倒序执行，this指向                   window，用事件源来解决
    <4>事件冒泡
        (1) 标准浏览器低版本,IE不支持 ev.stopPropagation()
        (2)标准浏览器 ev.cancelable=true
         

   function fn3(ev) {
               var ev = window.event || ev;
                if (ev.stopPropagation()){
                    ev.stopPropagation()
                } else{
                    ev.cancelable=true;
                }
            }

     <5>事件取消
        (1)标准浏览器 ：element.removeEventListener('事件名称不加on',要做的事fn，是否           捕获(与前面保持一致))
        (2)IE:detachEvent('事件名称'，function)
     <6>阻止事件的默认行为
         （1）标准浏览器低版本,IE不支持：ev.preventDefault();
        （2)标准浏览器:ev.returnValue=false;或者（return false）
       

 function fn4(ev) {
          var   ev = window.event || ev;
            if (ev.preventDefault()){
                ev.preventDefault()
            } else{
                ev.returnValue=false;
            }
        }

    <7>只有标准浏览器下才有事件捕获，阻止事件捕获 ev.stop.ImmediatePropagation()

 

10.如何显示和隐藏一个DOM元素

    element.style.display='block';
    element.style.display='none';