首页 > 编程语言 >JavaScript基础之基于数据类型和引用数据类型

JavaScript基础之基于数据类型和引用数据类型

时间:2023-08-21 19:06:41浏览次数:43  
标签:JavaScript console log Object 数据类型 object toString 引用

数据类型

JavaScript的数据类型有7中,包括6个基本类型和一个引用类型
基本数据类型:number, string, boolean, null, undefined, symbol
引用数据类型:object(数组、对象、函数、正则等)

基本数据类型和引用数据类型的区别

  • 存储方式
    基本类型:基本数据类型的值直接存储在改变量所分配的内存空间中,它们是简单数据类型,占用的空间小
    引用类型:引用数据类型的值存储在堆内存中,变量存储的是对象在堆内存的地址,而不是实际的值,所以引用数据的大小不固定, 可以包含大量数据。
  • 赋值行为
    基本类型:将一个基本数据类型赋值给另一个变量,直接将该值的副本赋值给新的变量
    引用类型:而将引用数据类型的变量赋值给另一个变量,是将该引用类型的地址给另一个变量,不是直接的值,两个变量指向同一个数据,当修改另一个变量时,此变量的值也会跟着变。
  • 比较方式
    基本数据类型:基本数据类型的值通过它们的实际值进行比较。
    引用数据类型:引用数据类型的值比较的是它们在内存中的地址(引用),而不是实际的值。因此,即使两个对象具有相同的属性和值,它们在内存中是不同的对象,比较结果会是 false。

基本数据类型:

let num1 = 42;
let num2 = num1; // 复制值,num2 现在是 42 的副本
num1 = 100; // 修改 num1 的值不会影响 num2

console.log(num1); // 输出 100
console.log(num2); // 输出 42

引用数据类型:

const obj1 = { name: "John" };
const obj2 = obj1; // 复制引用,obj2 指向 obj1 引用的对象

obj1.name = "Alice"; // 修改 obj1 的属性,也会影响 obj2

console.log(obj1.name); // 输出 "Alice"
console.log(obj2.name); // 输出 "Alice",因为 obj2 指向与 obj1 相同的对象

判断变量的数据类型

typeof

typeof运算符用来获取数据的类型。但是对于 null 返回的是 “object”,这是历史遗留问题,可能会导致误判。
对于函数返回的是 “function”,但函数也是对象的一种,因此不能准确区分一个变量是简单的函数还是其他类型的对象。

typeof "hello" // 返回 "string"
typeof 42 // 返回 "number"
typeof true // 返回 "boolean"
typeof undefined // 返回 "undefined"
typeof null // 返回 "object"
typeof [] // 返回 "object"
typeof {} // 返回 "object"
typeof function(){} // 返回 "function"

instanceof

instanceof 运算符用于检查一个对象是否属于某个特定类的实例。
但是它只能判断赋复杂数据类型,不能判断基本数据类型。

const myArray = [];
const myDate = new Date();

console.log(myArray instanceof Array); // 输出 true
console.log(myArray instanceof Object); // 输出 true,因为 Array 是 Object 的子类
console.log(myDate instanceof Date); // 输出 true
console.log(myDate instanceof Object); // 输出 true,因为 Date 是 Object 的子类

Array.isArray()

Array.isArray()用于判断值是否为数组类型。

console.log(Array.isArray([])); // 输出 true
console.log(Array.isArray({})); // 输出 false

Object.prototype.toString.call()

使用 Object.prototype.toString.call() 方法:这是一种通用的方法,可以检测几乎所有的数据类型。

console.log(Object.prototype.toString.call("hello")); // 输出 "[object String]"
console.log(Object.prototype.toString.call(42)); // 输出 "[object Number]"
console.log(Object.prototype.toString.call(true)); // 输出 "[object Boolean]"
console.log(Object.prototype.toString.call(undefined)); // 输出 "[object Undefined]"
console.log(Object.prototype.toString.call(null)); // 输出 "[object Null]"
console.log(Object.prototype.toString.call([])); // 输出 "[object Array]"
console.log(Object.prototype.toString.call({})); // 输出 "[object Object]"
console.log(Object.prototype.toString.call(function () {})); // 输出 "[object Function]"
console.log(Object.prototype.toString.call(new Date())); // 输出 "[object Date]"

虽然上述方法在很多情况下可以满足数据类型判断的需求,但它们也有一些弊端需要注意:

  1. typeof 的问题:
  • 对于 null 返回的是 "object",这是历史遗留问题,可能会导致误判。例如,无法准确判断一个变量是 null 还是对象。
  • 对于函数返回的是 "function",但函数也是对象的一种,因此不能准确区分一个变量是简单的函数还是其他类型的对象。
  1. instanceof 的问题:
  • instanceof 只能检测对象类型,并且还要考虑原型链。如果对象是在不同的全局上下文中创建的,或者涉及多个框架,instanceof 可能会失效。
  • 不能判断基本数据类型,如字符串、数字、布尔值等。
  1. Array.isArray() 的问题:
  • Array.isArray() 只能判断数组类型,不能判断其他对象类型。
  1. Object.prototype.toString.call() 的问题:
  • 这种方法虽然可以准确判断大部分类型,但使用起来较为繁琐,需要额外的调用,并且不够直观。
  • 如果出现自定义类的实例,Object.prototype.toString.call() 只会返回 "[object Object]",无法具体判断其属于哪个类。

封装判断变量的数据类型函数

这里分别用了typeof和Object.prototype.toString.call()方法。

/**
 * @param 要判断类型的值
 * @returns 数据类型
 */
export const getDataType = (value: any) => {
  if (typeof value === "object") {
    if (value === null) return "null";
    if (Array.isArray(value)) return "array";
    return "object";
  }
  return typeof value;
};

export const getDataType2 = (value: any) => {
  const type = Object.prototype.toString.call(value);
  if (type === "[object String]") return "string";
  if (type === "[object Number]") return "number";
  if (type === "[object Boolean]") return "boolean";
  if (type === "[object Undefined]") return "undefined";
  if (type === "[object Null]") return "null";
  if (type === "[object Array]") return "array";
  if (type === "[object Object]") return "object";
  if (type === "[object Function]") return "function";
  if (type === "[Object Date]") return "date";
};


标签:JavaScript,console,log,Object,数据类型,object,toString,引用
From: https://blog.51cto.com/u_14196886/7178184

相关文章

  • 《HTML CSS JavaScript 网页制作》JavaScript基本知识(简介、语法、事件、对象)
    一、JavaScript简介1、JavaScript特点脚本语言:是一种解释型的脚本语言,在程序运行过程中逐行进行解释;基于对象:可以创建对象,也能使用现有的对象;简单:采用的是弱类型的变量类型,对使用的数据类型未作出严格的要求;动态性:采用事件驱动,不需要经过web服务器就可以对用户的输入作出响应;跨平台......
  • 【8月摸鱼计划】python不支持的数据类型
    python不支持的数据类型是:char、byte类型。python支持的数据类型有:文本类型:str数值类型:int,float,complex序列类型:list,tuple,range映射类型:dict集合类型:set,frozenset布尔类型:bool二进制类型:bytes,bytearray,memoryview......
  • 11 JavaScript关于时间
    11JavaScript关于时间获取js的时间使用内置的Date函数完成vard=newDate();//获取系统时间//vard=newDate('2023-08-1514:11:48');//得到一个具体时间console.log(d)//时间格式化year=d.getFullYear();//拿到年份month=d.getMonth()+1;/......
  • 5 JavaScript变量提升
    5变量提升看以下代码,或多或少会有些问题的.functionfn(){console.log(name);varname='大马猴';}fn()发现问题了么.这么写代码,在其他语言里.绝对是不允许的.但是在js里.不但允许,还能执行.为什么呢?因为在js执行的时候.它会首先检测你的代码.......
  • 9 JavaScript闭包
    9闭包我们都知道,函数里是可以访问函数外的全局变量,而函数外不能访问函数内的局部变量,如下://函数外定义a,在函数内可以访问vara="测试";functionfn(){console.log(a);}fn();执行结果://函数内定义a,在函数外访问不到functionfn(){vara="测试";}co......
  • javascript学习笔记day4
    今天重点学习了数组,老实说学过了c#和python的数组,但是今天重新接触js的数字还是有很多要重新学习的,下面是今天的笔记查询条件五个以上时,switch的效果比iflese高两倍以上.letarr=[]声明数组letarr=newArray(1,2,3,4)声明数组修改数组letarr=['a','b','c']for(letinde......
  • JavaScript中的“函数式编程”
    前言我们虽然之前老是听说过“函数式编程”,但一直不能理解,我们静下心来研究了一下,才发现这些东西真的很巧妙。在React这些框架中,对象,函数为王,因为框架已经帮你打建好了在框架中,数据为王,那些函数本身就是用来处理数据这里我们要用更高层的思维,而放弃底层思维,这些本身都是用户数......
  • JavaScript中的数值
    JavaScript中的主要数值类型是Number类型,用于表示整数和近似的实数。JavaScript采用了由IEEE754标准定义的64位浮点格式来表示数值。这意味着JavaScript可以表示最大整数±1.7976931348623157×10^308和最小整数±5×10^-324。JavaScript中的这种数值格式允许我们准确......
  • 数据类型
    数据类型1.强类型语言要求变量的使用严格符合规定,所有变量先定义后使用。2.弱类型语言类似于js3.java的数据类型分为两大类基本类型数据类型,byte(-128-127)short(-32768-32767)int(-21亿-21亿)long(兆的计算)浮点类型:float(离散,舍入误差),double;字符类型:char(所有的字符本质是数......
  • 8 JavaScript函数
    8JavaScript函数在JS中声明函数和python差不多.也要有一个关键字顶在前面.python是def,到了JS里换成了function,只不过在JS中没有像python那么死板,必须def后面必须跟上函数名.这也为我们未来做逆向提供了第一个超大的伏笔.//语法//声明函数function函数名(形参1,......