JavaScript 深入了解基本类型和引用类型的值

原文链接

一个变量可以存放两种类型的值,基本类型的值(primitive values)和引用类型的值(reference values)。

ES6 引入了一种新的原始数据类型 Symbol,表示独一无二的值。它是 JavaScript 语言的第七种数据类型,前六种是:Undefined、Null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。

基本类型

JavaScript 中共有 6 种基本数据类型:UndefinedNullBooleanNumberStringSymbol (new in ES 6)

约定:基本数据类型原始数据类型等意。

基本数据类型的值是按值访问的。

  • 基本类型的值是不可变的

    var str = "123hello321";
    str.toUpperCase();     // 123HELLO321
    console.log(str);      // 123hello321
  • 基本类型的比较是它们的值的比较

    var a = 1;
    var b = true;
    console.log(a == b);    // true
    console.log(a === b);   // false

    上面 a 和 b 的数据类型不同,但是也可以进行值的比较,这是因为在比较之前,自动进行了数据类型的 隐式转换

    • == : 只进行值的比较

    • === : 不仅进行值得比较,还要进行数据类型的比较

  • 基本类型的变量是存放在栈内存(Stack)里的

    var a,b;
    a = "zyj";
    b = a;
    console.log(a);   // zyj
    console.log(b);   // zyj
    a = "呵呵";       // 改变 a 的值,并不影响 b 的值
    console.log(a);   // 呵呵
    console.log(b);   // zyj

图解如下:栈内存中包括了变量的标识符和变量的值

图片描述

引用类型

除过上面的 6 种基本数据类型外,剩下的就是引用类型了,统称为 Object 类型。细分的话,有:Object 类型Array 类型Date 类型RegExp 类型Function 类型 等。

引用类型的值是按引用访问的。

  • 引用类型的值是可变的

    var obj = {name:"zyj"};   // 创建一个对象
    obj.name = "percy";       // 改变 name 属性的值
    obj.age = 21;             // 添加 age 属性
    obj.giveMeAll = function(){
      return this.name + " : " + this.age;
    };                        // 添加 giveMeAll 方法
    obj.giveMeAll();
  • 引用类型的比较是引用的比较

    var obj1 = {};    // 新建一个空对象 obj1
    var obj2 = {};    // 新建一个空对象 obj2
    console.log(obj1 == obj2);    // false
    console.log(obj1 === obj2);   // false

    因为 obj1 和 obj2 分别引用的是存放在堆内存中的2个不同的对象,故变量 obj1 和 obj2 的值(引用地址)也是不一样的!

  • 引用类型的值是保存在堆内存(Heap)中的对象(Object)
    与其他编程语言不同,JavaScript 不能直接操作对象的内存空间(堆内存)。

    var a = {name:"percy"};
    var b;
    b = a;
    a.name = "zyj";
    console.log(b.name);    // zyj
    b.age = 22;
    console.log(a.age);     // 22
    var c = {
      name: "zyj",
      age: 22
    };

图解如下:

  • 栈内存中保存了变量标识符和指向堆内存中该对象的指针

  • 堆内存中保存了对象的内容

图片描述

检测类型

  • typeof:经常用来检测一个变量是不是最基本的数据类型

    var a;
    typeof a;    // undefined
    
    a = null;
    typeof a;    // object
    
    a = true;
    typeof a;    // boolean
    
    a = 666;
    typeof a;    // number 
    
    a = "hello";
    typeof a;    // string
    
    a = Symbol();
    typeof a;    // symbol
    
    a = function(){}
    typeof a;    // function
    
    a = [];
    typeof a;    // object
    a = {};
    typeof a;    // object
    a = /aaa/g;
    typeof a;    // object   
  • instanceof:用来判断某个构造函数的 prototype 属性所指向的对象是否存在于另外一个要检测对象的原型链上

    • 简单说就是判断一个引用类型的变量具体是不是某种类型的对象

      ({}) instanceof Object              // true
      ([]) instanceof Array               // true
      (/aa/g) instanceof RegExp           // true
      (function(){}) instanceof Function  // true

更详细的类型检测请看参考资料!

有错误的地方,欢迎大家指出来!

参考资料


percy507的编程之路
自2016年加入社区后,陆陆续续发布过一些文章,后面也自己折腾过个人博客(hexo+github)。但是自2018年...

主修前端,

962 声望
54 粉丝
0 条评论
推荐阅读
使用vite搭个中后台系统的脚手架
搭个中后台系统的脚手架仓库地址 [链接]搭建脚手架目的学习 vite、recoil 等新技术封装项目中常用的较复杂的组件学习一定的前端架构能力构建命令npm 与 yarn 对新版 husky(v7.0.1+)的配置方式不太相同,我们这...

percy5072阅读 3.4k

封面图
安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城31阅读 7.2k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco20阅读 2.1k评论 2

在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 1.9k

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5.6k评论 10

封面图
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...

边城18阅读 7.7k评论 3

封面图
Vue2 导出excel
2020-07-15更新 excel导出安装 {代码...} src文件夹下新建一个libs文件夹,新建一个excel.js {代码...} vue页面中使用 {代码...} ===========================以下为早期的文章今天在开发的过程中需要做一个Vue的...

原谅我一生不羁放歌搞文艺14阅读 19.9k评论 9

主修前端,

962 声望
54 粉丝
宣传栏