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++等语言需要在数组初始化时指定数组长度(并不可变)的要求. 也 ...
随机推荐
- 百度「Web 前端研发部」面试过程和常见问题 可能会采用哪些方法来面试 STAR 面试法 喜欢什么样的面试者 喜欢问的问题
http://segmentfault.com/a/1190000002498800 在他们的github上看到的,收藏一下备用.看完觉得还有很多要努力的地方. FEX 的面试过程 我们一般会有 3 ...
- 第三部分:Android 应用程序接口指南---第二节:UI---第五章 设置(Settings)
第5章 设置(Settings) 应用程序通常包括允许用户修改应用程序的特性和行为的设置功能.例如,一些应用程序允许用户指定通知是否启用或指定多久使用云同步数据.如果你想要为你的应用程序提供设置,你应 ...
- 第三部分:Android 应用程序接口指南---第二节:UI---第六章 对话框
第6章 对话框 一个对话框是一个小窗口,提示用户做出决定或输入额外的信息,一个对话框不填充屏幕并且通常用于在程序运行时中断,然后弹出通知提示用户,从而直接影响到正在运行的程序.图6-1就是对话框的外观 ...
- ASP.NET CORE的H5上传
做的CORE项目中用到H5上传,把以前的MVC代码复制过来得修改一下才能用在.NET CORE中
- Atitit.mysql 5.0 5.5 5.6 5.7 新特性 新功能
Atitit.mysql 5.0 5.5 5.6 5.7 新特性 新功能 1. MySQL 5.6 5 大新特性1 1.1. 优化器的改进1 1.2. InnoDB 改进1 1.3. 使用 ...
- JPA+Hibernate 3.3 ——第一个JPA程序
所需要的最小的jar包(注意:jar包所在路径不能含有空格或中文) hibernate3.jarhibernate-cglib-repack-2.1_3.jarslf4j-api-1.5.2.jarj ...
- 解决CentOS缺少共享库
# ./aapt dump bading ./tmp/app_xxxx.apk ./appt:error while loading shared libraries: libraries: libs ...
- T-Pot平台cowrie蜜罐暴力破解探测及实现自动化邮件告警
前言:Cowrie是基于kippo更改的中交互ssh蜜罐, 可以对暴力攻击账号密码等记录,并提供伪造的文件系统环境记录黑客操作行为, 并保存通过wget/curl下载的文件以及通过SFTP.SCP上传 ...
- sublime text 3 环境变量的配置、安装Package Control、汉化和注册
1.在运行里输入sysdm.cpl打开环境变量设置界面,输入sublime的安装目录,分号和之前的隔开 2.下载好Package Control,解压重命名为package control 下载地址: ...
- Android Launcher分析和修改5——HotSeat分析
今天主要是分析一下Launcher里面的快捷方式导航条——HotSeat,一般我们使用手机底下都会有这个导航条,但是如果4.0的Launcher放到平板电脑里面运行,默认是没有HotSeat的,刚好我 ...