2021 js面试题

作者: 莫名点 | 来源:发表于2021-10-08 22:00 被阅读0次

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 js面试题

1.面向对象特性

2.闭包

3.事件流（事件循环）

4. 防抖，节流

5. let, const, var 的区别

6. call, apply, bind 的区别

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

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

9. 高阶函数

10.函数的柯里化

11. ES6 新特性用过哪些

12. 数组的操作

13.对象的操作

14.字符串的操作

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

16.数组排序

冒泡排序

快速排序

17.数组扁平化

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

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

20.怎样同步调用接口

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

22.ajax和axios的区别

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

2021 js面试题

1.面向对象特性

2.闭包

3.事件流（事件循环）

4. 防抖，节流

5. let, const, var 的区别

6. call, apply, bind 的区别

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

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

9. 高阶函数

10.函数的柯里化

11. ES6 新特性用过哪些

12. 数组的操作

13.对象的操作

14.字符串的操作

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

16.数组排序

冒泡排序

快速排序

17.数组扁平化

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

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

20.怎样同步调用接口

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

22.ajax和axios的区别

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

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