必知必会的JavaScript前端面试题篇(二),不看后悔!

简介: 必知必会的JavaScript前端面试题篇(二),不看后悔!

必知必会的JavaScript前端面试题篇(二),不看后悔!

1. JavaScript 有哪些数据类型以及它们的区别?

  • • js 一共有八种数据类型,分别是: Undefined, Null, Boolean, Number, String, Object, Symbol, BigInt
  • • 其中 Symbol, BigInt 是 ES6 中新增的数据类型:
  • Symbol: 代表唯一的数据类型,主要为了解决全局变量冲突的问题
  • BigInt: 数字类型,此格式可表示任意精度格式的整数,可超时 Number 类型标的整数范围。
  • • 其余数据类型可分为 原始数据类型引用数据类型
  • • 原始数据类型存在栈(stack) 中,占据空间小,大小固定,属于被频繁使用的数据
  • • 引用数据类型存在堆(heap) 中,占据空间大, 大小不固定,引用数据类型在栈中存储了指针,该指针指向数据的内存地址。当解释器寻找引用的值时,会首先检索当前数据在栈中的地址,获取地址后然后从堆中获取数据。
  • • 存储方式不同:基本数据类型存在栈(stack)中,而引用数据类型存在堆(heap)中
  • • 复制方式不同:将一个基本数据类型变量赋值给另一个变量时,会复制这个值的副本,而引用类型变量赋值给另一个变量时,复制的对象在内存中的指针,而不是对象本身,修改一方,另一方也会发生改变
  • • 原始数据类型 -> 栈 -> Undefined、Null、Boolean、Number、String
  • • 引用数据类型 -> 堆 -> Object、Array、Function
  • • 不同点:存储位置不同

2. 数据类型检测的方式有哪些?

  • • 方法: typeof(), instanceof(), constructor(), Object.prototype.toString.call()
  • • typeof(): 除了 Array, Function, Null 都可以正确判断数据类型
  • • instanceof(): 判断其在原型链中能否找到该类型的原型,只能正确判断引用数据类型,而不能判断基本数据类型。
  • • constructor: 有两个作用,一是判断数据的类型,二是对象实例通过 constructor 对象来访问它的构造函数。注意:如果是创建一个新对象来改变它的原型,constructor 就不能用来判断其数据类型了。
  • • Object.prototype.toString.call():使用对象原型方法 toString 来判断数据类型。

3. undefined 与 null 的区别?

  • • undefined: 表示未定义,可能有值也可能没值,表示还没有赋值
  • • null: 代表空值,空引用

4. 为什么 0.1 + 0.2 != 0.3,如何让其相等?

  • • 为什么不相等?
let n1 = 0.1,
    n2 = 0.2;
console.log(n1 + n2); // 0.30000000000000004
  • • 这里得到的不是想要的结果,要想等于 0.3,就要把它进行转化:
(n1 + n2).toFixed(2); // 注意,toFixed为四舍五入
  • • 计算机都是二进制的方式存储数据,所以计算机在计算 0.1 + 0.2 时,实际上是计算两个数的二进制的和,0.1(0.000110011001.... 1001 一直重复),0.2(0.0011001100110011.... 0011 一直重复),这两个数的二进制都是无限循环的数。
  • • 一般我们认为数字包括整数和小数,但是在 JavaScript 中只有一种数字类型:Number,它的实现遵循 IEEE 754 标准,使用 64 位固定长度来表示,也就是标准的 double 双精度浮点数。在二进制科学表示法中,双精度浮点数的小数部分最多只能保留 52 位,再加上前面的 1,其实就是保留 53 位有效数字,剩余的需要舍去,遵从“0 舍 1 入”的原则。
  • • 根据这个原则,0.1 和 0.2 的二进制数相加,再转化为十进制数就是:0.30000000000000004
  • • 如何让其相等?
  • • 一个直接的解决方法就是设置一个误差范围,通常称为“机器精度”。对 JavaScript 来说,这个值通常为 2-52,在 ES6 中,提供了Number.EPSILON属性,而它的值就是 2-52,只要判断0.1+0.2-0.3是否小于Number.EPSILON,如果小于,就可以判断为 0.1+0.2 ===0.3
function numberOperation(arg1, arg2) {
    return Math.abs(arg1 - arg2) < Number.EPSILON;
}
console.log(numberOperation(0.1 + 0.2, 0.3)); // true

5. 如果 new 一个箭头函数会怎么样?

  • • 会报 JS 错误:TypeError: FunctionName is not a constructor, 表示当前函数不是一个构造函数,不能通过 new 关键字来创建实例。
  • • 箭头函数:ES6 中提出的,它既没有 prototype, 也没有自己的 this,更不能使用 arguments 参数,所以不能 new 一个箭头函数
  • • new 的过程:
  1. 1. 创建一个新对象
  2. 2. 让新对象的 proto 指向构造函数的 prototype
  3. 3. 让构造函数的 this 指向新对象
  4. 4. 返回新的对象
  • • 所以,在第二,三步,箭头函数是没有办法执行的

6. 数组有那么原生方法?

  • • 尾部操作:pop()-删除, push()-添加
  • • 首部操作:shift()-删除, unshift()-添加
  • • 排序操作:reverse()-倒序,sort()-排序
  • • 拼接操作:concat()
  • • 截取操作:slice()-不包含结束下标
  • • 插入操作:splice()-截取操作包含结束下包
  • • 查询操作:indexOf()-从前向后查询,lastIndexOf()-从后向前查询,都是返回下标
  • • 迭代操作:every()-每一项都满足条件,some()-有一项满足条件,filter()-过滤,map()-迭代,forEach()-迭代
  • • 归并操作:reduce()-从左向右,reduceRight()-从右向左

7. 为什么函数的 arguments 参数是类数组而不是数组?如何遍历类数组?

  • • 原因:
  • arguments 是一个对象,他的属性是从 0 开始依次递增的数字,还有 callee: 通过它可以调用函数自身length 等属性,与数组类似,但是没有数组常见的一些方法,例如 forEach, reduce, 所以叫他们类数组。
  • • 如何遍历?1.使用 call 和 apply 和 bind 方法
Array.prototype.forEach.call(arguments, (a) => console.log(a));
Array.prototype.forEach.apply(arrayLike, [
    (item, index) => {
        console.log(item);
    },
]);
Array.prototype.forEach.bind(arrayLike)((item, index) => {
    console.log(item);
});

2.使用 Array.from() 方法将类数组转为数组

const arrArgs = Array.from(arguments);
arrArgs.forEach((item) => console.log(item));

3.使用 Array API

Array.apply(null, arrayLike);
Array.prototype.concat.apply([], arrayLike);
Array.prototype.slice.call(arrayLike);
Array.prototype.map.call(arrayLike, (x) => x);
Array.prototype.filter.call(arrayLike, (x) => 1);

特殊字符描述

问题标注 Q:(question)答案标注 R:(result)注意事项标准:A:(attention matters)详情描述标注:D:(detail info)总结标注:S:(summary)分析标注:Ana:(analysis)提示标注:T:(tips)

相关文章
|
3天前
|
JSON JavaScript 前端开发
[JS]面试官:你的简历上写着熟悉jsonp,那你说说它的底层逻辑是怎样的?
本文介绍了JSONP的工作原理及其在解决跨域请求中的应用。首先解释了同源策略的概念,然后通过多个示例详细阐述了JSONP如何通过动态解释服务端返回的JavaScript脚本来实现跨域数据交互。文章还探讨了使用jQuery的`$.ajax`方法封装JSONP请求的方式,并提供了具体的代码示例。最后,通过一个更复杂的示例展示了如何处理JSON格式的响应数据。
13 2
[JS]面试官:你的简历上写着熟悉jsonp,那你说说它的底层逻辑是怎样的?
|
4天前
|
设计模式 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用JavaScript,打造智能交互体验!
【10月更文挑战第30天】前端开发领域充满了无限可能与创意,JavaScript作为核心语言,凭借强大的功能和灵活性,成为打造智能交互体验的重要工具。本文介绍前端大牛如何利用JavaScript实现平滑滚动、复杂动画、实时数据更新和智能表单验证等效果,展示了JavaScript的多样性和强大能力。
15 4
|
2天前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
|
6天前
|
JavaScript 前端开发 开发者
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第27天】在前端开发领域,Vue.js和Angular是两个备受瞩目的框架。本文对比了两者的优劣,Vue.js以轻量级和易上手著称,适合快速开发小型到中型项目;Angular则由Google支持,功能全面,适合大型企业级应用。选择时需考虑项目需求、团队熟悉度和长期维护等因素。
14 1
|
10天前
|
缓存 前端开发 JavaScript
"面试通关秘籍:深度解析浏览器面试必考问题,从重绘回流到事件委托,让你一举拿下前端 Offer!"
【10月更文挑战第23天】在前端开发面试中,浏览器相关知识是必考内容。本文总结了四个常见问题:浏览器渲染机制、重绘与回流、性能优化及事件委托。通过具体示例和对比分析,帮助求职者更好地理解和准备面试。掌握这些知识点,有助于提升面试表现和实际工作能力。
42 1
|
17天前
|
前端开发 JavaScript 安全
JavaScript前端开发技术
JavaScript(简称JS)是一种广泛使用的脚本语言,特别在前端开发领域,它几乎成为了网页开发的标配。从简单的表单验证到复杂的单页应用(SPA),JavaScript都扮演着不可或缺的角色。
17 3
|
7天前
|
JavaScript 前端开发 API
前端框架对比:Vue.js与Angular的优劣分析与选择建议
【10月更文挑战第26天】前端技术的飞速发展让开发者在构建用户界面时有了更多选择。本文对比了Vue.js和Angular两大框架,介绍了它们的特点和优劣,并给出了在实际项目中如何选择的建议。Vue.js轻量级、易上手,适合小型项目;Angular结构化、功能强大,适合大型项目。
11 0
|
10天前
|
前端开发 JavaScript UED
"前端小技巧大揭秘:JS如何将后台时间戳秒变亲切小时前、分钟前,让用户秒懂,提升互动体验!"
【10月更文挑战第23天】在Web开发中,将后台返回的时间戳转换为“小时前”、“分钟前”、“刚刚”等友好的时间描述是常见需求。本文介绍如何用JavaScript实现这一功能,通过计算当前时间和时间戳的差值,返回相应的描述,提升用户体验。
18 0
|
21天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
|
21天前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
34 0