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

相关文章
|
28天前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
26天前
|
监控 JavaScript Java
Node.js中内存泄漏的检测方法
检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
121 52
|
27天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
40 5
|
29天前
|
JavaScript 前端开发
js中的bind,call,apply方法的区别以及用法
JavaScript中,`bind`、`call`和`apply`均可改变函数的`this`指向并传递参数。其中,`bind`返回一个新函数,不立即执行;`call`和`apply`则立即执行,且`apply`的参数以数组形式传递。三者在改变`this`指向及传参上功能相似,但在执行时机和参数传递方式上有所区别。
26 1
|
28天前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
25 1
JavaScript中的原型 保姆级文章一文搞懂
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
103 2
|
25天前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
17 0
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
146 4
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
89 4
|
5月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物交易平台附带文章源码部署视频讲解等
79 4
下一篇
DataWorks