简单的javascript-如何使代码更高效

Simple javascript- how to make code more efficient?

本文关键字：代码 高效 何使 javascript- 简单      更新时间：2023-09-26

我正在尝试使用javascript按一组人的年龄进行过滤。我在一个对象中有一个人的列表，还有一个按钮列表，当人们点击这些按钮时，他们可以按年龄进行过滤。

下面是我的代码:

HTML: 

<div id="people">
    <button id="all">All</button>
    <button id="tenunder">10 and under</button>
    <button id="twentyunder">20 and under</button>
    <button id="over20">over 20</button>
</div>
<div id="people-list"></div>
Javascript: 

    var people = [{
    name: "Derik Scott",
    age: 10,
    dob: "June 11, 1989"
}, {
    name: "Amy Sanchez",
    age: 12,
    dob: "January 11, 1989"
}, {
    name: "Kara Patil",
    age: 25,
    dob: "April 20, 1989"
}, {
    name: "Jasmine Lucas",
    age: 20,
    dob: "December 1, 1989"
}];
var peopleDiv = document.getElementById('people');
peopleDiv.addEventListener('click', function (e) {
    e.preventDefault();
    var clicked = e.target;
    var clickedId = clicked.id;
    var peopleListDiv = document.getElementById('people-list');
    clicked.className = "active";
    peopleListDiv.innerHTML = "";
    switch (clickedId) {
        case "all":
            for (var i = 0; i < people.length; i += 1) {
                peopleListDiv.innerHTML += people[i].name + "<br />";
            }
            break;
        case "tenunder":
            clicked.setAttribute("class", "active");
            for (var i = 0; i < people.length; i += 1) {
                if (people[i].age <= 10) {
                    peopleListDiv.innerHTML += people[i].name + "<br />";
                }
            }
            break;
        case "twentyunder":
            for (var i = 0; i < people.length; i += 1) {
                if (people[i].age <= 20) {
                    peopleListDiv.innerHTML += people[i].name + "<br />";
                }
            }
            break;
        case "over20":
            for (var i = 0; i < people.length; i += 1) {
                if (people[i].age > 20) {
                    peopleListDiv.innerHTML += people[i].name + "<br />";
                }
            }
            break;
    }
});

有没有办法使这段代码更有效?

使用内置的过滤器和映射数组方法，使代码更干净。

var people = [
{name : 'John Doe', age : 21},
{name : 'Jane Doe', age : 19},
{name : 'Baby Doe', age : 2},
{name : 'kid Doe', age : 11}
];
var peopleDiv = document.getElementById('people');
peopleDiv.addEventListener('click', function (e) {
    e.preventDefault();
    var clicked = e.target;
    var clickedId = clicked.id;
    var peopleListDiv = document.getElementById('people-list');
    clicked.className = "active";
    var peopleToDisplay = getPeople(people, clickedId)
        .map(function (people) { return people.name; })
        .join('<br />');
    peopleListDiv.innerHTML = peopleToDisplay;    
});
var getPeople = function(people, clickedId) {
     switch (clickedId) {
        case "all":
            return people;
        case "tenunder":
            return people.filter(peopleUnderTen);
        case "twentyunder":
            return people.filter(peopleUnderTwenty);   
        case "over20":
            return people.filter(peopleOverTwenty);
    }   
};
var peopleUnderAge = function (age, people) {
    return function (people) {
        return people.age <= age;
    };
};
var peopleUnderTen = peopleUnderAge(10);
var peopleUnderTwenty = peopleUnderAge(20);
var peopleOverTwenty = function (people) { return people.age > 20; };

一个工作的jsfield示例

效率和执行时间一样高吗?这里最明显的瓶颈是在每次迭代中附加到element.innerHTML，您可以将名称推入数组并在循环后写入它们:

var names = [];
for (var i = 0; i < people.length; i += 1) {
    if (people[i].age > 20) {
        names.push( people[i].name );
    }
}
peopleListDiv.innerHTML = names.join("<br />");

您也可以使用Array.prototype.filter来过滤数组，这可能不会更快，但可以一目了然地展示代码的意图:

 var names = people.filter( function( person ){
    return person.age > 20;
 })
 .map(function( person ){ return person.name });
 peopleListDiv.innerHTML = names.join("<br />");

编辑:如果你喜欢冒险，喜欢简短的代码，那就用ES2015吧!

 peopleListDiv.innerHTML = people.filter(person => person.age > 20)
 .map(person => person.name).join('<br>')
相关文章：