HTML 抽取数组元素 数组操作方法 JavaScript从二维数组抽取元素组成新数组的三种方法

在编写“圳品”信息系统中，需要从二维数组中抽取每一行的第1个数元素组成新数组，比如对二维数组a1：

var a1 = new Array([1, 2, 3],[4,5,6]);

抽取a1的第1行的第1个元素1和第2行的第1个元素4组成数组a2：

a2 = [1,4];

实现的方法至少有以下三种。

方法一：用for或while循环，这是最直观的方法。

代码：

var a1 = new Array([1, 2, 3],[4,5,6]);

var a2 = [];

document.write("

方法1：用for循环 + push方法");

document.write("

二维数组a1=",a1);

for(var i=0; i

{

a2.push(a1[i][0]);//或a2[i] = a1[i][0];

}

document.write("

一维数组a2=",a2);

运行结果：

方法1：用for循环 + push方法

二维数组a1=1,2,3,4,5,6

一维数组a2=1,4

JavaScript的数组还内置了filter和map、toflat等方法。

方法二：用filter方法实现

代码：

var a1 = new Array([1, 2, 3],[4,5,6]);

var a2 = [];

document.write("

二维数组a1=",a1);

a2 = a1.filter((value,index) =>{ document.write('

typeof(value)='+ typeof(value) + ' value='+value + ' index=' + index + ' value[' + index + ']='+ value[index]);return value[0];})

document.write("

一维数组a2=",a2);

运行结果：

二维数组a1=1,2,3,4,5,6

typeof(value)=object value=1,2,3 index=0 value[0]=1

typeof(value)=object value=4,5,6 index=1 value[1]=5

一维数组a2=1,2,3,4,5,6

可见，对二维数组a1直接使用filter方法的话，尽管我们可以通过index下标来访问每行数组的元素，如value[0]，但返回的将是整行数组。

为此，我们可以先用toflat方法将二维数组a1转为一维数组再调用filter方法： 代码：

var a1 = new Array([1, 2, 3],[4,5,6]);

a2 =[];

document.write("

方法2：用toflat + filter方法");

document.write("

二维数组a1=",a1);

a2 = (a1.flat()).filter((value,index) =>{ return !(index%a1[0].length);});//value参数不能省略

document.write("

一维数组a2=",a2);

运行结果：

方法2：用toflat + filter方法

二维数组a1=1,2,3,4,5,6

一维数组a2=1,4

方法三：用map方法来实现，也比较简单。

代码：

var a1 = new Array([1, 2, 3],[4,5,6]);

a2 =[];

document.write("

方法3：用map方法");

document.write("

二维数组a1=",a1);

a2 = a1.map((value,index) =>{ document.write('

typeof(value)='+ typeof(value) + ' value='+value + ' index=' + index + ' value[0]='+ value[0]);return value[0];})

document.write("

一维数组a2=",a2);

运行结果：

方法3：用map方法

二维数组a1=1,2,3,4,5,6

typeof(value)=object value=1,2,3 index=0 value[0]=1

typeof(value)=object value=4,5,6 index=1 value[0]=4

一维数组a2=1,4

在上面的代码中，为了观察map方法内部的运行情况，我们传递了value和index两个参数进去，如果只需要结果的话，只需要value一个参数，代码可以这样写：

var a1 = new Array([1, 2, 3],[4,5,6]);

a2 =[];

document.write("

方法3：用map方法");

document.write("

二维数组a1=",a1);

a2 = a1.map(value => value[0]); //只要每行的第1个元素

document.write("

一维数组a2=",a2);

运行结果：

方法3：用map方法

二维数组a1=1,2,3,4,5,6

一维数组a2=1,4

完整的代码如下：

代码运行结果如下：

从二维数组a1=([1, 2, 3],[4,5,6])中抽取每行的第1个元素组成数组a2=[1,4]

方法1：用for循环 + push方法

二维数组a1=1,2,3,4,5,6

一维数组a2=1,4

方法2：用toflat + filter方法

二维数组a1=1,2,3,4,5,6

一维数组a2=1,4

直接用filter方法不成功

二维数组a1=1,2,3,4,5,6

typeof(value)=object value=1,2,3 index=0 value[0]=1

typeof(value)=object value=4,5,6 index=1 value[1]=5

一维数组a2=1,2,3,4,5,6

方法3：用map方法

二维数组a1=1,2,3,4,5,6

typeof(value)=object value=1,2,3 index=0 value[0]=1

typeof(value)=object value=4,5,6 index=1 value[0]=4

一维数组a2=1,4

截图如下：

 大家有什么好的实现方法，请多多指教。

精彩链接