数组、对象数组常用的几种排序方法(升序)

432 阅读2分钟

一、简单的数字数组排序

    const numArr = [2, 6, 4, 3, 8];
    const sortNumber = (a, b) => {
        return a - b;
    };
    console.log(numArr.sort(sortNumber));//[2, 3, 4, 6, 8]

二、数组对象排序

    const arrObj = [
      { id: 1, num: 222 },
      { id: 3, num: 443 },
      { id: 5, num: 111 },
      { id: 2, num: 100 },
      { id: 4, num: 444 }
    ];
    const sortObject = (arr, key) => {
      return arr.sort((a, b) => {
        return a[key] - b[key];
      })
    };
    console.log(sortObject(arrObj, "num"));

案例2.png

三、对象数组按照另一个数组排序

借鉴博客地址:JavaScript ES6实现一个对象数组按照另一个对象数组进行排序

    //arr2按照arr1的buyerId顺序排序
    const arr1 = [
      { buyerId: "1", name: "WW" },
      { buyerId: "2", name: "RR" },
      { buyerId: "3", name: "OO" },
      { buyerId: "4", name: "ll" },
      { buyerId: "5", name: "DD" },
      { buyerId: "6", name: "SS" }
    ];
    const arr2 = [
      { buyerId: "4", totalPrice: "7.00" },
      { buyerId: "3", totalPrice: "90.00" },
      { buyerId: "2", totalPrice: "10.00" },
      { buyerId: "6", totalPrice: "70.00" },
      { buyerId: "1", totalPrice: "9.00" },
      { buyerId: "5", totalPrice: "60.00" }
    ];
    const curArr = arr1.map(item => { return item.buyerId });
    arr2.sort((a, b) => {
      const prev = curArr.indexOf(a.buyerId);
      const next = curArr.indexOf(b.buyerId);
      return prev - next;
    });
    console.log(arr2, 'arr2');

案例3.png

四、对象数组按照另一个对象数组的排序而变化

方法1:

  1. 创建两个key值,用于合并两个数组;
  2. 为新数组mergeArr排序(利用案例二的思路);
  3. 创建两个新数组arr3New、arr4New 用于接收排序过的值。 具体代码如下:
    //数组对象排序的方法
    const sortObject = (arr, key) => {
      return arr.sort((a, b) => {
        return a[key] - b[key];
      })
    };
    
    const arr3 = [2, 6, 4, 3, 8];
    const arr4 = [10, 9, 8, 7, 6];
    const SY1 = Symbol("arr3"), SY2 = Symbol("arr4");
    const mergeArr = arr3.map((item, index) => {
      //注意:Symbol 值作为对象属性名时,不能用点运算符
      return {
        [SY1]: item,
        [SY2]: arr4[index]
      }
    });
    const sortArr = sortObject(mergeArr, SY1);
    const arr3New = [], arr4New = [];
    sortArr.forEach(item => {
      arr3New.push(item[SY1]);
      arr4New.push(item[SY2]);
    });
    console.log(arr3New);//[2, 3, 4, 6, 8]
    console.log(arr4New);//[10, 7, 8, 9, 6]

方法2:

  1. 记住第一个数组的下标,将其转为对象;
  2. 为新数组arr3Copy排序(利用案例二的思路);
  3. 创建两个新数组arr5New、arr6New 用于接收排序过的值。 具体代码如下:
    const arr3Copy = arr3.map((item, index) => {
      return { value: item, index };
    });
    const resArr = sortObject(arr3Copy, "value");
    const arr5New = [], arr6New = [];
    resArr.forEach(item => {
      arr5New.push(item.value);
      arr6New.push(arr4[item.index]);
    })
    console.log(arr5New);//[2, 3, 4, 6, 8]
    console.log(arr6New);//[10, 7, 8, 9, 6]

扩展知识:Symbol

点运算符后面总是字符串,不会读取mySymbol作为标识名所指代的那个值,导致obj的属性名实际上是一个字符串,而不是一个 Symbol 值。出自 阮一峰老师的 《ECMAScript 6 入门》

    const ONE = Symbol("1");
    const obj = { ONE: 1 };//这里的obj把ONE当成了字符串
    obj[ONE] = 2;
    console.log(obj[ONE]);//2
    console.log(obj.ONE);//1