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

简介: 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("<p><strong>方法1:用for循环 + push方法</strong>");
document.write("<p>二维数组a1=",a1);
for(var i=0; i<a1.length;i++)
{
    a2.push(a1[i][0]);//或a2[i] = a1[i][0];
}
document.write("<p>一维数组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("<p>二维数组a1=",a1);

a2 = a1.filter((value,index) =>{ document.write('<p>typeof(value)='+ typeof(value) + ' value='+value + ' index=' + index + ' value[' + index + ']='+ value[index]);return value[0];})  

document.write("<p>一维数组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("<p><strong>方法2:用toflat + filter方法</strong>");
document.write("<p>二维数组a1=",a1);
a2 = (a1.flat()).filter((value,index) =>{ return !(index%a1[0].length);});//value参数不能省略
document.write("<p>一维数组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("<p><strong>方法3:用map方法</strong>");
document.write("<p>二维数组a1=",a1);
a2 = a1.map((value,index) =>{ document.write('<p>typeof(value)='+ typeof(value) + ' value='+value + ' index=' + index + ' value[0]='+ value[0]);return value[0];})  
document.write("<p>一维数组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一个参数,代码可以这样写:

-----------------------------------

©著作权归作者所有:来自51CTO博客作者PurpleEndurer的原创作品,请联系作者获取转载授权,否则将追究法律责任

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

https://blog.51cto.com/endurer/6177374

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

a2 =[];

document.write("<p><strong>方法3:用map方法</strong>");
document.write("<p>二维数组a1=",a1);
a2 = a1.map(value => value[0]);  //只要每行的第1个元素
document.write("<p>一维数组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("<p>从二维数组a1=([1, 2, 3],[4,5,6])中抽取每行的第1个元素组成数组a2=[1,4]</strong>");

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

document.write("<p><strong>方法1:用for循环 + push方法</strong>");
document.write("<p>二维数组a1=",a1);
for(var i=0; i<a1.length;i++)
{
    a2.push(a1[i][0]);//或a2[i] = a1[i][0];
}
document.write("<p>一维数组a2=",a2);

a2 =[];
document.write("<p><strong>方法2:用toflat + filter方法</strong>");
document.write("<p>二维数组a1=",a1);
a2 = (a1.flat()).filter((value,index) =>{ return !(index%a1[0].length);});value参数不能省略
document.write("<p>一维数组a2=",a2);  

a2 = [];
document.write("<p><strong>直接用filter方法不成功</strong>");
document.write("<p>二维数组a1=",a1);
a2 = a1.filter((value,index) =>{ document.write('<p>typeof(value)='+ typeof(value) + ' value='+value + ' index=' + index + ' value[' + index + ']='+ value[index]);return value[0];})  
document.write("<p>一维数组a2=",a2);  

a2 = [];
document.write("<p><strong>方法3:用map方法</strong>");
document.write("<p>二维数组a1=",a1);
a2 = a1.map((value,index) =>{ document.write('<p>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("<p>一维数组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

截图如下: image.png

相关文章
|
3天前
|
JavaScript 前端开发 C++
JavaScript用indexOf()在字符串数组中查找子串时需要注意的一个地方
JavaScript用indexOf()在字符串数组中查找子串时需要注意的一个地方
|
3天前
|
JavaScript 前端开发
JavaScript遍历数组用splice方法删除元素,这样写可能有遗漏,你遇到过吗?
JavaScript遍历数组用splice方法删除元素,这样写可能有遗漏,你遇到过吗?
|
3天前
|
JavaScript 前端开发
JavaScript从二维数组抽取若干元素组成新二维数组
JavaScript从二维数组抽取若干元素组成新二维数组
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
76 2
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
67 4
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
59 4
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的大学生入伍人员管理系统附带文章源码部署视频讲解等
75 4
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
77 3
|
3月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp宿舍管理系统的附带文章源码部署视频讲解等
65 3