js基本数据类型和引用数据类型有什么区别?

js 专栏收录该内容
3 篇文章 0 订阅

js基本数据类型和引用数据类型有什么区别?

1.基本数据类型和引用数据类型包括哪些?

基本数据类型:

在javascript中,有6种基本数据类型:string、number、boolean、null、undefined、symbol

注:symbol是es2016新增的基本数据类型

引用数据类型:都统称为object

包括object、array、function等

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

2.1分配的内存区域不同

说白了就是基本数据类型和引用数据类型分别存放在不同的内存区域。基本数据类型存放在栈区,引用数据类型存放在堆区。

如果再详细一点,就是引用数据类型会在栈区存放数据的引用和地址指针(指向堆区中相应的数据),数据实体则存放在堆区。

2.2可更改性的差异

所有基本数据类型的都是不可更改的(需要注意被赋值为基本数据类型的变量和基本数据类型本身的区别),引用数据类型可通过修改内存地址指针进行更改。

//基本数据类型不可更改
const str = 'abc';
str.toUpperCase();
console.log(str);//abc (基本数据类型不可更改,因此str保持不变,输出abc)
str = str.toUpperCase();
console.log(str);// ABC (对变量重新赋值才可修改)
//引用数据类型的更改
const obj = { city : '成都' };
obj.city = '北京';//通过修改内存指针修改引用数据类型
console.log(obj); // { city : '北京' }

2.3类型判断方式的不同

2.3.1判断基本数据类型:typeof

注:由于js的历史遗留问题,typeof无法判断null,只能返回object。可通过data===null判断是data否为null。

2.3.2判断引用数据类型:

判断数组和对象:instanceof

const arr = ['a','b','c','d']
console.log(arr instanceof Array); //true
console.log(arr instanceof Object); //true 所有引用数据类型都是对象,因此数组本身也属于对象。

instanceof判断原理:查找左边的引用类型的原型链上是否有右边构造函数的prptotype属性,因此返回布尔值。
注:不同的window和iframe下不能使用instanceof判断数据类型,因为在不同的原型链上,都会返回false。
造函数constructor方法判断引用数据类型:

 const arr = ['a','b','c','d']
 console.log(arr.constructor===Array); //true

Object.prototype.toString.call()判断数据类型(推荐!!):

注:.IE678不兼容此方法(都返回[object Object])

 const arr = ['a', 'b', 'c', 'd'];
 const obj = {city: '成都'};
 console.log(Object.prototype.toString.call(arr)); // [Object Array] 返回的字符串类型
 console.log(Object.prototype.toString.call(obj)); // [Object Object] 返回的字符串类型
//封装一个判断引用数据类型的方法
function getDataType(obj){
         if (typeof data !== "object") {
          return typeof data;
        }
        if (data === null) {
          return "null";
        }
        return Object.prototype.toString.call(data).slice(8, -1).toLowerCase(0);

}
cosole.log(getDataType(arr)); // array

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

相关推荐
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值