JS常见面试题总结-真实被问到的！

1、判断数据类型有几种方法

console.log(typeof 'abc')
//  string
console.log(Object.prototype.toString.call('abc'))
//  [object String]
console.log('abc'.constructor == String)
//  true

 

2、数据类型有哪些？

基本类型：String、Number、boolean、undefined、null

复杂类型：function、object、NaN、Array、regexp

 

3、字符串反转

var str = 'abcdef'.split('').reverse().join('')

 

4、什么是事件委托；

事件委托是利用冒泡，子标签的触发事件让父标签代替执行；

  //  html
<ul>
  <li>1</li>
  <li>2</li>
  <li>3<li>
</ul>
//  script
  var ul = document.querySelector('ul');
  ul.onclick = function(e){
    e.target.style.color = 'red'
  }

 

5、什么是闭包，有什么作用

        闭包就是能够记住当初所处作用域时候的变量，不管函数在哪里执行，都能够记住当初所处作用域时候的变量，并且会遮蔽新作用域的变量；

    1、可用作迭代器

    2、可预测状态容器

function fun (){
  let a = 10;
  return function(){
    return a ++;
  }
}
var inner = fun()
console.log(inner())//  10
console.log(inner())//  11

 

6、this的指向问题

JavaScript中this的8大指向详解！

 

7、请写出一个函数，清楚前后空格，所有浏览器都兼容

function trim(str) {
    if (str & typeof str === "string") {
        return str.replace(/(^s*)|(s*)$/g,""); //去除前后空白符
    }
}

 

8、获取url中的地址

console.log(window.location.href)

 

9、如何实现一个深克隆

const deepclone = (o) => {
  if(Array.isArray(o)){
    var arr = [];
    o.forEach(item => {
      arr.push(deepclone(item));
    });
    return arr;
  }else if(typeof o === "object"){
    var oo = {};
    for(var k in obj){
      oo[k] = deepclone(obj[k]);
    }
    return oo;
  }
  return o;
}

 

10、0.1+0.3等于多少

console.log(0.1+0.2)
//  0.30000000000000004

 

11、什么是优雅降级和渐进渐强？

    其实这是浏览器的两种方案

优雅降级：能力检测，如果能力有用新的；如果能力没有，用旧的。

    比如：

if（浏览器是高级浏览器）{
      使用<video>
    }else{
      使用flash
    }

渐进渐强： 

低端浏览器仅实现基本功能，高级浏览器实现额外功能。

比如上传文件，低端浏览器就给它提供上传按钮，高端浏览器增

 

12、substring 和 substr 和 slice 的区别是什么？

    substring(首位下标， 末位下标前1位)

    slice(首位下标， 末位下标前1位)

    substr(首位下标， 子串长度)

   

    slice能够用负数，但是不能颠倒参数位置

    substring不能用负数，但是会自动小数在前

 

13、如何实现小于 10px 的文字？

transform:scale(0.5);

 

14、输出今天的日期以 YYYY-MM-DD 形式显示？

const date = new Date();
  const y = date.getFullYear();
  const m = date.getMonth() + 1;
  const d = date.getDate();

  function buling(n){
    return n.toString().length == 1 ? '0' + n : n;
  }

  console.log(y + '-' + buling(m) + '-' + buling(d))

 

15、添加、移除、移动、复制、创建和查找节点

增加节点

createDocumentFragment() //创建一个DOM片段
createElement() //创建一个具体的元素
createTextNode() //创建一个文本节点

移除、替换、插入

removeChild() //移除
replaceChild() //替换
insertBefore() //插入

查找

getElementsByTagName() //通过标签名称
getElementsByName() //通过元素的Name属性的值
getElementById() //通过元素Id，唯一性

 

16、call和apply的区别

Object.call(this,obj1,obj2,obj3)
Object.apply(this,argument

 

17、实现一个对象更改后不会影响原来的对象

let obj = {a:1,b:2}
let newobj = JSON.parse(JSON.stringify(obj))
newobj.b = 5
console.log(obj)
console.log(newobj)

 

18、问：有一筐鸡蛋，1个1个能取完, 2个2个剩1个,3个3个剩1个,4个4个剩1个,5个5个剩1个,6个6个剩1个,7个7个可以取完；

for(let i = 0 ; i < 1000 ; i++){
  if( i % 1 == 0 &&
      i % 2 == 1 &&
      i % 3 == 1 &&
      i % 4 == 1 &&
      i % 5 == 1 &&
      i % 6 == 1 &&
      i % 7 == 0){
        console.log(i)
    }
  }

 

 如果大家喜欢的话，欢迎关注“前端伪大叔”我将为您不间断的分享前端学习知识！