JavaScript中对数组和数组API的认识
JavaScript中对数组和数组API的认识
一、数组概念:
数组是JavaScript中的一类特殊的对象,用一对中括号“[]”表示,用来在单个的变量中存储多个值。在数组中,每个值都有一个对应的不重复的索引值。自动匹配索引值的数组称为索引数组,自定义索引值的数组称为关联数组(又叫哈希数组)。以下均研究索引数组。
二、创建数组:
使用数组之前首先都要先创建并赋值给一个变量,创建数组有两种不同的方法。
1、调用构造函数Array()创建数组,索引数组索引值都从0开始
eg:var arr=New Array(); //创建一个空数组
eg:var arr=New Array(3); //创建一个长度为3的数组,可存储JavaScript中任意类型的数据
arr[0]=12; //存储一个Number类型的值
arr[1]="abc"; //存储一个String类型的值
arr[2]=true; //存储一个Boolean类型的值
可以简写:var arr=New Array(12,"abc",true);
2、用数组字面量表示,即
eg:var arr=[]; //创建一个空数组
eg:var arr=[3]; //创建一个长度为1的数组,存错了一个数值3
eg:var arr=[12,"abc",true]; //创建一个存储3个值的数组
三、简单操作
1、读取和设置数组中的值时,要使用一对方括号“[]”,里面是值的索引值
eg:var arr=[12,"abc",true]; //创建一个存储3个值的数组
console.log(arr[0]); //12,取arr数组索引值为1的值,并打印在控制台
arr[1]="ABC"; //ABC,取arr数组索引值为1的值,修改为“ABC”放入原数组
arr[3]="一"; //在数组中索引值为3的位置增加一个值"一"
2、数组的length属性可以得到数组的长度,修改length属性可以起到修改数组的效果
索引数组里面最后一个值的索引值总比数组长度小1
eg:var arr=[12,"abc",true]; //创建一个存储3个值的数组
console.log(arr.length); //3,此时arr数组的长度
arr[arr.length]="ABC"; //在arr数组末尾新增一个值“ABC”,
console.log(arr.length); //4,新增之后arr数组的长度
arr.length=arr.length-1; //删除arr数组末尾的值
console.log(arr.length); //3,新增之后arr数组的长度
也可以直接修改数组的长度
arr.length=2;
console.log(arr.length); //2(小于之前的3),之前多出来的值会被删除
arr.length=6;
console.log(arr.length); //6(大于之前的3),不够的值被自动补充为空值
四、遍历数组
1、普通的for循环遍历
通常情况下是从索引值0开始遍历,这样 i 的取值就要限制在[0,arr.length)
eg:var arr=[12,"abc",true]; //创建一个存储3个值的数组
for(var i=0;i<arr.length;i++){
console.log(arr[i]);
} //12 abc true (空格处均有换行)
2、用for...in方法遍历
其中key表示索引值,arr表示要遍历的数组
eg:var arr=[12,"abc",true]; //创建一个存储3个值的数组
for(var key in arr){
console.log(arr[key]);
} //12 abc true (空格处均有换行)
3、用for...of方法遍历
val表示数组的值,arr为数组
eg:var arr=[12,"abc",true]; //创建一个存储3个值的数组
for(var val of arr){
console.log(val);
} //12 abc true (空格处均有换行)
4、用forEach()方法遍历
让数组的每一项都执行给定的函数,此方法没有返回值。
该函数默认需要传参,分别是:数组每一项值,每一项值的索引值以及数组本身
eg:var arr=[12,"abc",true]; //创建一个存储3个值的数组
arr.forEach(function(x,index,a){
console.log(index+"--"+x);
}) //0--12 1--abc 2--true (空格处均有换行)
五、数组属性
1、length:数组包含的元素的个数,即数组的长度。详见上文 简单操作 第二条
2、constructor:返回对创建此对象的数组函数的引用(不常用)
3、prototype:可以用来向数组对象添加属性和方法(不常用)
六、数组方法
1、增加
push():向数组末尾增加元素,并返回修改后数组的长度(后加)
unshift():向数组开头增加元素,并返回修改后数组的长度(前加)
eg:var arr=[12,"abc",true]; //创建一个存储3个值的数组
var change1=arr.push("ABC");
console.log("change1:"+change1+",当前数组:"+arr);
//change1:4,当前数组:12,abc,true,ABC
var change2=arr.unshift("一");
console.log("change2:"+change2+",当前数组:"+arr);
//change2:5,当前数组:一,12,abc,true,ABC
2、删除
pop():删除并返回数组的最后一个元素(后减)
shift():删除并返回数组的第一个元素(前碱)
eg:var arr=[12,"abc",true]; //创建一个存储3个值的数组
var change3=arr.pop();
console.log("change3:"+change3+",当前数组:"+arr);
//change3:true,当前数组:12,abc
var change4=arr.shift();
console.log("change4:"+change4+",当前数组:"+arr);
//change4:12,当前数组:abc,true
3、修改
concat():连接两个或两个以上的数组,并返回新构建的数组
创建原数组的副本,将元素或者数组添加到此副本的末尾并返回。
在没有参数的情况下,只是返回原数组的副本。
eg:var arr=[12,"abc",true]; //创建一个存储3个值的数组
var arr1=arr.concat(8,["ABC","一"]);
console.log("arr:"+arr+",arr1:"+arr1);
//arr:12,abc,true,arr1:12,abc,true,8,ABC,一(原数组未被改变)
join():把数组元素组成一个字符串,通过参数指定的分隔符进行分隔
该方法只有一个参数,即分隔符,用引号“""”包裹
省略的话默认用逗号“,”分隔,若想要无缝衔接,用“""”
eg:var arr=[12,"abc",true]; //创建一个存储3个值的数组
console.log(arr.join()); //12,abc,true(默认用逗号分隔)
console.log(arr.join("")); //12abctrue(无缝衔接)
console.log(arr.join(" ")); //12 abc true(用空格分隔)
sort():对数组的元素进行排序,默认按升序排列数组中的元素
sort()方法调用数组中值的toString()方法,比较得到的字符串排序(数值不例外)
sort()方法是在原数组上进行排序的,会改变原数组
eg:var arr=["a","b","c","d","e"];
console.log(arr.sort());
console.log(arr);
//["a", "b", "c", "d", "e"] ["a", "b", "c", "d", "e"](空格处有换行,原数组被改变)
eg:var arr=[2,12,5,34];
console.log(arr.sort());
console.log(arr);
//[12, 2, 34, 5] [12, 2, 34, 5](空格均有换行,原数组被改变)
上例显然是错误的,是因为sort()把所有数据类型转为字符串进行对比的
为了解决这个问题,我们可以给sort()方法设置一个对比规则的函数作参数
这个函数接收两个参数,若是想要第一个参数位于第二份参数之前,就返回一个负值,反之则反,两个参数相等即返回0
通过这个函数我们可以设置自定义的规则来进行数组排序
eg:var arr=[2,12,5,34];
function compare(a,b){
if(a<b){
return -1;
}else if(a>b){
return 1;
}else{
return 0;
}
}
console.log(arr.sort(compare));
//[2, 5, 12, 34] [2, 5, 12, 34](空格处有换行,原数组被改变)
reverse():颠倒数组的顺序
eg:var arr=[12,"abc",true]; //创建一个存储3个值的数组
console.log(arr.reverse());
console.log(arr);
//[true, "abc", 12] [true, "abc", 12](空格处有换行,原数组被改变)
slice():返回截取数组的一个片段组成的新数组,原数组不变
该方法可以接受一个或两个参数,表示从原数组截取项起始位置和结束位置的索引值(不包括结束位置的值)
若没有参数,则返回整个数组,相当于复制
若只有一个参数,则表示从原数组截取项的起始位置索引值,结束位置默认为数组末尾
若参数为负数,则表示将数组从后向前找位置,如:-2即倒数第二个值
不管怎么截取,第二个参数所表示的位置一定要在第一个参数表示位置之后,否则返回空数组
eg:var arr=[0,2,4,6,8,10];
console.log(arr.slice(2,4)); //[4,6]
console.log(arr.slice(2)); //[4,6,8,10]
console.log(arr.slice(2,-2)); //[4,6]
console.log(arr.slice(-4,-2)); //[4,6]
console.log(arr); //[0,2,4,6,8,10]
splice():可以实现多种操作,删除,插入和替换,会改变原数组
删除:可以删除数组中任意项,接受两个参数,分别为要删除的第一项的索引值和要删除的长度
插入:可以在指定位置插入任意项,接受三个部分参数,分别为:
要插入的起始位置,要删除的项的数量(0) 以及 要插入的项(可以是多个)
替换:可以在是定位置插入任意项,同时删除任意项,接受三个部分参数,分别为:
要插入的起始位置,要删除的项的数量(不为0) 以及 要插入的项(可以是多个)
删除的项的数量和要插入的项的数量没有必然的关系,不必完全相等
该方法始终都会返回包含删除项的数组,若没有删除项,则返回空数组,此方法会改变原数组
eg:var arr=[0,2,4,6,8,10];
console.log(arr.splice(2,2)); //[4,6] 被删除的值
console.log(arr); //[0,2,8,10] 删除:从索引值为2的地方开始删除两个元素
var arr=[0,2,4,6,8,10];
console.log(arr.splice(2,0,3)); //空数组 并未删除元素
console.log(arr); //[0,2,3,4,6,8,10] 插入:在索引值为2的地方插入一个数值3
var arr=[0,2,4,6,8,10];
console.log(arr.splice(2,1,3,5)); //[4] 把索引值为2的4删除,替换成了3,5
console.log(arr); //[0,2,3,5,6,8,10] 替换:把索引值为2的地方替换为两个数值3,5
toString() :把数组转换为字符串,并返回结果
eg:var arr=[0,2,4,6,8,10];
console.log(arr.toString()); //0,2,4,6,8,10
toLocaleString():把数组转换为本地字符串,并返回结果
用地区特定的分隔符把生成的字符串连接起来,形成一个字符串
eg:var arr=[0,2,4,6,8,10];
console.log(arr.toString()); //0,2,4,6,8,10
4、查找
indexOf():获取元素在数组中第一次出现的位置,找不到则返回-1
接受两个参数,分别为要查找的元素和开始查找的位置,从前往后查找
第二个参数可以省略,表示默认从第一项开始查找,该参数必须小于数组长度
eg:var arr=[0,2,4,6,2,10];
console.log(arr.indexOf(2)); //1 默认从第一项开始查找
console.log(arr.indexOf(2,2)); //4 从索引值为2的地方开始从前向后查找
lastIndexOf():获取元素在数组中最后一次出现的位置,找不到则返回-1
接受两个参数,分别为要查找的元素和开始查找的位置,从后往前查找
第二个参数可以省略,表示默认从最后一项开始查找,该参数必须小于数组长度
eg:var arr=[0,2,4,6,2,10];
console.log(arr.lastIndexOf(2)); //4 默认从最后一项开始查找
console.log(arr.lastIndexOf(2,2)); //1 从索引值为2的地方开始从后向前查找
已上即为本文全部内容,希望能对各位有所帮助,若有不妥之处也请各位多多指正,共同进步。
JavaScript中对数组和数组API的认识的更多相关文章
- JavaScript中的常用的数组操作方法
JavaScript中的常用的数组操作方法 一.concat() concat() 方法用于连接两个或多个数组.该方法不会改变现有的数组,仅会返回被连接数组的一个副本. var arr1 = [1,2 ...
- JavaScript中随机打乱一个数组
JavaScript中随机打乱一个数组 function shuffle(arr) { let i = arr.length; while (i) { let j = Math.floor(Math. ...
- javascript中的Array对象 —— 数组的合并、转换、迭代、排序、堆栈
Array 是javascript中经常用到的数据类型.javascript 的数组其他语言中数组的最大的区别是其每个数组项都可以保存任何类型的数据.本文主要讨论javascript中数组的声明.转换 ...
- 深夜重温JavaScript中的对象和数组
这一块实际上已经学过了,因为没有学好,在工作过程中遇到一些对象或者数组的操作,会去百度查找,浪费了许多宝贵的时间,所以特地再拐过头来重新学习. 对象 基本概念: 对象这种基本的数据结构还有其他很多种叫 ...
- 在JavaScript中,如何判断数组是数组?
如果你没有注意过这个问题,那么这个标题应该会让你感到困惑,判断数据类型这么基础的问题能有什么坑呢? 少年,你不能太天真了,我们朝夕面对的这门语言,可是JavaScript呀,任何你觉得已经习以为常的东 ...
- 如何在JavaScript中手动创建类数组对象
前言 关于什么是js的类数组对象这里不再赘述.可以参考这个链接,还有这里. js中类数组对象很多,概念简单的讲就是看上去像数组,又不是数组,可以使用数字下标方式访问又没有数组方法. 例: argume ...
- javascript中的二维数组
要创建一个二位数组我们脑子里第一个出现的就是 var arr=[][]; 但是在javascript这样是会报错的,要在javascrip中创建一个二位数组对象方法如下 方法一 直接把数组写出 ...
- Javascript中判断变量是数组还是对象(array还是object)
怎样判断一个JavaScript变量是array还是obiect? 答案: 1.如果你只是用typeof来检查该变量,不论是array还是object,都将返回‘objec'. 此问题的一个可行的答案 ...
- 关于JavaScript中省略元素对数组长度的影响
在学习<JavaScript权威指南>第六版的第7.1节中通过数组直接量创建数组时,我们可以不给数组的某个元素赋值,它就会使undefined.虽然是undefined,但我们调用数组对象 ...
- javascript中json对象json数组json字符串互转及取值
今天用到了json数组和json对象和json类型字符串之间互转及取值,记录一下: 1.json类型的字符串转换为json对象及取值 var jsonString = '{"bar" ...
随机推荐
- Linux信号实践(5) --时间与定时器
三种不同精度的睡眠 1.sleep #include <unistd.h> unsigned int sleep(unsigned int seconds); RETURN VALUE Z ...
- Java中Set的contains()方法
Java中Set的contains()方法 -- hashCode与equals方法的约定及重写原则 翻译人员: 铁锚 翻译时间: 2013年11月5日 原文链接: Java hashCode() a ...
- (四十八)Quartz2D引擎进阶
图形上下文栈: 应用,修改过上下文后,下一次画会在这个基础上进行,如果清空状态,需要上下文栈. 可以先把原来的上下文保存起来,然后恢复: - (void)drawRect:(CGRect)rect { ...
- quartz实现定时功能实例详解(servlet定时器配置方法)
Quartz是一个完全由java编写的开源作业调度框架,下面提供一个小例子供大家参考,还有在servlet配置的方法 Quartz是一个完全由java编写的开源作业调度框架,具体的介绍可到http:/ ...
- HTML5进阶(二)HBuilder实现软件自动升级
HBuilder实现软件自动升级 前言 移动APP开发好后需要实现软件自动升级功能,经过一番搜索,发现HBuilder具有"App资源在线升级更新"的功能,遂研究之. 经过一番测试 ...
- libgdx 1.4.1发布
(转载自http://www.libgdx.cn/topic/4/libgdx-1-4-1%E5%8F%91%E5%B8%83) libgdx从未停止进步的脚步.10月10日,libgdx1.4.1发 ...
- 【Qt编程】基于Qt的词典开发系列<六>--界面美化设计
本文讲一讲界面设计,作品要面向用户,界面设计的好坏直接影响到用户的体验.现在的窗口设计基本都是扁平化的,你可以从window XP与window 8的窗口可以明显感觉出来.当然除了窗口本身的效果,窗口 ...
- 关于App启动加载广告页面思路
需求 很多app(如淘宝.美团等)在启动图加载完毕后,还会显示几秒的广告,一般都有个跳过按钮可以跳过这个广告,有的app在点击广告页之后还会进入一个广告页面,点击返回进入首页.虽然说这个广告页面对用户 ...
- 【freeradius2.x】 安装和学习
虚拟机中centos 安装和学习 radius2 版本是2.2.x 的使用等知识 安装 为了测试方面,yum安装 yum -y install freeradius* 配置文件的位置是 /etc/ra ...
- 如何在os x或ubuntu下安装最新的ruby
os x下基本上可以安装到比较新的ruby,首先先安装rvm,然后用rvm list known看当前可供安装的ruby的版本,不过这也不是绝对的,比如在我的os x 10.9上,命令返回如下: # ...