Question

我的教授希望我们编写一个JavaScript代码，提示用户输入3个名字（一次一个）。该计划应该按升序排序并显示不同行上的名称。

这是我到目前为止所拥有的

<html>
<head>
  <title>Day 2 - Example 2</title>
</head>
<body>
<center>
 <script language="javascript">
   var na1,na2,na3;
   na1=prompt("Enter your first name:","");
   na2=prompt("Enter your second name:","");
   na3=prompt("Enter your third name","");  
 </script>
 </center>
</body>
</html>

Answer 1

我认为你的教授希望你在这个过程中学到一些东西，所以我试着解释你如何解决这个问题。请随时询问您的任何后续问题。

所以，你有三个不同变量的三个名字。

您有两个主要问题：比较名称，排序比较结果。

让我们一步一步。

比较两个名字是什么意思？或者，在另一个世界中，这意味着一个名字在另一个世界之前是什么意思？

为简单起见，假设插入的名称仅包含从 a 到 z 的字符，无论是小写还是大写。没有数字，没有特殊字符（例如è）或其他任何字符（您可以尝试最终扩展代码以处理其他字符）。

所以，要比较这两个名字，我们创建一个函数，该函数将两个名称作为参数，如果第一个名字在第二个名称之前，则返回-1 0如果他们是平等的，否则1。

该功能将是这样的：

function compare(name1, name2) {
    // Do same magic stuff
    return -1;
}

首先，我们可以比较名字的第一个字母，并检查哪一个首先出现。从字符串中取出char的最佳方法是使用charAt()函数。您也可以将字符串作为数组访问，但它在IE7上不起作用，从学术角度来看是错误的。

但在现实世界中，撰写name[1]与撰写name.charAt(1)

相同

function compare(name1, name2) {
    if (name1.charAt(0) < name2.charAt(0)) return -1;
    if (name1.charAt(0) === name2.charAt(0)) return 0;
    if (name1.charAt(0) > name2.charAt(0)) return 1; 
}

嗯，这是一个开始，但这段代码有很多问题。

如果两个名字的第一个字母相同，则第二个if将使函数返回0。这没有任何意义。

我们知道，当且仅当它们都是等于时，两个名称是相等的。然后我们可以更改检查以确保两个名称中的所有字符都相同：

function compare(name1, name2) {
    if (name1 === name2) return 0;

    if (name1.charAt(0) < name2.charAt(0)) return -1;
    if (name1.charAt(0) > name2.charAt(0)) return 1; 
}

肯定更好。

但是我们对这段代码的另一个问题是，如果有人用大写字母输入她的名字，她总是会在只使用小写字母插入名字的人之前。

因此alice将在Bob之后出现。

我们需要比较相同的字符，因此我们只比较小写字符。要在所有小写字母中转换我们的名字，我们使用toLowerCase()函数

function compare(name1, name2) {
    name1 = name1.toLowerCase();
    name2 = name2.toLowerCase();

    if (name1 === name2) return 0;

    if (name1.charAt(0) < name2.charAt(0)) return -1;
    if (name1.charAt(0) > name2.charAt(0)) return 1; 
}

好！

但如果这两个名字的第一个字符相同怎么办？

是的，我们没有想到它！我们必须检查每个字符，只要我们找不到一个不同的或两个名称中的一个没有任何更多的字符！

首先，让我们找到最短的名字：

var lengthOfShorterName = Math.min(name1.length, name2.length)

Math.min将返回您作为参数传递的最小数字。我们现在可以创建一个for周期来逐个比较每个字符。

for (var i = 0; i < lengthOfShorterName; i++) {
    if (name1.charAt(i) > name2.charAt(i)) return 1;
    if (name1.charAt(i) < name2.charAt(i)) return -1;
}

但是如果一个名字是另一个名字的子字符串（即 Ali 和 Alice ）怎么办？

嗯，for循环将完成，所以我们需要另一个条件。我们先说较短的名字。

if (name1.lenght < name2.length) return -1;
return 1;

我们终于拥有了比较功能：）

function compare(name1, name2) {
    name1 = name1.toLowerCase();
    name2 = name2.toLowerCase();

    if (name1 === name2) return 0;

    var lengthOfShorterName = Math.min(name1.length, name2.length)

    for (var i = 0; i < lengthOfShorterName; i++) {
        if (name1.charAt(i) > name2.charAt(i)) return 1;
        if (name1.charAt(i) < name2.charAt(i)) return -1;
    }

    if (name1.lenght < name2.length) return -1;
    return 1;
}

现在我们需要对元素进行排序。

排序是一个非常复杂的主题，有很多不同的方法，有很多优点和缺点。但是对于这个答案，整体分析也是太多了，所以让我们在这里做一个小技巧：我们知道我们有三个名字，所以我们可以通过我们的新功能直接比较它们！

让我们首先做所有比较！

var na1_na2 = compare(na1, na2);
var na1_na3 = compare(na1, na3);
var na2_na3 = compare(na2, na3);

// We create the place where we will save the names
var first, second, third;

if (na1_na2 === -1) {
    // na1 comes before na2! Will it come also before na3?
    if (na1_na3 === -1) {
        // Yes! So na1 is the first!
        first = na1;

        // But who is second?
        if (na2_na3 === -1) {
            // na2 is second!
            second = na2;
            third = na3;
        } else {
            // na3 is second!
            second = na3;
            third = na2;
        }
    } else {
        // na3 is before na1, therefore is first!
        first = na3
        second = na1;
        third = na2;
    }
} else {
    // na2 is before na1. What do we need to compare?
}

现在，您当然不会在现实世界中使用这样的解决方案。首先，因为我遗漏了很多极端情况（当函数比较返回0时也被忽略）。

其次，主要是因为你没有利用Javascript原生函数。

@ shash679的答案向您展示了解决方案的真实实现。

但无论如何，我希望你喜欢这个解释，主要是你现在很想知道更多关于Javascript和计算机科学的知识。

编写代码不是为了编写代码，更多的是解决谜语，而且非常有趣。

祝你的课程顺利！

Answer 2

您可以将用户输入的名称存储到数组中，然后使用sort()：

＆＃13;

function nameSorting() {
    var names = [];
    var name1 = prompt("Please enter the first name");
    names[0] = name1;
    var name2 = prompt("Please enter the second name");
    names[1] = name2;
    var name3 = prompt("Please enter the second name");
    names[2] = name3;
    names.sort();
   	
    document.getElementById("firstName").innerHTML = names[0];
    document.getElementById("secondName").innerHTML = names[1];
    document.getElementById("lastName").innerHTML = names[2];
}

＆＃13;

<!DOCTYPE html>
<html>
<body>

<p>Click the button to to enter 3 names (one at a time). The program will sort and display the names on different lines in ascending order.</p>

<button onclick="nameSorting()">Enter names</button>

<p id="firstName"></p>
<p id="secondName"></p>
<p id="lastName"></p>

</body>
</html>

＆＃13;

按升序排序和显示不同行上的名称

2 个答案: