Skip to content

JavaScript中的数据类型

JavaScript 有 5 种简单数据类型:Undefined、Null、Boolean、Number、String 和 1 种复杂数据类型 Object

基本类型(值类型)

  • Undefined
  • Null
  • Boolean
  • Number
  • String

复杂类型(引用类型)

  • Object
  • Array
  • Date
  • RegExp
  • Function
  • 基本包装类型
    • Boolean
    • Number
    • String
  • 单体内置对象
    • Global
    • Math

类型检测

  • typeof
  • instanceof
  • Object.prototype.toString.call()

值类型和引用类型在内存中的存储方式(画图说明)

  • 值类型按值存储
  • 引用类型按引用存储

值类型复制和引用类型复制(画图说明)

  • 值类型按值复制
  • 引用类型按引用复制

值类型和引用类型参数传递(画图说明)

  • 值类型按值传递
  • 引用类型按引用传递

值类型与引用类型的差别

  • 基本类型在内存中占据固定大小的空间,因此被保存在栈内存中
  • 从一个变量向另一个变量复制基本类型的值,复制的是值的副本
  • 引用类型的值是对象,保存在堆内存
  • 包含引用类型值的变量实际上包含的并不是对象本身,而是一个指向该对象的指针
  • 从一个变量向另一个变量复制引用类型的值的时候,复制是引用指针,因此两个变量最终都指向同一个对象

伪数组和数组

在JavaScript中,除了5种原始数据类型之外,其他所有的都是对象,包括函数(Function)。

对象与数组的关系

在说区别之前,需要先提到另外一个知识,就是 JavaScript 的原型继承。 所有 JavaScript 的内置构造函数都是继承自 Object.prototype 。 在这个前提下,可以理解为使用 new Array()[] 创建出来的数组对象,都会拥有 Object.prototype 的属性值。

javascript
var obj = {};// 拥有 Object.prototype 的属性值
var arr = [];
//使用数组直接量创建的数组,由于 Array.prototype 的属性继承自 Object.prototype,
//那么,它将同时拥有 Array.prototype 和 Object.prototype 的属性值

可以得到对象和数组的第一个区别:对象没有数组 Array.prototype 的属性值。

什么是数组

数组具有一个最基本特征:索引,这是对象所没有的,下面来看一段代码:

javascript
var obj = {};
var arr = [];

obj[2] = 'a';
arr[2] = 'a';

console.log(obj[2]); // => a
console.log(arr[2]); // => a
console.log(obj.length); // => undefined
console.log(arr.length); // => 3
  • obj[2]输出'a',是因为对象就是普通的键值对存取数据
  • 而arr[2]输出'a' 则不同,数组是通过索引来存取数据,arr[2]之所以输出'a',是因为数组arr索引2的位置已经存储了数据
  • obj.length并不具有数组的特性,并且obj没有保存属性length,那么自然就会输出undefined
  • 而对于数组来说,length是数组的一个内置属性,数组会根据索引长度来更改length的值
  • 为什么arr.length输出3,而不是1
    • 在给数组添加元素时,并没有按照连续的索引添加,所以导致数组的索引不连续,那么就导致索引长度大于元素个数

什么是伪数组

  1. 拥有 length 属性,其它属性(索引)为非负整数(对象中的索引会被当做字符串来处理,这里你可以当做是个非负整数串来理解)
  2. 不具有数组所具有的方法

伪数组,就是像数组一样有 length 属性,也有 0、1、2、3 等属性的对象,看起来就像数组一样,但不是数组,比如:

javascript
var fakeArray = {
  "0": "first",
  "1": "second",
  "2": "third",
  length: 3
};

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

Array.prototype.join.call(fakeArray,'+');

常见的伪数组有:

  • 函数内部的 arguments
  • DOM 对象列表(比如通过 document.getElementsByTags 得到的列表)
  • jQuery 对象(比如 $("div")

伪数组是一个 Object,而真实的数组是一个 Array。

伪数组存在的意义,是可以让普通的对象也能正常使用数组的很多方法,比如:

javascript
var arr = Array.prototype.slice.call(arguments);

Array.prototype.forEach.call(arguments, function(v) {
  // 循环arguments对象
});

// push
// some
// every
// filter
// map
// ...

以上在借用数组的原型方法的时候都可以通过数组直接量来简化使用:

javascript
var obj = {
  0: 'a',
  1: 'b',
  2: 'c',
  length: 3
}

;[].push.call(obj, 'd')

console.log([].slice.call(obj))

;[].forEach.call(obj, function (num, index) {
  console.log(num)
})

数组和伪数组小结

  • 对象没有数组 Array.prototype 的属性值,类型是 Object ,而数组类型是 Array
  • 数组是基于索引的实现, length 会自动更新,而对象是键值对
  • 使用对象可以创建伪数组,伪数组可以正常使用数组的大部分方法

伪数组和数组的区别:

  • 真数组的长度是可变的
  • 伪数组的长度不可变
  • 真数组可以使用数组中的方法
  • 伪数组不可以使用数组中的方法

总结

  • 类型检测方式
  • 值类型和引用类型的存储方式
  • 值类型复制和引用类型复制
  • 方法参数中 值类型数据传递 和 引用类型数据传递

JavaScript 执行过程

JavaScript 运行分为两个阶段:

  • 预解析
    • 全局预解析(所有变量和函数声明都会提前;同名的函数和变量函数的优先级高)
    • 函数内部预解析(所有的变量、函数和形参都会参与预解析)
      • 函数
      • 形参
      • 普通变量
  • 执行

先预解析全局作用域,然后执行全局作用域中的代码, 在执行全局代码的过程中遇到函数调用就会先进行函数预解析,然后再执行函数内代码。

Released under the MIT License.