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

Love The Way You Lie 2024-03-24 13:34 40阅读 0赞

在编写“圳品”信息系统中，需要从二维数组中抽取每一行的第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<a1.length;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

完整的代码如下：

<!DOCTYPE html>
 <html>
 <head>
 <meta name="Author" content="PurpleEndurer">
 <title>“圳品”信息系统</title>
 </head>
 <script>
 document.write("从二维数组a1=([1, 2, 3],[4,5,6])中抽取每行的第1个元素组成数组a2=[1,4]");
 
 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<a1.length;i++)
 {
 a2.push(a1[i][0]);//或a2[i] = a1[i][0];
 }
 document.write("一维数组a2=",a2);
 
 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); 
 
 a2 = [];
 document.write("直接用filter方法不成功");
 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); 
 
 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];});//value参数不能省略
 
 //a2 = a1.map(value => value[0]); //简单写法，只要每行的第1个元素
 
 document.write("一维数组a2=",a2); 
 
 </script>
 </body>
 </html>

代码运行结果如下：

> 从二维数组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

截图如下：

![5aaf54d9b1e04379ae93739ab9868dc8.png][]

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

[5aaf54d9b1e04379ae93739ab9868dc8.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/703084aa527a4885a4832037aab08481.png