JS—数组的使用方法

1.数组的概念

1、数组(array)是按照一定顺序排列的一组值,每个值都拥有自己的编号,编号从0开始。整个数组用方括号来表示。

语法:var arr = [item1,item2,item3];

注意:
a.数组是按照一定顺序排列的一组值,顺序体现在下标,下标是从0开始
b.数组元素:数组中的每一个值称为数组元素,数组元素可以是任意类型
例子:

 var arr=[123,'周杰伦','aa',true];
     console.log(arr);

2.split()
描述:split方法能够根据指定的符号将字符串进行分割,分割后的每一个子元素整合成一个数组返回。
如果无法分割,那么返回的数组只有一个元素,这个元素就是字符串本身。
语法:str.split('分隔符');

注意:
a.分隔符不同,结果不同
b.如果分隔符是空字符,那么户把整个字符串逐个切开

上述代码中的item1、item2和item3元素就构成一个数组。两端的方括号是数组的标志。因为数组元素编号从0开始,所以item1是数组的第0个元素。
ps:item1、item2和item3是泛指,javascript中的数组元素可以是任何类型的数据。

var arr = [123,123,true,null,undefined,{'name':'frank'}];

这是数组么?

2.数组的特点

(1)数组的本质
(2)数组的长度
(3)数组的遍历
(4)数组的空位
(5)数组的’删除’

(1)数组的本质
本质上,数组是对象类型的一种特殊表现形式。因此创建的时候我们可以使用new方式来创建。

var nameArr = new Array('LiLei', 'HanMeiMei', 'Poliy');//['LiLei', 'HanMeiMei', 'Poliy']

typeof运算符会返回数组的类型是object。typeof nameArr// “object”
(2)数组的长度
要讨论数组的长度问题就要搞清楚数组在内存中的存放方式。
前面我们说过,javascript中的数组元素可以是任何数据类型的。而在计算机中不同的数据类型数据是放在不同存储区的。举例来说:
在这里插入图片描述

因此javascript中的数组元素是在内存中的存储位置不连续的

但是我们又不能按照内存地址来访问数组元素,那样会造成编程过程中的灾难。所以为了解决这个问题,我们按照下标的方式来对数组元素进行标记。
所以我们计算数组长度的时候只需要计算数组元素的个数即可。
在这里插入图片描述

总结:javascript数组在内存中的存储位置是不连续的,但是数组的下标是连续的
根据上述原理,javascript给数组提供了一个.length属性来计算数组长度。

语法:arr.length

var ageArr = [18,24,30];
console.log(ageArr.length);//3

length是一个可写属性。
如果设置length长度小于数组本身长度,那么多余元素舍弃。
如果设置length长度大于数组本身长度,那么缺少元素用空位补齐。
如果设置length长度不是合法数值,那么会报错Invalid array length

var ageArr = [18,24,30];
	ageArr.length = 2;
	console.log(ageArr.length);//2
	console.log(ageArr);//[18,24]
var ageArr = [18];
	ageArr.length = 3;
	console.log(ageArr.length);//3
	console.log(ageArr);//[18]
	console.log(ageArr[1]);//undefined
var ageArr = [18,24,30];
ageArr.length = -1;
console.log(age.length);//Uncaught RangeError: Invalid array length(…)

(3)数组的遍历
如果想要连续访问数组中的每个元素,可以使用for in快速遍历。

var heroArr = ['GreenJuPeople','BlackGuaFu','MetalXia'];
	for(var index in heroArr){
		console.log(heroArr[index]);
	}
	
GreenJuPeople
BlackGuaFu
MetalXia

ps:需要引起注意的是,for in循环遍历数组的时候,for循环中的index表示的数组的下标。并不是表示数组元素

(4)数组的空位
当数组的某个位置是空元素,即两个逗号之间没有任何值,我们称该数组存在空位(hole)。

注意:
a.空位是计算数组长度的
b.空位表现为undefined

var countryNameArr = ['China','','Japan'];
	 console.log(countryNameArr.length);
     console.log(typeof  countryNameArr[1]);

有趣的是:如果最后一个元素后面有逗号,这种情况并不会产生空位。也就是说最后一个元素后面的逗号有和没有结果都是一样的。(当然这种写法并不推荐。)

var countryName = ['China','American','Japan',];
	countryName.length//3

(5)数组的’删除’
delete命令能够删除数组中的元素的值,从而形成空位。但是delete命令并不会影响length的属性。
语法:delete arr[下标]

var girlFriends = ['ZhangTianAi','LiuShiShi','SomeOne'];
delete girlFriends[1];
console.log(girlFriends.length);//3
console.log(girlFriends); //["ZhangTianAi", 2: "SomeOne"]

ps:delete命令在使用的时候,是根据数组下标来对指定数组的值进行删除的。

3.数组的调用

数组的调用实际上指的是数组元素的调用。数组元素通过【数组名+下标】的方式来进行访问。

var girlFriends = ['张天爱','李贞贤','SomeOne'];
	console.log('今天朕就选你侍寝吧,'+girlFriends[0]);
	console.log('张天爱:爱死你了皇上')

ps:数组元素一次只能访问一个,不能一次连续访问多个数组元素。

4.数组的方法

javascript为数组提供了很多方法,方便开发者更好的使用数组。

(1)isArray:判断是否为数组
(2)valueOf:返回数组本身
(3)toString:将数组以字符串的形式返回
(4)push:向数组末尾追加数据,返回当前数组的长度
(5)pop:删除数组最后一个元素
(6)join:将数组转换为字符串,默认按逗号隔开
(7)shift(): 在数组头部删除一个元素
(8)unshift():在数组头部添加一个元素
(9)reverse():数组反转
(10)slice:数组截取
(11)splice:数组截取,并且可以插入新的元素(改变原数组)
(12)sort:排序
(13)indexOf:索引
(14)lastIndexOf:反序索引

(1)isArray方法
isArray方法是数组提供的用来专门判断当前对象是否为数组的方法。如果是数组返回true,否则返回false。
语法:Array.isArray();

var arr = []; 
Array.isArray(arr); // true
 
var arr = new Array(); 
var result = Array.isArray(arr); // true
 
var arr = [1, 2, 3]; 
var result = Array.isArray(arr); // true
 
var result = Array.isArray("an array"); //并不是一个组数组,而是一个字符串
document.write(result); // false 

(2)valueOf方法
valueOf方法归属于Object对象类型,作用是返回指定对象的原始值。在数组中作用是返回数组本身。(其他用法这里暂时不提)

语法:arr.valueOf()

var array = ["FrankenStein", true, 12, -5];
document.writen(array.valueOf() === array ); // true 

ps:JavaScript的许多内置对象都重写了该函数,以实现更适合自身的功能需要。因此,不同类型对象的valueOf()方法的返回值和返回值类型均可能不同。

(3)toString方法
toString方法能够把数组转换成字符串。

注意:不仅能够合并数组元素,对布尔类型也能够生成
语法:arr.toString()

var girlFriends = ['ZhangTianAi','LiuShiShi','SomeOne'];
	console.log(girlFriends.toString()); //ZhangTianAi,LiuShiShi,SomeOne

ps:toString方法不止能转换数组,对于布尔值也能够转换。

(4)push方法
push方法用于在数组的末端添加一个或多个元素,并返回添加后的数组的长度。

注意:
a.push方法回对原数组造成影响
b.可以根据需求来决定是否保存punsh方法结果
语法:arr.push(item)

var arr=[];
         var  arrLength=arr.push('zhangsan','lisi');
         console.log(arr);
         console.log(arrLength);
         var newLength=arr.push('wangwu');
         console.log(arr);
         console.log(newLength);

(5)pop方法
pop方法用于删除数组的最后一个元素,并返回删除的这个元素。

注意:
a.pop方法没有参数
b.pop方法回对原数组造成影响
语法:arr.pop()

var  arr=['周杰伦','杨坤','刘欢'];
     var deleteItem=arr.pop();
     console.log(arr);
     console.log(deleteItem);

(6)join方法
join方法能够以给定的参数做分隔符,将所有的数组元素组成一个字符串。如果不提供参数,默认使用逗号分隔。

语法:arr.join('分隔符')

var girlFriends = ['张天爱', '李贞贤', '刘诗诗'];
	console.log(girlFriends.join());//张天爱李贞贤刘诗诗
	console.log(girlFriends.join(','));//张天爱,李贞贤,刘诗诗

(7)shift方法
shift方法用于删除数组中的第一个元素,并返回删除的这个元素。

注意:也会对原数组造成影响
语法:arr.shift()

  var  arr=['周杰伦','杨坤','刘欢'];
         arr.shift();
         console.log(arr);
         console.log(arr.shift());
         console.log(arr);

(8)unshift方法
unshift方法用于在数组的第一个位置添加元素,并返回添加元素后新数组的长度。

注意:也会对原数组造成影响
语法:arr.unshift(item)

var girlFriends = ['李贞贤', '刘诗诗'];
	console.log(girlFriends.unshift('张天爱'));// 3

(9)reverse方法
reverse方法能够反序排列数组。

注意:会改变原数组的结构
语法:arr.reverse()

var arr=['aa','bb','cc'];
var newArr=arr.reverse();
     console.log(newArr);
     console.log(arr);

(10)slice方法
slice方法作用是能够根据指定的【起始点】和【结束点】来对数组进行截取,并生成一个新数组。新数组的内容是从起始点下标开始的元素到结束点下标的元素,但是不包括结束点下标的元素本身。

注意:
a.前包后不包
b.不会对原数组结构更改
语法:arr.slice(index1,index2);

var  arr=['aa','dd','ss',3,4,5,6,'ww','rr','yy'];
 var newArr= arr.slice(-7,-3);
         console.log(arr);
         console.log(newArr);

上面代码的作用是,从数组下标1元素(李贞贤)开始截取,到数组下标2元素(刘诗诗)为止。但是不包括刘诗诗。
ps:slice方法的参数可以是负值。-1代表最后一个元素,-2代表倒数第二个元素。

var girlFriends = ['ZhangTianAi','LiuShiShi','SomeOne'];
console.log(girlFriends.slice(-2,-1));//LiuShiShi

pss:如果只写一个参数,则表示从当前坐标开始截取一直到最后一个元素。

(11)splice方法
splice方法和slice方法很相似,但是splice功能更强大一些。
splice方法的作用是在指定下标处截取一定长度的元素,再插入一些新元素,并将删除的元素构成一个新数组返回。splice方法会改变原本数组。

注意:
a.会改变原数组的结构
b.前两个参数必须有,后面的是可选参数
语法:arr.splice(index,removeCount,addItem1,addItem2,…)

var  arr=['aa','dd','ss',3,4,5,6,'ww','rr','yy'];
         var newArr=arr.splice(3,4,true,'周杰伦');
         console.log(arr);

上述代码中numbers.splice(3,3,4,5,6);的含义是,从数组下标为3的元素开始,删除3个元素,然后把4,5,6插入到原数组当中。

ps:对于splice方法来说,有没有新元素不是必要的。

(12)sort方法
sort方法用于对数组元素进行排序。默认按照编码方式进行排序(即不在括号里写任何内容),如果不希望按照默认方式排序,则需要自定义排序函数。

语法:arr.sort(sortby)

var arr = [1,100,40,25,38];
	console.log(arr.sort());//[1, 100, 25, 38, 40]

如果调用该方法时没有使用参数,将按字母顺序对数组中的元素进行排序,说得更精确点,是按照字符编码的顺序进行排序。要实现这一点,首先应把数组的元素都转换成字符串(如有必要),以便进行比较。

var arr = ['Frank','arik','sophia'];
console.log(arr.sort()); //["Frank", "arik", "sophia"]

如果想按照其他标准进行排序,就需要提供比较函数

function sortNumber(a,b) 
{ return a-b>0 }

var arr = [100,4,25,33,18] ;
document.write(arr + "<br />")//[100,4,25,33,18] 
document.write(arr.sort(sortNumber)) //[4,18,25,33,100]

(13)indexOf方法
indexOf方法能够从前到后检索数组,并返回元素在数组中的第一次出现的下标,如果没有索引到则返回-1。indexOf第二个参数表示从第几个元素开始索引,是可选参数。

注意:
第一个参数是可选的,表示从第几个下标开始向后查找
第二个参数可以是负值,表示从倒数第几个下标开始向后查找
语法:arr.indexOf(item,beginIndex)

var numbers = [11,13,15,17,19,11];
	console.log(numbers.indexOf(11));//0
	console.log(numbers.indexOf(100));//-1

ps:第二个参数可以是负值。如果是-1则表示从最后一个元素开始向后查找,这种写法我个人不推荐。

var numbers = [11,13,15,17,19,11];	
	console.log(numbers.indexOf(11,-1));//5
	console.log(numbers.indexOf(19,-1));//-1 表示没找到

(14)lastIndexOf方法
lastIndexOf方法能够从后向前检索数组,并返回元素在数组中的最后一次出现的下标,如果没有索引到则返回-1。lastIndexOf第二个参数表示从第几个元素开始索引,是可选参数。

语法:arr.lastIndexOf(item,beginIndex)

var numbers = [11,13,15,17,19,11];
	console.log(numbers.lastIndexOf(11));//5
	console.log(numbers.lastIndexOf(100));//-1

ps:第二个参数可以是负值。如果是-1则表示从最后一个元素开始向前查找。

var numbers = [11,13,15,17,19,11];	
	console.log(numbers.indexOf(11,-2));//0
	console.log(numbers.indexOf(19,-1));//-1 表示没找到

5.二维数组

如果数组的元素还是数组,那么我们就称外层数组是一个二维数组。

语法:var arr = [[item1,item2],[item3,item4]];

var arr = [[1,2],[3,4]];
	arr[0][1] = 2;
	arr[1][0] = 3;

二维数组的调用很简单,有两个下标。第一个下标表示外层数组的下标,第二个下标表示内层数组的下标。尝试解释上述例子中调用二维数组的原理。

ps:二维数组是数组的一种特殊形式,数组的方法对二维数组仍然生效。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值