5.2 Array类型
◆ 创建数组的基本方式有两种。
①第一种是使用Array构造函数,new关键字可省略
var colors = new Array(); var colors = new Array(20); //length值为20 var colors = new Array("red","blue","black");
②第二种是使用字面量表示法
var colors = ["red","blue","black"];
var emptyArr = []; //空数组
◆ 读取和设置数组的值
var colors = ["red","blue","green"];
alert(color[0]); //显示第一项
color[2] = "green" //修改第三项
color[3] = "pink" //增加第四项
◆ length属性,可以通过设置该属性移除或添加数组中的项目
利用length属性可以在数组末尾添加项: colors [ colors.length ] = "white"
最后一项的索引是length-1
◆检测数组
instanceof()
Array.isArray()方法
◆栈方法 (LIFO)
Last-In-First-Out 后进先出的数据结构,最新添加的项最早被移除。push()和pop()方法。
push()方法可以接受任意数量的参数 ,把他们逐个添加到数组末尾,并返回修改后数组的长度。而pop()方法则移除数组最末尾的一项,返回移除的项。
var color= new Array();
var count=color.push("red","green");
alert(count); //2 count = color.push("black");
alert(count); //3
document.write(color); //red,green,black var item = color.pop();
alert(item); //black
document.write(color); //red,green
◆队列方法(FIFO)
队列在列表的末尾添加项,从列表的前端移除项。push()方法和shift()方法
push()向数组末端添加项,shift移除数组中的第一个项并返回该项。
unshift()方法跟shift()方法相反,它在数组前端添加任意个项返回该新数组的长度。
◆重排序方法 :reverse() 和 sort()
reverse()方法会反转数组项的顺序。
var values = [1,2,3,4,5];
values.reverse();
alert(values); //5,4,3,2,1
sort()方法按会调用每个数组项的toString()转型方法,然后比较得到的字符串,再从小往大排。
var values = [0,1,5,10,15];
values.sort();
alert(values); //0,1,10,15,5
很多sort()方法接收一个比较函数作为参数,如:
function compare(value1,value2){
if(value1<value2){
return -1;
}else if(value1>value2){
return 1;
}else{
return 0;
}
}
把上面的比较函数作为参数传递到sort()方法:
var values = [0,1,5,10,15];
values.sort(compare);
alert(values); //0,1,5,10,15
交换比较函数返回的值可以产生降序排序的结果。
function compare(value1,value2){
if(value1<value2){
return 1;
}else if(value1>value2){
return -1;
}else{
return 0;
}
}
var values = [0,1,5,10,15];
values.sort(compare);
alert(values); //15,10,5,1,0
concat()方法
这个方法会创建当前数组一个副本,然后将接收到的参数添加到这个副本的末尾,最后返回新数组。没有传递参数的情况系 ,它只是复制当前数组并返回副本。
var color = ["red","green","blue"];
var color2 = color.concat("yellow",["black","gray"]);
alert(color2); //red,green,blue,yellow,black,gray
slice()方法
这个方法可以接受一或两个参数,即要返回项的起始和结束位置。在只有一个参数的情况下,slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数,返回起始和结束位置之间的项(不包括结束位置的项),slice()方法不会影响原始数组。
var color = ["red","green","blue"];
var color2 = color.slice(1);
var color3 = color.slice(0,2);
alert(color2); //green,blue
alert(color3); //red,green
alert(color); //red,green,blue
splice()方法
有很多种用法,主要用途是向数组的中部插入项。
-删除:指定2个参数,要删除的第一项的位置,要删除的项数。
var color = ["red","green","blue"];
var color2 = color.splice(0,1);
alert(color2); //red
alert(color); //green,blue
-插入:指定3个参数,起始位置,0(要删除的项数),要插入的项。
var color = ["red","green","blue"];
var color2 = color.splice(1,0,"yellow","pink","black"); //在位置1前插入
alert(color2); //没有删除项,所以返回一个空数组
alert(color); //red,yellow,pink,black,green,blue
-替换:指定3个参数,起始位置,要删除的项,要插入的项。
var color = ["red","green","blue"];
var color2 = color.splice(1,2,"yellow","pink","black");
alert(color2); //green,blue
alert(color); //red,yellow,pink,black
indexOf()方法 和 lastIndexOf()方法
这两个方法从接收两个参数:要查找的项,表示查找起点位置的索引(可选)。indexOf()方法从数组的开头向后查找,lastIndexOf()方法则从数组的末尾向前查找。
这两个方法都返回要查找的项在数组中的位置,没找到的情况下返回-1.
var color = ["red","green","blue"]; alert(color.indexOf("green")); //1
alert(color.indexOf("green",2)) //-1 找不到,返回-1 alert(color.lastIndexOf("red")); //0
alert(color.lastIndexOf("green",0)) //-1
迭代方法:ECMAScript5为数组定义了5个迭代方法。每个方法都接收两个参数:要在每一项上运行的函数,运行该函数的作用域对象(可选)
而传入这些方法中的函数会接收三个参数:数组项的值,该项下数组中的位置,数组对象本身
every():检测数组中的每一项是否符合条件,每一项都返回true,则返回true
var num = [1,2,3,4,5];
var result = num.every(function(item,index,array){
return(item > 0);
});
alert(result); //true
some():检测数组中的某一项是否符合条件,只要某一项返回true,则返回true
var num = [1,2,3,4,5];
var result = num.some(function(item,index,array){
return(item > 4);
});
alert(result); //true
filter():筛选出数组中符合条件的项,即返回true的项,返回这些项组成的新数组
var num = [1,2,3,4,5];
var result = num.filter(function(item,index,array){
return(item > 2);
});
alert(result); //3,4,5
map():对数组的每一项运行传入的函数,对应项得出的结果产生一个新数组
var num = [1,2,3,4,5];
var result = num.map(function(item,index,array){
return (item * 2);
});
alert(result); //2,4,6,8,10
forEach():对数组中的每一项运行传入的函数。没有返回值,本质上与使用for循环迭代数组一样
var num = [1,2,3,4,5];
var result = num.forEach(function(item,index,array){
return (item);
});
alert(result); //undefined
两个缩小数组的方法:reduce() 和 reduceRight()方法
这两个方法都会迭代数组的所有项,然后构建一个最终返回的值。reduce()方法从数组的第一项开始,逐个遍历到最后,reduceRight()方法则从数组最后一项开始往前遍历到第一项。
这两个方法都接收两个参数:一个在每一项调用的函数,作为缩小基础的初始值(可选)
调用的函数接收4个参数:前一个值,当前值,项的索引,数组对象
var num = [1,2,3,4,5];
var result = num.reduce(function(prev,cur,index,array){
return (prev*cur);
});
alert(result); //120 =1*2*3*4*5
reduceRight()的作用类似,不过方向相反而已。
5.2 Array类型的更多相关文章
- JS高程5.引用类型(2)Array类型
Array类型: ECMAScript数组的每一项可以保存任何类型的数据,数组的大小是可以动态调整的. 创建数组的基本方式: (1)使用Array构造函数 var color=new Array(); ...
- 5.2 Array类型介绍
Array类型是数组类型,Array(数组)类型也是引用类型中的一种. js 数组中的每一项可以保存任何类型的数据. js数组的大小/长度是可以动态调整的.如果你往数组中添加数据,数组长度会自动增加. ...
- JavaScript中Array类型方法总结
Array类型是ECMAScript中最常用的类型之一,ECMAScript中的数组与其他多数语言中的数组有着相当大的区别.ECMAScript数组的每一项可以保存任何类型的数据.这里总结了数组类型的 ...
- Object类型与Array类型
总结--JS中的引用类型: Object类型,Array类型,Boolean类型,Number类型,String类型,Date类型, Function类型,RegExp类型,单体内置对象(Global ...
- oracle Array类型作为参数传入函数(存储过程) 大字符串参数解决方案
1. 创建自定义的类型.由于Oracle没有提供现成的array类型,这里用table类型来模拟. CREATE OR REPLACE TYPE varchar_array is Table OF v ...
- mongo中查询Array类型的字段中元素个数
I have a MongoDB collection with documents in the following format: { "_id" : ObjectId(&qu ...
- 引用类型之Array类型
Array类型 ECMAScript数组与其它语言数组一样,都是数据的有序列表.但是ECMAScript数组的每一项可以保存任何类型的数据.而且,ECMAScript数组是可以动态调整的. 1.创建和 ...
- JavaScript引用类型之Array类型一
一.简介 除了Object之外,Array类型恐怕是ECMAScript中最常用的类型了.下面就来分析ECMAScript中的数组与其他语言中的数组的异同性: 1.相同点: (1)他们都是数据的有序列 ...
- 如何判断一个变量是数组Array类型
在很多时候,我们都需要对一个变量进行数组类型的判断.JavaScript中如何判断一个变量是数组Array类型呢?我最近研究了一下,并分享给大家,希望能对大家有所帮助. JavaScript中检测对象 ...
- 从头开始学JavaScript (十二)——Array类型
原文:从头开始学JavaScript (十二)--Array类型 一.数组的创建 注:ECMAscript数组的每一项都可以保存任何类型的数据 1.1Array构造函数 var colors = ne ...
随机推荐
- java——链表映射 LinkedListMap
好像也不是基于链表来实现的,而是采用与链表类似的节点形式重新定义了一个节点内部类,以此来实现映射 public class LinkedListMap<K, V> implements M ...
- python 常见的异常类型
python标准异常异常名称 描述BaseException 所有异常的基类SystemExit 解释器请求退出KeyboardInterrupt 用户中断执行(通常是输入^C)Exception 常 ...
- Deferred跟promise跟js同步问题记录
之前的时候,碰到过几次同事问我,说js的同步怎么处理,就是我想先执行这段代码(耗时相对较长的一行,多数是异步的一些api调用),执行完了之后我再执行下边这句,每次我都很无奈的说不晓得,如果是ajax的 ...
- 微信小程序可用的第三方库
1.wxDraw 轻量的小程序canvas动画库,专门用于处理小程序上canvas 的图形创建.图形动画,以及交互问题. 链接:http://project.ueflat.xyz/#/ 2.ZanUi ...
- C#中实体集合和实体转换成相应的string、XDocument、XElement
C#中实体集合和实体转换成相应的string.XDocument.XElement public class SimpleXmlConverter { public static string ToX ...
- (转)GitHub上整理的一些工具,求补充 -
SegmentFault 技术站点 Hacker News:非常棒的针对编程的链接聚合网站 Programming reddit:同上 MSDN:微软相关的官方技术集中地,主要是文档类 infoq ...
- SpringBoot 使用fastjson
spring boot默认使用的json解析框架是jackson,替换为fastjson有两种方式 1.继承WebMvcConfigurerAdapter @SpringBootApplication ...
- JavaScript比较和逻辑运算符
JavaScript比较和逻辑运算符 JavaScript比较和逻辑运算符 比较和逻辑运算符用于测试true或者false. 比较运算符 比较运算符在逻辑语句中使用,以测定变量或值是否相等 例如设定x ...
- 微信小程序电商实战-商品详情(上)
先看一下今天要实现的小程序商品详情页吧! 商品详情.gif 本期我们要实现小程序商品详情页的头部标题.头部轮播.商品详情浮动按钮和商品内页布局. 一.设置头部标题 如上图所示,头部标题是商品详情 ...
- 《Cron表达式详解》
Cron表达式是一个字符串,字符串以5或6个空格隔开,分为6或7个域,每一个域代表一个含义,Cron有如下两种语法格式: Seconds Minutes Hours DayofMonth Month ...