盘点前端易混淆的面试题精选

下面代码执行后是什么

   <ul id='list'>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>
<script>
  var items = document.querySelectorAll('#list>li');
  for (var i = 0; i < items.length; i++) {

    setTimeout(function () {
      items[i].style.backgroundColor = '#fee'; //报错
    }, 5);
  }
</script>

输出的内容是什么

  var foo = '11' + 2 - '1'
  console.log(foo)   //  111    加法做字符串拼接，减法做数字运算
  console.log(typeof foo)   // number  一个是number，一个是string时，会尝试将string转换为number

  var a = null
  alert(typeof a) // object     null是一个只有一个值的数据类型， 这个值就是null， 表示一个空指针对象

   console.log(NaN == NaN)  // false
  // NaN：不是一个数字，既然两边都不是一个数字，怎么会相等

  var obj = ();
  var obj = //; 
// 都报错，就没这种写法

 console.log(null instanceof Object) //  false

  var arr = new Array(1, 3, 5);
  arr[4] = 'z'; //[1,3,5,undefined,’z’]
  arr2 = arr.reverse(); //arr2=[’z’,undefined,5,3,1];
  //arr=[’z’,undefined,5,3,1]
  arr3 = arr.concat(arr2);
  console.log(arr3);
  // 弹出提示对话框：z,,5,3,1,z,,5,3,1

  function f1() {
    var tmp = 1;
    this.x = 3;
    console.log(tmp); //1  第一次输出 第四次输出
    console.log(this.x) //3 第二次输出 第五次输出
  }
  var obj = new f1();
  console.log(obj.x) //  第三次输出 3
  console.log(f1()); // undefined 最后的返回值
  // 1  3  3  1  3  undefined
  // 执行 var obj = new f1(); 就有两次输出 1 3
  // 执行  console.log(obj.x)  当前实例对象就是 3 
  // 执行  console.log(f1()) f1() 调用 输出 1 和 3 ，最后需要有返回值 ，此时没有返回值就是 undefined

  var n = 0.3,
    m = 0.2,
    i = 0.2,
    j = 0.1;
  console.log(((n - m) == (i - j))); //false
  console.log(((n - m) == 0.1)); //false
  console.log(((i - j) == 0.1)); //true  减去一半等于剩下的一半当然正确  
  // 所有的浮点数计算都是不精确的，

  console.log('5' + 3); //53 string    +是做拼接
  console.log('5' + '3'); //53 string
  console.log('5' - 3); //2 number   -是做运算
  console.log('5' - '3'); //2 number

  console.log(8 | 2)  // 10  输出的结果是：进行相加后的值

  var iNum = 0;
  for (var i = 1; i < 10; i++) {
    if (i % 5 == 0) {
      continue; // 跳出此次循环，进入下一次循环
    }
    iNum++;
  }
  console.log(iNum)   //  8

随机产生10个随机数（10到100之间）追加到数组中并排序

    var arr = []
    for (let i = 0; i < 10; i++) {
      arr.push(Math.random() * 100 + 1)
    }
    arr.sort(function (a, b) {
      if (a > b) {
        return 1
      }
      if (a < b) {
        return -1
      }
      return 0
    })
    console.log(arr)

输出今天的日期，类型为yyyy-mm-dd

    var date = new Date()
    var year = date.getFullYear();
    var month = (date.getMonth() + 1).toString().padStart(2, '0');
    var day = (date.getDate()).toString().padStart(2, '0');
    console.log(year + '-' + month + '-' + day)

 

封装一个方法：解析url地址成一个对象

  String.prototype.urlQuery = function () {
    var url = this.split('?')[1].split('&')
    this.url = {}
    for (let i = 0; i < url.length; i++) {
      var cell = url[i].split('=')
      key = cell[0]
      value = cell[1]
      this.url['' + key] = value
    }
    return this.url
  }

给 String 对象添加一个方法，传入一个 string 类型的参数，然后将 string 的每个字符间价格空格返回

  String.prototype.spacify = function () {
    return this.split('').join(' ')
  }

  let str = 'hello word'
  console.log(str.spacify()); // h e l l o  w o r d 

将-转成驼峰写法

 var foo = 'get-element-by-id'

    function CamelCase(cc) {
      var arr = cc.split("-"); //[get,element,by,id]
      for (var i = 1; i < arr.length; i++) {
        arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substr(1, arr[i].length -1); //Element
      }
      cc = arr.join(""); //msg=” getElementById”
      return cc;
    }

    console.log(CamelCase(foo))

对特殊字符串进行转义

    function escapeHtml(str) {
      str.replace(/[><&"]/g, function (match) {
        switch (match) {
          case "<":
            return "&lt;"
            break
          case ">":
            return "&gt;"
            break
          case "\"":
            return "&quot;"
            break
          case "&":
            return "&amp;"
            break
        }
      })
    }

实现字符串的反转

    let str = 'abcdefg'
    console.log(str.split('').reverse().join(''))
    // 转成数组，用数组的反转方法，在join转成字符串

实现千位分隔符

  function format(num) {
    // 正则表达式匹配 以3个数字结尾出现了n次 前面1到3个数字出现0次或一次
    var reg = /\d{1,3}(?=(\d{3})+$)/g
    //  将形参替换成 千位分隔符形式
    return (num + '').replace(reg, '$&,')
  }

  var num = 123456789
  console.log(format(num))

 

判断字符串中出现次数最多的

    var str = 'sadsafnsaofsandsaodsadasdnmoasf'
    var json = {}
    for (let i = 0; i < str.length; i++) {
      if (!json[str.charAt(i)]) {
        json[str.charAt(i)] = 1
      } else {
        json[str.charAt(i)]++
      }
    }
    var iMax = 0 // 定义次数
    var iIndex = '' //定义出现最多的字符
    for (var i in json) {
      if (json[i] > iMax) {
        iMax = json[i]
        iIndex = i
      }
    }
    console.log('出现最多次的是' + iIndex + ';出现的次数是' + iMax)

 

定时器（会在js引擎空闲的时候在执行）

      // 正常输出 0 1 2 3 4
      for (var i = 0; i < 5; i++) {
        setInterval(
          // 定时器会在js引擎空闲的时候执行，
          (function() {
            // 改成立即执行函数
            console.log(i);
          })(), // 函数自调用
          200 * i
        );
      }