在编写“圳品”信息系统中,需要从二维数组中抽取每一行的第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
截图如下: