JavaScript 操作 Array 数组对象

目录

1、检索数组

2、操作数组

3、操作子数组

4、数组元素排序

5、自定义排序函数

6、数组和字符串的转换

---

1、检索数组

检索数组一般可使用 for 循环 或 for/in，结合数组的 length 属性和数组的下标来实现：

//使用for循环遍历数组元素
var a = [1,2,true,"a","b"];    //定义数组
for(var i=0;i<a.length;i++){   //遍历数组
    if(typeof a[i] == "string")    //如果数组元素的类型为字符串，则返回该元素的值
        alert(a[i]);
}

//使用 for-in 遍历数组元素
var a = [1,2,true,"a","b"];    //定义数组
for(var i in a){               //遍历数组
    if(typeof a[i] == "string")    //如果数组元素的类型为字符串，则返回该元素的值
        alert(a[i]);               //在 for/in 循环结构中，变量 i 表示数组的下标，而 a[i] 为可以读取指定下标的元素值。
}

2、操作数组

（1）增加和删除元素是数组的基本操作，借助 delete 运算符能删除数组元素：

var a = [1,2,true,"a","b"];    //定义数组
delete a[0];                   //删除指定数组下标的元素

alert(a.length);     //返回5    delete 仅能删除元素的值，而不是元素，因此 delete 运算符并没有改变数组的长度。
alert(a);            //返回 2,true,a,b

（2）Array 对象的添加和删除元素的方法：

数组方法	说明
push()	在数组末尾添加一个或多个元素，并返回添加后的数组长度
pop()	删除并返回数组的最后一个元素，数组长度减 1，如果数组为空，则不改变数组结构，并放回 undefined
unshift()	在数组头部插入一个或多个元素
shift()	将数组第一个元素移出，并返回该元素的值，然后将余下所有元素前移一位，以填补数组头部的空缺
concat()	连接数组

var a = [];    //定义数组，模拟栈空
a.push(1);     //进栈，栈值为[1]，此时该方法返回值为 1
a.pop();       //出栈，栈值为空，此时该方法返回值为 0
a.push(2);     //进栈，栈值为[2]，此时该方法返回值为 1
a.pop();       //出栈，栈值为空，此时该方法返回值为 2
a.push(3,4);   //进栈，栈值为[3，4]，此时该方法返回值为 2
a.pop();       //出栈，栈值为[3]，此时该方法返回值为 4
a.pop();       //出核，栈值为空，此时该方法返回值为 3

var a = [0];        //定义数组
a.unshift(1,2);     //同时增加两个元素
alert(a);           //返回[1,2,0]

//如果分开操作之后，结果就截然不同了
var a = [0];        //定义数组
a.unshift(1);       //增加元素 2
a.unshift(2);       //增加元素 1
alert(a);           //返回[2,1,0]

（3）concat() 方法比较特殊，使用时应注意下面几个问题：

1> concat() 方法可以跟随多个参数，并把它们作为元素按顺序连接到数组的尾部。如果参数是数组，则 concat() 方法会把它打散分别作为单独的元素连接到数组的尾部。

var b = a.concat([1,2,3],[4,5]);    //连接数组
alert(b.length);    //返回10，说明参数数组被打散了

//不过 concat() 方法仅能够打散一维数组，它不会递归打散参数数组中包含的数组。
var b = a.concat([[1,2],3],[4,5]);    //连接数组
alert(b.length);    //返回9,说明数组[1,2] 没有被打散

2> concat() 方法将创建并返回一个新数组，而不是在原来数组基础上添加新元素。所以，希望在原数组基础上添加元素，建议使用 push() 和 unshift() 方法来实现。但是 push() 和 unshift() 方法不能打散参数数组，而是把它作为单独的参数执行添加操作。

3、操作子数组

如果希望截取子数组（数组片段），或者在指定位置插入元素等，可以使用下面的方法：

数组方法	说明
splice()	插入、删除、或替换数组的元素
slice()	截取并返回数组的一部分

3.1 splice() 方法：splice() 方法是增加和删除多个数组元素的通用方法，其中第 1 个参数为操作的起始下标位置，第 2 个参数指定要删除元素的个数，第 3 个元素及后面的所有不定参数都为将要插入的元素。

var a = [1,2,3,4,5];    //定义数组
a.splice(1,2,3,4,5);    //执行刷除和插入操作
alert(a);               //返回[1,3,4,5,4,5]

//在 splice(1，2，3，4，5）方法中，第 1 个参数值 1 表示从数组 a 的第 2 个元素位置开始，删除两个元素，
//    删除的同时在该位置按顺序插入元素 3、4 和 5。

由于 splice() 方法的功能多，参数复杂，使用时应该注意下面几个问题。

（1）splice() 方法的参数都是可选的。如果不给它传递参数，则该方法不执行任何操作。如果给它传递一个参数，则该方法仅执行删除操作，参数值指定删除元素的起始下标（包括该下标元素），splice() 方法将删除后面所有元素。

var a = [1,2,3,4,5];    //定义数组
a.splice(2);        //从第3个元素开始执行删除
alert(a);        //返回[1,2]

a.splice(2,2);    //从第 3 个元素开始删除 2 个元素
alert(a);    //返回[1,2,5]

//在第2个元素后插入3个元素值为0的元素。如果不执行删除操作，第 2 个参数值应该设置为 0，但是不能够空缺，否则该方法无效。
a.splice(2,0,0,0,0);    //执行插入多个元素操作
alert(a);    //返回 [1,2,0,0,0,3,4,5]

（2）splice() 方法的删除和插入操作是同时进行的，且是在原数组基础上执行操作。插入的元系将填充被删除元素的位置，并根据插入元素个数适当调整插入点位置。而不是在删除数组之后，重新计算插入点的位置。

（3）splice() 方法执行的返回值是被删除的子数组。如果没有删除元素，则返回的是一个空数组

（4）当第 1 个参数值大于 length 属性值时，被视为在数组尾部执行操作，因此删除无效，但是可以在尾部插入多个指定元素。

（5）如果第一个参数为负值，则按绝对值从数组右侧开始向左侧定位。如果第 2 个参数为负值，则被视为 0。

3.2 slice() 方法：slice() 方法与 splice() 方法功能相近，但是它仅能够截取数组中指定区段的元素，并返回这个子数组。该方法包含两个参数，分别指定截取子数组的起始和结束位置的下标。

var a = [1,2,3,4,5];     //定义数组
var b = a.slice(2,5);    //第3个元素到第6个元素前的所有元素
alert(b);    //返回 [3,4,5]

由于 slice() 方法使用时应该注意下面几个问题。

（1）第1个参数指定起始下标位置，包括该值指定的元素，第2个参数指定结束位置，不包括指定的元素。

（2）如果仅指定一个参数，则表示从该参数值指定的下标位置开始，截取到数组的尾部所有元素。

（3）当参数为负值时，表示按从右到左的顺序进行定位，即倒数定位法，而不再按正数顺序定位（从左到右），但取值顺序依然是从左到右。

（4）如果起始下标值大于或等于结束下标值，将不执行任何操作。

（5）当起始参数值大于或等于 length 属性值时，将不会执行任何操作，返回空数组。而如果第 2 个参数值大于 length 属性值时，将被视为 length 属性值，会一直截取到数组末尾。

（6）slice() 方法将返回数组的一部分（子数组），但不会修改原数组。而 splice() 方法是在原数组基础上进行截取。如果希望在原数组基础上进行截取操作，而不是截取为新的数组，这时候就只能够使用 splice() 方法了。

4、数组元素排序

数组方法	描述
reverse()	在原数组的基础上颠倒数组中元素的顺序
sort()	对数组元素进行排序

var a = [1,2,3,4,5];    //定义数组
a.reverse();    //颠倒数组顺序，reverse() 能够在原数组的基础上颠倒数组元素的排列顺序，该方法不需要参数。
alert(a);    //这回数组[5，4，3，2，1]

var a = ["a","e","d","b","c"];    //定义数组
a.sort();    //按字母顺序对元素进行排序
alert(a);    //返回数组[a,b,c,d,e]
//sort() 方法能够根据一定条件对数组元素进行排序。如果调用 sort() 方法时没有传递参数，则按字母顺序对数组中的元素进行排序。

使用 sort() 方法时，应该注意下面几个问题。

（1）所谓的字母顺序，实际上是根据字母在字符编码表中的顺序进行排列的，每个字符在字符表中都有一个唯一的编号。

（2）如果元素不是字符串，则 sort() 方法会试图把数组的元素都转换成字符串，以便进行比较。

（3）在排序时，sort() 方法将根据元素值进行逐位比较，而不是根据字符串的个数进行排序。

var a = ["aba","baa","aab"];    //定义数组
a.sort();    //按字母顺序对元素进行排序
alert(a);    //返回数组[aab,aba,baa]

5、自定义排序函数

sort() 方法不仅仅按字母顺序进行排序，还可以根据其他顺序执行操作。这时就必须为方法提供一个函数参数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。排序函数应该具有两个参数 value1 和 value2，其返回值如下。

如果根据自定义评判标准，value1 小于 value2，在排序后的数组中 value1 应该出现在 value2 之前，就返回一个小于 0 的值。

如果 value1 等于 value2，在排序后的数组中 value1 和 value2 的位置不发生变化，就返回 0。

如果 value1 大于 value2，在排序后的数组中 value1 应该出现在 value2 之后，就返回一个大于 0 的值。

在下面例子中，将根据排序函数比较数组中每个元素的大小，并按从小到大的顺序执行排序：

function compare(value1,value2){    //排序函数
    if(valuel< value2){
        return 1;
    }else if (value1 > value2){
        return -1;
    }else{
        return 0;
}

function compare(value1,value2){    //排序函数的改写
    return (value2 - value1)    //返回比较参数
}
var a = [3,1,2,4,5,7,6,8,0,9];    //定义数组
a.sort(compare);    //根据数字大小由小到大进行排序
alert(a);    //返回数组[0,1,2,3,4,5,6,7,8,9]

上面对排序函数做了改进，由于比较函数通过返回一个小于零、等于零或大于零的值来影响排序结果，因此减法操作就可以适当地处理所有这些情况。

如果要按从大到小的顺序执行排序，则可以让返回值取反。代码如下：

function compare(value1,value2){    //排序函数
    return - (value2 - value1)    //返回比较参数
}
var a = [3,1,2,4,5,7,6,8,0,9];    //定义数组
a.sort(compare);    //根据数字大小由小到大进行排序
alert(a);    //返回数组[9,8,7,6,5,4,3,2,1,0]

6、数组和字符串的转换

JavaScript 允许数组与字符串之间可以相互转换。其中 Array 对象定义了 3 个方法，以实现把数组转换为字符串：

数组方法	说明
toString()	将数组转换成字符串
toLocalString()	把数组转换成局部字符串
join()	将数组元素连接起来以构建一个字符串

6.1、toString() 方法

toString() 方法是 Object 对象定义的，因此在 JavaScript 中所有对象都继承了这个方法，数组对象也不例外。在数组中 toString() 方法能够把每个元素转换为字符串，然后以逗号连接输出显示。

var a = [1,2,3,4,5,6,7,8,9,0];    //定义数组
var s = a.tostring();    //把数组转换为字符串
alert(s);    //返回字符串"1,2,3,4,5,6,7,8,9,0"
alert(typeof s);    //返回字符串string，说明是字符串类型

当数组用于字符串环境中时，JavaScript 会自动调用 toString() 方法将数组转换成字符串。在某些情况下，需要明确调用这个方法。

var a = [1,2,3,4,5,6,7,8,9,0];//定义数组
var b = [1,2,3,4,5,6,7,8,9,0];//定义数组
var s = a + b;    //数组连接操作
alert(s);    //返回字符串 "1,2,3,4,5,6,7,8,9,01,2,3,4,5,6,7,8,9,0"
alert(typeof s);    //返回字符串string，说明是字符串类型

toString() 在把数组转换成字符串时，首先要将数组的每个元素都转换成字符串，当每个元素都被转换成字符串时，才使用逗号进行分隔，以列表的形式输出这些字符串。

var a = [[1,[2,3],[4,5],[6,[7,[8,9],0]]];    //定义多维数组
var s = a.toString();    //把数组转换为字符串
alert(s);    //返回字符串"1,2,3,4,5,6,7,8,9,0"

其中数组 a 是一个多维数组，JavaScript 会以迭代方式调用 toString() 方法把所有数组都转换为字符串。

6.2、toLocalString() 方法

toLocalString() 方法与 toString() 方法用法基本相同，主要区别在于 toLocalString() 方法能够使用用户所在地区特定的分隔符把生成的字符串连接起来，形成一个字符串。

var a = [1,2,3,4,5];    //定义数组
var s = a.toLocalString();    //把数组转换为本地字符
alert(9);    //返回字符串"1.00,2.00,3.00,4.00,5.00"

在上面示例中，toLocalString() 方法根据中国大陆的使用习惯，先把数字转换为浮点数之后执行字符串转换操作。

6.3、join() 方法

join() 方法可以把数组转换为字符串，不过它可以指定分隔符。在调用 join() 方法时，可以传递一个参数作为分离符来连接每个元素，如果省略参数，默认使用逗号作为分隔符，这时与 toString() 方法转换操作效果相同。

var a = [1,2,3,4,5];    //定义数组
var s = a.join("a");    //指定分隔符
alert(s);    //返回字符串"1==2==3==4==5"

还可以用 split() 方法把字符串转换为数组，split() 方法是 String 对象方法，与 join() 方法操作正好相反。该方法可以指定两个参数，第一个参数为分隔符，指定从哪里进行分割，第二个参数指定要返回数组的长度。

var s = "1==2== 3==4 ==5"; //定义字符串
var a = s.split("==");     //分隔字符串为数组
alert(a);    //返回数组[1,2,3,4,5]
alert(a.constructor == Array);    //返回true，说明是数组