JavaScript Array数组对象属性及方法汇总

墨蓝 2022-05-13 23:26 416阅读 0赞

**JavaScript Array数组对象属性及方法汇总**

*  Array 对象
    
     *  Array对象属性
     *  Array 对象方法
        
         *  1、concat()：连接两个或更多的数组，并返回结果。
         *  2、join()：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
         *  3、pop()、push()、shift()、unshift()
         *  4、slice()、splice()
         *  5、indexOf()、lastIndexOf()
         *  5、reverse()、sort()
         *  6、toString()、toLocaleString()

# Array 对象 #

Array 对象用于在单个的变量中存储多个值。  
创建 Array 对象的语法：

new Array();
    new Array(size);
    new Array(element0, element1, ..., elementn);

参数

参数 `size` 是期望的数组元素个数。返回的数组，length 字段将被设为 size 的值。

参数 `element ..., elementn` 是参数列表。当使用这些参数来调用构造函数 Array() 时，新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。

返回值

返回新创建并被初始化了的数组。

如果调用构造函数 Array() 时没有使用参数，那么返回的数组为空，length 字段为 0。

当调用构造函数时只传递给它一个数字参数，该构造函数将返回具有指定个数、元素为 `undefined` 的数组。

当其他参数调用 Array() 时，该构造函数将用参数指定的值初始化数组。

当把构造函数作为函数调用，不使用 new 运算符时，它的行为与使用 new 运算符调用它时的行为完全一样。

## Array对象属性 ##

![这里写图片描述][70]

## Array 对象方法 ##

### 1、concat()：连接两个或更多的数组，并返回结果。 ###

定义和用法

concat() 方法用于连接两个或多个数组。

该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

语法

arrayObject.concat(arrayX,arrayX,……,arrayX)

arrayX ：必需参数。该参数可以是具体的值，也可以是数组对象。可以是任意多个。

返回值

返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。

var arr1 = [1, 2, 3]
 var newArr1 = arr1.concat(4, 5, 6);
 document.write(newArr1 + " "); //1,2,3,4,5,6
 
 var arr2 = ['a', 'b', 'c'];
 var newArr2 = arr1.concat(arr2);
 document.write(newArr2 + " "); //1,2,3,a,b,c
 
 var arr3 = ['la', 'la', 'la'];
 var newArr3 = arr1.concat(arr2, arr3);
 document.write(newArr3 + " "); //1,2,3,a,b,c,la,la,la

### 2、join()：把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。 ###

定义和用法

join() 方法用于把数组中的所有元素放入一个字符串。然后元素通过指定的分隔符进行分隔。

语法  
arrayObject.join(separator)  
separator：可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。

返回值

返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入 separator 字符串而生成的。

var arr4 = new Array();
 arr4[0] = "Wangwei";
 arr4[1] = "hahha";
 arr4[2] = "lalala";
 arr4[3] = "eeeeee";
 
 document.write(arr4.join()); //Wangwei,hahaha,lalala,eeeeee
 document.write(" ");
 document.write(arr4.join('/')); //Wangwei/hahaha/lalala/eeeeee

### 3、pop()、push()、shift()、unshift() ###

* pop(): 删除并返回数组的最后一个元素
         * push()：向数组的末尾添加一个或更多元素，并返回新的长度。
         * shift()：删除并返回数组的第一个元素
         * unshift()：向数组的开头添加一个或更多元素，并返回新的长度。

var arr5 = ['lili', 'mary', 'lina', 'bob', 'androw'];
 document.write(arr5.pop() + " "); //androw
 document.write(arr5 + " "); //lili,mary,lina,bob(arr5已经改变)
 document.write(arr5.push('lala', 'hahaha') + " "); //6
 document.write(arr5 + " "); //lili,mary,lina,bob,lala,hahaha
 document.write(arr5.shift() + " "); //lili
 document.write(arr5 + " "); //mary,lina,bob,lala,hahaha
 document.write(arr5.unshift('1', '2', '3') + " "); //8
 document.write(arr5 + " "); //1,2,3,mary,lina,bob,lala,hahaha

### 4、slice()、splice() ###

slice() 从某个已有的数组返回选定的元素  
splice() 删除元素，并向数组添加新元素。

//slice()方法
 /* * slice()方法可以 接受一或两个参数，即要返回项的起始和结束位置。 * 在只有一个参数的情况下，slice()方法返回从该 参数指定位置开始到当前数组末尾的所有项 * 如果有两个参数，该方法返回起始和结束位置之间的项— —但不包括结束位置的项。 * 注意，slice()方法不会影响原始数组 */
 var colors = new Array();
 colors = ["red", "green", "blue"];
 
 var color1 = colors.slice(0, 2);
 document.write(colors + " "); //red,green,blue
 document.write(color1); //red,green
 document.write(" ");
 
 //splice()方法
 /* * 删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数 * 会影响原始数组 */
 var fruits = ["apple", "mango", "banana", "pear"];
 var fruit1 = fruits.splice(0, 2);
 document.write(fruits + " "); //banana,pear
 document.write(fruit1); //返回删除的项apple,mango
 document.write(" ");
 /* * 插入：可以向指定位置插入任意数量的项，只需提供 3个参数： * 起始位置、0（要删除的项数） 和要插入的项 */
 var fruit2 = ["apple", "mango", "banana", "pear"];
 var fruit3 = fruit2.splice(2, 0, "strawberry", "lalala");
 document.write(fruit2 + " ");//apple,mango,strawberry,lalala,banana,pear
 document.write(fruit3 + " ");//未删除项，所以返回空数组
 /* * 替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项， * 只需指定 3 个参数：起 始位置、要删除的项数和要插入的任意数量的项。 * 插入的项数不必与删除的项数相等。 */
 var fruit4 = ["apple", "mango", "banana", "pear"];
 var fruit5 = fruit4.splice(1, 2, "aaa", "bbb", "ccc");
 document.write(" " + fruit4 + " ");//apple,aaa,bbb,ccc,pear
 document.write(fruit5); // 返回删除的项mango,banana

### 5、indexOf()、lastIndexOf() ###

/* * indexOf()和lastIndexOf()方法 * 这两个方法都接收 两个参数：要查找的项和（可选的）表示查找起点位置的索引 * indexOf()方法从数组的开头（位 置 0）开始向后查找 * lastIndexOf()方法则从数组的末尾开始向前查找 */
    var arr = ["apple", "mango", "banana", "pear", "mango"];
    var arr1 = arr.indexOf("mango", 1); //从位置1开始向后查找
    alert(arr1); //1
    var arr2 = arr.indexOf("mango", 2); //从位置2开始向后查找
    alert(arr2);  //4
    
    //lastIndexOf()
    var arr3 = arr.lastIndexOf("mango", 2); //从位置2开始向前查找
    alert(arr3);  //1
    var arr4 = arr.lastIndexOf("mango", 4); //从位置4开始向前查找
    alert(arr4); //4

### 5、reverse()、sort() ###

**reverse()** 颠倒数组中元素的顺序。

//反转数组reverse()方法
    var arr1 = new Array();
    arr1 = [5, 4, 3, 2 ,1];
    var arr2 = arr1.reverse();
    document.write(arr2); //1,2,3,4,5

**sort()** 方法用于对数组的元素进行排序。  
语法  
arrayObject.sort(sortby)

参数 描述  
sortby 可选。规定排序顺序。必须是函数。

返回值

对数组的引用。请注意，数组在原数组上进行排序，不生成副本。

说明

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

如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
    若 a 等于 b，则返回 0。
    若 a 大于 b，则返回一个大于 0 的值。

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title></title>
 </head>
 <body>
 <script type="text/javascript"> //反转数组reverse()方法 var arr1 = new Array(); arr1 = [5, 4, 3, 2 ,1]; var arr2 = arr1.reverse(); document.write(arr2); //1,2,3,4,5 document.write(" "); //sort方法，不添加函数参数，对字母进行比较 var arr = new Array(6) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" arr[3] = "James" arr[4] = "Adrew" arr[5] = "Martin" document.write(arr + " "); //George,John,Thomas,James,Adrew,Martin document.write(arr.sort());//Adrew,George,James,John,Martin,Thomas document.write(" "); //sort方法，不添加函数参数，对数字字符进行比较 var arr = new Array(6); arr[0] = "10" arr[1] = "5" arr[2] = "40" arr[3] = "25" arr[4] = "1000" arr[5] = "1" document.write(arr + " ");//10,5,40,25,1000,1 document.write(arr.sort());//1,10,1000,25,40,5 document.write(" "); //数组比较，升序函数 function compare1(value1, value2) { if(value1 < value2) { return -1; } else if(value1 > value2) { return 1; } else return 0; } //降序函数 function compare2(value1, value2) { if(value1 < value2) { return 1; } else if(value1 > value2) { return -1; } else { return 0; } } // 把compare1函数传递给sort()方法 var arr3 = [12, 19, 1, 8, 6, 17]; arr3.sort(compare1); alert(arr3); //1, 6, 8, 12, 17, 19 var arr4 = new Array(); arr4 = [1, 3, 5, 2, 19, 12]; arr4.sort(compare2); alert(arr4); //19, 12, 5, 3, 2, 1 //对于数值类型或者其 valueOf()方法会返回数值类型的对象类型，可以使用一个更简单的比较函 数。这个函数只要用第二个值减第一个值即可。 function compare(value1, value2){ return value2 - value1; } //用函数的方法使得数组按照给定的属性名称进行排序 var arr5 = new Array(); arr5 = [{ "name": "WangWei", "age": 21 }, { "name": "GuiKe", "age": 22 }]; function compareByAttr(propertyName) { return function(obj1, obj2) { var value1 = obj1[propertyName]; var value2 = obj2[propertyName]; if(value1 < value2 ) { return -1; }else if(value1 > value2) { return 1; }else { return 0; } } } //调用函数 //按姓名排序 /* * GuiKe:22 * WangWei:21 */ var arr6 = arr5.sort(compareByAttr("name")); for(var i=0; i<arr6.length; i++) { document.write(arr6[i].name + ":"); document.write(arr6[i].age + " "); } //按年龄排序 /* * WangWei:21 * GuiKe:22 */ var arr7 = arr5.sort(compareByAttr("age")); for(var j=0; j<arr7.length; j++) { document.write(arr7[j].name + ":"); //22 21 document.write(arr7[j].age + " "); } </script>
 </body>
 </html>

### 6、toString()、toLocaleString() ###

**toString() 把数组转换为字符串，并返回结果。**

定义和用法  
toString() 方法可把数组转换为字符串，并返回结果。

语法  
arrayObject.toString()

返回值  
arrayObject 的字符串表示。返回值与没有参数的 join() 方法返回的字符串相同。

说明  
当数组用于字符串环境时，JavaScript 会调用这一方法将数组自动转换成字符串。但是在某些情况下，需要显式地调用该方法。

**toLocaleString() 把数组转换为本地数组，并返回结果。**  
**valueOf() 返回数组对象的原始值**  
**toSource() 返回该对象的源代码。**

[70]: /images/20220514/2f972e9415f84140975e3cd20f65add8.png