JavaScript数组对象的使用

数组对象

JavaScript中的数组对象可以使用new Array 或字面量“[]”来创建，在创建之后，就可以调用数组对象来提供的一些方法来实现对数组的操作了，如添加，删除，数组排序，数组索引等。

数组类型检测

数组类型检测有两种常用的方式，分别是instanceof运算符和使用Array.isArray()方法，示例代码如下。

 		var arr=[];
        var obj={};
        //第一种方式
        console.log(arr instanceof Array);  //结果：true
        console.log(obj instanceof Array);  //结果：false
        //第二种方式
        console.log(Array.isArray(arr));  //结果：true
        console.log(Array.isArray(obj));  //结果：false

添加或删除数组元素

方法名	功能描述	返回值
push(参数1···)	数组末尾添加一个或多个元素，会修改原数组	返回数组的新长度
unshift(参数1···)	数组开头添加一个或多个元素，会修改原数组	返回数组的新长度
pop()	删除数组的最后一个元素，若是空数组则返回undefined，会修改原数组	返回删除的元素的值
shift()	删除数组的第一个元素，若是空数组则返回undefined，会修改原数组	返回删除的元素的值

下面我们通过代码进行演示

 var arr=['Rose','Lily'];
        console.log('原数组:'+arr);
        var last=arr.pop();
        console.log('在末尾移除元素：'+last+'移除后数组为'+arr);
        var len=arr.push('Tulip','Jasmine');
        console.log('在末尾添加元素后长度为：'+len+'添加后数组为：'+arr);
        var firs=arr.shift();
        console.log("移除第一个数组"+firs+'移除后的数组为：'+arr);
        len=arr.unshift('Balsam','sunflower');
        console.log('在开头添加元素后长度变为：'+len+'添加后的数组为：'+arr);

运行结果为

原数组:Rose,Lily
在末尾移除元素：Lily移除后数组为Rose
在末尾添加元素后长度为：3添加后数组为：Rose,Tulip,Jasmine
移除第一个数组Rose移除后的数组为：Tulip,Jasmine
在开头添加元素后长度变为：4添加后的数组为：Balsam,sunflower,Tulip,Jasmine

数组排序

方法名	功能描述
reverse()	颠倒数组中元素的位置，该方法会改变原数组，返回新长度
sort()	对数组的元素进行排序，该方法会改变原数组，返回新长度

下面我们通过代码进行演示

	    //反转数组
        var arr=['red','green','blue'];
        arr.reverse();
        console.log(arr);
        //数组排序
        var arr1=[13,4,77,1,7];
        arr1.sort(function(a,b){
            return b-a;
        })
        console.log(arr1);

运行结果

['blue', 'green', 'red']
[77, 13, 7, 4, 1]

数组索引

方法名	功能描述
indexOf()	返回在数组中可以找到给定值的第一个索引，如果不存在则返回-1
lastIndexOf()	返回指定元素在数组中的最后一个索引，如果不存在则返回-1

下面通过代码进行演示

		var arr=['red','green','blue','pink','blue'];
        console.log(arr.indexOf('blue'));
        console.log(arr.lastIndexOf('blue'));

运行结果

2
4

数组转换为字符串

方法名称	功能描述
toSrting()	把数组转换为字符串，逗号分隔每一项
join(‘分隔符’)	把数组的所有元素连接到一个字符串中

下面我们通过代码进行实例

		//使用toString()
        var arr=['a','b','c'];
        console.log(arr.toString());
        //使用join()
        console.log(arr.join());//默逗号分隔
        console.log(arr.join(''));
        console.log(arr.join('-'));

运行结果

a,b,c
a,b,c
abc
a-b-c

其他方法

方法名	功能描述
fill()	用一个固定值填充数组中指定下标范围内的全部元素
splice()	删除数组，参数为splice(第几个开始，要删除的个数)，返回被删除数组元素的值
slice()	数组截取，参数为slice(begin,end),返回被截取项目的新数组
concat()	连接两个或多个数组，不影响原数组，返回一个新数组

下面我们通过代码进行实例

		//fill
        var array1=[1,2,3,4];
        //填充0，从数组索引2(包含)开始到4(不包含)结束
        console.log(array1.fill(0,2,4));


        //splice
        var array2=['小米','小明','小张','小李'];
        //从索引2的位置开始删除，删除0个元素，插入小李
        var removed=array2.splice(2,0,'小红')
        console.log(array2);

        //slice
        var arr3=['小米','小明','小张','小李'];
        //从索引1(包含)的位置开始截取到索引3(不包含)结束
        reslice=arr3.slice(1,3);
        console.log(arr3);
        console.log(reslice);

        //concat
        var num1=[1,2,3];
        var num2=[4,5,6];
        var num3=[7,8,9];
        var numarr=num1.concat(num2,num3);
        console.log(numarr);

运行结果

[1, 2, 0, 0]
['小米', '小明', '小红', '小张', '小李']
['小米', '小明', '小张', '小李']
['小明', '小张']
[1, 2, 3, 4, 5, 6, 7, 8, 9]

字符串对象

快速方便的实现字符串的查找，截取，替换，大小写转换等操作。

字符串对象的使用

字符串对象使用new String()来创建，在String构造函数中传入字符串，就会在返回的字符串对象中保存这个字符串。示例代码如下

		var str=new String('apple');
        console.log(str);
        console.log(str.length);

运行结果如下

String {'apple'}
5

注意： 虽然JavaScript基本包装类型的机制可以使普通变量也能像对象一样访问属性和方法，但他们并不属于对象类型，示例代码如下。

 		var obj=new String('Hello');
        console.log(typeof(obj));
        console.log(obj instanceof String);
        var str='Hello';
        console.log(typeof(str));
        console.log(str instanceof String);

运行结果

object
true
string
false

根据字符串返回位置

方法	作用
indexOf(searchValue)	获取searchValue在字符串中首次出现的位置
lastIndexOf(searchValue)	获取searchValue在字符串中最后出现的位置

我们通过代码进行实例

		var str='HelloWorld';
        console.log(str.indexOf('o'));
        console.log( str.lastIndexOf('o'));

结果如下

4
6

根据位置返回字符

成员	作用
charAt(index)	获取index位置的字符，位置从0开始计算
charCodeAt(index)	获取index位置的ASCII码
str[index]	获取index位置的字符(HTML5新增)

我们通过代码进行实例

		var str='Apple';
        console.log(str.charAt(3));
        console.log(str.charCodeAt(0));
        console.log(str[0]);

运行结果

1
65
A

字符串操作方法

成员	作用
concat(str1,str2,str3····)	连接多个字符串
slice(start,end)	接受从start位置到end位置之间的字符串
substring(start,end)	接受从start位置到end位置之间的字符串，基本和slice相同 ，但是不接受负值
toLowerCase()	获取字符串的小写形式
toUpperCase()	获取字符串大写形式
replace(str1,str2)	使用str2替换字符串中的str1，放回替换结果，只会替换第一个字符