zoukankan      html  css  js  c++  java
  • [Javascript ] Array methods in depth

    Sort can automatically arrange items in an array. In this lesson we look at the basics including how to sort an array of strings alphabetically and the correct way to perform a numerical sort on an array of numbers. We finish as always with a practical use-case that shows not only sort in action, but also how it can be chained together with other array methods such as map and join.

    Problem with sort number in Array:

    var data = [10, 20, 15];
    var sorted = data.sort();
    
    console.log(sorted); // [10, 15, 20]

    Code works fine, but there is a problem: 

    When calling sort on an array with numbers, what actually happens is each number is converted to a string, and they're compared using their position in Unicode.

    var data = [10, 20, 15, 30 ,2];
    var sorted = data.sort();
    
    console.log(sorted); // [10, 15, 2, 20, 30]

    This is because, in Unicode, 10 does come before 2. Again, this is because these numbers are being converted to strings first.

    To solve the problem:




    var
    data = [10, 20, 15, 30 ,2]; var sorted = data.sort( (a,b)=>{ return a-b; } ); console.log(sorted);

    We need to provide a comparative function to make it work. If a - b < 0 then it just put a before b;

    Also according to that, we can compare the lenght of string, then sort them in order:

    var sorted = names.sort( (a,b)=>{
      return a.length - b.length;
    } );
    console.log(sorted); // ["Bob", "Kent", "Kettly", "Jusnine"]

    A more useful example : sort objects

    var list = lessons.sort( (a,b)=>{
      return a.views-b.views
    } )
    .map( (lession)=>{
      return `    <li>${lession.title} - ${lession.views}</li>`;
    } )
    .join('
    ');
    
    var output = `<ul>
    ${list}
    </ul>`;
    
    console.log(output); 
    /*
    "<ul>
        <li>Javascript Array methods in depth - concat - 1000</li>
        <li>Javascript Array methods in depth - join - 1025</li>
        <li>Javascript Array methods in depth - slice - 1050</li>
    </ul>"
    */
  • 相关阅读:
    jQuery -&gt; 获取指定上下文中的DOM元素
    安装Nginx须要系统的辅助软件(linux)
    ASP.NET MVC + MySQL で開発環境構築
    Parameters.Add和Parameters.AddWithValue
    MVC js动态生成from提交数据然后生成文件下载
    C# 压缩文件 的创建
    C#中的GetElementsByClassName方法
    windows下使用pip安装python模块lxml
    总结WCF开发中遇到的几个问题
    Xpath
  • 原文地址:https://www.cnblogs.com/Answer1215/p/5055910.html
Copyright © 2011-2022 走看看