Question

我正在使用javascript中的对象来更好地掌握我使用函数和操作对象的能力。我有一个'构建'对象数组的程序。每个'对象'都是人'firstName''middleName'和'lastName'。我试图按名字'firstName'按字母顺序排序和输出我的对象数组。

稍后我解决了这个问题，我将按照中间名排序我的数组，然后是姓氏。

理想情况下这是函数:(但它不起作用）我希望以这种方式使它工作，以便我可以通过各种方式对数组进行排序：firstName，middleName和lastName。

function fNameS(arr, prop) {
  arr.sort(function (a, b) {
    var nameA = a.prop.toLowerCase(),
        nameB = b.prop.toLowerCase();
    if (nameA < nameB) { //sort string ascending
      return -1;
    }
    if (nameA > nameB) {
      return 1;
    }
    return 0; //default return value (no sorting)
  });
}

fNameS(allInfo, 'firstName');

这是我的代码目前正在使用的代码:(并且它不起作用）

function fNameS(arr) {
  arr.sort(function (a, b) {
    var nameA = a.firstName.toLowerCase(),
        nameB = b.firstName.toLowerCase();
    if (nameA < nameB) { //sort string ascending
      return -1;
    }
    if (nameA > nameB) {
      return 1;
    }
    return 0; //default return value (no sorting)
  });
}

这是我的JavaScript文件：

var allInfo = []; //Store names (as objects) here
var output = printList('output');
var cache = [];
var numOfNames = 0;
var nameCounter = 0;
var firstNameSorted = fNameS(allInfo);
alert("JS Works");


function buildList() { //Makes a new object, and pushes it to the 'allInfo' Array
  var info = {};
  info.firstName = document.getElementById('firstName').value;
  info.middleName = document.getElementById('middleName').value;
  info.lastName = document.getElementById('lastName').value;
  allInfo.push(info);
  addName(1);
  clear();
  alert("Logged");
}


function resetList() {
  allInfo = [];
  numOfNames = 0;
  nameCounter = 0;
  addName(0);
  blankOut();
}

function blankOut() {
  document.getElementById('output').innerHTML = " ";
}


function generate(list) { //print out list function/generate list.
  var counter = 1;
  var out = '<ul>';
  var i;
  for (i in list) {
    var rec = list[i];

    var row = [];
    for (var field in rec) {
      var fieldLabel;
      if (field === 'firstName') {
        fieldLabel = "First Name";
      } else if (field === 'middleName') {
        fieldLabel = "Middle Name";
      } else if (field === 'lastName') {
        fieldLabel = "Last Name";
      }

      row.push(fieldLabel + ': ' + rec[field]);
    }

    out += "<li>" + counter + ".) " + row.join('    | - - - |    ') + "</li>";
    counter++;
  }

  out += "</ul>"
  document.getElementById('output').innerHTML = out;
  return out;
}

//First Name Sort
function fNameS(arr) {
  arr.sort(function (a, b) {
    var nameA = a.firstName.toLowerCase(),
        nameB = b.firstName.toLowerCase();
    if (nameA < nameB) { //sort string ascending
      return -1;
    }
    if (nameA > nameB) {
      return 1;
    }
    return 0; //default return value (no sorting)
  });
}


function addName(x) { //Name Counter Function
  if (x > 0) {
    nameCounter++;
    numOfNames = nameCounter;
    document.getElementById('numOfNames').innerHTML = numOfNames;
  } else {
    nameCounter = 0;
    numOfNames = 0;
    document.getElementById('numOfNames').innerHTML = numOfNames;
  }
}

function printList(x) {
  var output = getById(x);
  return function (text) {
    output.innerHTML += text + '\n';
  };
}


function getById(x) {
  return document.getElementById(x);
}


function clear() {
  document.getElementById("firstName").value = "";
  document.getElementById("middleName").value = "";
  document.getElementById("lastName").value = "";
}

这是我的HTML：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Array Name Sorting</title>
  <link rel="stylesheet" href="css/main.css">
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="js/script.js"></script>
</head>

<body>
  <header>
    <h1>Array Name Sorting</h1>
    <h2>By: Jeff Ward</h2>
  </header>
  <label>First Name:
    <input type='text' name='firstName' id='firstName' placeholder="First Name">
  </label>
  <br>
  <br>
  <label>Middle Name:
    <input type='text' name='middleName' id='middleName' placeholder="Middle Name">
  </label>
  <br>
  <br>
  <label>Last Name:
    <input type='text' name='lastName' id='lastName' placeholder="Last Name">
  </label>
  <br>
  <br>
  <button type="button" id="add" onclick="buildList()">Add to List</button>
  <button type="button" id="print" onclick="generate(allInfo)">Print</button>
  <button type="button" id="clearScreen" onclick="blankOut()">Clear Screen</button>
  <button type="button" id="reset" onclick="resetList()">Reset List</button>
  <br>
  <button type="button" id="sortFirst" onclick="generate(firstNameSorted)">Sort by First Name</button>
  <button type="button" id="sortMiddle" onclick="">Sort by Middle Name</button>
  <button type="button" id="sortLast" onclick="">Sort by Last Name</button>
  <button type="button" id="pickRandom" onclick="">Pick Random Name</button>
  <br>
  <br>
  <label>Search:
    <input type='text' name='search' id='search' placeholder="Search">
  </label>
  <br>
  <br>
  <label>Number of Names in List:</label>
  <div id="numOfNames"></div>
  <br>
  <br>
  <br>
  <label>Names in list</label>
  <div id="output"></div>


</body>

</html>

我的排序功能有什么问题？我已经尝试了几个小时来诊断它并且无法找出我做错了什么。如果你不能告诉我，我是一个半noobie，但我学得很快。

链接到JSFiddle：https://jsfiddle.net/jeffward01/4zrzg4a1/

这不是重复的，因为代码没有排序。另一个问题（重复）（不是由我写的）是如何排序。我的目的是诊断问题。

Answer 1

从我能看到的一目了然：

function fNameS(arr, prop) {
  arr.sort(function (a, b) {
    var nameA = a[prop].toLowerCase(),
        nameB = b[prop].toLowerCase();
    ...

这将获得由prop指定的属性，而不是属性＆＃34; prop＆＃34;。

同样，由于将JavaScript函数绑定到HTML元素的性质，您需要在onClick属性中使用它们之前定义函数。我将所有脚本移动到文件顶部的<script>标记中，修复了很多错误。

<script>
JavaScript stuff
</script>

HTML stuff

当然，这非常难看。因此，您可能会尝试使用JavaScript在定义函数之后设置onClick()属性。例如，使用JQuery：

var doSomething = function(){
};
$('button').click(doSomething);

Answer 2

您应该使用a[prop].toLowerCase()而不是a.prop.toLowerCase()来获取名称。您还必须实际返回已排序的数组。

以下是使用localeCompare函数的排序函数的简化版本：

function fNameS(arr, prop) {
    return arr.sort(function (a, b) {
        var nameA = a[prop].toLowerCase(),
            nameB = b[prop].toLowerCase();
        return nameA.localeCompare(nameB);
    });
}

为什么我的'sort'功能不起作用？我找不到任何错误

2 个答案: