2021高频前端面试题JavaScript：数据类型篇

2021-03-2311:15:30WEB前端开发Comments2,433 views字数 12108阅读模式

1. JavaScript有哪些数据类型，它们的区别

JavaScript共有七种基本数据类型，分别是 Undefined、Null、Boolean、Number、String，还有在 ES6 中新增的 Symbol 和 BigInt 类型：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

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

这些数据可以分为原始数据类型和引用数据类型：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

  • 栈：原始数据类型（Undefined、Null、Boolean、Number、String）
  • 堆：引用数据类型（对象、数组和函数）

两种类型的区别是：存储位置不同。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

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

堆和栈的概念存在于数据结构中和操作系统内存中：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

  • 在数据结构中，栈中数据的存取方式为先进后出。
  • 堆是一个优先队列，是按优先级来进行排序的，优先级可以按照大小来规定。完全二叉树是堆的一种实现方式。

在操作系统中，内存被分为栈区和堆区：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

  • 栈区内存由编译器自动分配释放，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈。
  • 堆区内存一般由程序员分配释放，若程序员不释放，程序结束时可能由垃圾回收机制回收。

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

（1）typeof文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

console.log(typeof 2);               // number
console.log(typeof true);            // boolean
console.log(typeof 'str');           // string
console.log(typeof []);              // object    
console.log(typeof function(){});    // function
console.log(typeof {});              // object
console.log(typeof undefined);       // undefined
console.log(typeof null);            // object
复制代码

其中数组、对象、null都会被判断为object，其他判断都正确。 （2）instanceof instanceof可以正确判断对象的类型，因为其内部的机制是通过判断在其原型链中能否找到该类型的原型。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

console.log(2 instanceof Number);                    // false
console.log(true instanceof Boolean);                // false 
console.log('str' instanceof String);                // false 
 
console.log([] instanceof Array);                    // true
console.log(function(){} instanceof Function);       // true
console.log({} instanceof Object);                   // true
复制代码

有上面可以看到，instanceof只能正确判断引用数据类型，而不能判断基本数据类型。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

（3） constructor文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

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
复制代码

constructor有两个作用，一是判断数据的类型，二是对象实例通过 constrcutor 对象访问它的构造函数。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

需要注意的是，如果创建一个对象来改变它的原型，constructor就不能用来判断数据类型了：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

function Fn(){};
 
Fn.prototype = new Array();
 
var f = new Fn();
 
console.log(f.constructor===Fn);    // false
console.log(f.constructor===Array); // true
复制代码

（4）Object.prototype.toString.call() Object.prototype.toString.call() 使用 Object 对象的原型方法 toString ，判断数据类型文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

var a = Object.prototype.toString;
 
console.log(a.call(2));
console.log(a.call(true));
console.log(a.call('str'));
console.log(a.call([]));
console.log(a.call(function(){}));
console.log(a.call({}));
console.log(a.call(undefined));
console.log(a.call(null));
复制代码

同样是检测对象obj调用toString方法，obj.toString()的结果和Object.prototype.toString.call(obj)的结果不一样，这是为什么？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

这是因为toString为Object的原型方法，而Array ，function等类型作为Object的实例，都重写了toString方法。不同的对象类型调用toString方法时，根据原型链的知识，调用的是对应的重写之后的toString方法（function类型返回内容为函数体的字符串，Array类型返回元素组成的字符串…），而不会去调用Object上原型toString方法（返回对象的具体类型），所以采用obj.toString()不能得到其对象类型，只能将obj转换为字符串类型；因此，在想要得到对象的具体类型时，应该调用Object上原型toString方法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

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

  • 通过Object.prototype.toString.call()做判断
Object.prototype.toString.call().slice(8,-1) === 'Array';
复制代码
  • 通过原型链来判断
obj.__proto__ === Array.prototype;
复制代码
  • 通过es6 Array.isArrray()做判断
Array.isArrray(obj);
复制代码
  • 通过instanceof做判断
obj instanceof Array
复制代码
  • 通过Array.prototype.isPrototypeOf
Array.prototype.isPrototypeOf(obj)
复制代码

4. null和undefined区别

首先 Undefined 和 Null 都是基本数据类型，这两个基本数据类型分别都只有一个值，就是 undefined 和 null。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

undefined 代表的含义是未定义，null 代表的含义是空对象。一般变量声明了但还没有定义的时候会返回 undefined，null主要用于赋值给一些可能会返回对象的变量，作为初始化。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

undefined 在 js 中不是一个保留字，这意味着可以使用 undefined 来作为一个变量名，这样的做法是非常危险的，它会影响对 undefined 值的判断。但是可以通过一些方法获得安全的 undefined 值，比如说 void 0。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

当对两种类型使用 typeof 进行判断的时候，Null 类型化会返回 “object”，这是一个历史遗留的问题。当使用双等号对两种类型的值进行比较时会返回 true，使用三个等号时会返回 false。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

5. type null 的结果是什么，为什么

type null 的结果是Object文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

在 JavaScript 第一个版本中，所有值都存储在 32 位的单元中，每个单元包含一个小的 类型标签(1-3 bits) 以及当前要存储值的真实数据。类型标签存储在每个单元的低位中，共有五种数据类型：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

000: object   - 当前存储的数据指向一个对象。
1: int        - 当前存储的数据是一个 31 位的有符号整数。
010: double   - 当前存储的数据指向一个双精度的浮点数。
100: string   - 当前存储的数据指向一个字符串。
110: boolean  - 当前存储的数据是布尔值。
复制代码

如果最低位是 1，则类型标签标志位的长度只有一位；如果最低位是 0，则类型标签标志位的长度占三位，为存储其他四种数据类型提供了额外两个 bit 的长度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

有两种特殊数据类型：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

  • undefined的值是 (-2)(一个超出整数范围的数字)
  • null 的值是机器码 NULL 指针(null 指针的值全是 0)

那也就是说null的类型标签也是000，和Object的类型标签一样，所以会被判定为Object。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

6. intanceof 操作符的实现原理及实现

instanceof 运算符用于判断构造函数的 prototype 属性是否出现在对象的原型链中的任何位置。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

function myInstanceof(left, right) {
  let proto = Object.getPrototypeOf(left), // 获取对象的原型
    prototype = right.prototype; // 获取构造函数的 prototype 对象
  // 判断构造函数的 prototype 对象是否在对象的原型链上
  while (true) {
    if (!proto) return false;
    if (proto === prototype) return true;
    proto = Object.getPrototypeOf(proto);
  }
}
复制代码

7. 为什么0.1+0.2 ! == 0.3，如何让其相等

在开发过程中遇到类似这样的问题：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

let n1 = 0.1, n2 = 0.2
let n3 = n1 + n2   //0.30000000000000004
复制代码

这不是想要的结果，要想等于0.3，就要把它进行转化：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

n3.toFixed(2) // 注意，toFixed为四舍五入
复制代码

toFixed(num) 方法可把 Number 四舍五入为指定小数位数的数字。 那为什么会出现这样的结果呢？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

计算机是通过二进制的方式存储数据的，所以计算机计算0.1+0.2的时候，实际上是计算的两个数的二进制的和。0.1的二进制是0.0001100110011001100...（1100循环），0.2的二进制是：0.00110011001100...（1100循环），这两个数的二进制都是无限循环的数。那JavaScript是如何处理无限循环的二进制小数呢？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

JavaScript中所用的数字包括整数和小数，但是只有一种类型——Number，它的实现遵循IEEE 754标准，使用64位固定长度来表示，也就是标准的double双精度浮点数。在二进制科学表示法中，双精度浮点数的小数部分最多只能保留52位，再加上前面的1，其实就是保留53位有效数字，剩余的舍去，遵从“0舍1入”的原则。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

根据这个原则，0.1和0.2的二进制数相加，再转化为十进制数就是：0.30000000000000004。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

下面看一下双精度数是如何保存的： 2021高频前端面试题JavaScript：数据类型篇文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

  • 第一部分（蓝色）：用来存储符号位（sign），用来区分正负数，0表示正数，占用1位
  • 第二部分（绿色）：用来存储指数（exponent），占用11位
  • 第三部分（红色）：用来存储小数（fraction），占用52位

对于0.1，它的二进制为：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

0.00011001100110011001100110011001100110011001100110011001 10011...
复制代码

转为科学计数法（科学计数法的结果就是浮点数）：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

1.1001100110011001100110011001100110011001100110011001*2^-4
复制代码

可以看出0.1的符号位为0，指数位为-4，小数位为：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

1001100110011001100110011001100110011001100110011001
复制代码

那么问题又来了，指数位是负数，该如何保存呢？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

IEEE标准规定了一个偏移量，对于指数部分，每次都加这个偏移量进行保存，这样即使指数是负数，那么加上这个偏移量也就是正数了。由于JavaScript的数字是双精度数，这里就以双精度数为例，它的指数部分为11位，能表示的范围就是0~2047，IEEE固定双精度数的偏移量为1023。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

  • 当指数位不全是0也不全是1时(规格化的数值)，IEEE规定，阶码计算公式为 e-Bias。 此时e最小值是1，则1-1023= -1022，e最大值是2046，则2046-1023=1023，可以看到，这种情况下取值范围是-1022~1013。
  • 当指数位全部是0的时候(非规格化的数值)，IEEE规定，阶码的计算公式为1-Bias，即1-1023= -1022。
  • 当指数位全部是1的时候(特殊值)，IEEE规定这个浮点数可用来表示3个特殊值，分别是正无穷，负无穷，NaN。 具体的，小数位不为0的时候表示NaN；小数位为0时，当符号位s=0时表示正无穷，s=1时候表示负无穷。

对于上面的0.1的指数位为-4，-4+1023 = 1019 转化为二进制就是：1111111011.文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

所以，0.1表示为：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

0 1111111011 1001100110011001100110011001100110011001100110011001
复制代码

说了这么多，是时候该最开始的问题了，如何实现0.1+0.2=0.3呢？文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

对于这个问题，一个直接的解决方法就是设置一个误差范围，通常称为“机器精度”。对JavaScript来说，这个值通常为2，在ES6中，提供了Number.EPSILON属性，而它的值就是2，只要判断0.1+0.2-0.3是否小于Number.EPSILON，如果小于，就可以判断为0.1+0.2 ===0.3文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

function numberepsilon(arg1,arg2){                   
  return Math.abs(arg1 - arg2) < Number.EPSILON;        
}        

console.log(numberepsilon(0.1 + 0.2, 0.3)); // true
复制代码

8. JavaScript为什么要进行变量提升，它导致了什么问题？

变量提升的表现是，无论在函数中何处位置声明的变量，好像都被提升到了函数的首部，可以在变量声明前访问到而不会报错。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

造成变量声明提升的本质原因是 js 引擎在代码执行前有一个解析的过程，创建了执行上下文，初始化了一些代码执行时需要用到的对象。当访问一个变量时，会到当前执行上下文中的作用域链中去查找，而作用域链的首端指向的是当前执行上下文的变量对象，这个变量对象是执行上下文的一个属性，它包含了函数的形参、所有的函数和变量声明，这个对象的是在代码解析的时候创建的。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

首先要知道，JS在拿到一个变量或者一个函数的时候，会有两步操作，即解析和执行。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

  • 在解析阶段，JS会检查语法，并对函数进行预编译。解析的时候会先创建一个全局执行上下文环境，先把代码中即将执行的变量、函数声明都拿出来，变量先赋值为undefined，函数先声明好可使用。在一个函数执行之前，也会创建一个函数执行上下文环境，跟全局执行上下文类似，不过函数执行上下文会多出this、arguments和函数的参数。
    • 全局上下文：变量定义，函数声明
    • 函数上下文：变量定义，函数声明，this，arguments
  • 在执行阶段，就是按照代码的顺序依次执行。

那为什么会进行变量提升呢？主要有以下两个原因：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

  • 提高性能
  • 容错性更好

（1）提高性能 在JS代码执行之前，会进行语法检查和预编译，并且这一操作只进行一次。这么做就是为了提高性能，如果没有这一步，那么每次执行代码前都必须重新解析一遍该变量（函数），而这是没有必要的，因为变量（函数）的代码并不会改变，解析一遍就够了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

在解析的过程中，还会为函数生成预编译代码。在预编译时，会统计声明了哪些变量、创建了哪些函数，并对函数的代码进行压缩，去除注释、不必要的空白等。这样做的好处就是每次执行函数时都可以直接为该函数分配栈空间（不需要再解析一遍去获取代码中声明了哪些变量，创建了哪些函数），并且因为代码压缩的原因，代码执行也更快了。 （2）容错性更好 变量提升可以在一定程度上提高JS的容错性，看下面的代码：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

a = 1;
var a;
console.log(a);
复制代码

如果没有变量提升，这两行代码就会报错，但是因为有了变量提升，这段代码就可以正常执行。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

虽然，在可以开发过程中，可以完全避免这样写，但是有时代码很复杂的时候。可能因为疏忽而先使用后定义了，这样也不会影响正常使用。由于变量提升的存在，而会正常运行。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

总结：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

  • 解析和预编译过程中的声明提升可以提高性能，让函数可以在执行时预先为变量分配栈空间
  • 声明提升还可以提高JS代码的容错性，使一些不规范的代码也可以正常执行

变量提升虽然有一些优点，但是他也会造成一定的问题，在ES6中提出了let、const来定义变量，它们就没有变量提升的机制。 下面来看一下变量提升可能会导致的问题：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

var tmp = new Date();

function fn(){
	console.log(tmp);
	if(false){
		var tmp = 'hello world';
	}
}

fn();  // undefined
复制代码

在这个函数中，原本是要打印出外层的tmp变量，但是因为变量提升的问题，内层定义的tmp被提到函数内部的最顶部，相当于覆盖了外层的tmp，所以打印结果为undefined。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

var tmp = 'hello world';

for (var i = 0; i < tmp.length; i++) {
	console.log(tmp[i]);
}

console.log(i); // 11
复制代码

由于遍历时定义的i会变量提升成为一个全局变量，在函数结束之后不会被销毁，所以打印出来11。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

9. typeof NaN 的结果是什么？

NaN 意指“不是一个数字”（not a number），NaN 是一个“警戒值”（sentinel value，有特殊用途的常规值），用于指出 数字类型中的错误情况，即“执行数学运算没有成功，这是失败后返回的结果”。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

typeof NaN; // "number"
复制代码

NaN 是一个特殊值，它和自身不相等，是唯一一个非自反（自反，reflexive，即 x === x 不成立）的值。而 NaN != NaN 为 true。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

10. isNaN 和 Number.isNaN 函数的区别？

  • 函数 isNaN 接收参数后，会尝试将这个参数转换为数值，任何不能被转换为数值的的值都会返回 true，因此非数字值传入也会返回 true ，会影响 NaN 的判断。
  • 函数 Number.isNaN 会首先判断传入参数是否为数字，如果是数字再继续判断是否为 NaN ，这种方法对于 NaN 的判断更为准确。

11. == 操作符的强制类型转换规则？

  • 字符串和数字之间的相等比较，将字符串转换为数字之后再进行比较。
  • 其他类型和布尔类型之间的相等比较，先将布尔值转换为数字后，再应用其他规则进行比较。
  • null 和 undefined 之间的相等比较，结果为真。其他值和它们进行比较都返回假值。
  • 对象和非对象之间的相等比较，对象先调用 ToPrimitive 抽象操作后，再进行比较。
  • 如果一个操作值为 NaN ，则相等比较返回 false（ NaN 本身也不等于 NaN ）。
  • 如果两个操作值都是对象，则比较它们是不是指向同一个对象。如果两个操作数都指向同一个对象，则相等操作符返回true，否则，返回 false。

12. 其他值到字符串的转换规则？

  • Null 和 Undefined 类型 ，null 转换为 "null"，undefined 转换为 "undefined"，
  • Boolean 类型，true 转换为 "true"，false 转换为 "false"。
  • Number 类型的值直接转换，不过那些极小和极大的数字会使用指数形式。
  • Symbol 类型的值直接转换，但是只允许显式强制类型转换，使用隐式强制类型转换会产生错误。
  • 对普通对象来说，除非自行定义 toString() 方法，否则会调用 toString()（Object.prototype.toString()）来返回内部属性 [[Class]] 的值，如"[object Object]"。如果对象有自己的 toString() 方法，字符串化时就会调用该方法并使用其返回值。

13. 其他值到数字值的转换规则？

  • Undefined 类型的值转换为 NaN。
  • Null 类型的值转换为 0。
  • Boolean 类型的值，true 转换为 1，false 转换为 0。
  • String 类型的值转换如同使用 Number() 函数进行转换，如果包含非数字值则转换为 NaN，空字符串为 0。
  • Symbol 类型的值不能转换为数字，会报错。
  • 对象（包括数组）会首先被转换为相应的基本类型值，如果返回的是非数字的基本类型值，则再遵循以上规则将其强制转换为数字。

为了将值转换为相应的基本类型值，抽象操作 ToPrimitive 会首先（通过内部操作 DefaultValue）检查该值是否有valueOf()方法。如果有并且返回基本类型值，就使用该值进行强制类型转换。如果没有就使用 toString() 的返回值（如果存在）来进行强制类型转换。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

如果 valueOf() 和 toString() 均不返回基本类型值，会产生 TypeError 错误。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

14. 其他值到布尔类型的值的转换规则？

以下这些是假值： • undefined • null • false • +0、-0 和 NaN • ""文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

假值的布尔强制类型转换结果为 false。从逻辑上说，假值列表以外的都应该是真值。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

15. || 和 && 操作符的返回值？

|| 和 && 首先会对第一个操作数执行条件判断，如果其不是布尔值就先进行 ToBoolean 强制类型转换，然后再执行条件 判断。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

  • 对于 || 来说，如果条件判断结果为 true 就返回第一个操作数的值，如果为 false 就返回第二个操作数的值。
  • && 则相反，如果条件判断结果为 true 就返回第二个操作数的值，如果为 false 就返回第一个操作数的值。

|| 和 && 返回它们其中一个操作数的值，而非条件判断的结果文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

16. Object.is() 与比较操作符 ===、== 的区别？

  • 使用双等号进行相等判断时，如果两边的类型不一致，则会进行强制类型转化后再进行比较。
  • 使用三等号进行相等判断时，如果两边的类型不一致时，不会做强制类型准换，直接返回 false。
  • 使用 Object.is 来进行相等判断时，一般情况下和三等号的判断相同，它处理了一些特殊的情况，比如 -0 和 +0 不再相等，两个 NaN 认定为是相等的。

17. 什么是 JavaScript 中的包装类型？

在 JavaScript 中，基本类型是没有属性和方法的，但是为了便于操作基本类型的值，在调用基本类型的属性或方法时 JavaScript 会在后台隐式地将基本类型的值转换为对象，如：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

const a = "abc";
a.length; // 3
a.toUpperCase(); // "ABC"
复制代码

在访问'abc'.length时，JavaScript 将'abc'在后台转换成String('abc')，然后再访问其length属性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

JavaScript也可以使用Object函数显式地将基本类型转换为包装类型：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

var a = 'abc'
Object(a) // String {"abc"}
复制代码

也可以使用valueOf方法将包装类型倒转成基本类型：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

var a = 'abc'
var b = Object(a)
var c = b.valueOf() // 'abc'
复制代码

看看如下代码会打印出什么：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

var a = new Boolean( false );
if (!a) {
	console.log( "Oops" ); // never runs
}
复制代码

答案是什么都不会打印，因为虽然包裹的基本类型是false，但是false被包裹成包装类型后就成了对象，所以其非值为false，所以循环体中的内容不会运行。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

18. JavaScript 中如何进行隐式类型转换？

首先要介绍ToPrimitive方法，这是 JavaScript 中每个值隐含的自带的方法，用来将值 （无论是基本类型值还是对象）转换为基本类型值。如果值为基本类型，则直接返回值本身；如果值为对象，其看起来大概是这样：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

/**
* @obj 需要转换的对象
* @type 期望的结果类型
*/
ToPrimitive(obj,type)
复制代码

type的值为number或者string。 （1）当type为number时规则如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

  • 调用obj的valueOf方法，如果为原始值，则返回，否则下一步；
  • 调用obj的toString方法，后续同上；
  • 抛出TypeError 异常。

（2）当type为string时规则如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

  • 调用obj的toString方法，如果为原始值，则返回，否则下一步；
  • 调用obj的valueOf方法，后续同上；
  • 抛出TypeError 异常。

可以看出两者的主要区别在于调用toString和valueOf的先后顺序。默认情况下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

  • 如果对象为 Date 对象，则type默认为string；
  • 其他情况下，type默认为number。

总结上面的规则，对于 Date 以外的对象，转换为基本类型的大概规则可以概括为一个函数：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

var objToNumber = value => Number(value.valueOf().toString())
objToNumber([]) === 0
objToNumber({}) === NaN
复制代码

而 JavaScript 中的隐式类型转换主要发生在+、-、*、/以及==、>、<这些运算符之间。而这些运算符只能操作基本类型值，所以在进行这些运算前的第一步就是将两边的值用ToPrimitive转换成基本类型，再进行操作。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

以下是基本类型的值在不同操作符的情况下隐式转换的规则 （对于对象，其会被ToPrimitive转换成基本类型，所以最终还是要应用基本类型转换规则）：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

  1. +操作符 当+操作符的两边有至少一个string类型变量时，两边的变量都会被隐式转换为字符串；其他情况下两边的变量都会被转换为数字。
1 + '23' // '123'
 1 + false // 1 
 1 + Symbol() // Uncaught TypeError: Cannot convert a Symbol value to a number
 '1' + false // '1false'
 false + true // 1
复制代码
  1. -、*、\操作符 这三个操作符是为数字操作而设计的，所以操作符两边的变量都会被转换成数字，注意NaN也是一个数字
1 * '23' // 23
 1 * false // 0
 1 / 'aa' // NaN
复制代码
  1. 对于==操作符

操作符两边的值都尽量转成number：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

3 == true // false, 3 转为number为3，true转为number为1
'0' == false //true, '0'转为number为0，false转为number为0
'0' == 0 // '0'转为number为0
复制代码
  1. 对于<和>比较符

如果两边都是字符串，则比较字母表顺序：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

'ca' < 'bd' // false
'a' < 'b' // true
复制代码

其他情况下，转换为数字再比较：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

'12' < 13 // true
false > -1 // true
复制代码

以上说的是基本类型的隐式转换，而对象会被ToPrimitive转换为基本类型再进行转换：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

var a = {}
a > 2 // false
复制代码

其对比过程如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

a.valueOf() // {}, 上面提到过，ToPrimitive默认type为number，所以先valueOf，结果还是个对象，下一步
a.toString() // "[object Object]"，现在是一个字符串了
Number(a.toString()) // NaN，根据上面 < 和 > 操作符的规则，要转换成数字
NaN > 2 //false，得出比较结果
复制代码

又比如：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

var a = {name:'Jack'}
var b = {age: 18}
a + b // "[object Object][object Object]"
复制代码

运算过程如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

a.valueOf() // {}，上面提到过，ToPrimitive默认type为number，所以先valueOf，结果还是个对象，下一步
a.toString() // "[object Object]"
b.valueOf() // 同理
b.toString() // "[object Object]"
a + b // "[object Object][object Object]"
复制代码

19. + 操作符什么时候用于字符串的拼接？

根据 ES5 规范 11.6.1 节，如果某个操作数是字符串或者能够通过以下步骤转换为字符串的话，+ 将进行拼接操作。如果其中一个操作数是对象（包括数组），则首先对其调用 ToPrimitive 抽象操作，该抽象操作再调用 [[DefaultValue]]，以数字作为上下文。如果不能转换为字符串，则会将其转换为数字类型来进行计算。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

简单来说就是，如果 + 的其中一个操作数是字符串（或者通过以上步骤最终得到字符串），则执行字符串拼接，否则执行数字加法。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

那么对于除了加法的运算符来说，只要其中一方是数字，那么另一方就会被转为数字。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

作者：CUGGZ文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/21130.html
  • 本站内容整理自互联网，仅提供信息存储空间服务，以方便学习之用。如对文章、图片、字体等版权有疑问，请在下方留言，管理员看到后，将第一时间进行处理。
  • 转载请务必保留本文链接：https://www.cainiaoxueyuan.com/gcs/21130.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定