【JS基础回顾】Array对象及其常用属性以及方法

 

目的很简单，主要回顾下javascript里面Array常用的一些属性以及方法，虽然经常使用，但其实一些细节没有注意到，总是等到用到的时候再去查有点浪费时间，因此总结了下加深印象

一、Array的几种声明方式

var arr = [1, 2, 3];  
var arr = new Array(2);  //声明一个数组，长度为2，默认填充值为undefined的元素
var arr = new Array(1, 2, 3);
var arr = new Object([1, 2, 3]);

关于第二种声明方式，有些想吐槽。假如想要声明只有一个元素的数组，该元素为3，可能会情不自禁地写下这么条语句，然后就悲剧了

var arr = new Array(2);  //实际声明了一个有两个元素的数组

二、Array的常用属性、方法

arrayObj.length

作用：返回arrayObj的数组长度

[1, 2, 3].length;  //输出 3

arrayObj.push(newElement1, newElement2, ... newElementX)

作用：向数组末尾添加一个或多个元素，并返回修改后的数组长度

注意：会修改原数组；返回修改后的数组长度

var arr = [1, 2, 3];
arr.push(4, 5);  //输出 5，此时arr=>[1,2,3,4,5]

arrayObj.pop()

作用：删除并返回数组最后一个元素

var arr = [1, 2, 3];
arr.pop();  //输出 3，此时arr=>[1, 2]
[].pop();  //输出 undefined

arrayObj.shift()

作用：删除并返回数组第一个元素

var arr = [1, 2, 3];
arr.shift();  //输出 1，此时arr=>[2, 3]
[].shift();  //输出 undefined

arrayObj.unshift()

作用：向数组开头添加一个或多个元素，返回修改后的数组长度

注意：会修改原数组；返回的是修改后的数组长度；在IE6里，返回的是undefined

var arr = [4, 5];
arr.unshift(1, 2, 3);  //输出 5，此时arr=>[1, 2, 3, 4, 5]

arrayObj.join([seperator])

作用：将数组的各个元素转成字符串，再以seperator为分隔符，将数组连接成一个字符串后

注意：seperator可选，如没有指定seperator，默认用“，”来连接字符串

[1, 2, 3].join('-');  //输出 '1-2-3'
var arr = new Array();
arr[0] = {name: 'casper'};
arr[1] = 2;
arr.join(',');  //输出 '[object Object],2',需注意
[null, 2].join(',');  //输出 ',2'

arrayObj.reverse()

作用：将数组元素的排序全部颠倒过来

注意：会修改原有数组

var arr = [1, 2, 3];
arr.reverse();  //输出 [3, 2, 1]，此时arr=>[3, 2 1]

arrayObj.concat(element1, element2, ..., elementX)

作用：连接两个或多个数组，返回连接后的数组；

注意：不修改原数组；如果不传任何参数，则返回原数组的一份拷贝；如果参数不是数组，则将参数添加到连接的数组后面；如果传入的参数是数组，则将参数数组的每个元素添加到连接的数组后面；

var arr = [1, 2, 3];
arr.concat();  //返回 [1, 2, ,3 ]，此时arr=>[1, 2 ,3]
arr.concat(4, 5);  //返回 [1, 2, ,3 ,4, 5]，此时arr=>[1, 2 ,3]
arr.concat(4, [5, 6]);  //返回 [1, 2, 3, 4, 5, 6]
arr.concat(4, [5, 6], 7);  //返回 [1, 2, 3, 4, 5, 6, 7]

arrayObj.slice(start, end)

作用：从已有的数组中返回指定元素组成的新数组，类似与String对象的slice方法，包括start指定位置的元素，但不包含end处包含的元素；

注意：start必选，end可选；当start或end为负值时，表示从数组最后一个元素开始，倒数第n个元素，比如数组最后一个元素为倒数第一个；当没有指定end时，则截取从start开始，一直到最后一个元素；

var arr = [1, 2, 3];
arr.slice(0 ,2); //输出 [1, 2]，此时arr=>[1, 2, 3]
arr.slice(-2, -1);  //输出 [2]
arr.slice(1);  //输出 [2, 3]

arrayObj.splice(index, howmany, element1, element2..., elementX)

作用：从index处开始，从数组里删除howmany个元素后，将element1~elementX插入到数组中，插入开始的位置为index；返回值为删除的元素组成的数组；

注意：会修改原数组；howmany可选，如只传入index，则删除从index开始的所有元素；如howmany为0，则删除0个元素；如果传入的element为数组，不会像slice方法那样插入单个元素，而是将数组作为整个元素插入；

var arr = [1, 2, 3];
arr.splice(0, 1);  //输出 [1]，此时arr=>[2, 3]

arr = [1, 2, 3];
arr.splice(1, 0, 'hello');  //输出 []，此时 arr=>[1, 'hello', 2, 3]

arr = [1, 2, 3];
arr.splice(1);  //输出 [2, 3]，此时arr=>[1]

arr = [1, 2, 3];
arr.splice(1, 0, ['hello', 'world']);  //输出 []，此时arr=> [1, ['hello', 'world'], 2, 3]

arrayObj.toString()

作用：将数组转化成字符串，与不穿参调用join方法相似

[1, 2, 3].toString();  //输出 '1, 2, 3'
[1, 2, [3, 4]].toString();  //输出 '1, 2, 3, 4'

arrayObj.sort([sortFunc])

作用：对数组元素进行排序；

注意：的确需要注意，由于不同浏览器排序算法的不同，传入同一个排序函数，得出的结果竟然会是不一样的，还没仔细研究过差别，暂不举例，避免误导读者，可先参考：http://www.w3school.com.cn/js/jsref_sort.asp，里面没提到这点

三、写在后面

一些比较不常用的方法，比如arrayObj.toLocalString，这里没有进行说明，如欲了解，可点击下面的链接查看

主要参考来源：http://www.w3school.com.cn/js/jsref_obj_array.asp

文中示例如有错漏，请指出；如觉得文章对您有用，可点击“推荐” :)