前端面试必问题-js数据类型

一名前端ikun
169 阅读6分钟

前言：相信很多小伙伴在面试的时候都被问过这样一个问题--“js的数据类型有哪些？”。鼠鼠我一般是这么回答的：*有基本数据类型和引用数据类型两种，基本数据类型有 Number、String、Null、Undefined、Boolen、Symbol 六种；引用数据类型有Array和Object两种，严格来说数组也是另一种形式的对象。*一般面试大哥都觉得可以了，直到有两个面试官问我：你知道BigInt类型吗？除了这些还有哪些呢？我才意识到：我还是太肤浅了。本文带大家梳理一下具体js都有哪些数据类型以及作用是什么，具体比较难的鼠鼠后续会单独写一篇文章。

原始数据类型和引用数据类型最显著的区别就是原始数据类型存储在栈里面，而引用数据类型的引用存储在栈里，其具体的数据存储在堆里。比如一个对象:

const obj = {
    a:1，
    b:2，
    c:3
}

这里 obj相当于存储于栈里，而大括号里面的a b c则存储于堆里。

原始数据类型

Number 类型（数字类型）

Number 数据类型应该是大部分人用的最多的一种数据类型。它是数字类型，也就是平常我们定义的0,1,2 ... Number.MAX_VALUE等这些数字， js 里面不像 C++、java 那样具体区分整形和浮点型，统称为 Number 类型，当然，这也会出现一些问题，比如说在使用二分法查询数组元素的过程中，left-(left/2-right/2) 的结果可能为浮点型，这并不会报错，但是一定达不到我们预期的结果。所以需要结合 Math.floor、Math.ceil、这些转化整形的方法来使用。

String 类型（字符串类型）

String 数据类型和 Number 类型一样也是一种基本数据类型。可以使用单引号或者双引号进行包裹，模板字符串模板之外的部分也是。

Boolen 类型

这个没什么好说的，就是 true 和 false.

undefined 类型

undefined 翻译过来就是未定义，也就是声明了这个变量，但是并没有对它进行赋值.

let a;
console.log(a);  // undefined

null 类型

null 类型简单来说就是空,没有任何指向对象或者值，是需要我们主动去声明的；它与 undefined 是不同的, undefined 虽然是未定义，但它仍然有相应的指针指向。 同时，这里有一点要说明，关于 null 的类型判断，相信很多小伙伴都遇到过下面这种情况：

console.log(typeof null); // 'object'

这并不意味着 undefined 是 Object 类型， null 就是 null 类型，这是一个历史性错误，这个错误的起源可以追溯到 JavaScript 的设计阶段(只用了10天的时间)。在 JavaScript 的初始版本中，变量的类型信息存储在一个称为标签位（tag bits）的标志位中。当一个变量被标记为 Object 时，它的标签位会被设置为 000，而 null 的二进制表示是全为 0 的值。因此，null 被错误地判断为 Object 类型。

symbol 类型

这个是 ES6 新加的一个唯一值类型，一般来说大部分面试官也不会。这个本人后续会单独出一期文章来着重介绍，所以这里就简单水一下；

BigInt 类型

BigInt 类型简称为大数类型，是 ES8所发布的新特性；

Number 类型的最大值是 Number.MAX_VALUE，其值为1.7976931348623157e+308。最小值是 Number.MIN_VALUE，其值为 5e-324。 然而，由于 JavaScript 的整数限制，当我们需要处理大于 Number.MAX_SAFE_INTEGER（即 2^53 - 1）的整数时，可能会遇到精度问题。在这种情况下，可以使用 BigInt 类型。

let a = Number.MAX_VALUE; //  Number.MAX_VALUE:1.7976931348623157e+308
console.log(a+a); // Infinity 这里超出范围，就无法计算出正确结果
console.log(a*a);// Infinity
let b =  BigInt(a);
console.log(b+b);// 359...36n
console.log(b*b); // 323...4n

BigInt数据类型与Number数据类型最直观的区别就是尾部多了一个n

let a1=1;
console.log(typeof a1) // number
let a2=1n;
console.log(typeof a2) // bigint

BigInt 类型可以表示任意大的整数，只要它们在可用内存中。BigInt 的范围没有硬编码的限制。然而，BigInt 的实际范围可能受到 JavaScript 环境的限制。

需要注意的是，由于 BigInt 的表示方式和 Number 不同，因此在进行 BigInt 和 Number 之间的转换时可能会出现精度损失或溢出。另外，BigInt 的运算速度通常比普通的 Number 运算慢。

引用数据类型

Object 类型

Object 类型就是我们经常用的对象类型，一个键对应一个值,这个值可以是各种数据类型，同级目录下的键是不能重复的。它常见的遍历方法有以下几种：

// 1.for-in
var obj = {a: 1, b: 2, c: 3}; 
for (var key in obj) {
if (obj.hasOwnProperty(key)) { // 确保key是obj自身的属性，而非继承来的 
console.log(key + ": " + obj[key]); 
}
}
// 2.Object.keys():

	var obj = {a: 1, b: 2, c: 3};  

	Object.keys(obj).forEach(function(key) {  

	    console.log(key + ": " + obj[key]);  

	});

// 3. Object.entries():

// 这个方法会返回一个给定对象的所有自有的可枚举属性的键-值对数组。每个数组元素都是一个包含属性键和对应值的数组。

	var obj = {a: 1, b: 2, c: 3};  

	Object.entries(obj).forEach(function([key, value]) {  

	    console.log(key + ": " + value);  

	});

// 4.  for...of：

// for...of也可以用于遍历对象，但请注意，它只能遍历到对象的自有属性，不能遍历到继承的属性。此外，它返回的是键和值的迭代，而不是键的迭代。

	var obj = {a: 1, b: 2, c: 3};  

	for (let [key, value] of Object.entries(obj)) {  

	    console.log(key + ": " + value);  

	}

PS:在遍历对象的方法中，只有for-in循环可以被打断。其他的遍历方法，如Object.keys()、Object.entries()和for...of循环，不能被打断。

Array 类型

Array是数组类型，js 的数组功能非常强大，push()、pop()和unshift()结合起来可以当做栈和队列来用。

const arr1 = [1,2,3,4];

// 栈
arr1.push(5);
console.log(arr1); // [ 1, 2, 3, 4, 5 ]
arr1.pop();
console.log(arr1); // [ 1, 2, 3, 4 ]

//队列
arr1.unshift(7);
console.log(arr1); // [ 7, 1, 2, 3, 4 ]

数组也有很多自带的遍历方法，如map()、filter()、some()、reduce()、forEach()等等。这里简单介绍一下各个方法：

  1. map()

map() 方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。例如：

let numbers = [1, 2, 3, 4, 5];
let squares = numbers.map(function(num) {
    return num * num;
});
console.log(squares); // [1, 4, 9, 16, 25]
  1. filter()

filter() 方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素。例如：

let numbers = [1, 2, 3, 4, 5];
let evens = numbers.filter(function(num) {
    return num % 2 === 0;
});
console.log(evens); // [2, 4]
  1. some()

some() 方法检测数组中是否至少有一个元素通过所提供的函数实现的测试。如果有，则返回 true，否则返回 false。例如：

let numbers = [1, 2, 3, 4, 5];
let bigEnough = numbers.some(function(num) {
    return num > 3;
});
console.log(bigEnough); // true
  1. reduce()

reduce() 方法对累加器和数组中的每个元素（从左到右）应用一个函数，将其减少为单个值。例如：

let numbers = [1, 2, 3, 4, 5];
let sum = numbers.reduce(function(total, num) {
    return total + num;
}, 0);
console.log(sum); // 15
  1. forEach()

forEach() 方法对数组的每个元素执行一次提供的函数。例如：

let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(num, index) {
    console.log(index, num);
});

总结

以上就是js的数据类型相关的知识点。面试的时候基本就这么多。当然，还有一些相关知识点，比如引用数据类型还包括 Date、Map、Set、RegExp等等，可以关注我，后续本人会持续更新。

avatar
文章
阅读
粉丝