除了Object类型,Array是ECMAScript中最常用的类型了。

与其他语言不同的是,ECMAScript数组的每一项可以保存任何类型的数据。

而且,ECMAScript数组的大小是可以动态调整的,可以随着数据的添加,数组的长度自动增长。

创建数组的方式

1.使用Array构造函数

var colors1 = new Array();
var colors2 = new Array(20);//创建length为20的数组
var colors3 = new Array("ggr",11,"grr");//以参数中的值来构建数组

2.使用数组字面量表示法

var colors = ["red","gren"];
var values = [1,2,];//强烈建议不要这样使用,因为在不同浏览器下,实现方式不同
//在IE中,第三个值为undefined,在其他浏览器中,只会创建包含1和2的数组。

与对象一样,在使用数组字面量表示法的时候,也不会调用Array构造函数(Firefox3及更早版本除外)

数组的length属性

这个属性不是只读的,可以设置这个属性,可以从数组的末尾移除项或向数组中添加新项。

var colors = ["res","rer","gege"];
colors.length = 2;
alert(colors[2]);//undefined

检测数组

1.对于一个网页或者全局作用域中,使用instanceof就能搞定。(假定只有一个全局执行环境)

value instanceof Array

2.如果网页中出现多个框架,实际上就存在两个以上不同的全局执行环境,从而存在两个以上不同版本的Array构造函数,如果你从一个框架向另一个框架传入一个数组,那么传入的数组与在第二个框架中原生创建的数组分别具有各自不同的构造函数。

为了解决这个问题,ECMAScript5新增了Array.isArray(value)的方法,用于最终确定某个值是不是数组,而不管它是在哪个全局执行环境创建的。

支持Array.isArray()的方法浏览器有IE9+,Firefox4+,Safari5+,Opera10.5+和chrome。

3.针对不支持Array.isArray方法的浏览器,使用下面的方法

在任何值上调用Object原生的toString方法,都会返回一个[object NativeConstructorName]格式的字符串。每个类在内部都有一个[[Class]]属性,这个属性中就指定了上述字符串中的构造函数名。

alert(Object.prototype.toString.call(value));//"[object Array]"
function isArray(value) {
return Object.prototype.toString.call(value) == "[object Array]"; //也可以将这个方法应用与检测某个值是不是原生函数或正则表达式,这个方法不能检测非原生构造函数的构造函数名
}

下面总结一下数组的这些方法

根据我自己的情况,比较熟的方法,就列举一下,就不详细说明了。

1.转换方法(toLocaleString(),toString(),valueOf())

  • 所有对象都具有toLocaleString(),toString(),valueOf()方法,其中toString()方法会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串。
  • 而调用valueOf方法返回的还是数组。如果没有显示调用toString()方法,还是会在后台调用toString()方法。
  • 这三种方法在默认情况下都会以逗号分隔的字符串的形式返回数组项,如果使用join()方法,则可以使用不同的分隔符。数组的join方法只接受一个参数,即用作分隔符的字符串。
  • 如果不给join方法传入任何值,或者给它传入undefined,则使用逗号作为分隔符,IE7及更早版本则会错误的使用字符串“undefined”作为分隔符。

2.类似栈的方法:pop和push,栈的添加和删除都在栈顶进行操作,所以是一个后进先出的数据结构。

  • push(推入):可以接受任意数量的参数,然后返回修改后的数组的长度
  • pop(弹出):可以从数组末尾移除最后一项,减少数组的长度,返回删除的项

3.类似队列的方法:shift和push。队列是先进先出,添加是在队尾,移除是在队首。

  • shift:移除数组中的第一项,并返回该项,同时使数组长度减1。
  • push:是在数组的末尾逐个添加,并返回修改后的数组的长度。

结合使用shift和push可以像队列一样使用数组。

  • unshift:在数组前端添加任意个元素,并返回数组的长度。
  • pop:在数组末尾删除一项,返回删除的项。

结合使用unshift和pop可以反向模拟队列,在数组的前端添加项,从数组末端移除项。

4.重排序方法:reverse和sort,这两个返回的是排序过后的数组

  • reverse:顾名思义,就是反转数组项的顺序。
  • sort:在默认情况下按升序排列数组项,会调用每个数组项的toString()方法,然后比较得到的字符串,以确定如何排序。即使数组中的每一项都是数值,sort方法比较的也是字符串。

    所以在进行数值排序的时候会出现一些问题,可以接受一个函数。

function compare(value1,value2){
//这是升序,从小到大排列
if(value1 < value2){
return -1; //将这里改成return 1,就是从大到小排列
}else if(value1 > value2){
return 1; //将这里改成return -1
}else {
return 0;
}
}

5.操作方法

concat():会基于当前数组中的所有项创建一个新数组,最开始,先创建这个数组的一个副本,然后将接受到的参数添加到这个副本的末尾,最后返回新构建的数组。

如果传递给它的是一个或多个数组,则将这些数组中的每一项添加到结果数组中,如果传递的不是数组,则会简单的添加到结果数组的末尾。

var colors = ["ff","ffff"];
var colo = colors.concat();
console.log(colors); //["ff","fff"]
console.log(colo);//["ff","fff"]
console.log(colors === colo);//false

slice():基于当前数组中的一个或多个项创建一个新数组,接受一个或两个参数,即要返回的起始和结束位置。

  • 如果只有一个参数,就返回这个参数指定位置到数组末尾的所有项。
  • 如果有两个参数,就是起始位置和结束位置,返回起始位置到结束位置的所有项,但是不包括结束位置的项。

    slice也不会改变原数组
var colors = ["ff","ffff"];
var colo = colors.slice(0,1);
console.log(colors);// ["ff","ffff"]
console.log(colo);//["ff"]

如果参数中有一个是负数,那么就用数组长度加上那个参数确定要返回的位置。

如果第一个参数大于第二个参数,那么就返回空数组。

splice()方法:这个方法是最强大的方法了。主要用途是向数组的中部插入项,返回的都是删除的项组成的数组。

(1)删除:两个参数:删除的起始位置,删除项数。返回删除的项组成的一个数组

(2)插入:可以向指定位置插入任意数量的项。三个参数,起始位置,0(要删除的项数),要插入的项。如果插入多个项,可以传入第四,第五个参数。

(3)替换:可以向指定位置插入任意数量的项,且会删除任意数量的项。三个参数:起始位置,要删除的项数,要插入的任意数量的项。要插入的项和删除的项数不一定相等。

//删除
var color = ["red","green","blue"];
var removed = color.splice(0,1);
console.log(color); //["green","blue"]
console.log(removed);//["red"] //插入
removed = color.splice(1,0,"yellow","orange");
console.log(removed);//[]
console.log(color);//["green", "yellow", "orange", "blue"] //替换
removed = color.splice(1,1,"red","purple");
console.log(removed);//["yellow"]
console.log(color);//["green", "red", "purple", "orange", "blue"]

总的来说,这三个方法的参数含义大概相同,可以找个比较好的方法来记忆。第一个是起始位置(删除或者添加),删除的项数,插入的项数。

这个方法对数组的改变,会直接影响到原数组。splice返回的是删除的项组成的数组,如果没有就返回一个空数组

6.位置方法:indexOf(),lastIndexOf().

返回的是元素在数组中的位置。这两个方法都接受两个参数,要查找的项,(可选的)要开始查找的起始位置的索引。

indexOf是从数组开头进行查找,lastIndexOf是从数组末尾开始向前进行查找。最后返回项在数组中的索引。如果没有找到,就返回-1.

**注意:在比较第一个参数与数组中的每一项时,会使用全等操作符,查找的项必须严格相等“===”

支持这两个方法的常用浏览器有:IE9+,Firefox2+,chrome。

var person = {name:"tom"};
var people = [{name:"tom"}];
var morePeople = [person];
console.log(people.indexOf(person)); //-1,这里输出-1是因为在比较的时候,是使用全等操作符,这里的people中的对象和person这个对象不是同一个对象。
console.log(morePeople.indexOf(person));//0

7.迭代方法(every,filter,forEach,map,some)

一共有5个迭代的方法,每个方法都接收两个参数:要在每一项上运行的函数和(可选的)运行该函数的作用域对象——影响this的值。

传入这些方法中的函数会接受3个参数:数组项的值,该项在数组中的位置和数组对象本身。

every():对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true,否则返回false

filter():对数组中的每一项运行给定函数,返回该函数会返回true的项组成的数组

forEach():对数组中的每一项运行给定函数,这个方法没有返回值,即使强制加上return语句返回也不会返回

map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组

some():对数组中的每一项运行给定函数,如果该函数对数组中的任一项返回true,则返回true,否则返回false

支持这些迭代方法的常用浏览器有IE9+,Firefox2+,chrome,Safari3+,Opera9.5+。

8.归并方法reduce(),reduceRight().

这两个方法的区别在于reduce从数组前面进行迭代,一直到最后。reduceRight()是从数组后面进行迭代,到数组的开头。

这两个方法都接受两个参数,一个在每一项上调用的函数和可选的(作为归并基础的初始值)

下面通过这个例子来说明

var values = [1,5,4,7];
var sum = values.reduce(function(prev,cur,index,array){ //这个函数的四个参数:前一个值,当前值,项的索引和数组对象
return prev+cur; //返回的任何值作为第一个参数自动传给下一项,第一次迭代发生在数组的第二项,因此第一个参数是数组的第一项,第二个参数是数组的第二项
});
console.log(sum);//17

支持这两个归并方法的常用浏览器有:IE9+,Firefox3+,chrome,Safari4+,Opera10.5。

JavaScript之引用类型(Array类型)的更多相关文章

  1. 从头开始学JavaScript (十二)——Array类型

    原文:从头开始学JavaScript (十二)--Array类型 一.数组的创建 注:ECMAscript数组的每一项都可以保存任何类型的数据 1.1Array构造函数 var colors = ne ...

  2. 理解javascript中的Array类型

    引子: 从事前端开发有段时间了,个人观点:想在前端开发这条路上走的更远,不仅要学好HTML&HTML5.CSS&CSS3,最重要的就是要学好javascript了.所以打好javasc ...

  3. javascript数据类型之Array类型

    Array类型 除了Object之外,Array类型恐怕是ECMAScript中最常用的类型了.而且,ECMAScript中的数组与其他多数语言中的数组有着相当大的区别.虽然ECMAScript数组与 ...

  4. JavaScript中的Array类型详解

    与其他语言中的数组的区别: 1.JavaScript数组的每一项都可以保存任何类型的数据,一个数组的数组元素可以是不同类型的数据. 2.数组的大小是动态调整的,可以随着数据的添加自动的增长. 1.两种 ...

  5. 引用类型-Array类型

    ECMAScript数组的每一项可以保存任何类型的数据,并且数组的大小是可以动态调整的. 创建数组的基本方式有两种,第一种是使用Array构造函数 var colors = new Array(); ...

  6. javascript array类型用法

    javascript高级编程-Array引用类型用法总结  2016-09-17   |    357 引用类型-Array类型 引用类型是一种数据结构,用于将数据和功能联系起来. 创建对象的方式: ...

  7. JavaScript引用类型之Array类型一

    一.简介 除了Object之外,Array类型恐怕是ECMAScript中最常用的类型了.下面就来分析ECMAScript中的数组与其他语言中的数组的异同性: 1.相同点: (1)他们都是数据的有序列 ...

  8. JavaScript引用类型之Array类型API详解

    Array类型也是ECMASCRIPT中最常见的数据类型,而且数据的每一项可以保存任何类型的数值,而且数组的大小是可以动态调整的,可以随着数据的添加自动增长以容纳新的数据.下面,总结数据的一些常用方法 ...

  9. Javascript高级编程学习笔记(13)—— 引用类型(2)Array类型

    除了Object类型之外ECMA中最常用的引用类型可能就是Array类型了 并且ECMA中的数组类型和其他大多数编程语言的数组类型存在着很大的区别 今天就介绍一下JS中的Array的特别之处 区别 1 ...

  10. JavaScript的进阶之路(三)引用类型之Object类型和Array类型

    引用类型 Object类型 function a(num){ if(num>3){ a(--num); } console.log(num); } a(5); //如何创建对象的实例 var o ...

随机推荐

  1. pandas中DataFrame使用

    切片选择 #显示第一行数据print(df.head(1)) #显示倒数三行数据 print(df.tail(3)) loc  df.loc[row_index,col_index]  注意loc是根 ...

  2. java的equal和==问题

    看一本比较简略的java教程,在看到对象的时候,书上直接给我来一句: 刚看下觉得没什么问题,很有道理的一个东东嘛,但是出于习惯还是打了几行代码测试了一下,代码如下: class Person { pr ...

  3. 剑指offer-高质量的代码

    小结: 规范性:书写清晰.布局清晰.命名合理 完整性:完成基本功能.考虑边界条件.做好错误处理 鲁棒性:采取防御性编程.处理无效输入 面试这需要关注 输入参数的检查 错误处理和异常的方式(3种) 命名 ...

  4. HighGUI图形图像界面初步——鼠标操作

    OpenCV中的鼠标操作和滑动条的消息映射方式很类似,都是通过一个中介函数配合一个回调函数来实现的,创建和指定滑动条回调函数为createTrackbar, 而指定鼠标操作消息回调函数的函数为setM ...

  5. ASPxTreeList的右键按钮事件

    ASPxTreeList应该是比较长用的控件了~现在就来说说它的右键按钮事件 这里实现的是右键里有折合和展开所有节点的功能 code: <dx:ASPxTreeList ID="ASP ...

  6. Oracle简述

    Oracle是甲骨文公司推出的一款大型数据库管理系统.甲骨文公司成立于1977年,总部位于美国加利福尼亚州的红木滩.1989年,Oracle正式进入中国市场:2013年,甲骨文超越 IBM ,成为继 ...

  7. 在 Visual Studio 中使用正则表达式

    Visual Studio 使用 .NET framework 正则表达式查找和替换文本. 在 Visual Studio 2010 和早期版本中,Visual Studio 在“查找和替换”窗口中使 ...

  8. 无法使用命令 /usr/bin/xdpyinfo 自动检查显示器颜色。请检查是否设置了 DISPLAY

    https://blog.csdn.net/woshigedahaoren/article/details/9493887

  9. 【机器学习】k-近邻算法以及算法实例

    机器学习中常常要用到分类算法,在诸多的分类算法中有一种算法名为k-近邻算法,也称为kNN算法. 一.kNN算法的工作原理 二.适用情况 三.算法实例及讲解 ---1.收集数据 ---2.准备数据 -- ...

  10. [水煮 ASP.NET Web API2 方法论](1-3)如何接收 HTML 表单请求

    问题 我们想创建一个能够处理 HTML表单的 ASP.NET Web API 应用程序(使用 application/x-www-form-urlencoded 方式提交数据). 解决方案 我们可以创 ...