最后一步排序错误。函数getColor

Question

当我发送一个变量作为前一个函数的包装时，我不明白我做错了什么。

function GetColor必须在输入端接收两个值（variable sort和variable a）然后比较它们。如果 a[i].getAttribute('href') 的某些值与 sort[i] 的值相匹配 - 在屏幕上打印这些 tags a 并在 DOM 中用黄色绘制这些 tags a .

现在我对 GetSort 函数中先前丢弃的值 "http://internal.com/" 的 GetColor 输出进行了奇怪的排序。

我认为是我对传递函数参数的知识不够了解的错误。

感谢您的帮助。

<script>

    let a = document.body.getElementsByTagName('a');

    function getList(list) { // creating an array from all a tag elements.

        let arr = [];
        for (let i = 0; i < a.length; i++) {

            if (a[i].getAttribute('href')) {
                arr.push(a[i].getAttribute('href'));        

            }
        }

        return arr;
    };

    function getSort(f) { // sort array given from getList() by symbols 'http'...

      let sorting;
      let arr = [];
      for (let i = 0; i < f.length; i++) {

         if (f[i].includes('://') && !f[i].includes('http://internal.com/')) {
            console.log(f[i]);
            arr.push(f[i]);
         }
      }

      return arr; // [ "http://google.com" , "ftp://ftp.com/my.zip" , 
                    // "http://nodejs.org" ]
    };

    let sort = getSort(getList());

    console.log(sort);

    function getColor(sort) { // paint a tags based on sort elements from getSort()

        for (let i = 0; i < a.length; i++) {
            if (a[i].getAttribute('href') == sort[i]) {
                a[i].setAttribute('class', 'external'); // paint sorted a tags in DOM  
                                                        // by [external] attribute
                console.log(a[i]);

            }
        }
        return a;
    }

    getColor(a);



</script>

HTML:

<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
<style>
  .external {
    background-color: yellow
  }
</style>

</head>

<body>
<a name="list">list</a>
<ul>
  <li><a href="http://google.com">http://google.com</a></li>
  <li><a href="/tutorial">/tutorial.html</a></li>
  <li><a href="local/path">local/path</a></li>
  <li><a href="ftp://ftp.com/my.zip">ftp://ftp.com/my.zip</a></li>
  <li><a href="http://nodejs.org">http://nodejs.org</a></li>
  <li><a href="http://internal.com/test">http://internal.com/</a></li>
</ul>


</body>

</html>

Answer 1

我无法评论你的问题，这正是我真正想做的。害羞的是，您的问题对我来说似乎也不清楚。但是您的代码中很少有问题。

function getList ：您在定义中指定了一个您从未使用过的列表参数，我认为最好不要放置。就个人而言，我会保留参数并避免在我的函数 a[i]...

function getSort ：如果我跟得好，它只是一个构造新数组 link 的函数，不包括以 [= 开头的 links 10=]？对吗？局部变量排序在做什么？你永远不会 return 它也不会在你的函数中使用它。

function getColor ：您调用 getColor(a)，因此请记住，a 通过排序参数通过引用传递给 getColor。因此在你 getColor sort 和 a 是相同的。你在 getColor 函数中一直比较相同的东西

有人可以说我是否错了。编写你的函数来完成他们的工作，用他们自己的 arguments/parameters 并避免直接使用任何外部参数他们将是我的建议

Answer 2

好的。

如果添加一些日志语句，您可以准确地看到发生了什么：

    let a = document.body.getElementsByTagName('a');

    function getList(list) { // creating an array from all a tag elements.

        let arr = [];
        for (let i = 0; i < a.length; i++) {

            if (a[i].getAttribute('href')) {
                arr.push(a[i].getAttribute('href'));        

            }
        }

        return arr;
    };

    function getSort(f) { // sort array given from getList() by symbols 'http'...

      let sorting;
      let arr = [];
      for (let i = 0; i < f.length; i++) {

         if (f[i].includes('://') && !f[i].includes('http://internal.com/')) {
            console.log(f[i]);
            arr.push(f[i]);
         }
      }

      return arr; // [ "http://google.com" , "ftp://ftp.com/my.zip" , 
                    // "http://nodejs.org" ]
    };

    let sort = getSort(getList());

    function getColor(sort) { // paint a tags based on sort elements from getSort()

        for (let i = 0; i < a.length; i++) {
   console.log( 'a' );
   console.log( a[ i ] );
   console.log( a[ i ].getAttribute( 'href' ) );
   console.log( 'sort' );
   console.log( sort[ i ] );
   console.log( sort[ i ].toString() );
   console.log( a[ i ].getAttribute( 'href' ) == sort[ i ] );
   console.log( '-----' );
            if (a[i].getAttribute('href') == sort[i]) {
                a[i].setAttribute('class', 'yellow'); // paint sorted a tags in DOM  
                                                        // by [external] attribute
            }
        }
        return a;
    }

    getColor(a);

.yellow {
  background-color: yellow
}

<a name="list">list</a>
<ul>
  <li><a href="http://google.com">http://google.com</a></li>
  <li><a href="/tutorial">/tutorial.html</a></li>
  <li><a href="local/path">local/path</a></li>
  <li><a href="ftp://ftp.com/my.zip">ftp://ftp.com/my.zip</a></li>
  <li><a href="http://nodejs.org">http://nodejs.org</a></li>
  <li><a href="http://internal.com/test">http://internal.com/</a></li>
</ul>

a 是在您的函数之外定义的节点列表。然后用 getSort()

创建 sort 数组

然后最后你调用 getColor() 使用 a 而不是 sort。

所以基本上你是在比较 a 和它自己。

由于 a 包含 html 个节点，sort 也包含 html 个节点。

所以当你使用 a[i].getAttribute( 'href' ) 时你会得到一个字符串。然后将该字符串与其自己的节点进行比较。由于您使用的是 ==（比较值）而不是 ===（比较值和类型），因此 sort 中的节点（与 a 中的节点相同）将调用自己的 toString() 函数将其转换为字符串。

正如您在我添加的 console.log 语句中看到的那样，如果 link 没有，href 属性最后会返回一个 /还包含一个（如 http://internal.com/test ）

而且由于 http://google.com/ 与 http://google.com 不同，所以你得到的是错误的。与 http://nodejs.org/ 和 http://nodejs.org.

相同

所以只有ftp://ftp.com/my.zip和http://internal.com/test满足条件打印成黄色

如果我必须写这个，我会选择这样的东西。它不包含功能，但显示了我要遵循的工作流程。

// 0) Get the array of tag elements.
const hyperlinks = document.querySelectorAll( 'a' );

// 1) Creating an array from all a tag elements.
const ary_hyperlinks = Array.from( hyperlinks );
// If your browser doesn't support Array.from(), you can use the slice method.
// const ary_hyperlinks = Array.prototype.slice.call( hyperlinks );

// 2) Sort array given from getList() by symbols 'http'.
// Since your code doesn't actually do any SORTING as we understand sorting, i'll just write what I think the question is.
// Since the assignment doesn't actually say that you have to reorder the elements in sorted order, this operation basically does nothing.
// If you have to reoder the elements while you color them yellow, we'd need to adjust the code.
const sorted_filtered_hyperlinks = ary_hyperlinks
  // Filter out all links that don't have a href attribute including http, ftp and that are not internal.
  .filter( function( node ) {
    const uri = node.getAttribute( 'href' );
    if ( uri ) return !uri.includes( 'internal' ) && uri.includes( 'http' ) || uri.includes( 'ftp' );
    else return false;
  } )
  // Sort the links by type. Since the type is the start of the href attribute of the link, this comes down to sorting the urls alphabetically
  .sort( function( first, second ) {
    // Alphabetically earlier eltters are smaller than later letters.
    if ( first.getAttribute( 'href' ) < second.getAttribute( 'href' ) ) return 1;
    else return -1;
  } ); 

// 3) paint a tags based on sort elements from getSort()
sorted_filtered_hyperlinks.forEach( function( node ) {
  node.setAttribute( 'class', 'yellow' );
} );

.yellow {
  background-color: yellow
}

<a name="list">list</a>
<ul>
  <li><a href="http://google.com">http://google.com</a></li>
  <li><a href="/tutorial">/tutorial.html</a></li>
  <li><a href="local/path">local/path</a></li>
  <li><a href="ftp://ftp.com/my.zip">ftp://ftp.com/my.zip</a></li>
  <li><a href="http://nodejs.org">http://nodejs.org</a></li>
  <li><a href="http://internal.com/test">http://internal.com/</a></li>
</ul>

最后一步排序错误。函数getColor

Wrong sorting on final step. function getColor

html

javascript

sorting

function

wrapper