2023年03月 其他-Web前端基础面试题（JS_33道）

Posted 2023-03-09 微软MVP Eleven

文章目录

• 一、JavaScript基础篇
• • 1、JavaScript 有几种数据类型
  • 2、怎么进行数据类型检测
  • 3、 get 请求传参长度的误区
  • 4、如何让事件先冒泡后捕获
  • 5、说一下事件委托？
  • 6、说一下图片的懒加载和预加载？
  • 7、mouseover 和 mouseenter 的区别？
  • 8、JS 的 new 操作符做了哪些事情？
  • 9、改变函数内部 this 指针的指向函数（bind，apply，call 的区别）
  • 10、箭头函数中this 指向举例？
  • 11、数组常用方法有哪些？
  • 12、说说数组去重？
  • 13、闭包有什么用？
  • 14、闭包的特点？
  • 15、JS 基本数据类型？
  • 16、this 的指向哪几种
  • 17、什么是暂停死区？
  • 18、什么是按需加载？
  • 19、什么是事件监听？
  • 20、什么是 js 的闭包？用闭包写个单例模式？
  • 21、深浅拷贝的区别和实现
  • 22、JS 中 string 的 startwith 和 indexof 两种方法的区别
  • 23、JS 字符串转数字的方法？
  • 24、构造函数是什么？
  • 25、构造函数的执行过程？
  • 26、构造函数this指向？
  • 27、什么是作用域？
  • 28、NaN 是什么，用 typeof 会输出什么？
  • 29、说说写JavaScript的基本规范？
  • 30、栈和堆的区别？
  • 31、null，undefined的区别？
  • 32、什么是===运算符？说明“==”和“===”之间的区别？
  • 33、break和continue语句的作用？

一、javascript基础篇

1、JavaScript 有几种数据类型

基本数据类型：undefined、null、boolean、number、string、symbol(es6的新数据类型)

引用数据类型：object、array、function

2、怎么进行数据类型检测

typeof可以检测 除了 null 以外的基础数据类型，typeof 对于对象来说，除了函数都会显示 objec

Object.prototype.toString.call()可以检测所有的数据类型

3、 get 请求传参长度的误区

我们经常说 get 请求参数的大小存在限制，而 post 请求的参数大小是无限制的。实际上 HTTP 协议从未规定 GET/POST 的请求长度限制是多少。对 get 请求参数的限制是来源与浏览器或 web 服务器，浏览器或 web 服务器限制了 url 的长度。为了明确这个概念，我们必须再次强调下面几点:

HTTP 协议 未规定 GET 和 POST 的长度限制

GET 的最大长度显示是因为 浏览器和 web 服务器限制了 URI 的长度

不同的浏览器和 WEB 服务器，限制的最大长度不一样

要支持 IE，则最大长度为 2083byte，若只支持 Chrome，则最大长度 8182byte

4、如何让事件先冒泡后捕获

在 DOM 标准事件模型中，是先捕获后冒泡。但是如果要实现先冒泡后捕获的效果，对于同一个事件，监听捕获和冒泡，分别对应相应的处理函数，监听到捕获事件，先暂缓执行，直到冒泡事件被捕获后再执行捕获之间。

5、说一下事件委托？

事件委托指的是，不在事件的发生地（直接 dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素 DOM 的类型，来做出不同的响应。

举例：最经典的就是 ul 和 li 标签的事件监听，比如我们在添加事件时候，采用事件委托机制，不会在 li 标签上直接添加，而是在 ul 父元素上添加。

好处：比较合适动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发机制。

6、说一下图片的懒加载和预加载？

预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。

懒加载：懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。

两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。

懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。

7、mouseover 和 mouseenter 的区别？

mouseover：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡的过程。对应的移除事件是 mouseout

mouseenter：当鼠标移除元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是 mouseleave

8、JS 的 new 操作符做了哪些事情？

new 操作符新建了一个空对象，这个对象原型指向构造函数的 prototype，执行构造函数后返回这个对象。

9、改变函数内部 this 指针的指向函数（bind，apply，call 的区别）

通过 apply 和 call 改变函数的 this 指向，他们两个函数的第一个参数都是一样的表示要改变指向的那个对象，第二个参数，apply 是数组，而 call 则是 arg1,arg2…这种形式。通过 bind 改变 this 作用域会返回一个新的函数，这个函数不会马上执行。

10、箭头函数中this 指向举例？

var a=11;

function test2()

this.a=22;

let b=()=>console.log(this.a)

b();

var x=new test2();

//输出 22

定义时绑定。

11、数组常用方法有哪些？

push()，pop()，shift()，unshift()，splice()，sort()，reverse()，map()等

12、说说数组去重？

法一：indexOf 循环去重

法二：ES6 Set 去重；Array.from(new Set(array))

法三：Object 键值对去重；把数组的值存成 Object 的 key 值，比如 Object[value1] = true，

在判断另一个值的时候，如果 Object[value2]存在的话，就说明该值是重复的。

13、闭包有什么用？

（1）什么是闭包：

闭包是指有权访问另外一个函数作用域中的变量的函数。

闭包就是函数的局部变量集合，只是这些局部变量在函数返回后会继续存在。闭包就是就是函数的“堆栈”在函数返回后并不释放，我们也可以理解为这些函数堆栈并不在栈上分配而是在堆上分配。当在一个函数内定义另外一个函数就会产生闭包。

（2）为什么要用：

匿名自执行函数：我们知道所有的变量，如果不加上 var 关键字，则默认的会添加到全局对象的属性上去，这样的临时变量加入全局对象有很多坏处，比如：别的函数可能误用这些变量；造成全局对象过于庞大，影响访问速度(因为变量的取值是需要从原型链上遍历的)。除了每次使用变量都是用 var 关键字外，我们在实际情况下经常遇到这样一种情况，即有的函数只需要执行一次，其内部变量无需维护，可以用闭包。

结果缓存：我们开发中会碰到很多情况，设想我们有一个处理过程很耗时的函数对象，每次调用都会花费很长时间，那么我们就需要将计算出来的值存储起来，当调用这个函数的时候，首先在缓存中查找，如果找不到，则进行计算，然后更新缓存并返回值，如果找到了，直接返回查找到的值即可。闭包正是可以做到这一点，因为它不会释放外部的引用，从而函数内部的值可以得以保留。

封装：实现类和继承等

14、闭包的特点？

1、让外部访问函数内部变量成为可能

2、局部变量会常驻在内存中

3、可以避免使用全局变量，防止全局变量污染

4、会造成内存泄漏（有一块内存空间被长期占用，而不被释放）

15、JS 基本数据类型？

基本数据类型：undefined、null、number、boolean、string、symbol

16、JS 深度拷贝一个元素的具体实现？

var deepCopy = function(obj)

if (typeof obj !== ‘object’) return;

var newObj = obj instanceof Array ? [] : ;

for (var key in obj)

if (obj.hasOwnProperty(key))

newObj[key] = typeof obj[key] === ‘object’ ? deepCopy(obj[key]) : obj[key];

return newObj;

16、this 的指向哪几种

默认绑定：全局环境中，this 默认绑定到 window。

隐式绑定：一般地，被直接对象所包含的函数调用时，也称为方法调用，this 隐式绑定到该直接对象。

隐式丢失：隐式丢失是指被隐式绑定的函数丢失绑定对象，从而默认绑定到 window。显式绑定：通过 call()、apply()、bind()方法把对象绑定到 this 上，叫做显式绑定。

new 绑定：如果函数或者方法调用之前带有关键字 new，它就构成构造函数调用。对于this 绑定来说，称为 new 绑定。

【1】构造函数通常不使用 return 关键字，它们通常初始化新对象，当构造函数的函数体执行完毕时，它会显式返回。在这种情况下，构造函数调用表达式的计算结果就是这个新对象的值。

【2】如果构造函数使用 return 语句但没有指定返回值，或者返回一个原始值，那么这时将忽略返回值，同时使用这个新对象作为调用结果。

【3】如果构造函数显式地使用 return 语句返回一个对象，那么调用表达式的值就是这个对象。

17、什么是暂停死区？

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

18、什么是按需加载？

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

19、什么是事件监听？

addEventListener()方法，用于向指定元素添加事件句柄，它可以更简单的控制事件，语法为

element.addEventListener(event, function, useCapture);

第一个参数是事件的类型(如 “click” 或 “mousedown”).

第二个参数是事件触发后调用的函数。

第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

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

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

20、什么是 js 的闭包？用闭包写个单例模式？

MDN 对闭包的定义是：闭包是指那些能够访问自由变量的函数，自由变量是指在函数中使用的，但既不是函数参数又不是函数的局部变量的变量，由此可以看出，闭包=函数+函数能够访问的自由变量，所以从技术的角度讲，所有 JS 函数都是闭包，但是这是理论上的闭包，还有一个实践角度上的闭包，从实践角度上来说，只有满足 1、即使创建它的上下文已经销毁，它仍然存在，2、在代码中引入了自由变量，才称为闭包。

闭包的应用：

模仿块级作用域。2、保存外部函数的变量。3、封装私有变量

单例模式：

var Singleton = (function()

var instance;

var CreateSingleton = function (name)

this.name = name;

if(instance)

return instance;

// 打印实例名字

this.getName();

// instance = this;

// return instance;

return instance = this;

// 获取实例的名字

CreateSingleton.prototype.getName = function()

console.log(this.name)

return CreateSingleton;

)();

// 创建实例对象 1

var a = new Singleton(‘a’);

// 创建实例对象 2

var b = new Singleton(‘b’);

console.log(a===b);

21、深浅拷贝的区别和实现

数组的浅拷贝：

如果是数组，我们可以利用数组的一些方法，比如 slice，concat 方法返回一个新数组的特性来实现拷贝，但假如数组嵌套了对象或者数组的话，使用 concat 方法克隆并不完整，如果数组元素是基本类型，就会拷贝一份，互不影响，而如果是对象或数组，就会只拷贝对象和数组的引用，这样我们无论在新旧数组进行了修改，两者都会发生变化，我们把这种复制引用的拷贝方法称为浅拷贝，

深拷贝就是指完全的拷贝一个对象，即使嵌套了对象，两者也互相分离，修改一个对象的属性，不会影响另一个如何深拷贝一个数组1、这里介绍一个技巧，不仅适用于数组还适用于对象！那就是：

var arr = [‘old’, 1, true, [‘old1’, ‘old2’], old: 1]

var new_arr = JSON.parse( JSON.stringify(arr) );

console.log(new_arr);

原理是 JOSN 对象中的 stringify 可以把一个 js 对象序列化为一个 JSON 字符串，parse 可以把 JSON 字符串反序列化为一个 js 对象，通过这两个方法，也可以实现对象的深复制。但是这个方法不能够拷贝函数。

浅拷贝的实现：

以上三个方法 concat,slice ,JSON.stringify 都是技巧类，根据实际项目情况选择使用，我们可以思考下如何实现一个对象或数组的浅拷贝，遍历对象，然后把属性和属性值都放在一个新的对象里即可

var shallowCopy = function(obj)

// 只拷贝对象

if (typeof obj !== ‘object’) return;

// 根据 obj 的类型判断是新建一个数组还是对象

var newObj = obj instanceof Array ? [] : ;

// 遍历 obj，并且判断是 obj 的属性才拷贝

for (var key in obj)

if (obj.hasOwnProperty(key))

newObj[key] = obj[key];

return newObj;

深拷贝的实现

那如何实现一个深拷贝呢？说起来也好简单，我们在拷贝的时候判断一下属性值的类型，如果是对象，我们递归调用深拷贝函数不就好了

var deepCopy = function(obj)

if (typeof obj !== ‘object’) return;

var newObj = obj instanceof Array ? [] : ;

for (var key in obj)

if (obj.hasOwnProperty(key))

newObj[key] = typeof obj[key] === 'objec

t’ ? deepCopy(obj[key]) : obj[key];

return newObj;

22、JS 中 string 的 startwith 和 indexof 两种方法的区别

JS 中 startwith 函数，其参数有 3 个，stringObj,要搜索的字符串对象，str，搜索的字符串，position，可选，从哪个位置开始搜索，如果以 position 开始的字符串以搜索字符串开头，则返回 true，否则返回 falseIndexof 函数，indexof 函数可返回某个指定字符串在字符串中首次出现的位置。

23、JS 字符串转数字的方法？

通过函数 parseInt（ ），可解析一个字符串，并返回一个整数，语法为 parseIn（strin t g ,radix）

string：被解析的字符串

radix：表示要解析的数字的基数，默认是十进制，如果 radix<2 或>36,则返回 NaN

24、构造函数是什么？

构造函数和普通函数在定义上没有强制要求，但是大家默认狗赞函数的首字母大写，并且在使用构造函数的时候使用new关键字调用。

25、构造函数的执行过程？

在new关键字调用时会创建一个新的空间，每当创建实例时函数体内部this都会指向当前

1、立刻在堆内存中创建一个新的对象

2、将新建的对象设置为函数中的this

3、逐个执行函数中的代码

4、将新建的对象作为返回值

26、构造函数this指向？

this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁**，**实际上this的最终指向的是那个调用它的对象，在构造函数中，this指向构造实例

27、什么是作用域？

ES5 中只存在两种作用域：全局作用域和函数作用域。在 JavaScript 中，我们将作用域定义为一套规则，这套规则用来管理引擎如何在当前作用域以及嵌套子作用域中根据标识符名称进行变量（变量名或者函数名）查找

28、NaN 是什么，用 typeof 会输出什么？

Not a Number，表示非数字，typeof NaN === ‘number’

29、说说写JavaScript的基本规范？

1、不要在同一行声明多个变量
2、使用 ===或!==来比较true/false或者数值
3、switch必须带有default分支
4、 函数应该有返回值
5、for if else 必须使用大括号
6、语句结束加分号
7、命名要有意义，使用驼峰命名法

30、栈和堆的区别？

栈（stack）：由编译器自动分配释放，存放函数的参数值，局部变量等；
堆（heap）：一般由程序员分配释放，若程序员不释放，程序结束时可能由操作系统释放。

31、null，undefined的区别？

null表示一个对象被定义了，但存放了空指针，转换为数值时为0。
undefined表示声明的变量未初始化，转换为数值时为NAN。
typeof(null) – object;
typeof(undefined) – undefined

32、什么是=运算符？说明“”和“===”之间的区别？

===被称为严格等式运算符，当两个操作数具有相同的值而没有任何类型转换时，该运算符返回true。

仅检查值相等，而=是一个更严格的等式判定，如果两个变量的值或类型不同，则返回false。

33、break和continue语句的作用？

Break语句从当前循环中退出。

continue语句继续下一个循环语句。