如何使用里面的对象循环遍历数组

时间:2018-04-17 10:01:29

标签: javascript arrays loops object

实际上它使用简单数组

let box1 =[01, 02, 03];
function hitMiss(box) {
  $("td").on("click", function(){
      let y = $(this).attr("id");

          if (box.find(boxId => boxId == y)) {
              $(this).addClass("yes");
              console.log("full");
              } else {
              $(this).addClass("no");
              console.log("empty");
     }
  });
};

codepen

但我需要在数组中使用对象

let boxes = [
    { locations: [01, 02, 03]},
    { locations: [23, 24, 25]},
    { locations: [41, 42, 43]}
];

2 个答案:

答案 0 :(得分:1)

ES6

您还可以使用reduce()spread operator。你可以达到你想要的结果。

CODE SNIPPET

boxes = boxes.reduce((r, {locations}) => [...r, ...locations], []);

<强>样本

&#13;
&#13;
let boxes = [{
  locations: [01, 02, 03]
}, {
  locations: [23, 24, 25]
}, {
  locations: [41, 42, 43]
}];

hitMiss(boxes);

function hitMiss(box) {
  box = box.reduce((r, {
    locations
  }) => [...r, ...locations], []);

  $("td").on("click", function() {
    let y = $(this).attr("id");

    if (box.some(boxId => boxId == y)) {
      $(this).addClass("yes");
      console.log("full");
    } else {
      $(this).addClass("no");
      console.log("empty");
    }
  });
};
&#13;
html {
  background-color: #859cac;
}

table {
  margin-right: auto;
  margin-left: auto;
}

td {
  height: 40px;
  width: 40px;
  background-color: darkcyan;
  border: solid 2px;
  border-color: black;
}

.yes {
  background-color: red;
}

.no {
  background-color: yellow;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td id="00">00</td>
    <td id="01">01</td>
    <td id="02">02</td>
    <td id="03"></td>
    <td id="04"></td>
    <td id="05"></td>
    <td id="06"></td>
  </tr>
  <tr>
    <td id="10"></td>
    <td id="11"></td>
    <td id="12"></td>
    <td id="13"></td>
    <td id="14"></td>
    <td id="15"></td>
    <td id="16"></td>
  </tr>
  <tr>
    <td id="20"></td>
    <td id="21"></td>
    <td id="22"></td>
    <td id="23"></td>
    <td id="24"></td>
    <td id="25"></td>
    <td id="26"></td>
  </tr>
  <tr>
    <td id="30"></td>
    <td id="31"></td>
    <td id="32"></td>
    <td id="33"></td>
    <td id="34"></td>
    <td id="35"></td>
    <td id="36"></td>
  </tr>
  <tr>
    <td id="40"></td>
    <td id="41"></td>
    <td id="42"></td>
    <td id="43"></td>
    <td id="44"></td>
    <td id="45"></td>
    <td id="46"></td>
  </tr>
  <tr>
    <td id="50"></td>
    <td id="51"></td>
    <td id="52"></td>
    <td id="53"></td>
    <td id="54"></td>
    <td id="55"></td>
    <td id="56"></td>
  </tr>
  <tr>
    <td id="60"></td>
    <td id="61"></td>
    <td id="62"></td>
    <td id="63"></td>
    <td id="64"></td>
    <td id="65"></td>
    <td id="66"></td>
  </tr>
</table>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

使用<% Dim strPwd, strUsr Dim strDomain, strQuery Dim objConn, objComm, objRs Dim start_Date, end_Date strDomain = "..." strUsr = "..." strPwd = "..." start_Date = Request.QueryString("sDate") end_Date = Request.QueryString("eDate") Set objConn = Server.CreateObject("ADODB.Connection") objConn.open "..." Set objComm = CreateObject("ADODB.Command") Set objComm.ActiveConnection = objConn strQuery = "SELECT [TICKET_ID] FROM [TICKET] WHERE LAST_UPDATED between '"&sDate&"' and '"&eDate&"' ORDER BY [TICKET_ID]DESC" objComm.CommandText = strQuery Set objRs = objComm.Execute Do While Not objRs.EOF For i = 0 To objRs.Fields.Count - 1 Step 1 results = objRs.Fields(i) Next objRs.MoveNext Loop Response.Write("Start date: "&start_Date) Response.Write("End date: "&end_Date) Response.Write("Results: "&results) objRs.Close Set objRs = nothing Set objConn = nothing Set objComm = nothing %> 作为

连接所有locations
reduce

将内部 if-condition 更改为

var allLocs = boxes.reduce( (a,c) => a.concat(c.locations), []) 

请找updated pen