Question

<!DOCTYPE html>
    <html>
        <head>
            <title>practice</title>
            <meta charset="UTF-8">
            <meta name="description" content="Creating and Maintaining Student Record Object">
        <script>
                var section = [];
                var name = [];
                var gender = [];
                var age = [];
                var favsub = [];
                var studRec = [];
                function saveButton() {
                    studRec[studRec.length] = {
                        section:document.getElementById("section").value,
                        name:document.getElementById("name").value,
                        gender:document.getElementById("gender").value,
                        age:document.getElementById("age").value,
                        favsub1:document.getElementsByClassName("favsub")[0].value,
                        favsub2:document.getElementsByClassName("favsub")[1].value,
                        favsub3:document.getElementsByClassName("favsub")[2].value,
                    }
                    document.getElementById("saveStud").reset();
                    console.log(studRec[studRec.length-1]);
                    }
                function checker() {
                    var name = document.getElementById("name1").value;
                    var section = document.getElementById("section1").value;
                    var count=studRec.length;
                    var check;
                    for(var i=0;i<count;i++)
                    {
                        check = studRec[i].includes(name,section);
                        if( check == true){
                            return studRec[i];
                        }
                        alert("Info does not exist");
                    }
                    }

            </script>
            <form id="saveStud" method="POST">
              <center>
                <p>Section</p>
                <select id="section" autofocus required>
                  <option value="0">select</option>
                        <option value="truth">truth</option>
                        <option value="faith">faith</option>
                        <option value="honesty">honesty</option>
                        <option value="charity">charity</option>
                        <option value="obedience">obedience</option>
                        <option value="chastity">chastity</option>
                        <option value="generosity">generosity</option>
                        <option value="humility">humility</option>          
                </select><br>
                <p>Student Name</p><input id="name" type="text" required><br>
                <p>Gender</p>
                <select id="gender">
                  <option value="M">Male</option>
                  <option value="F">Female</option>
                </select><br>
                <p>Age</p><input id="age" type="number" required><br>
                <p>Favorite Subjects</p><input class="favsub" type="text" required><br>
                <input class="favsub" type="text" required><br>
                <input class="favsub" type="text" required><br>

                <button onclick="saveButton()">save</button>
                <button type="reset" value="reset">reset</button>
              </center>
            </form>
            <br>
            <form id="search" method="POST">
              <center>
                <button type="button" onclick="checker()">search</button>
                <input id="name1" type="text" placeholder="Enter Student Name" required>
                <select id="section1" autofocus required>
                  <option value="0">select</option>
                        <option value="truth">truth</option>
                        <option value="faith">faith</option>
                        <option value="honesty">honesty</option>
                        <option value="charity">charity</option>
                        <option value="obedience">obedience</option>
                        <option value="chastity">chastity</option>
                        <option value="generosity">generosity</option>
                        <option value="humility">humility</option>          
                </select>
                <br>
                <button type="button">delete</button>

              </center>
            </form>
        </body>

    </html>

该代码假定使用功能saveButton（）将学生的信息存储在数组中，然后输入学生的姓名并选择该部分并使用搜索按钮，然后使用checker（）函数显示该信息如果输入的信息包含在数组studRec中，但是行check = studRec [i] .includes（name，section）;不起作用。请帮助

Answer 1

这是您要在以下对象上调用includes的对象：

{
    section: document.getElementById("section").value,
    name: document.getElementById("name").value,
    gender: document.getElementById("gender").value,
    age: document.getElementById("age").value,
    favsub1: document.getElementsByClassName("favsub")[0].value,
    favsub2: document.getElementsByClassName("favsub")[1].value,
    favsub3: document.getElementsByClassName("favsub")[2].value,
}

您尚未在其中放置includes属性，并且对象没有本机的includes方法。 Arrays have one，但{}创建一个普通对象，而不是数组。

请参见How do I check if an object has a property in JavaScript?，以测试对象是否具有给定名称的属性。

Answer 2

您对.includes的工作方式有错误的理解

演示

[1, 3, 4].includes(3) // true
['apple', 'pie'].includes('american') // false
[{ name: 'John' }, { name: 'Obama' }].includes({ name: 'Obama' }) // true

请注意包含作为参数的接受内容，其数据类型与数组中的数据相同

您的错误-检查错误的值签名

[{
  section:document.getElementById("section").value,
  name:document.getElementById("name").value,
  gender:document.getElementById("gender").value,
  age:document.getElementById("age").value,
  favsub1:document.getElementsByClassName("favsub")[0].value,
  favsub2:document.getElementsByClassName("favsub")[1].value,
  favsub3:document.getElementsByClassName("favsub")[2].value,
}].includes(name, section) // false

必须

[{
  section:document.getElementById("section").value,
  name:document.getElementById("name").value,
  gender:document.getElementById("gender").value,
  age:document.getElementById("age").value,
  favsub1:document.getElementsByClassName("favsub")[0].value,
  favsub2:document.getElementsByClassName("favsub")[1].value,
  favsub3:document.getElementsByClassName("favsub")[2].value,
}, {
  section:1,
  name:1,
  gender:1,
  age:1,
  favsub1:1,
  favsub2:1,
  favsub3:1,
}].includes({
  section:1,
  name:1,
  gender:1,
  age:1,
  favsub1:1,
  favsub2:1,
  favsub3:1,
}) // true

Answer 3

函数includes()可用于数组。但是，尽管studRec是一个数组，但是studRec（studRec[i]）的成员不是数组，而是对象。

要基于某些条件在数组内搜索对象，请使用数组的find()函数以及检查条件的回调。

function checker() 
{
    let name = document.getElementById("name1").value;
    let section = document.getElementById("section1").value;

    let result = studRec.find(function(element) {
            return element.name == name && element.section == section;
        }
    );

    if(!result)
    {
        alert("Info does not exist");
    }

    return result;
}

为什么我的包含功能没有被识别为功能

3 个答案: