2021 js面试题

1.面向对象特性

继承
1.1 原型链继承

function SuperType() {
  this.property = true;
}

SuperType.prototype.getSuperValue = function () {
  return this.property;
}

function SubType() {
  this.subproperty = false;
}

// 继承了SuperType
SubType.prototype = new SuperType();

// 添加新方法
SubType.prototype.getSubValue = function() {
  return this.subproperty;
}

// 重写超类型中的值
SubType.prototype.property = '重写后的值'

// 重写超类型方法
SubType.prototype.getSuperValue = function() {
  return this.property;
}

let instance = new SubType();
console.log(instance.getSuperValue()) // 重写后的值
instance.property = false;
console.log(instance.getSuperValue()) // false

缺点：1.包含引用类型值的原型属性会被所有的实例共享，这会导致对一个实例的修改会影响另一个实例
2.在创建子类型的实例时，不能向超类型的构造函数传递参数

1.2 构造函数继承

function SuperType(name) {
  this.name = name;
}

function SubType() {
  SuperType.call(this, '小明');
  this.age = 19
}

let instance = new SubType();
console.log(instance.name); // 小明
console.log(instance.age); // 19

缺点：1.无法避免构造函数模式存在的问题，方法都在构造函数中定义，因此无法复用函数；
2.在超类型的原型中定义方法，对于子类型而言是不常见的

1.3 组合继承

function SuperType(name) {
  this.name = name;
  this.colors = [1,2,3];
}

SuperType.prototype.sayName = function() {
  console.log(this.name);
}

function SubType(name, age) {
  // 继承属性
  SuperType.call(this, name)
  this.age = age;
}
// 继承方法
SubType.prototype = new SuperType()

SubType.prototype.constructor = SubType;

SubType.prototype.sayAge = function() {
  console.log(this.age);
}

let instance = new SubType('小红', 18);
instance.colors.push(4)
console.log(instance.colors); // [1,2,3,4]
instance.sayName() // 小红
instance.sayAge() // 18

let instance1 = new SubType('小蓝', 28);
console.log(instance.colors); // [1,2,3]
instance.sayName() // 小蓝
instance.sayAge() // 28

缺点： 1.无论什么情况下，都会调用两次超类型构造函数，一次是在创建子类型的时候，一次是在子类型构造函数内部

1.4 原型式继承

function object(o) {
            function F() {}
            F.prototype = o;
            return new F();
        }
        let person = {
            name: '张三',
            friends: ['李四','xiaoming', 'xiaohong']
        }
    
        var another = object(person); // 传入一个参数的情况下object()
        var anotherOne = Object.create(person); // Object.create(person, {name: {value: '张大三'}})
        console.log(another.name)
        another.name = '张小三'
        another.friends.push('231')
        console.log(another.name)
        console.log(another.friends)

缺点：包含引用类型的属性始终都会共享相应的值，就像是用原型模式一样

1.5 寄生式继承

    function object(o) {
            function F() {}
            F.prototype = o;
            return new F();
        }
        let person = {
            name: '张三',
            friends: ['李四','xiaoming', 'xiaohong']
        }

        function createAnother (original) {
            var clone = object(original);
            clone.sayHi = function() {
                console.log('hi')
            }
            return clone;
        }
        var anotherTwo = createAnother()
        anotherTwo.sayHi() // hi

缺点：使用寄生式继承来为对象添加函数，会因为做不到复用而降低使用效率，这个与构造函数类似

1.6 寄生组合式继承

封装
多态
抽象

2.闭包

3.事件流（事件循环）

同步任务
异步任务
2.1 异步宏任务
2.2 异步微任务

new Promise(resolve => {
    console.log(1)
    setTimeout(() => {
      console.log(2)
    },0)
     new Promise((res =>{
        res(); 
        console.log(7)
      } )).then(() => {console.log(3)})
    resolve()
    console.log(4)
  }).then(() => {
    console.log(5)
  })
  console.log(6)
// 1-7-4-6-3-5-2

4. 防抖，节流

防抖：

function debounce(fn,delay){
    let timer = null //借助闭包
    return function() {
        if(timer){
            clearTimeout(timer) //进入该分支语句，说明当前正在一个计时过程中，并且又触发了相同事件。所以要取消当前的计时，重新开始计时
            timer = setTimeout(fn,delay) 
        }else{
            timer = setTimeout(fn,delay) // 进入该分支说明当前并没有在计时，那么就开始一个计时
        }
    }
}

节流：

function throttle(fn,delay){
    let valid = true
    return function() {
       if(!valid){
           //休息时间 暂不接客
           return false 
       }
       // 工作时间，执行函数并且在间隔期内把状态位设为无效
        valid = false
        setTimeout(() => {
            fn()
            valid = true;
        }, delay)
    }
}

5. let, const, var 的区别

6. call, apply, bind 的区别

call, apply 立即执行 bind 是函数调用执行
call bind 是依次传入， apply是传入数组

7. 浏览器强缓存，协商缓存区别

1.协商缓存会请求服务器验证是否过期，状态码为304
2.强缓存不会向服务器发送验证

8.阻止冒泡，阻止事件捕获

9. 高阶函数

由函数作为参数的函数为高阶函数

10.函数的柯里化

11. ES6 新特性用过哪些

Promise解决了回调地狱问题,
async/ await 异步调用

12. 数组的操作

13.对象的操作

如何判断是否是对象和数组

14.字符串的操作

15.如何将数字转成千分位格式

function getNum(str) {
// arr.toLocaleString() // 1,234,567,899,999
  let arr = str.toString();
  let num = ''
  let typeNum = 0
  for (let i = arr.length; i > 0; i--){
    typeNum++
    if(typeNum%3===0){
      num = ','+arr[i-1] + num
    } else{
      num = arr[i-1]+num
    }
  }
  return num
}
console.log(getNum(1234567899999)) // 1,234,567,899,999

16.数组排序

冒泡排序

let arr = [4,1,7,2,5,9,8,6,3]
for (let i = 0; i < arr.length; i++) {
  for(let j =0; j < arr.length-i-1; j++ ) {
    if(arr[j] < arr[j+1]) {
      let temp = arr[j];
      arr[j] = arr[j+1];
      arr[j+1] = temp
    }
  } 
}

console.log(arr, arr.length) //  [9, 8, 7, 6, 5, 4, 3, 2, 1]

快速排序


function sort(arr){
  if(arr.length <=1){
    return arr;
  }
  let center = Math.floor(arr.length/2)
  let centerNum = arr.splice(center, 1)[0]
  let left = [];
  let right =[];
  for (let i = 0; i < arr.length; i++) {
    if(arr[i]< centerNum) {
      left.push(arr[i])
    } else{
      right.push(arr[i])
    }
  }
  // return sort(left).concat([centerNum],sort(right))
  return [...sort(left), centerNum, ...sort(right)]
}
console.log(sort([4,1,7])) //  [1, 4, 7]

17.数组扁平化

let arr = [1,2,[3,4,[7,["a","C"],8],0,9]]
  console.log(arr.flat(Infinity));// [1, 2, 3, 4, 7, 'a', 'C', 8, 0, 9]
  function flatten(arr) {
    var res = [];
    arr.map(item => {
        if(Array.isArray(item)) {
            res = res.concat(flatten(item));
        } else {
            res.push(item);
        }
    });
    return res;
}
  
  console.log(flatten(arr)); // [1, 2, 3, 4, 7, 'a', 'C', 8, 0, 9]

18.变量提升，函数提升问题

函数提升优先级大于变量提升

19.缓存sessionStorge有时没有是怎么回事，过期时间问题

有时重新打开一个新窗口的时候会导致sessionStorge丢失

20.怎样同步调用接口

21.如何监听移动端横屏竖屏




  
  
  
  Document
  


  123

22.ajax和axios的区别

axios是基于Promise封装的

23.浏览器输入url到页面打开经历了什么？

1.浏览器检查对于这个url是否有缓存；有的话直接加载缓存
2.DNS解析url的ip.
a).浏览器查找本地hosts文件是否有这个网址映射关系，如果有就调用这个IP地址映射，完成域名解析;
b).如果没找到则会查找本地DNS解析器缓存，如果查找到则返回。
c).如果还是没有找到则会查找本地DNS服务器，如果查找到则返回。
3.建立TCP连接
4.浏览器向服务器发送HTTP请求
5.浏览器接收响应
6.页面渲染
a).解析和渲染。在渲染页面之前，需要构建DOM树和CSSOM树。