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

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

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

区别

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

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

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

4. 数组的最大长度为 4294976295(2^32-1)我猜测是因为length的实现是一个无符号整型,创建长度接近该值的数组会导致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类型一样,由于不是调用的构造函数进行创建,所以在不同版本的浏览器上表现会存在一些区别

比如下面的例子

高版本浏览器:

低版本IE(8以下):

所以如果小伙伴们的项目需要兼容低版本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对象,尽请期待。。。。

Javascript高级编程学习笔记(13)—— 引用类型(2)Array类型的更多相关文章

  1. Javascript高级编程学习笔记(14)—— 引用类型(3)Date类型

    除了前两天介绍的Object.Array类型,Date应该就是JS中最常用的引用类型了 先介绍一下Date类型,该类型使用在Java的 java.until.Date 类的基础上构建的 使用UTC 1 ...

  2. JavaScript高级编程学习笔记(第三章之一)

    继续记笔记,JavaScript越来越有意思了. 继续... 第三章:JavaScript基础 ECMAScript语法在很大程度上借鉴了C和其它类似于C的语言,比如Java和Perl. 大小写敏感: ...

  3. Javascript高级编程学习笔记(18)—— 引用类型(7)单体内置对象

    什么是内置对象呢? js高级程序设计中给出的定义为:由ES规定不依赖于宿主环境的对象,这些对象在JS执行前就已经存在 前面我们介绍的引用类型都是内置对象 除了这些对象外ECMA还规定了两个单体内置对象 ...

  4. Javascript高级编程学习笔记(15)—— 引用类型(4)RegExp类型

    JS中处理字符串最常用的应该就是正则了 同样正则(RegExp)类型也是JS中引用类型的一种 ECMAScript通过 RegExp类型 来支持正则表达式 创建正则 var expression = ...

  5. Javascript高级编程学习笔记(17)—— 引用类型(6)基本包装类

    基本包装类 基本包装类这个概念或许有的小伙伴没有听说过 但是小伙伴们有没有想过,为什么基本数据类型的实例也有方法呢? 其实这些方法都来自基本包装类型 这是JS为了方便操作基础数据类型而创建的特殊引用类 ...

  6. Javascript高级编程学习笔记(16)—— 引用类型(5) Function类型

    JS中许多有趣的地方都和函数脱不了联系 那么是什么让JS中的函数这么有趣呢? 我们一起来看看吧 Function类型 在JS中函数实际上就是对象,每个函数都是Function类型的实例,和JS的其他引 ...

  7. Javascript高级编程学习笔记(12)—— 引用类型(1)Object类型

    前面的文章中我们知道JS中的值分为两种类型 基础类型的值和引用类型的值 基础类型的值我已经大概介绍了一下,今天开始后面几天我会为大家介绍一下引用类型的值 Object类型 对象是引用类型的值的实例,在 ...

  8. Javascript高级编程学习笔记(69)—— 事件(13)触摸与手势事件

    触摸与手势事件 由于移动设备既没有鼠标也没有键盘,所以在为移动浏览器开发交互性网页时,常规的鼠标键盘事件根本不够用 所以早期的苹果为Safari 添加了一些与触摸相关的事件 随着后面Android的W ...

  9. Javascript高级编程学习笔记(23)—— 函数表达式(1)递归

    前面的文章中,我在介绍JS中引用类型的时候提过,JS中函数有两种定义方式 第一种是声明函数,即使用function关键字来声明 第二种就是使用函数表达式,将函数以表达式的形式赋值给一个变量,这个变量就 ...

随机推荐

  1. 编织织物的knit course direction and knit wale direction

    来自:http://www.definetextile.com/2013/04/course-wale.html

  2. 生活实遇记-Kindle好久没用,屏幕一直处于电池状态,怎么解决?

    2018-01-02 实遇记-Kindle好久没用,屏幕一直处于电池状态,怎么解决? 今天我翻腾出自己的kindle,好久没用了,屏幕一直是一个电池状态,充电头+线充了2个钟头,按电源键木有反应,也是 ...

  3. http建立连接过程

    参考:http://blog.csdn.net/wangjun5159/article/details/51510594

  4. js实现图片上传预览功能,使用base64编码来实现

    实现图片上传的方法有很多,这里我们介绍比较简单的一种,使用base64对图片信息进行编码,然后直接将图片的base64信息存到数据库. 但是对于系统中需要上传的图片较多时并不建议采用这种方式,我们一般 ...

  5. 最新ceph集群常用命令梳理

    结合网络.官网.手动查询等多方渠道,整理ceph维护管理常用命令,并且梳理常规命令在使用过程中的逻辑顺序.另外整理期间发现ceph 集群的命令体系有点乱,详细情况各自体验. 一:ceph集群启动.重启 ...

  6. Linux学习-linux系统下安装jdk和tomcat,以及遇到的问题清单

    安装JDK 1. 在usr目录下建立java安装目录 cd /usr mkdir java   2.下载jdk包 登录网址:http://www.oracle.com/technetwork/java ...

  7. Deploy, Issue and Transfer Tokens

    [Deploy, Issue and Transfer Tokens] 本例使用 eosio.token 合约来尝试发行Token. 1.签出 eosio.contracts. git clone h ...

  8. mysql_day03

    MySQL-Day02回顾1.表记录的管理 1.删除表记录 1.delete from 表名 where 条件; ## 不加where条件全部删除 2.更新表记录 1.update 表名 set 字段 ...

  9. FortiGate日志设置

    1.默认 FGT5HD3916802737 # config log syslogd setting FGT5HD3916802737 (setting) # show config log sysl ...

  10. Codeforces Round #552 (Div. 3) A题

    题目网址:http://codeforces.com/contest/1154/problem/ 题目意思:就是给你四个数,这四个数是a+b,a+c,b+c,a+b+c,次序未知要反求出a,b,c,d ...