Javascript中的数组排序无法读取属性

Question

我遇到了函数sort的问题。我可能不会以一种好的方式使用它，所以我问如何解决这个小问题。这是我得到的错误

  

未捕获的TypeError：无法读取未定义的属性'sort'

$(document).ready(function() {

  var c_user_list = $('.user-list')
  element_html_template = '<div class="user-item"><img  src="" /><h3>name</h3><p></p></div>';


  users = [{
    "name": "Tichus Findley",
    "age": 17,
    "color": "8BC34A",
    "avatar": "http://findicons.com/files/icons/1072/face_avatars/300/i02.png"
  }, {
    "name": "Dick stanson",
    "age": 28,
    "color": "3F51B5",
    "avatar": "http://findicons.com/files/icons/1072/face_avatars/300/g02.png"
  }, {
    "name": "John Williams",
    "age": 25,
    "color": "F44336",
    "avatar": "http://findicons.com/files/icons/1072/face_avatars/300/g01.png"
  }, {
    "name": "Peter macgreirson",
    "age": 36,
    "color": "4197f5",
    "avatar": "http://findicons.com/files/icons/1072/face_avatars/300/i04.png"
  }, {
    "name": "Denny peterson",
    "age": 16,
    "color": "FF5722",
    "avatar": "http://findicons.com/files/icons/1072/face_avatars/300/i05.png"
  }]

  function buildUserItem(user) {
    var element_template = $(element_html_template);
    $('.user-list').append(element_template);
    element_template.find("h3").text(user.name);
    element_template.find("p").text("Age :" + user.age);
    element_template.find("img").prop("src", user.avatar)
    element_template.find("img").css("background-color", "#" + user.color)
  }


  for (i = 0; i < users.length; i++) {
    buildUserItem(users[i]);
  }
  $('.normale').click(function retourNormale() {
    c_user_list.html("");
    for (i = 0; i < users.length; i++) {
      buildUserItem(users[i]);
    }
  })

  $('.majeur').click(function triMajeur() {
    var triMajUser = users;
    c_user_list.html("");
    for (i = 0; i < triMajUser.length; i++) {
      if (triMajUser[i].age > 18) {
        buildUserItem(triMajUser[i]);
      }
    }
  })

  $('.Pprenom').click(function triMajeur() {
    var triPprenomUser = users;
    c_user_list.html("");
    for (i = 0; i < triPprenomUser.length; i++) {
      if (triPprenomUser[i].name.match(/p/gi)) {
        buildUserItem(triPprenomUser[i]);
      }
    }
  })

  $('.alphabetique').click(function triAlphabetique() {
    var triAlphabetique = users;
    c_user_list.html("");
    triAlphabetique.name.sort();

    for (i = 0; i < triAlphabetique.length; i++) {
      buildUserItem(triAlphabetique[i]);

    }

  })


})

.user-item {
  height: 50px;
  width: 400px;
  position: relative;
  background-color: #9E9E9E;
  padding: 10px;
  border-bottom: solid 1px black;
}
.user-item img {
  height: 40px;
  width: 40px;
  background-color: #3F51B5;
  border-radius: 50%;
  position: absolute;
}
.user-item p {
  position: absolute;
  margin: 0px;
  top: 30px;
  left: 80px;
}
.user-item h3 {
  margin: 0px;
  position: absolute;
  left: 80px;
  font-size: 15px;
  font-family: 'helvetica'
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>
 Lister des utilisateurs
</h1>
<p>
  Mettez des actions sur les boutons. Le HTML présent dans la div .user-list n'est la que pour montrer la structure du conteneur, vous devrez générer vous même ce contenu. Supprimer donc l'intégralité du contenu de .user-list quand vous commencez. Un tableau
  d'object d'utilisateur a été créée pour vous
</p>

<div class="user-list">

</div>

<button class="majeur">
  Afficher seulement les mecs qui ont plus de 18 ans
</button>
<button class="Pprenom">
  Afficher seulement les mec qui on un P dans leurs nom
</button>
<button class="alphabetique">
  Afficher dans l'ordre alphabetique
</button>
<button class="normale">
  Revenir à la normale
</button>

Answer 1

阅读sort如何工作，如果要按对象属性对对象进行排序，则需要将函数传递给它。请参阅：http://jsfiddle.net/bzfue34m/35/

triAlphabetique.sort(function(a, b) {
  var nameA = a.name.toUpperCase(); // ignore upper and lowercase
  var nameB = b.name.toUpperCase(); // ignore upper and lowercase
  if (nameA < nameB) {
    return -1;
  }
  if (nameA > nameB) {
    return 1;
  }

  // names must be equal
  return 0;
);