0


【Web前端面试】葵花宝典(2022版本)——JS篇(下)

在这里插入图片描述

文章目录

🍉前言

本篇文章主要写的是前端高频面试题JavaScript篇(下),如果有需要

http/html/浏览器

方面面试题的小伙伴们,请在下方评论区留言,有时间我会去更新一篇相关面试题。如果没有的话,下一篇预备更新 前端高频面试题vue篇

面试题参考文章:

  • 【Web前端面试】葵花宝典(2022版本)——CSS篇
  • 【Web前端面试】葵花宝典(2022版本)——JS篇(上)

🍊正文

1.如何判断一个数组的方法有哪些

// 方法一:从原型入手Array.prototype.isPrototypeOf(obj)
// 方法二:从构造函数入手
obj instanceofArray
// 方法三:跨原型链调用toString()Object.prototype.toString.call(obj)
// 方法四:Array.isArray()
Array.isArray()

2. JS 基本数据类型

基本数据类型:

undefined

null

number

boolean

string

symbol

3. JS 深度拷贝一个元素的具体实现

vardeepCopy=function(obj){if(typeof obj !=='object')return;var newObj = obj instanceofArray?[]:{};for(var key in obj){if(obj.hasOwnProperty(key)){
            newObj[key]=typeof obj[key]==='object'?deepCopy(obj[key]): obj[key];}}return newObj;}

4.跨域的原理

跨域,是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对 JavaScript 实施的安全限制,那么只要协议、域名、端口有任何一个不同,都被当 作是不同的域。

跨域原理,即是通过各种方式,避开浏览器的安全限制。

5. null == undefined为什么

要比较相等性之前,不能将 null 和 undefined 转换成其他任何值,但 null == undefined 会返回 true 。ECMAScript 规范中是这样定义的。

6. This关键字的指向有哪些

详解请参考如下链接:

JavaScript中this四种绑定规则优先级比较与箭头函数中的this获取

7.“暂时性死区”是什么?

在代码块内,使用 let、const 命令声明变量之前,该变量都是不可用的。这在语法上, 称为“暂时性死区”

8.什么是按需加载

当用户触发了动作时才加载对应的功能。触发的动作,是要看具体的业务场景而言,包括但不限于以下几个情况:鼠标点击、输入文字、拉动滚动条,鼠标移动、窗口大小更 改等。加载的文件,可以是 JS、图片、CSS、HTML 等。

9. webpack 用来干什么的

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时,它会递归地构建一个依赖关系图(dependency graph),其中包 含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个 bundle。

10. ant-design 优点和缺点

优点:组件非常全面,样式效果也都比较不错。

缺点:框架自定义程度低,默认UI风格修改困难。

11. JS 中继承实现的几种方式

1、原型链继承,将父类的实例作为子类的原型,他的特点是实例是子类的实例也是父 类的实例,父类新增的原型方法/属性,子类都能够访问,并且原型链继承简单易于实 现,缺点是来自原型对象的所有属性被所有实例共享,无法实现多继承,无法向父类构 造函数传参。

2、构造继承,使用父类的构造函数来增强子类实例,即复制父类的实例属性给子类, 构造继承可以向父类传递参数,可以实现多继承,通过 call 多个父类对象。但是构造继 承只能继承父类的实例属性和方法,不能继承原型属性和方法,无法实现函数服用,每 个子类都有父类实例函数的副本,影响性能

3、实例继承,为父类实例添加新特性,作为子类实例返回,实例继承的特点是不限制 调用方法,不管是 new 子类()还是子类()返回的对象具有相同的效果,缺点是实 例是父类的实例,不是子类的实例,不支持多继承

4、拷贝继承:特点:支持多继承,缺点:效率较低,内存占用高(因为要拷贝父类的 属性)无法获取父类不可枚举的方法(不可枚举方法,不能使用 for in 访问到)

5、组合继承:通过调用父类构造,继承父类的属性并保留传参的优点,然后通过将父 类实例作为子类原型,实现函数复用

6、寄生组合继承:通过寄生方式,砍掉父类的实例属性,这样,在调用两次父类的构 造的时候,就不会初始化两次实例方法/属性,避免的组合继承的缺点

12.写一个函数,第一秒打印1,第二秒打印2

for(let i =0; i <5; i++){setTimeout(function(){
        console.log(i)},1000* i)}

13.简单介绍一下 symbol

Symbol 是 ES6 的新增属性,代表用给定名称作为唯一标识,这种类型的值可以这样创 建,

let id=symbol(“id”)

Symbol 确保唯一,即使采用相同的名称,也会产生不同的值,我们创建一个字段,仅为 知道对应 symbol 的人能访问,使用 symbol 很有用,symbol 并不是 100%隐藏,有内置方 法

Object.getOwnPropertySymbols(obj)

可以获得所有的 symbol。

也有一个方法

Reflect.ownKeys(obj)

返回对象所有的键,包括 symbol。 所以并不是真正隐藏。但大多数库内置方法和语法结构遵循通用约定他们是隐藏的。

14.什么是事件监听

addEventListener
addEventListener()

方法,用于向指定元素添加事件句柄,它可以更简单的控制事件

语法:

element.addEventListener(event, function, useCapture)
  • 第一个参数是事件的类型(如 “click” 或 “mousedown”).
  • 第二个参数是事件触发后调用的函数。
  • 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

事件传递有两种方式,冒泡和捕获 。

事件传递定义了元素事件触发的顺序,如果你将 P 元素插入到 div 元素中,用户点击 P 元素, 在冒泡中,内部元素先被触发,然后再触发外部元素, 捕获中,外部元素先被触发,在触发内部元素。

15.介绍一下 promise,及其底层如何实现

Promise 是一个对象,保存着未来将要结束的事件,它有两个特征:

  • 对象的状态不受外部影响,Promise 对象代表一个异步操作,有三种状态,pending 进行中,fulfilled 已成功,rejected 已失败,只有异步操作的结果,才可以决定当前是哪 一种状态,任何其他操作都无法改变这个状态,这也就是 promise 名字的由来
  • 一旦状态改变,就不会再变,promise 对象状态改变只有两种可能,从 pending 改到fulfilled 或者从 pending 改到 rejected,只要这两种情况发生,状态就凝固了,不会再改 变,这个时候就称为定型 resolved

Promise的基本用法:

let promise1 =newPromise(function(resolve, reject){setTimeout(function(){resolve('ok')},1000)})
promise1.then(functionsuccess(val){
    console.log(val)})

16.说一下冒泡原理

事件冒泡,就是元素自身的事件被触发后,如果父元素有相同的事件,如

onclick 

事件, 那么元素本身的触发状态就会传递,也就是冒到父元素,父元素的相同事件也会一级一 级根据嵌套关系向外触发,直到

document/window

,冒泡过程结束。

17. JS 中 String 的

startsWith

indexof 

两种方法的

startsWith()

方法用来判断当前字符串是否以另外一个给定的子字符串开头,并根据判断结果返回

true

false

Indexof 

函数,

indexof 

函数可返回某个指定字符串在字符串中首次出现的位置。

18. JS 字符串转数字的方法

通过函数

parseInt()

,可解析一个字符串,并返回一个整数,语法为

parseInt(string ,radix)
  • string:被解析的字符串
  • radix:表示要解析的数字的基数,默认是十进制,如果 radix<2 或>36,则返回NaN

19. let、const、var的区别

  • var 声明的变量是全局或者整个函数块的
  • let、const声明的变量是块级的变量
  • var声明的变量存在变量提升,let、const不存在
  • let声明的变量允许重新赋值,const不允许

20.箭头函数与普通函数有什么区别

箭头函数与普通函数的区别在于:

  • 箭头函数没有 this,所以需要通过查找作用域链来确定 this 的值,这就意味着如果箭 头函数被非箭头函数包含,this 绑定的就是最近一层非箭头函数的 this
  • 箭头函数没有自己的 arguments对象,但是可以访问外围函数的 arguments 对象
  • 不能通过 new 关键字调用,同样也没有 new.target 值和原型

21.平时是怎么调试 JS 的

  • 一般是用浏览器自带的控制台
  • node终端

22.

setTimeout(fn,100);

100毫秒是如何权衡的

 setTimeout()

函数只是将事件插入了任务列表,必须等到当前代码执行完,主线程才会去执行它指定的回调函数,有可能要等很久,所以没有办法保证回调函数一定会在

setTimeout 

指定的时间内执行,100 毫秒是插入队列的时间+等待的时间。

23.怎么获得对象上的属性:比如说通过

Object.key()

从 ES5 开始,有三种方法可以列出对象的属性

  • for(let i in obj):该方法依次访问一个对象及其原型链中所有可枚举的类型
  • object.keys:返回一个数组,包括所有可枚举的属性名称
  • object.getOwnPropertyNames:返回一个数组包含不可枚举的属性

24. call 和 apply 是用来做什么的?

call 和 apply 的作用是一模一样的,只是传参的形式有区别而已

  • 改变 this 的指向
  • 借用别的对象的方法
  • 调用函数,因为 apply,call 方法会使函数立即执

25.了解事件代理吗,这样做有什么好处

事件代理/事件委托:利用了事件冒泡,只指定一个事件处理程序,就可以管理某一类 型的事件。

简而言之:事件代理就是说我们将事件添加到本来要添加的事件的父节点,将事件委托给父节点来触发处理函数,这通常会使用在大量的同级元素需要添加同一类事件的时候, 比如一个动态的非常多的列表,需要为每个列表项都添加点击事件,这时就可以使用事 件代理,通过判断

e.target.nodeName

来判断发生的具体元素,这样做的好处是减少事件 绑定,同事动态的 DOM 结构任然可以监听,事件代理发生在冒泡阶段

26.知道 private 和 public 吗

  • public 表明该数据成员、成员函数是对所有用户开放的,所有用户都可以直接进行调用
  • private 表示私有,私有的意思就是除了 class 自己之外,任何人都不可以直接使用

27.

async 

await 

具体该怎么用?

(async()=>{awaitnewpromise();})()

28.知道哪些 ES6,ES7 的语法

promise

await/async

let

const

、块级作用域、箭头函数

29.

promise 

await/async

的关

都是异步编程的解决方案

30. JS 加载过程阻塞,解决方法

指定 script 标签的 async 属性。

如果

 async="async"

,脚本相对于页面的其余部分异步地执行(当页面继续进行解析时, 脚本将被执行)

如果不使用 async 且

 defer="defer"

:脚本将在页面完成解析时执行

31. JavaScript 中的轮播实现原理?假如一个页面上有两个轮播,你会怎么实现?

图片轮播的原理就是图片排成一行,然后准备一个只有一张图片大小的容器,对这个容 器设置超出部分隐藏,在控制定时器来让这些图片整体左移或右移,这样呈现出来的效 果就是图片在轮播了。

如果有两个轮播,可封装一个轮播组件,供两处调用。

32.引用类型常见的对象

Object、Array、RegExp、Date、Function、特殊的基本包装类型(String、Number、Boolean) 以及单体内置对象(Global、Math)等

33. Class(类)

ES6 提供了更接近传统语法的写法,引入了 Class (类)这个概念,作为对象的模板。通过class关键字,可以定义类。

34. new操作符原理

  1. 创建一个类的实例:创建一个空对象 obj,然后把这个空对象的__proto__设置为构造 函数的 prototype
  2. 初始化实例:构造函数被传入参数并调用,关键字 this 被设定指向该实例obj
  3. 返回示例obj

35.说 promise,没有 promise怎么办

没有

promise 

可以使用回调函数代替。

36.事件委托

把一个元素响应事件(

click

keydown

……)的函数委托到另一个元素;

优点:减少内存消耗、动态绑定事件。

37.

arguments

arguments是类数组对象,有length属性,不能调用数组方法

可以用

Array.from()

转换

更详细内容请看:JavaScript中的Arguments对象


🎃专栏分享:

 JavaScript相关面试题就更新到这里啦,相关 Web前端面试题 可以订阅专栏哦

🥰
专栏地址:《面试必看》


      名
     
     
      言
     
     
      警
     
     
      句
     
     
      :
     
     
      说
     
     
      能
     
     
      做
     
     
      的
     
     
      做
     
     
      说
     
     
      过
     
     
      的
     
    
   
   
    \textcolor{red} {名言警句:说能做的做说过的}
   
  
 名言警句:说能做的做说过的

      原
     
     
      创
     
     
      不
     
     
      易
     
     
      ,
     
     
      还
     
     
      希
     
     
      望
     
     
      各
     
     
      位
     
     
      大
     
     
      佬
     
     
      支
     
     
      持
     
     
      一
     
     
      下
     
    
   
   
    \textcolor{blue}{原创不易,还希望各位大佬支持一下}
   
  
 原创不易,还希望各位大佬支持一下

👍

      点
     
     
      赞
     
     
      ,
     
     
      你
     
     
      的
     
     
      认
     
     
      可
     
     
      是
     
     
      我
     
     
      创
     
     
      作
     
     
      的
     
     
      动
     
     
      力
     
     
      !
     
    
   
   
    \textcolor{green}{点赞,你的认可是我创作的动力!}
   
  
 点赞,你的认可是我创作的动力!

⭐️

      收
     
     
      藏
     
     
      ,
     
     
      你
     
     
      的
     
     
      青
     
     
      睐
     
     
      是
     
     
      我
     
     
      努
     
     
      力
     
     
      的
     
     
      方
     
     
      向
     
     
      !
     
    
   
   
    \textcolor{green}{收藏,你的青睐是我努力的方向!}
   
  
 收藏,你的青睐是我努力的方向!

✏️

      评
     
     
      论
     
     
      ,
     
     
      你
     
     
      的
     
     
      意
     
     
      见
     
     
      是
     
     
      我
     
     
      进
     
     
      步
     
     
      的
     
     
      财
     
     
      富
     
     
      !
     
    
   
   
    \textcolor{green}{评论,你的意见是我进步的财富!}
   
  
 评论,你的意见是我进步的财富!

本文转载自: https://blog.csdn.net/qq_49002903/article/details/125253729
版权归原作者 不苒 所有, 如有侵权,请联系我们删除。

“【Web前端面试】葵花宝典(2022版本)&mdash;&mdash;JS篇(下)”的评论:

还没有评论