JavaScript中数组类型的属性和方法
除了Object,Array类型应该是ECMAScript中最常用的类型了。
ECMAScript的数组虽然也是数据的有序列表,但还是与其他语言中的数组有很大的区别。比如ECMAScript数组每一项都可以保存任何类型的数据,而且数组的大小可以随着数据的添加自动的增长以容纳新数据。
1.创建数组
创建数组的基本方式有两种:
//第一种,使用Array构造函数
var arr1 = new Array(); //创建空数组
var arr2 = new Array(20); //创建数量为20的数组(即 arr.length=20)
var arr3 = new Array("red", "blue", "grey"); //创建一个包含3个字符串值的数组 //第二种,使用数组字面量表示法
var arr = ["red", "blue", "grey"]; //数组项之间以逗号隔开
创建了数组后,可以使用方括号和基于0(从0开始)的数字索引读取和设置数组的值(如colors[0])。访问数组时,如果索引值小于数组长度,则返回对应项的值。设置数组的值时语法相同,但会替换对应位置的值。
但如果索引值大于或等于数组长度,数组就会自动增加到该索引值加1的长度。如下所示:
var colors = ["red", "blue", "grey"];
colors[9] = "green";
alert(colors.length); //
数组的长度变为10,但位置3至8实际都是不存在的,被访问时都将返回underfined。
另外,直接设置数组的length属性,可以从数组的末尾移除或添加项,即属性length是可读可写的:
//移除第3项(索引值为2)
var colors = ["red", "blue", "grey"];
colors.length = 2;
alert(colors[2]); //underfined
原数组中尾项已被移除,故已无法访问。但考虑到变量值为underfined有两种情况:变量未被定义,或变量未初始化。所以,当通过设置length值来增长数组长度时,新增的每一项的值也都是underfined。故无法通过访问具体一项数组的值来确定数组的长度是否被改变。
2.检测数组
上一篇说到ECMAScript提供instanceof操作符,检测对象具体是什么类型。但用于检测数组,instanceof只能在一个全局作用域中达到令人满意的效果。
在包含多个框架的网页中,存在两个以上不同的全局作用域,从而存在两个以上不同版本的Array构造函数。若从一个框架向另一个框架传入数组,那传入的数组与传入的框架中原生创建的数组具有不同的构造函数,instanceof可能将它们视作不同的对象。
所以,ECMAScript5新增了Array.isArray()方法,目的只为确定某值是不是数组(是则返回true),不考虑全局执行环境。
3.转换字符串方法
- toString()
- valueOf()
var colors = ["red", "blue", "grey"];
alert(colors.toString()); //red,blue,grey
alert(colors.valueOf()); //red,blue,grey
alert(colors); //red,blue,greytoString()方法返回数组中每个值的字符串形式拼接成的以逗号隔开的字符串。调用valueOf()方法返回的还是数组。而alert()会在后台调用toString()方法,所以会得到与直接调用toString()方法相同的结果。
- toLocaleString()
调用toLocaleString()也会返回一个数组值的以逗号分隔的字符串,与toString()方法的区别在于它调用的是数组每一项的toLocaleString()方法。
- join()
var colors = ["red", "blue", "grey"];
alert(colors.join()); //red,blue,grey
alert(colors.join("&")); //red&blue&greyjoin()方法可以接收一个用作分隔符的字符串为参数,以分隔数组值。当它不传入参数时,则默认使用逗号作为分隔符。
4.栈方法
ECMAScript为数组提供了push()和pop()方法,以实现类似栈的行为(从数组末尾添加和删除)。
方法 | 接收参数 | 对数组影响 | 返回值 |
push() | 可以接收任意数量的参数 | 将参数逐个添加到数组末尾 | 返回修改后的数组的长度 |
pop() | 不接收参数 | 从数组末尾移除最后一项,减少数组length值 | 返回移除的项 |
5.队列方法
除栈方法外,还有shift()和unshift()方法,与push()和pop()结合,可以实现类似队列的行为。
方法 | 接收参数 | 对数组影响 | 返回值 |
shift() | 不接收参数 | 移除数组中的第一项 | 返回移除的项 |
unshift() | 可以接收任意数量的参数 | 将参数逐个添加到数组前端 | 返回修改后的数组的长度 |
shift()和push()方法结合,可以在数组末尾添加,在头部删除。
而结合unshift()和pop()方法,可以从相反的方向模拟队列。
6.重排序方法
数组中存在两个可以直接用来重排序的方法:reverse()和sort()。
reverse()方法可以直接反转数组项的顺序,但也只有这一项功能:
var arr = [1,2,3,4,5];
arr.reverse();
alert(arr); //5,4,3,2,1
sort()方法则可以灵活地对数组排序,默认情况下是按升序排列数组项。
sort()方法的原理是对数组每一项调用toString()转型方法,获得字符串后进行比较。所以不论数组项的数据是什么类型,sort()方法都是当做字符串比较。所以在某些情况下,sort()方法不能给出令人满意的效果,如下:
1 var arr = [10,2,13,4,5];
2 arr.sort();
3 alert(arr); //10,13,2,4,5
改进后,sort()方法可以接收一个比较函数作为参数,比较函数则可以接收两个进行比较的参数。
若函数返回负数,表示参数1应该位于参数2之前;返回0,则表示相等;返回正数,则表示参数1应位于参数2之后。如下,是一个让sort()方法按升序排列的比较函数:
//比较函数
function compare(value1,value2){
return value1 - value2;
} var arr = [10,2,13,4,5];
arr.sort(compare);
alert(arr); //2,4,5,10,13
7.操作方法
上文中提到push()方法、pop()方法、shift()方法和unshift(),可以对数组的头部和末尾进行添加或是删除的操作。对于包含在数组中的项的操作,ECMAScript也提供了一些方法。
1) concat()方法
此方法先创建一个当前数组的副本,若无参数,则只复制当前数组、返回该副本;若传入参数(参数可以是一或多个数组,或者直接是数据值),则将参数值都添加到副本数组中,并返回结果数组。
var colors1 = ["red", "blue", "grey"];
var colors2 = colors1.concat("green", ["black", "white"])
alert(colors1); //red,blue,grey
alert(colors2); //red,blue,grey,green,black,white
需要注意,concat()方法不影响原来的数组。
2) slice()方法
slice()方法可以基于当前的数组中的一项或多项创建一个新数组,接收一个或两个参数。
接收一个参数时,返回从该参数指定位置到当前数组末尾的所有项;接收两个参数时,返回起始位置(参数1)到结束位置(参数2)的所有项,但返回的项中不包括结束位置对应的项,如参数为1和4时,表示复制当前数组从位置1到位置3的项。见下列例子:
var colors1 = ["red", "blue", "grey", "green", "black", "white"];
var colors2 = colors1.slice(1);
var colors3 = colors1.slice(1,4); alert(colors2); //blue,grey,green,black,white
alert(colors3); //blue,grey,green
slice()方法同样不影响原本的数组。
3) splice()方法
splice()方法可以说十分强大,可以对数组中的任意位置进行删除、插入和替换。
删除:传入两个参数——要删除的第一项的位置、要删除的项数,如colors.splice(0,2)会删除数组的前两项。
插入:传入3个以上参数——起始位置、0、要插入的任意数量的项。第二项固定为0,表示删除0项。如colors.splice(2,0,"red", "black")会在数组位置2开始插入字符串。
替换:结合删除和插入功能,在被删除的项的位置插入新的项,就可以达到替换的效果,可接收3个以上参数——起始位置、要删除的项数、要插入的任意数量的项。
见如下例子:
var colors1 = ["red", "blue", "grey"];
var colors2 = colors1.splice(0,1); //删除
var colors3 = colors1.splice(1, 0, "green", "black"); //插入
var colors4 = colors1.splice(1, 1, "white"); //替换 alert(colors2); //blue,grey
alert(colors3); //red, green, black, blue,grey
alert(colors4); //red, white, grey
8.位置方法
ECMAScript5新增了indexOf()和lastIndexOf()两个位置方法,接收两个参数——要查找的项、查找起点位置的索引(可不选)。indexOf()从数组头部向后查找,lastIndexOf()则是从数组末尾向前查找,返回的都是要查找的项在数组中的位置(若未找到则返回-1)。
需要注意的是,比较要查找的项和数组中的每一项时,会使用全等操作符(===),表示要查找的项必须严格相等(类型和值都一致)。
9.迭代方法
ECMAScript5提供的5个迭代方法,都是接收两个参数——在数组每一项上运行的函数、运行该函数的作用域对象(可不选)。而作为参数的函数又可以接收三个参数——数组项的值、该项在数组中的位置、数组对象本身。
方法 | 返回 |
every() | 参数函数对数组每一项都返回true,则返回true |
filter() | 返回该参数函数返回true的项组成的数组 |
forEach() | 无返回值,只对数组每一项运行参数函数 |
map() | 返回每次参数函数调用的结果组成的数组 |
some() | 参数函数对数组有任何一项返回true,就返回true |
举一例:
var numbers = [10, 2, 23, 14, 7,18]; var filterResult = number.filter(function(item, index, array){
return (item > 10);
}); alert(filterResult); //23,14,18
10.归并方法
ECMAScript新增了reduce()和reduceRight()两个方法,用以归并数组。两个方法都接收两个参数——在数组每一项上调用的函数、作为归并基础的初始值。传入的函数又可以接收4个参数——前一个值、当前值、项的索引和数组对象,用以迭代数组所有的项。
reduce()方法从数组第一项开始向后遍历,reduceRight()则是从相反方向遍历。见如下求和例子:
var numbers = [10, 2, 23, 15];
var sum = numbers.reduce(function(pre, cur, index, array){
return (pre + cur);
});
alert(sum); //
两个归并方法迭代数组所有的项,然后只构建一个最终返回的值,这是和5个迭代方法最大的差别。
上一篇中对ECMAScript中变量的基本类型值和引用类型值进行了探讨,接下来本来想对引用类型进行讨论。但由于引用类型中数组类型的内容较多,所以先做单独讨论(如此也大概写了差不多一个下午的时间QAQ),可能有些啰嗦,再接再厉吧!
JavaScript中数组类型的属性和方法的更多相关文章
- JavaScript中数组去重的几种方法
JavaScript中数组去重的几种方法 正常情况下,数据去重的工作一般都是由后端同事来完成的,但是前端也要掌握好处理数据的能力,万一去重的工作交给我们大前端处理,我们也不能怂呀.现在我总结了一些去重 ...
- JavaScript中数组元素删除的七大方法汇总
原文链接:https://blog.csdn.net/u010323023/article/details/52700770 在JavaScript中,除了Object之外,Array类型恐怕就是最常 ...
- 全面理解Javascript中Function对象的属性和方法
http://www.cnblogs.com/liontone/p/3970420.html 函数是 JavaScript 中的基本数据类型,在函数这个对象上定义了一些属性和方法,下面我们逐一来介绍这 ...
- javascript中的array对象属性及方法
Array 对象 Array 对象用于在单个的变量中存储多个值. 创建 Array 对象的语法: new Array(); new Array(size); new Array(element0, e ...
- JavaScript中数组相关的属性方法
下面的这些方法会改变调用它们的对象自身的值: Array.prototype.copyWithin() 在数组内部,将一段元素序列拷贝到另一段元素序列上,覆盖原有的值. Array.prototype ...
- javascript中数组去重的4种方法
面试前端必须准备的一道问题:怎样去掉Javascript的Array的重复项.在最近面试中,百度.腾讯.盛大等都在面试里出过这个题目.这个问题看起来简单,但其实暗藏杀机. 考的不仅仅是实现这个功能,更 ...
- javascript中Math函数的属性与方法
math函数的属性 Math.PI:返回圆周率. math函数的方法 绝对值: Math.abs(); 对数进行上舍入: Math.ceil(); 对数进行下舍入: Math.floor(); Mat ...
- JavaScript中数组的两种排序方法详解(冒泡排序和选择排序)
一.冒泡排序的原理(从小到大) 相邻两个数进行比较,如果前一个数大于后一个数,那么就交换,否则不交换 原理剖析 比如有一组含有6个数字的数:5.3.7.2.1.6一共6个数字,做5次循环,每次循环相邻 ...
- javascript中document对象的属性和方法
document.documentElement; document.firstChild;document.childNodes[0];// 取得对<html>的引用document.b ...
随机推荐
- 概念 : 用户>角色>权限 的管理(Role-Based Access Control)
RBAC 用户管理规范 概念:每个user有多个accounts,每个account 有一个account binding,有多个roles和多个tasks 举个例子:某个用户现在manager,这是 ...
- TCP四个计数器
持续计时器 TCP 为每一个连接设有一个持续计时器. 只要 TCP 连接的一方收到对方的零窗口通知,就启动持续计时器. 若持续计时器设置的时间到期,就发送一个零窗口探测报文段(仅携带 1 字节的数据) ...
- 移动OA日程支持费用及评论
业务介绍 AIO7系统最新更新版本在移动OA的日程管理进行改进,增加了创建费用的功能,且在日程批注上也可查看:在日程个人界面和批注界面都支持了评论功能.移动OA上日程对费用及评论的支持,方便用户外出时 ...
- php调去存储过程
第一步,mysql端建存储过程 DELIMITER $$create procedure mintime()beginselect min(year(htime)) as minnian,max(ye ...
- wemall app商城源码中基于JAVA的Android异步加载图片管理器代码
wemall doraemon是Android客户端程序,服务端采用wemall微信商城,不对原商城做任何修改,只需要在原商城目录下上传接口文件即可完成服务端的配置,客户端可随意定制修改.本文分享其中 ...
- Codevs2776 寻找代表元
2776 寻找代表元 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 黄金 Gold 题目描述 Description 广州二中苏元实验学校一共有n个社团,分别用1到n编号 ...
- JavaScript的基本规范
1.不要在同一行声明多个变量: 2.请使用===/!==来比较true/false或者数值: 3.使用对象字面量替代new Array这种形式: 4.Switch语句必须带有default分支: 5. ...
- mac下常用软件整理
1.非常好用的压缩管理软件(免费版):RAR Extrator Free 解压的中文不会产生乱码: 2.记笔记用的:有道笔记.Evernote 3.SVN管理软件:ConerStone 4.非常给力 ...
- Boost库安装(实测vs2012)
1.下载boost库,我这边下载的是目前最新的:boost_1_63_0.7z 2.解压到本地目录:我这边是:D:\Program Files 3.cmd窗口,以管理员权限打开,执行D:\Progra ...
- eclipse项目导入到android studio中文乱码处理
由于eclipse项目是gbk编码,Android studio默认用的是utf-8. 就会导致代码中的汉字,注释全部显示为乱码. 解决方法:在module的bulid.gradle中加入: comp ...