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

相关文章
|
4月前
|
监控 负载均衡 JavaScript
有哪些有效的方法可以优化Node.js应用的性能?
有哪些有效的方法可以优化Node.js应用的性能?
292 69
|
5月前
|
JavaScript 算法 开发者
如何用JS实现在网页上通过鼠标移动批量选择元素的效果?
本文介绍了类似电脑桌面通过鼠标选择多个图标的实现原理。主要通过监听mousedown、mousemove和mouseup事件,动态调整选择框大小并计算与元素的重叠情况。提供了角重叠和相交重叠的检测方法,并附有示例代码和在线演示链接,方便开发者参考与测试。
196 56
|
3月前
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法详解
本指南详细介绍在Linux系统中安装和管理Node.js的步骤。首先检查现有环境,包括查看当前版本和清除旧版本;接着通过NodeSource仓库安装最新版Node.js并验证安装结果。推荐使用nvm(Node Version Manager)进行多版本管理,便于切换和设置默认版本。同时,提供常见问题解决方法,如权限错误处理和全局模块迁移方案,以及版本回滚操作,确保用户能够灵活应对不同需求。
286 0
|
3月前
|
JavaScript Linux 内存技术
Debian 11系统下Node.js版本更新方法
Debian 11更新Node.js主要就是这三种方式,无论你是初涉其中的新手还是找寻挑战的专家,总有一种方式能满足你的需求。现在,你已经是这个
312 80
|
5月前
|
JavaScript 前端开发 Java
js 垃圾回收机制的方法
JS回收机制方法讲解
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
241 2
|
10月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
161 1
JavaScript中的原型 保姆级文章一文搞懂
|
10月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
100 0
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
350 5