数组对象排序arr.sort几种使用方法

小御姐@stella

于 2024-06-18 12:26:30 发布

阅读量357

点赞数 12

文章标签： javascript ecmascript

本文链接：https://blog.csdn.net/qq_54548545/article/details/139727577

版权

本文完成以下需求，复制运行即可。

需求1: 根据数组对象的单个属性排序

需求2: 根据数组对象的多个属性排序

需求3: 刷新页面时，单个属性随机排序

sort API比冒泡排序快，99%的排序都是sort

一、根据数组对象的单个属性排序

<body>
  <h1>需求: 如何使用sort函数排序, 99%都使用sort</h1>
  <script>
    let arr = [
      { name: 'kaka', age: 40 },
      { name: 'nunu', age: 20 },
      { name: 'dada', age: 22 },
      { name: 'fafa', age: 80 },
    ]
    function getArr(arr) {
      return arr.sort((a, b) => {
        return b.age - a.age
      })
    }
    console.log(getArr(arr));
    // [
    //   { "name": "fafa", "age": 80 },
    //   { "name": "kaka", "age": 40 },
    //   { "name": "dada", "age": 22 },
    //   { "name": "nunu", "age": 20 }
    // ]
  </script>
</body>

二、根据数组对象的多个属性排序


<body>
  <h1>需求: book相同时, age从小到大排序; age不同, book排序</h1>
  <script>
    let arr = [
      { book: '西游记', name: '孙悟空', age: 500 },
      { book: '西游记', name: '唐僧', age: 20 },
      { book: '西游记', name: '猪八戒', age: 88 },
      { book: '西游记', name: '沙和尚', age: 1000 },
      { book: '水浒传', name: '宋江', age: 38 },
      { book: '水浒传', name: '李逵', age: 29 },
      { book: '水浒传', name: '孙二娘', age: 18 },
      { book: '水浒传', name: '潘金莲', age: 16 },
    ]
    arr.sort((a, b) => {
      if (a.book === b.book) {
        return a.age - b.age
      } else {
        return a.book - b.book
      }
    })
    console.log(arr);
    // [
    //   { "book": "西游记", "name": "猪八戒", "age": 88 },
    //   { "book": "西游记", "name": "唐僧", "age": 20 },
    //   { "book": "西游记", "name": "孙悟空", "age": 500 },
    //   { "book": "西游记", "name": "沙和尚", "age": 1000 },
    //   { "book": "水浒传", "name": "李逵", "age": 29 },
    //   { "book": "水浒传", "name": "宋江", "age": 38 }
    // ]
  </script>
</body>

三、刷新页面时，单个属性随机排序


<body>
  <h1>需求: 刷新页面，随机排序</h1>
  <script>
    let arr = ['张三', '李四', '王二', '麻子',]
    let h2 = document.createElement('h2')
    document.body.appendChild(h2)
    arr.sort(() => {
      return Math.random() - 0.5
    })
    h2.innerText = arr
  </script>
</body>

如有不妥，欢迎指正。