首页 > 编程语言 >必知必会的JavaScript前端面试题篇(二),不看后悔!

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

时间:2023-05-13 10:32:29浏览次数:38  
标签:面试题 0.2 必知 JavaScript 数据类型 0.1 arrayLike Array prototype

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

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

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

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. 创建一个新对象
  2. 让新对象的 proto 指向构造函数的 prototype
  3. 让构造函数的 this 指向新对象
  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);

特殊字符描述:

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

标签:面试题,0.2,必知,JavaScript,数据类型,0.1,arrayLike,Array,prototype
From: https://blog.51cto.com/u_14399386/6273589

相关文章

  • 10款Flash和Javascript网页音乐播放器
    关联:9FreshjQueryMediaPlayers   10款音乐播放器,有基于javascript的网页音乐播放器,也有基于Flash的音乐播放器。赶快挑一款,分享你喜爱的音乐吧! 1.Dewplayer  Dewplayer是一个微型,免费的Flashmp3播放器,具有简洁的界面。Dewplayer包含三种不同的尺寸界面。  2.......
  • 高频Jmeter软件测试面试题
    近期,有很多粉丝在催更关于Jmeter的面试题,索性抽空整理了一波,以下是一些高频Jmeter面试题,拿走不谢~一、JMeter的工作原理JMeter就像一群将请求发送到目标服务器的用户一样,它收集来自目标服务器的响应以及其他统计数据,这些统计数据通过图形或表格显示应用程序或服务器的性能。二、......
  • Ohm:用 JavaScript 创造你的编程语言
    导读解析器是一种超级有用的软件库。从概念上简单的说,它们的实现很有挑战性,并且在计算机科学中经常被认为是黑魔法。在这个系列的博文中,我会向你们展示为什么你不需要成为哈利波特就能够精通解析器这种魔法。但是为了以防万一带上你的魔杖吧!我们将探索一种叫做Ohm的新的......
  • 【转】JavaScript 执行上下文——JS 的幕后工作原理
    转自译文:JavaScript执行上下文——JS的幕后工作原理。译文中图片不显示,要结合原文看,看着不方便。整理了一份含图片的。所以有了此篇的转载,以方便阅读。以下是正文:原文:JavaScriptExecutionContext–HowJSWorksBehindTheScenes,作者:VictorIkechukwu所有JavaScript代......
  • 客户端javascript对象的几何属性(获得大小及坐标)
    在一些客户端javascript对象中,存在着如宽度、高度、坐标类的几何属性,同时这些属性在不同的浏览器下又有不同的属性名。现在将所有的此类对象的几何属性汇总,便于学习,免得搞混。1.浏览器窗口在桌面的坐标(x,y)Window      IE下:window.screenLeft,window.screenTo......
  • Javascript基础(三)
    ⭐WebAPIsWebAPIs和JS基础关联性JS的组成API和WebAPIAPI(ApplicationProgrammingInterface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力,而又无需访问源码,或理解内部工作机制的细节。WebAPI是......
  • Javascript基础(一)
    ⭐初识JavascriptJavaScript是世界上最流行的语言之一,是一种运行在客户端的脚本语言(Script是脚本的意思)脚本语言:不需要编译,运行过程中由js解释器(js引擎)逐行来进行解释并执行「Javascript的作用」表单动态校验(密码强度检测)(JS产生最初的目的)网页特效服务端开发......
  • Javascript基础(二)
    ⭐数组数组的概念数组是指一组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。数组是一种将一组数据存储在单个变量名下的优雅方式。创建数组1.利用new创建数组var数组名=newArray();vararr=newArray();//创建一个新的空数组2.利用......
  • 一文让你搞懂javascript如何实现继承
    一、本文想给你聊的东西包含一下几个方面:(仅限于es6之前的语法哈,因为es6里面class这关键字用上了。。)1.原型是啥?原型链是啥?2.继承的通用概念。3.Javascript实现继承的方式有哪些? 二、原型是啥?原型链是啥?1.原型是函数本身的prototype属性。首先js和java不一样,js顶多算是一个......
  • 存下吧!Spring高频面试题总结
    Spring是什么?Spring是一个轻量级的控制反转(IoC)和面向切面(AOP)的容器框架。Spring的优点通过控制反转和依赖注入实现松耦合。支持面向切面的编程,并且把应用业务逻辑和系统服务分开。通过切面和模板减少样板式代码。声明式事务的支持。可以从单调繁冗的事务管理代码中解脱......