除了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. RK3288 mipi屏参数配置文件

    RK3288     Android 5.1系统     Linux 3.10 mipi屏参数配置文件所在的路径:kernel/arch/arm/boot/dts/xxx_mipi.dtsi 屏参数配 ...

  2. spring-AOP之通知和顾问

    通知和顾问都是切面的实现形式,其中通知可以完成对目标对象方法简单的织入功能. 而顾问包装了通知,可以让我们对通知实现更加精细化的管理,让我们可以指定具体的切入点. 通知分为前置通知,环绕通知及后置通知 ...

  3. redis、mysql、mongdb的比较

    特点: 1-1 MySQL:1. 使用c和c++编写,并使用了多种编译器进行测试,保证源代码的可移植性2. 支持多种操作系统3. 为多种编程语言提供可API4. 支持多线程,充分利用CPU资源优化的S ...

  4. Python+Selenium学习--控制浏览器控制条

    场景 有时候web 页面上的元素并非直接可见的,就算把浏览器最大化,我们依然需要拖动滚动条才能看到想要操作的元素,这个时候就要控制页面滚动条的拖动,但滚动条并非页面上的元素,可以借助JavaScrip ...

  5. 73. Set Matrix Zeroes 把矩阵同一行列的元素都改成0

    [抄题]: Given a m x n matrix, if an element is 0, set its entire row and column to 0. Do it in-place. ...

  6. Myisam 和 Innodb 区别

    MySQL默认采用的是MyISAM. MyISAM不支持事务,而InnoDB支持.InnoDB的AUTOCOMMIT默认是打开的,即每条SQL语句会默认被封装成一个事务,自动提交,这样会影响速度,所以 ...

  7. Bootstrap+PHP fileinput 实现多图上传 这是ajax上传,只能单张单张图片地上传

    插件及源代码可以在这里下载 http://www.jq22.com/jquery-info5231下面是根据下载的demo进行补充:使用bootstrap界面美观,可预览,可拖拽上传,可配合ajax异 ...

  8. PHP开发——函数

    函数的定义 l  函数是一段命名的代码段. 函数可以减轻工作量,减少重复的代码,方便后期维护. 函数的参数 l  实参:调用函数时,传递的参数就是实参,含有真正数据的. l  形参:定义函数时的参数. ...

  9. Linux Curl命令

    一.简介 linux curl是一个利用URL规则在命令行下工作的文件传输工具.它支持文件的上传和下载,所以是综合传输工具,但按传统,习惯称url为下载工具.   二.安装 wget http://c ...

  10. Legend 图例

    1.添加图例 >>> import matplotlib.pyplot as plt >>> import numpy as np >>> x = ...