前端面试——JavaScript面经（持续更新）

一、数据类型

1. JavaScript用哪些数据类型、它们有什么区别？

JavaScript共有八种数据类型，分别包括5种基本数据类型和3种非基本数据类型。

  • 基本数据类型：Undefined、Null、Boolean、Number、String。
  • 非基本数据类型：Object、Symbol、BigInt。

其中Symbol和BigInt是ES6新增的数据类型：

  • Symbol代表创建后独一无二且不可变的数据类型，它主要是为了解决可能出现的全局变量冲突的问题。
  • BigInt是一种数字类型的数据，它可以表示任意精度格式的整数，使用BigInt可以安全地存储和大整数，即使这个数超出了Number的安全整数范围。

区别一：分为原始数据类型和引用数据类型。

  • 原始数据类型：Undefined、Null、Boolean、Number、String。
  • 引用数据类型：Object。另外还有数组Array和函数Function。

区别二：存储位置不同。

  • 原始数据类型直接存储在**栈（stack）**中，往往占据空间小、大小固定、属于被频繁使用数据，所以放在栈中。
  • 引用数据类型存储在**堆（heap）**中，往往占据空间大、大小不固定，如果存在栈中将会影响程序运行的性能。因此，引用数据类型在栈中存储了指针，指针指向堆中该实体的起始地址。当解释器寻找引用值时，会先检索其在栈中的地址，再根据地址从堆中获得实体。

扩展知识：堆与栈

堆和栈的概念存在于数据结构和操作系统内存中。

  • 在数据结构中：
    • 栈：先进后出
    • 堆：先进先出
  • 在操作系统中分为堆区和栈区：
    • 栈区内存由编译器自动分配释放，存放函数的参数值，局部变量的值等。操作方式类似于数据结构中的栈。
    • 堆区内存一般由开发者分配释放，若开发者不释放，程序结束时可能由垃圾回收机制回收。

2. 数据类型的检测方式有哪些？详细讲讲

2.1 typeof

// 1.typeof 数组、对象和null都会被视为object 其他类型都判定正确
console.log(typeof {}); // object
console.log(typeof []); // object
console.log(typeof null); // object
console.log(typeof function () {}); // function
console.log(typeof 1); // number
console.log(typeof true); // boolean
console.log(typeof "str"); // string
console.log(typeof undefined); // undefined
console.log(typeof Symbol()); // symbol

根据上面的结果可以看到数组、对象和null都会被视为object，其他类型都能判定正确。

2.2 instanceof

它的原理是：判断在其原型链中能否找到该类型的原型

console.log(2 instanceof Number); // false
console.log(true instanceof Boolean); // false
console.log("str" instanceof String); // falseconsole.log([] instanceof Array); // true
console.log(function () {} instanceof Function); // true
console.log({} instanceof Object); // true
console.log(null instanceof Object); // false  这是因为null是原型链的尽头 它没有后续原型链 更不可能找到Object类型的原型

根据上面的结果可以看到 instanceof只能正确判断引用类型，基本数据类型无法判定。

需要注意的是：null instanceof Object结果是false，因为null是原型链的尽头，它没有后续原型链，更不可能找到Object类型的原型。

2.3 constructor

它的原理是：**除了null之外，任何对象都会在其prototype/__proto__上有一个constructor属性，而constructor属性返回一个引用，这个引用指向创建该对象的构造函数，而Number、Boolean、String、Array都属于构造函数。**因此通过construct和构造函数就能判断类型是否符合。

console.log((2).constructor);  // ƒ Number() { [native code] }  Number构造函数
console.log((2).constructor === Number);  // true
console.log((true).constructor === Boolean);  // true
console.log(("str").constructor === String);  // true
console.log(([]).constructor === Array);  // true
console.log((function () {}).constructor === Function);  // true
console.log(({}).constructor === Object);  // true
// console.log((null).constructor === Object);  // 会报错 原因是null不存在constructor
// console.log((undefined).constructor === Object);  // 会报错 原因是undefined不存在constructor
// console.log((null).constructor); // 会报错
// console.log((undefined).constructor); // 会报错

从上面的结果看到，constructor除了不能判断null和undefined外，其它类型都能判断。

需要注意的是，如果创建的对象的原型被改变了，constructor就不能用来判断数据类型了。

function Fn() {}
console.log(Fn.prototype.constructor); // f Fn() {}
Fn.prototype = new Array()
console.log(Fn.prototype.constructor); // ƒ Array() { [native code] }
let f = new Fn();
console.log(f.constructor); // ƒ Array() { [native code] }
console.log(f.__proto__); // ƒ Array() { [native code] }
console.log(f.constructor === Fn); // false
console.log(f.constructor === Array); // true

扩展知识：constructor的两个作用：

  1. 判断数据类型。
  2. 对象实例通过construct对象访问它的构造函数。

2.4 Object.prototype.toString.call()

它的原理是:对象原型上的toString方法会获取当前对象的类型然后返回[object Type]字符串，由于部分内置对象对toString重写了，因此需要调用.call()来利用原本的toString函数，.call(args)方法实现让调用call方法的对象的this指向传的参数args。

let a = Object.prototype.toString;
console.log(a.call(2)); // [object Number]
console.log(a.call(2) == Number); // false
console.log(a.call(2) == "[object Number]"); // trueconsole.log(a.call(true)); // [object Boolean]
console.log(a.call(true) == Boolean); // false
console.log(a.call(true) == "[object Boolean]"); // trueconsole.log(a.call("str")); // [object String]
console.log(a.call("str") == String); // false
console.log(a.call("str") == "[object String]"); // trueconsole.log(a.call(new Date())); // [object Date]
console.log(a.call(new Date()) == Date); // false
console.log(a.call(new Date()) == "[object Date]"); // trueconsole.log(a.call([])); // [object Array]
console.log(a.call(function () {})); // [object function]
console.log(a.call({})); // [object Object]
console.log(a.call(undefined)); // [object undefined]
console.log(a.call(null)); // [object Null]

通过上面代码可以看到，Object.prototype.toString.call()可以验证任何类型。

2.5 封装一个类型验证的方法

大型项目中往往会使用Object.prototype.toString.call()封装一个isType方法来验证类型，封装代码如下：

function isType(data, type) {const typeObj = {"[object String]": "string","[object Number]": "number","[object Boolean]": "boolean","[object Null]": "null","[object Undefined]": "undefined","[object Object]": "object","[object Array]": "array","[object Function]": "function","[object Date]": "date", // Object.prototype.toString.call(new Date())"[object RegExp]": "regExp","[object Map]": "map","[object Set]": "set","[object HTMLDivElement]": "dom", // document.querySelector('#app')"[object WeakMap]": "weakMap","[object Window]": "window", // Object.prototype.toString.call(window)"[object Error]": "error", // new Error('1')"[object Arguments]": "arguments",};let name = Object.prototype.toString.call(data); // 借用Object.prototype.toString()获取数据类型let typeName = typeObj[name] || "未知类型"; // 匹配数据类型return typeName === type; // 判断该数据类型是否为传入的类型
}

下面我们可以测试一下封装结果：

console.log(isType({}, "object"), // trueisType([], "array"), // trueisType(new Date(), "object"), // falseisType(new Date(), "date") // true
);

2.6 总结

方法名效果
typeof数组、对象和null都会被视为object，其他类型都能判定正确
instanceof只能正确判断引用类型，基本数据类型无法判定
constructor除了不能判断null和undefined外，其它类型都能判断
Object.prototype.toString.call()可以判断所有类型，但是返回结果是字符串【最推荐，封装isType】

3. 判断数组的方式有哪些？

let arr = []
  1. Object.prototype.toString.call(arr).slice(8,-1) === 'Array' 或者Object.protoType.toString.call(arr) === '[object Array]'
  2. 通过原型链判断:arr.__proto__ === Array.prototype
  3. 通过Array.isArray(arr)
  4. 通过arr instanceof Array

4. null和undefined有什么区别？

  1. 含义不同：undefined代表的含义是未定义，而null代表的含义是空对象。
  2. 初始化场景不同：通常变量声明了但还没有定义的时候使用undefined，null主要用在初始化一些可能会返回对象的变量。
  3. typeof判断结果不同：typeof undefined返回undefined，typeof null返回object

一般变量声明了但还没定义的时候会返回undefined。

需要注意的是：

使用null == undefined 返回true,null === undefined返回false。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/241295.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

在k8s中使用Helm安装harbor并将Chart推送到私有仓库harbor

在k8s中使用Helm安装harbor并将Chart推送到私有仓库harbor

使用Helm安装harbor并将Chart推送到私有仓库harbor 注意：如果你的harbor是之前docker-compose安装的，还需要额外做一个动作，让它支持chart docker-compose stop ./install.sh --with-chartmuseum1）下载harbor的chart包 Harbor的…
阅读更多...
「数据结构」二叉树2

「数据结构」二叉树2

🎇个人主页：Ice_Sugar_7 🎇所属专栏：初阶数据结构 🎇欢迎点赞收藏加关注哦！ 文章目录 🍉前言🍉链式结构🍉遍历二叉树🍌前序遍历🍌中序遍历&#x…
阅读更多...
MySQL升级版本（Linux环境）

MySQL升级版本（Linux环境）

摘要 由于我们在做部署的时候会部署MySQL，但是版本可能各种各样，而且我们服务器会定期的进行漏洞扫描，因此我们在遇到MySQL的相关漏洞时，一般漏洞报告中会提示出解决方案，一般来时就是升级软件的版本，因此…
阅读更多...
C# WPF上位机开发（从demo编写到项目开发）

C# WPF上位机开发（从demo编写到项目开发）

【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing 163.com】 C# WPF编程，特别是控件部分，其实学起来特别快。只是后面多了多线程、锁、数据库、网络这部分稍微复杂一点，不过…
阅读更多...
CAD制图

CAD制图

CAD制图 二维到三维 文章目录 CAD制图前言一、CAD制图二、机械设计三、二维图纸四、三维图纸总结前言 CAD制图可以提高设计效率和准确性，并方便文档的存档和交流，是现代工程设计中不可或缺的一部分。 一、CAD制图 CAD（Computer-Aided Design）是利用计算机技术辅助进行设计…
阅读更多...
cmake学习【function】

cmake学习【function】

cmake学些function 在CMake中，function命令用于定义函数，允许你封装一段逻辑，使其在多个地方重复使用。以下是function命令的主要用法及其参数，以及一些示例说明： 1. 基本语法 function(functionName [arg1 [arg2 .…
阅读更多...
欠采样对二维相位展开的影响

欠采样对二维相位展开的影响

1.前言 如前所述，相位展开器通过计算两个连续样本之间的差来检测图像中包裹的存在。如果这个差值大于π或小于-π，则相位展开器认为在这个位置存在包裹。这可能是真正的相位包络，也可能是由噪声或采样不足引起的伪包络。 对欠采样的相位图像…
阅读更多...
【自营版】物流系统+取件员收件员/运营级快递系统小程序源码

【自营版】物流系统+取件员收件员/运营级快递系统小程序源码

后端php前端原生小程序 mysql数据库 主要功能： 寄快递 查快递 多门店 市内取送 取件员中心在线接单 提前预约 也可 立即下单 门店入住 取件员入住
阅读更多...
交叉熵损失（Cross-Entropy loss）

交叉熵损失（Cross-Entropy loss）

在处理机器学习或深度学习问题时，损失/成本函数用于在训练期间优化模型。目标几乎总是最小化损失函数。损失越低，模型越好。交叉熵损失是最重要的成本函数。它用于优化分类。对交叉熵的理解取决于对 Softmax 激活函数的理解。 一、softmax激活函数 激活…
阅读更多...
屏幕颜色吸取器

屏幕颜色吸取器

前言 屏幕颜色吸取器。 前端工程师的福音，获取全屏幕上所有位置的颜色。 运行在window上的软件 屏幕颜色吸取器 前言1 下载解压2 使用 1 下载解压 下载地址：https://download.csdn.net/download/qq_44850489/11943229 下载下来之后解压 如下图&#…
阅读更多...
案例系列：泰坦尼克号_预测幸存者_TensorFlow决策森林

案例系列：泰坦尼克号_预测幸存者_TensorFlow决策森林

文章目录 1. 导入依赖库2. 加载数据集3. 准备数据集4. 将Pandas数据集转换为TensorFlow数据集5. 使用默认参数训练模型6. 使用改进的默认参数训练模型7. 进行预测8. 使用超参数调优训练模型9. 创建一个集成模型 TensorFlow决策森林在表格数据上表现较好。本笔记将带您完成使用T…
阅读更多...
django接收前端vue传输的formData图片数据

django接收前端vue传输的formData图片数据

在Django中接收前端Vue传输的formData中的图片数据，通常是通过Django的视图（Views）和表单（Forms）来实现的。下面是一个基本的示例，说明了如何在Django后端处理由Vue前端发送的formData图片。 前端Vue代码示…
阅读更多...
python算法例23 落单的数Ⅰ

python算法例23 落单的数Ⅰ

1. 问题描述 给出2n1个非负整数元素的数组，除其中一个数字之外，其他每个数字均出现两次，找到这个数字。 2. 问题示例 给出[1，2，2，1，3，4，3]，返回4。 3. 代…
阅读更多...
使用函数式接口对代码简化,完成代码重复性使用

使用函数式接口对代码简化,完成代码重复性使用

📚目录 📚简介💨优化前原代码:⚙️ 函数编程简化🎄 JDK自带的函数式接口✨ 改造调用方式🎊 时间范围执行🎉时间范围每天执行 📚简介 因为公司的使用Xxl-Job作为任务调度平台,其中我们大部分的报…
阅读更多...
camera同步信号

camera同步信号

基本概念 PCLK：pixel clock是像素点同步时钟信号, 主频。也就是每个PCLK对应一个像素点。 HSYNC：horizonal synchronization是行同步信号，水平同步信号。就是在告诉接收端：“HSYNC”有效时段内接收端接收到的所有的信号输出属同…
阅读更多...
系列二十八、如何在Oracle官网下载JDK的api文档

系列二十八、如何在Oracle官网下载JDK的api文档

一、官网下载JDK的api文档 1.1、官网地址 https://www.oracle.com/java/technologies/javase-jdk21-doc-downloads.html 1.2、我分享的api.chm 链接：https://pan.baidu.com/s/1Bf55Fz-eMTErmQDtZZcewQ?pwdyyds 提取码：yyds 1.3、参考 https://ww…
阅读更多...
C语言——高精度除法

C语言——高精度除法

一、引子 1、引言 高精度除法相较于加减乘法更加复杂，它需要处理的因素更多，在这里我们先探讨高精度数除以低精度数，即大数除小数。这已满足日常所需，如需大数除以大数，可以使用专门的库，例如&#xff1a…
阅读更多...
Angular 11到升级到 Angular 16

Angular 11到升级到 Angular 16

日新月异，与时俱进… 随着Angular版本不断更新，再看所开发的项目版本仍然是Angular 11，于是准备升级 截止发博日最版本是 v17.1.0，考虑到稳定性因素决定升级到v16版本 一：查看 升级指南 二：按照指南&…
阅读更多...
推荐算法架构7：特征工程（吊打面试官，史上最全！）

推荐算法架构7：特征工程（吊打面试官，史上最全！）

系列文章，请多关注 推荐算法架构1：召回 推荐算法架构2：粗排 推荐算法架构3：精排 推荐算法架构4：重排 推荐算法架构5：全链路专项优化 推荐算法架构6：数据样本 推荐算法架构7：特…
阅读更多...
数据校园服务管理系统，教育平台可视化界面（教育资源信息化PS文件）

数据校园服务管理系统，教育平台可视化界面（教育资源信息化PS文件）

大屏组件可以让UI设计师的工作更加便捷，使其更高效快速的完成设计任务。现分享大数据校园服务管理系统、科技教育平台大数据可视化界面、教育资源信息化大数据分析等Photoshop源文件，文末提供完整资料，供UI设计师们工作使用。 若需其他 大屏…
阅读更多...
最新文章

Copyright @ 2022~2023