【发布时间】: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