Javascript高级编程学习笔记（13）—— 引用类型（2）Array类型

时间：2021-04-01 09:07:00

除了Object类型之外ECMA中最常用的引用类型可能就是Array类型了

并且ECMA中的数组类型和其他大多数编程语言的数组类型存在着很大的区别

今天就介绍一下JS中的Array的特别之处

区别

1. JS中的数组类型可以存储任意类型的数据（其他语言中一般来说只能存储固定类型的数据）

2. 数组的大小是动态调整的，也就是说你数组中的元素的大小有多大，数组的大小就有多大

3.length属性可写，与一些面向对象的语言不同，JS数组的length属性可写，就是说我们可以通过length属性来移除数组中的元素或添加新元素（新增的数组项默认为undefined）

4. 数组的最大长度为 4294976295(2^32-1)我猜测是因为length的实现是一个无符号整型Javascript高级编程学习笔记（13）—— 引用类型（2）Array类型,创建长度接近该值的数组会导致JS运行事件过长的错误

创建方式

1.通过Array构造函数进行创建

var colors = new Array(20); // 创建length为20的数组

var colors = new Array("red","blue","green"); //以传入的参数创建数组

PS. 除此而外，在使用Array构造函数的时候可以省略 new 操作符

2.通过字面量的形式进行创建

var colors = ["red","green","blue"];

这种也是我们平时最常用的创建方式

但是和Object类型一样，由于不是调用的构造函数进行创建，所以在不同版本的浏览器上表现会存在一些区别

比如下面的例子

高版本浏览器：

Javascript高级编程学习笔记（13）—— 引用类型（2）Array类型

低版本IE（8以下）：

Javascript高级编程学习笔记（13）—— 引用类型（2）Array类型

所以如果小伙伴们的项目需要兼容低版本IE时使用字面量的创建形式要十分注意才行

检测数组

很多时候我们都需要判断一个对象是不是一个数组才能对他进行后续操作，检测是否为数组也是十分重要的

首先我们要分为两种情况

1.只有一个全局作用域（一个页面）

那么十分简单

if(value instance of Array){

    // code

}

其问题就在于 instanceof 操作符假定只有一个全局执行环境，如果页面中包含多个框架，那么就会存在不止一个全局执行环境

如果一个框架向页面传递了一个数组，那么 instanceof 检测该值会返回 false 因为该值是另一个Array构造的

2. 存在多个全局作用域

对于这种情况，ES5中给出了Array.isArray()函数用于解决此类情况

而对于那些低版本的某E浏览器我们则需要另寻他路，比如我们自己写一个isArray函数

function isArray(value){

    return Object.prototype.toString.call(value) === "[object Array]";

}

其具体原理在后面会讲到（因为还需要很多铺垫，才能让小伙伴们明白）

数组的方法

Array为我们提供了许多方法让我们能够便利地进行一系列的操作

下面我们来详细介绍一下

  1. 转换方法
    • valueOf()  返回数组本身
    • toString()  返回由数组中的每个值的toString方法的返回值并以逗号间隔的字符串
    • toLocaleString() 返回由数组中的每个值的toLocaleString方法的返回值并以逗号间隔的字符串
  2. 栈方法 
    • push（） 接收任意数量的参数，并将其逐个添加到数组末尾，返回数组修改后的length
    • pop（） 从数组末尾移除最后一项，减少length的值，返回移除的项
  3. 队列方法
    • shift（） 移除数组第一项，减少length，返回移除的项 （入队操作使用push）
    • unshift（） 在数组前端添加一项，增加length，返回修改后数组长度（与pop配合可模拟反向队列）
    • PS. IE7及以下 unshift 返回 undefined
  4. 重排序
    • reverse（） 用于反转数组
    • sort（） 按升序排列数组，会将数组中的每个值调用toString方法后进行比较，也可以接收一个接收两个参数的比较函数，该函数需对你认为相等的值返回0 第一个参数应该在第二个参数之后返回1，反之返回-1
  5. 操作方法
    • concat（） 创建一个当前数组的副本，并将参数添加到该数组的末尾，返回新数组（如果参数是一个数组，那么会将数组中的值取出后添加到末尾）
    • slice（） 传入起始位置和结束位置，并以该范围内的值创建一个新的数组（不包括结束位置），然后返回该数组（不影响原数组），如果传入负值，那么会用数组长度加上该值以确定下标，如果起始位置小于结束位置返回空数组
    • splice（）该方法接收三个参数   初始位置    要删除的项数  要插入该位置的值（可以不止一项，也可以没有）
  6. 位置方法
    • indexOf（）接收要查找的项和查找的起始位置，如果找到该值则返回该值的下标，没有找到则返回-1（从前往后找）
    • lastIndexOf（）接收要查找的项和查找的起始位置，如果找到该值则返回该值的下标，没有找到则返回-1（从后往前找），两种方法都是使用全等进行判断
  7. 迭代方法
    • 都接收两个参数，在每一项上运行的函数  该函数的作用域（this指向的对象）可选
    • 传入的函数都接收三个参数：1、数组项 2、该数组项的下标 3、数组本身
    • every（） 传入的函数对于所有的项都返回 true 那么该方法返回 true
    • filter（） 返回所有传入函数 返回值为 true 的数组项的集合
    • forEach（） 没有返回值
    • map（） 返回传入函数处理过的数组（即如果在遍历过程中对数组每一项都乘以2 那么返回乘以二后的数组）
    • some（） 传入函数只要对任意一项数组项返回 true 则返回 true
    • PS. IE9+支持
  8. 归并方法
    • 都接收两个参数 1、对每一项数组项调用的函数 2、归并基础的初始值
    • 对于传入的函数接收四个参数 1、前一个值 2、当前值 3、项的索引 4、数组本身
    • 每次调用函数的返回值都会作为第一个参数传入下一次迭代
    • reduce（） 从前往后迭代
    • reduceRight（）从后往前迭代
    • PS. IE9+支持

　　　　　　

PS. 有关迭代的方法低版本浏览器一般都是不支持的

明天介绍Date对象，尽请期待。。。。

相关文章