时间戳

首页 > 解决方案 > Javascript - 迭代嵌套数组

javascript - Javascript - 迭代嵌套数组

问题描述

我正在将较长的数组转换为较小数组的嵌套数组。对于嵌套数组中的每个数组，我想对数组的元素进行一些计算，并将结果推送到数组中。 

    //Split bigger array into smaller arrays....this function works
    function getArray() {
      items = ['image1','place','name',10,20,30,40,50,60,'image1','place','name',11,21,31,41,51,61];
      img = "image1"
      var size = 9;
      var newarr = [];
      for (var i = 0; i < items.length; i+=size) {
          newarr.push(items.slice(i, i+size));  
      }
      return newarr;
    }
    

    function fourthCoord(arr) {
      for (var i = 0; i < arr.length; i++) {
        for (var j=0; j < arr[i].length; j++) {
          var newarr = arr;
          firstx = newarr[j][3];
          secondx = newarr[j][5];
          var thirdd = secondx-firstx;
          thirdx = newarr[j][7];
          var fourthx = thirdx-thirdd
          newarr.push(fourthx);
          return newarr;  
        }
      }
    }
      
    
    function init(){
      var ctx = document.getElementById('canvas').getContext('2d');
      ctx.canvas.addEventListener('click', function(event) {
       var arr = new Array();
        arr = fourthCoord(getArray(arr));
        console.log(arr);
    })
    }
    
    window.addEventListener('load', init, false);
 
 <!doctype html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>array</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
      <canvas id="canvas" width="800" height="600" style="border:solid 1px;margin:0;padding:0;"></canvas> 
    </body>
    </html>

第四个Coord 函数将结果值作为元素推送到数组之外，而不是在每个数组中。

[Array(9), Array(9), 30]
["image1", "place", "name", 10, 20, 30, 40, 50, 60]
["image1", "place", "name", 11, 21, 31, 41, 51, 61]
30

所需的输出是：

[Array(9), Array(9)]
    ["image1", "place", "name", 10, 20, 30, 40, 50, 60, 30]
    ["image1", "place", "name", 11, 21, 31, 41, 51, 61, 30]

标签： javascriptarrays

解决方案

您不需要重复循环两次。这是您可以在 1 个循环中轻松完成的方法：

//Split bigger array into smaller arrays....this function works
    function getArray() {
      items = ['image1','place','name',10,20,30,40,50,60,'image1','place','name',11,21,31,41,51,61];
      img = "image1"
      var size = 9;
      var newarr = [];
      for (var i = 0; i < items.length; i+=size) {
          newarr.push(items.slice(i, i+size));  
      }
      return newarr;
    }
    

    function fourthCoord(arr) {
    var finalarr = [];
    var newarr =[];
      for (var i = 0; i < arr.length; i++) {
  
     
           newarr = arr[i];
          firstx = newarr[3];
          secondx = newarr[5];
          var thirdd = secondx-firstx;
          thirdx = newarr[7];
          var fourthx = thirdx-thirdd
          newarr.push(fourthx);
        finalarr.push(newarr);  
     
      }
      
       return finalarr;  
    }
      
    
    function init(){
      var ctx = document.getElementById('canvas').getContext('2d');
      ctx.canvas.addEventListener('click', function(event) {
       var arr = new Array();
        arr = fourthCoord(getArray(arr));
        console.log(arr);
    })
    }
    
    window.addEventListener('load', init, false);
<!doctype html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>array</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
      <canvas id="canvas" width="800" height="600" style="border:solid 1px;margin:0;padding:0;"></canvas> 
    </body>
    </html>

推荐阅读