JavaScript中的Array类型详解
与其他语言中的数组的区别:
1.JavaScript数组的每一项都可以保存任何类型的数据,一个数组的数组元素可以是不同类型的数据。
2.数组的大小是动态调整的,可以随着数据的添加自动的增长。
1.两种方法构建数组
JavaScript中的数组有两种构建方式:
第一种是使用Array构造函数:
var colors = new Array(3); //创建一个包含3项的数组,参数3表示创建的数组大小
var names = new Array("Greg","Bobi"); //创建数组
第二种是使用数组字面量表示法,数组字面量由一对包含数组项的方括号表示,多个数组项之间以逗号隔开。
var colors = ["red","blue","green"]; //创建一个包含3个字符串的数组
var names = []; //创建一个空数组
不管用什么方式创建的数组都有下面要讲的一些方法.
查看数组的长度,检查数组的长度可以使用length属性。通过length属性可以得到数组的长度,因为数组的长度永远比数组的索引坐标大1,所有,还可以通过length往数组最后一位添加元素,甚至减少数组长度
//使用length查看数组长度
var colors = ["red","blue","green"];
var count = colors.length;
alert(count);//3
//使用length舍去数组元素
colors.length = 2; //设置数组长度为2,最后一个元素被舍去
alert(colors); //red,blue
alert(colors.length); //2
//使用length向数组添加元素
colors[colors.length] = "yello"; //项数组中增加元素
alert(colors); //red,blue,yello
alert(colors.length); //3
2.检测数组
检查一个值到底是不是数组,使用Array.isArray()方法
var colors = ["red","blue","green"];
if (Array.isArray(colors)){
alert(true); //true
}
3.转换方法
Array也是一个对象,所以也拥有toLocaleString(),toString()和valueOf()方法。
toString():方法会返回由数组中每个元素字符串形式拼接成的一个由逗号分隔的字符串
valueOf():方法返回的还是数组,但是如果使用alert(colors.valusOf())
返回的跟toString()返回的完全一样,因为alert()接收到valueOf()传送来的数组,会再次调用toString()方法
toLocaleString():方法要而经常会返回与上面两个方法返回的值相同
4.栈方法
数组可以模拟栈的方法,具体就是先进后出,提供push()方法接收不定的参数,从数组后面压入数组,提供pop()方法从数组末尾移除最后一项。
需要注意的是:push()方法返回值时修改后数组的长度,pop()返回值是移除的项。
var colors = ["red","blue","green"];
var count = colors.push("yello","black");//压入
alert(count); //5
var item = colors.pop(); //取得最后一项
alert(item); //black
5.列队方法
列队方法区别于栈方法,栈方法是先进后出,列队方法是先进先出。
列队方法提供push()函数向数组末尾添加元素,返回值时修改后数组的长度。提供shift()方法移除数组中的第一个项.
列队方法还提供unshift()方法在数组的前端添加任意个项并返回新数组的长度,以此构成了双向列队。
//创建新数组,长度为3
var colors = ["red","blue","green"];
//使用push()向末尾添加两个元素,长度为5
var count = colors.push("yello","black");//压入
alert(count); //5
//移除数组前端的元素,长度为4
var item = colors.shift();
alert(item); //red
//使用unshift()方法在前端添加一个元素,长度为5
var unCount = colors.unshift("white");
alert(unCount); //5
6.重排序方法
数组的重新排序主要有两种方法:
reserve():方法会反转数组的排血顺序。
sort():会按照升序排列数组,由于这个升序是按照字典顺序来的,所以可接收一个参数来指定排列顺序,这个参数是函数,函数接收两个值进行比较,如果第一个参数应该位于第二个之前则返回一个负数。
注意:reserve()和sort()方法的返回值是经过排序之后的数组
7.操作方法
操作方法有几个常用的方法:
contact():方法可以基于当前数组中的所有项创建一个新数组
slice():方法是切片操作,接收两个参数,起始和结束为止,只有一个参数时,表示这个参数开始到结束。
splice():方法是切片方法的升级,主要用途是向数组的中部插入元素,接收三个参数,第一个参数是起始位置,第二个参数是要删除的元素项数,第三个参数可以是任意数量的,如果有的话就插入到前面两个参数的位置
//创建新数组
var colors = ["red","blue","green","red","black"];
//concat()方法
var colors1 = colors.concat();
var colors2 = colors.concat("1","2");
alert(colors1); //red,blue,green,red,black
alert(colors2); //red,blue,green,red,black,1,2
//slice()方法
var colors3 = colors.slice(1,3);
alert(colors3); //blue,green
//splice()方法
//使用splice()方法删除
var removed = colors.splice(0,1);//删除第一项
alert(removed);//red 返回的数组中只包含一项
使用splice()方法插入
removed = colors.splice(1,0,"1","2");//从位置1开始插入两项
alert(colors); //red,1,2,blue,green,red,black
alert(removed); //返回一个空数组
//使用splice()方法替换
removed = colors.splice(1,2,"Rocco","Bobi");//插入两项,删除两项项
alert(colors);//red,Rocco,Bobi,red,black
alert(removed);//blue,green 返回的数组包含两项
8.位置方法
位置方法主要有两个,全都接收两个参数,要查找的项和可选的表示查找起点位置的索引。如果查找到就返回要查找的项在数组中的下标,如果没有找到就返回-1
indexOf():从数组的开头开始向后查找
lastIndexOf():从数组的末尾开始向前查找
//创建新数组
var colors = ["red","blue","green","red","black"];
//从前往后查找
alert(colors.indexOf("red"));//0
//从后往前查找
alert(colors.lastIndexOf("red"));//3
9.迭代方法
数组的迭代方式比较多,可以使用for循环的两种不同使用方法,还可以使用属于数组的5个迭代方法
首先看for循环迭代数组
//创建新数组
var colors = ["red","blue","green","red","black"];
//第一种for循环
for (var i=0; i<colors.length; i++){
alert(colors[i]);
}
//第二种for循环
for (var i in colors){
alert(colors[i]);//此处的i也是索引,不是数组的元素
}
数组定义的5个迭代方法
every():对数组中的每一项运行给定的函数,如果数组中的每一个元素在该函数中都返回true,则返回true。
some():对数组中的每一项运行给定函数,如果该函数对任一项返回true,就会返回true。
filter():对数组中的每一项运行给定的函数,返回该函数会返回true的元素项组成的新数组。
forEach():对数组中的每一项运行给定的函数,这个方法没有返回值。
map():对数组中的每一项运行给定函数,返回每次函数调用的劫夺组成的数组。
var numbers = [1,2,3,4,5,4,3,2,1];
//every()
var everyResult = numbers.every(function (item,index,array) {
return (item > 2);//只有每一个元素都大于2,结果才会返回true
});
alert(everyResult);//false
//some()
var someResult = numbers.some(function (item,index,array) {
return (item >2);//只要有一个元素大于2,结果就返回true
});
alert(someResult);//true
//filter()
var filterResult = numbers.filter(function (item,index,array) {
return (item > 3);//收集满足大于3的元素,组成一个新数组
});
alert(filterResult);//[4,5,4]
//map()
var mapResult = numbers.map(function (item,index,array) {
return item*2;
});
alert(mapResult);//[2,4,6,8,10,8,6,4,2]
//forEach()
var forEachResult = numbers.forEach(function (item,index,array) {
// alert(item);
//对数组的每一项执行该函数,没有返回值
})
10.归并方法
数组的归并有两种两个函数,使用方法是一样的,不同之处在于一个是从前向后,一个是从后向前。
reduce():从数组第一个开始,逐个遍历到最后
reduceRight():从数组的最后一个开始,逐个遍历到第一项
以上两个方法都接收4个参数,分别是:前一个值,当前值,项的索引,数组对象。每一次的遍历都会把结果传递到下次操作的前一个值上
var values = [1,2,3,4,5];
var sum = values.reduce(function (prev,cur,index,array) {
return prev+cur;
});
alert(sum);//15
以上是reduce()的使用方法,reduceRight()使用方法相同,只是从后向前迭代。
JavaScript中的Array类型详解的更多相关文章
- JavaScript中数组Array方法详解
ECMAScript 3在Array.prototype中定义了一些很有用的操作数组的函数,这意味着这些函数作为任何数组的方法都是可用的. 1.Array.join()方法 Array.join()方 ...
- JavaScript中的Array数组详解
ECMAScript中的数组与其他多数语言中的数组有着相当大的区别,虽然数组都是数据的有序列表,但是与其他语言不同的是,ECMAScript数组的每一项可以保存任何类型的数据.也就是说,可以用数组的第 ...
- JavaScript中的对象类型详解
To be finished 摘要 1.什么是对象? 2.引用类型和原始类型 3.对象数据属性拥有的特性(Attributes) 4.如何创建对象 a.直接定义 var mango={color:&q ...
- javascript中=、==、===区别详解
javascript中=.==.===区别详解今天在项目开发过中发现在一个小问题.在判断n==""结果当n=0时 n==""结果也返回了true.虽然是个小问题 ...
- JavaScript中return的用法详解
JavaScript中return的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 t ...
- javascript 中合并排序算法 详解
javascript 中合并排序算法 详解 我会通过程序的执行过程来给大家合并排序是如何排序的... 合并排序代码如下: <script type="text/javascript& ...
- javascript中的this作用域详解
javascript中的this作用域详解 Javascript中this的指向一直是困扰我很久的问题,在使用中出错的机率也非常大.在面向对象语言中,它代表了当前对象的一个引用,而在js中却经常让我觉 ...
- JavaScript中this的用法详解
JavaScript中this的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 thi ...
- JavaScript入门之数组:Array类型详解
数组应该是每个语言中都用得极度频繁的数据类型,JavaScript也不例外. 个人认为,Js中的Array类型非常强大. 首先没有C/C++等语言需要在数组初始化时指定数组长度(并不可变)的要求. 也 ...
随机推荐
- Ubuntu中保存iptables防火墙规则
Ubuntu中保存iptables防火墙规则的例子 打开防火墙 ufw disableufw statusufw enable ufw allow 22/tcp ufw reload iptables ...
- ios NSURLSession后台传输
http://www.appcoda.com/background-transfer-service-ios7/ http://www.raywenderlich.com/51127/nsurlses ...
- android用TextView实现跑马灯效果
今天搞啦很久,其实很简单,就加几个属性就可以啦! 图如下 : 有的说要重写TextView方法,有的说要设置固定长度,但是我没重写也没有设置固定长度也弄出来啦!跑在2.3.3的手机上面.就是不知道其他 ...
- html5 required属性的注意事项
实例 带有必填字段的表单: <form action="demo_form.asp" method="get"> Name: <input t ...
- Fraunhofer音频技术为MPEG未来高品质3D音频内容传输的标准依据
OFweek电子工程网讯:世界着名的音频和多媒体技术研究机构Fraunhofer IIS的基于信道/对象的方案获选成为未来MPEG-H 3D音频标准的依据,此项标准旨在传输高品质的3D音频内容.MPE ...
- 1.关于Swift
关于SwiftSwift是一种新的编程语言,用于iOS和OS X的应用程序,建立在最佳的C和Objective-C之上,没有C兼容性的限制.Swift采用的安全模式设计,并增加了现代的功能,使编程更简 ...
- flutter 环境安装以及配置
首先需要下载flutter源码,以下是github地址: https://github.com/flutter/flutter 然后需要安装git环境吧,下图红框可以自行下载安装 接下来需要安装flu ...
- 数据源从druid迁移到HikariCP
最近正好在做新项目,使用的是druid数据源,也真是巧,有朋友建议我使用HikariCP这个数据源,可以说是牛的一笔,速度快的飞起,性能极高! 要比druid不知道好多少倍,druid其实在某些情况下 ...
- django DateTimeField 时间格式化
['%Y-%m-%d %H:%M:%S', # '2006-10-25 14:30:59' '%Y-%m-%d %H:%M', # '2006-10-25 14:30' '%Y-%m-%d', # ' ...
- React Native 项目整合 CodePush 全然指南
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/y4x5M0nivSrJaY3X92c/article/details/81976844 作者 | 钱 ...