JavaScript 数组常用方法和属性，很强大的js功能属性

程序员文章站 2022-05-07 18:33:19

...

JS数组常用的属性就一个：length，表示数组的长度。
length可以获取数组长度，也可以设置数组长度。比如：

var arr = [1,2,3];
var x = arr.length; //获取数组arr的长度，返回3
arr.length = 5;  //设置数组arr的长度为5
var y = arr.length;  //返回5
arr[3] = undefined;
arr[4] = undefined;

设置数组长度，如果设置的长度比现有的数组长度大的话，数组将增大，新的元素被添加到数组的尾部，它们的值为undefined；如果设置的长度比现有数组长度小的话，现有数组会被截断，其尾部元素将丢失。

JavaScript 数组常用方法

数组强大的地方，一方面是它的数据结构，一方面就是它的方法了。

它的数据结构让我们很方便的存储和查找数据；

它的方法让我们很方便的操作数组里的数据；

concat(arr1,arr2,arr3,……) 方法，连接两个或多个数组，并返回一个新的数组，原有数组不发生改变。
参数可以是数组，也可以是具体的值。用法如下：

var a = [1,2];
var b = a.concat(3,4); //b的值为[1,2,3,4]
var c = [5,6];
var d = a.concat(c); //d的值为[1,2,5,6]
var e = a.concat(b,c); //e的值为[1,2,1,2,3,4,5,6]

join(separator) 方法，将所有数组元素结合为一个字符串返回，原有数组不发生改变。

separator参数表示分隔符，是可选的，默认分隔符是逗号。用法如下：

var a = [1,2];
var b = a.join();  //b的值为1,2
var c = a.join("*"); //b的值为1*2

join方法和字符串方法里的split是相对的。

join方法是把数组转换成字符串；
split方法是把字符串转换成数组；

toString() 方法，把数组转换为字符串。它和没有参数的join是一样的作用。

push(x1,x2,x3,……) 方法，可向数组的末尾添加一个或多个元素，并返回新的长度，原有数组发生改变。用法如下：

<p id="test"></p>

var a = [1,2];
var b = a.push(3); //b的值为3

document.getElementById("test").innerHTML = a.toString(); //输出1,2,3

pop() 方法，删除并返回数组的最后一个元素，原有数组发生改变。用法如下：

<p id="test"></p>

var a = [1,2];
var b = a.pop(); //b的值为2

document.getElementById("test").innerHTML = a.toString(); //输出1

unshift(x1,x2,x3,……) 方法，可向数组的开头添加一个或多个元素，并返回新的长度，原有数组发生改变。用法如下：

<p id="test"></p>

var a = [1,2];
var b = a.unshift(3); //b的值为3

document.getElementById("test").innerHTML = a.toString(); //输出3,1,2

shift() 方法，删除并返回数组的第一个元素，原有数组发生改变。用法如下：

<p id="test"></p>

var a = [1,2];
var b = a.shift(); //b的值为1

document.getElementById("test").innerHTML = a.toString(); //输出2

splice(index,howmany,item1,.....,itemX) 方法，向数组添加/删除元素，然后返回被删除的元素，原有数组发生改变。

参数index，表示添加/删除元素的位置，从0开始，使用负数可从数组结尾处规定位置，整数，必需。

参数howmany，表示要删除的元素数量。如果设置为 0，则不会删除元素，整数，必需。

参数item1,.....,itemX，表示向数组添加的新元素，可选。

通过设定howmany参数，来决定方法是添加还是删除。如果是0，该方法表示添加元素，否则会删除元素。

用法如下：

添加元素：

<p id="test"></p>

var a = [1,2];
var b = a.splice(1,0,3); //b的值为空，因为没有删除元素
document.getElementById("test").innerHTML = a.toString(); //输出1,3,2

删除元素：

<p id="test"></p>

var a = [1,2];
var b = a.splice(1,1); //b的值2
document.getElementById("test").innerHTML = a.toString(); //输出1

删除并添加元素，也就是替换元素：

<p id="test"></p>

var a = [1,2];
var b = a.splice(1,1,3); //b的值2
document.getElementById("test").innerHTML = a.toString(); //输出1,3

slice(start,end) 方法，可从已有的数组中返回选定的元素，原有数组不发生改变。

参数start：开始位置。可以是负数。负数表示从数组尾部开始算。-1表示最后一个元素，-2表示倒数第二个元素，以此类推，必需。

参数end：结束位置。可选，默认是到最后一个元素，可以是负数，负数表示从尾部开始算。

返回的元素包括start，不包括end。

用法如下：

var a = [1,2,3];
var b = a.slice(1); //b的值为2,3
var c = a.slice(1,2); //c的值为2

reverse() 方法，颠倒数组中元素的顺序，原有数组发生改变。用法如下：

<p id="test"></p>

var a = [1,2,3];
a.reverse();
document.getElementById("test").innerHTML = a.toString(); //输出3,2,1

sort(sortby) 方法，对数组的元素进行排序，原有数组发生改变。

参数sortby是可选的，默认按照字母顺序排序。它是一个比较函数，函数有两个参数a和b，返回值用来说明a和b的大小。具体用法如下：

function(a,b){return a-b}

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

写几个小例子，大家可以多写几个例子做练习，加深印象：

<div id="test"></div>
var a = ["aaa","ccc","bbb"];
a.sort();

document.getElementById("test").innerHTML = a.toString(); //输出 aaa,bbb,ccc

<div id="test"></div>
var a = [10,8,5];
a.sort();

document.getElementById("test").innerHTML = a.toString(); //输出 10,5,8

<div id="test"></div>
var a = [10,8,5];
a.sort(function(a,b){return a-b}); //升序

document.getElementById("test").innerHTML = a.toString(); //输出 5,8,10

<div id="test"></div>
var a = [10,8,5];
a.sort(function(a,b){return b-a}); //降序

document.getElementById("test").innerHTML = a.toString(); //输出 10,8,5

var person = [
    {'name' : 'xiaoming','age':7},
    {'name' : 'meimei','age':10},
    {'name' : 'lilei','age':8}
]

person.sort(function(a,b){a.age-b.age}); //按照年龄排序

排序后的数组：
[
    {'name' : 'xiaoming','age':7},
    {'name' : 'lilei','age':8}
    {'name' : 'meimei','age':10}
]

person.sort(function(a,b){
   if(a.name > b.name) {return 1;}
   else if(a.name < b.name) {return -1;}
   else{return 0}
}); //按照姓名排序

排序后的数组：
[
    {'name' : 'lilei','age':8},
    {'name' : 'meimei','age':10},
    {'name' : 'xiaoming','age':7}
]

isArray()方法，判断对象是否为数组。它的用法是直接用Array类来调取的，参数是要检测的对象，返回值是布尔值。用法如下：

var a = [1,2];
var b = Array.isArray(a); //返回true

- 数组迭代方法

数组的迭代方法，说白了，就是循环对每个元素进行操作。所有的迭代方法都不会改变原有数组。所有的方法，我们自己都可以用循环语句加逻辑来实现。

forEach() 方法，为每个数组元素调用一次函数（回调函数）。用法如下：

<div id="test"></div>

var txt = "";
var a = [45, 3];
a.forEach(callFunction);

function callFunction(value, index, array) {
  txt = txt + value + "<br>"; 
}

document.getElementById("test").innerHTML = txt;