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. 防抖，节流

防抖： $\color{red}{短时间内大量触发同一事件，只会执行一次函数}$

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

节流： $\color{red}{短时间内大量触发同一事件，那再函数执行之后，该函数在指定的时间期限内}$ $\color{red}{不在工作，直至过了这段时间才重新生效}$

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.如何监听移动端横屏竖屏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 横屏 */
    @media (orientation:landscape) {
      
    }
    /* 竖屏 */
    @media (orientation:portrait) {
      
    }
  </style>
</head>
<body>
  123
</body>
<script>
  window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
  if (window.orientation === 180 || window.orientation === 0) { 
    console.log('竖屏状态');
  } 
  if(window.orientation==90||window.orientation==-90){
    console.log("横屏状态");
  }
}, false);
</script>
</html>

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树。

最后编辑于：2021.10.28 09:35:49

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 213,616评论 6赞 492
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 91,020评论 3赞 387
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 159,078评论 0赞 349
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 57,040评论 1赞 285
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 66,154评论 6赞 385
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 50,265评论 1赞 292
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 39,298评论 3赞 412
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,072评论 0赞 268
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 44,491评论 1赞 306
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 36,795评论 2赞 328
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 38,970评论 1赞 341
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 34,654评论 4赞 337
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,272评论 3赞 318
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,985评论 0赞 21
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,223评论 1赞 267
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 46,815评论 2赞 365
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 43,852评论 2赞 351