【问题标题】:array.some() method issue using a for loop使用 for 循环的 array.some() 方法问题
【发布时间】:2021-04-01 18:10:14
【问题描述】:

var phaseOne = [
  {
    streetNumberLow: "1",
    streetNumberHigh: "436",
    streetName: "barnhart",
    streetCode: "rd",
    city: "waynesburo",
    state: "va",
    zipCode: "22980",
  }
];

var phaseOneExt = [
  {
    streetNumberLow: "580",
    streetNumberHigh: "1002",
    streetName: "battlefield",
    streetCode: "rd",
    city: "fort defiance",
    state: "va",
    zipCode: "24437",
  }
];

var phaseTwo = [
  {
    streetNumberLow: "1",
    streetNumberHigh: "727",
    streetName: "bailey",
    streetCode: "rd",
    city: "fort defiance",
    state: "va",
    zipCode: "24437",
  }
];

var phaseTwoCares = [
  {
    streetNumberLow: "728",
    streetNumberHigh: "996",
    streetName: "bailey",
    streetCode: "rd",
    city: "fort defiance",
    state: "va",
    zipCode: "24437",
  }
];

function parseAddressString(str) {
  var matches = str.match(
    /(?<streetNumber>\d+)\s+(?<streetName>[\w\s-]+)\s+(?<streetCode>\w+),?\s+(?<city>[\w\s-]+),?\s+(?<state>\w+),?\s+(?<zipCode>\d+)/
  );
  if (matches) {
    return matches.groups;
  }
  return false;
}

function doesStringMatch(a, b) {
  return a.toLowerCase().includes(b.toLowerCase());
}
function doesAddressMatchPhase(address, phase) {
  return (
    address &&
    +address.streetNumber >= +phase.streetNumberLow &&
    +address.streetNumber <= +phase.streetNumberHigh &&
    doesStringMatch(address.streetName, phase.streetName) &&
    doesStringMatch(address.streetCode, phase.streetCode) &&
    doesStringMatch(address.city, phase.city) &&
    doesStringMatch(address.state, phase.state) &&
    doesStringMatch(address.zipCode, phase.zipCode)
  );
}

function isEligible(str) {
  var address = parseAddressString(str);
  var phases = [phaseOne, phaseOneExt, phaseTwo, phaseTwoCares];
  var x;
  for (x = 0; x < phases.length; x++) {
    console.log(phases[x]);
    console.log(address);
    phases[x].some(function (phase) {
      doesAddressMatchPhase(address, phase);
    });
  }
}

function addressValidation() {
  var str = document.getElementById("address").value,
    eligible = isEligible(str);
  document.getElementById("demo").innerHTML = eligible ? "true" : "false";
}
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@400;700&display=swap');

/* Global */

* {
    margin: 0;
    padding: 0;
    font-family: 'Bebas Neue', cursive;
}

#address-checker {
    height:25vh;
    width: 60%;
    margin: auto;
    margin-top: -3vh;
    padding: 3vw;
    background-color: #fff;
    position: relative;
    z-index: 1;
    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.5);
}

.checker-container {
    height: 25vh;
}

.address-header {
    padding: 3vh 0 2vh 0;
    text-align: center;
    color: #2277AE;
    letter-spacing: 1px;
    font-size: clamp( 1.5rem, 3.5vw, 3.5rem);
}

.address-checker-input {
    padding: 1vh 0;
}

.address-box {
    margin: 1.5vh 0 0 10vw ;
    width: 60%;
    padding: .75rem 0 .75rem .5rem;
    border-radius: 10px;
    border: #2277AE 2px solid;
    color: #2277AE;
}

.address-box:hover {
    border-color: #FEA00B;
    transition: .2s;
}

.go-btn {
  background-color: #2277AE;
  padding: .75rem;
  border-radius: 10px;
  border: #2277AE 2px solid;
  color: #fff;
}

.go-btn:hover {
    border-color: #FEA00B;
    background-color: #FEA00B;
    transition: .2s;
}
<html>
<head>
    <link rel="stylesheet" href="style.css">
</head>
<body>
  
<section id="address-checker">
      <div class="checker-container">
        <h1 class="address-header">
          Is fiber to the home available for you?
        </h1>
        <div class="address-checker-input">
            <input
              id="address"
              type="text"
              name="searchaddress"
              placeholder="Street Address, City, State, Zip Code"
              class="address-box"
            />
            <button class="go-btn" onclick="addressValidation()">Go</button>
        </div>
        <p id="demo"></p>
      </div>
</section>

</body>
<script src="main.js"></script>
</html>

我目前正在构建一个 javascript 工具,该工具将地址作为输入并将其与服务区内的临时地址数据库进行比较。我使用 array.some() 方法循环访问服务区的每个阶段数组中的每个对象属性。如果前一个返回 false,我还需要它来查看每个阶段。因为我使用 for 循环遍历每个相位数组,所以 .some 方法中所需的返回导致我的函数在第一个循环中退出。问题出在 isEligible(str) 函数内。在附加的代码 sn-p 中是代码损坏。如果我将 return 放在函数的最后两行前面,我可以让它工作,但如果在第一阶段找不到地址,它不会让循环继续。

【问题讨论】:

    标签: javascript arrays for-loop while-loop return


    【解决方案1】:

    这:eligible = isEligible(str); 是一个逻辑错误。 eligible 将始终为 undefined,因为 isEligible() 没有返回值。 (我不得不说,虽然你的 cmets 表明你知道这一点)。

    要解决这个问题,从doesAddressMatchPhase() 返回结果并将.some() 返回的结果存储在一个变量中。然后在.some() 调用之后直接测试该变量是否为真,如果是则中断循环并立即返回该变量。否则等到函数结束返回默认false。

    这是可行的解决方案:

    var phaseOne = [
      {
        streetNumberLow: "1",
        streetNumberHigh: "436",
        streetName: "barnhart",
        streetCode: "rd",
        city: "waynesburo",
        state: "va",
        zipCode: "22980",
      }
    ];
    
    var phaseOneExt = [
      {
        streetNumberLow: "580",
        streetNumberHigh: "1002",
        streetName: "battlefield",
        streetCode: "rd",
        city: "fort defiance",
        state: "va",
        zipCode: "24437",
      }
    ];
    
    var phaseTwo = [
      {
        streetNumberLow: "1",
        streetNumberHigh: "727",
        streetName: "bailey",
        streetCode: "rd",
        city: "fort defiance",
        state: "va",
        zipCode: "24437",
      }
    ];
    
    var phaseTwoCares = [
      {
        streetNumberLow: "728",
        streetNumberHigh: "996",
        streetName: "bailey",
        streetCode: "rd",
        city: "fort defiance",
        state: "va",
        zipCode: "24437",
      }
    ];
    
    function parseAddressString(str) {
      var matches = str.match(
        /(?<streetNumber>\d+)\s+(?<streetName>[\w\s-]+)\s+(?<streetCode>\w+),?\s+(?<city>[\w\s-]+),?\s+(?<state>\w+),?\s+(?<zipCode>\d+)/
      );
      if (matches) {
        return matches.groups;
      }
      return false;
    }
    
    function doesStringMatch(a, b) {
      return a.toLowerCase().includes(b.toLowerCase());
    }
    function doesAddressMatchPhase(address, phase) {
      return (
        address &&
        +address.streetNumber >= +phase.streetNumberLow &&
        +address.streetNumber <= +phase.streetNumberHigh &&
        doesStringMatch(address.streetName, phase.streetName) &&
        doesStringMatch(address.streetCode, phase.streetCode) &&
        doesStringMatch(address.city, phase.city) &&
        doesStringMatch(address.state, phase.state) &&
        doesStringMatch(address.zipCode, phase.zipCode)
      );
    }
    
    function isEligible(str) {
      var address = parseAddressString(str);
      var phases = [phaseOne, phaseOneExt, phaseTwo, phaseTwoCares];
      var x;
      let found = false;
      for (x = 0; x < phases.length; x++) {
        found = phases[x].some(function (phase) {
          return doesAddressMatchPhase(address, phase);
        });
        if(found) {
          break;
        }
      }
      return found;
    }
    
    function addressValidation() {
      var str = document.getElementById("address").value,
        eligible = isEligible(str);
      document.getElementById("demo").innerHTML = eligible ? "true" : "false";
    }
    @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Poppins:wght@400;700&display=swap');
    
    /* Global */
    
    * {
        margin: 0;
        padding: 0;
        font-family: 'Bebas Neue', cursive;
    }
    
    #address-checker {
        height:25vh;
        width: 60%;
        margin: auto;
        margin-top: -3vh;
        padding: 3vw;
        background-color: #fff;
        position: relative;
        z-index: 1;
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, 0.5);
    }
    
    .checker-container {
        height: 25vh;
    }
    
    .address-header {
        padding: 3vh 0 2vh 0;
        text-align: center;
        color: #2277AE;
        letter-spacing: 1px;
        font-size: clamp( 1.5rem, 3.5vw, 3.5rem);
    }
    
    .address-checker-input {
        padding: 1vh 0;
    }
    
    .address-box {
        margin: 1.5vh 0 0 10vw ;
        width: 60%;
        padding: .75rem 0 .75rem .5rem;
        border-radius: 10px;
        border: #2277AE 2px solid;
        color: #2277AE;
    }
    
    .address-box:hover {
        border-color: #FEA00B;
        transition: .2s;
    }
    
    .go-btn {
      background-color: #2277AE;
      padding: .75rem;
      border-radius: 10px;
      border: #2277AE 2px solid;
      color: #fff;
    }
    
    .go-btn:hover {
        border-color: #FEA00B;
        background-color: #FEA00B;
        transition: .2s;
    }
    <html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
      
    <section id="address-checker">
          <div class="checker-container">
            <h1 class="address-header">
              Is fiber to the home available for you?
            </h1>
            <div class="address-checker-input">
                <input
                  id="address"
                  type="text"
                  name="searchaddress"
                  placeholder="Street Address, City, State, Zip Code"
                  class="address-box"
                  value="200 barnhart rd waynesburo, va 22980"
                />
                <button class="go-btn" onclick="addressValidation()">Go</button>
            </div>
            <p id="demo"></p>
          </div>
    </section>
    
    </body>
    <script src="main.js"></script>
    </html>

    【讨论】:

    • 太棒了,谢谢!这样一个简单的修复我想我花了很多时间盯着它看解决方案是多么容易哈哈
    猜你喜欢
    • 2020-08-10
    • 2021-04-03
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-02-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多