js sort tricks All In One

js sort tricks All In One

js 排序技巧

const arr = [
    { label: 'False 1 ❌', disabled: false, },
    { label: 'False 2 ❌', disabled: false },
    { label: 'Ture 1 ✅', disabled: true, },
    { label: 'False 3 ❌', disabled: false, },
    { label: 'Ture 2 ✅', disabled: true, },
    { label: 'Ture 3 ✅', disabled: true, },
    { label: 'False 4 ❌', disabled: false, },
];

// JSON.stringify(arr, null, 4);


const subTableList = () => {
    // sort 排序里面的函数意思是 按照 disabled 属性(先 false 后 true) 的方式排序, 并按照索引的先后顺序不变
    const temp = [...arr];
    // log(`\ntemp 1`, temp);
    // return temp.sort((a, b) => (a.disabled ^ b.disabled ? 1 : 0) * (a.disabled ? 1 : -1));
    return temp.sort((a, b) => (a.disabled ^ b.disabled) * a.disabled);
    // return temp.sort((a, b) => (a.disabled ^ b.disabled) * +a.disabled);
}

const MapList = () => {
    const temp = [...arr];
    // log(`\ntemp 2`, temp);
    // const result = new Map();
    const result = [];
    for (let i = 0; i < temp.length; i++) {
        const item = temp[i];
        if(!item.disabled) {
            result.push(item);
        } else {
            result.unshift(item);
        }
    }
    return result;
    // return temp.map((a, b) => (a.disabled ^ b.disabled ? 1 : 0) * (a.disabled ? 1 : -1));
    // return temp.sort((a, b) => (a.disabled ^ b.disabled ? 1 : 0) * (a.disabled ? 1 : -1));
}

const log = console.log;


log(`subTableList =\n`, subTableList());


log(`\nMapList =\n`, MapList());


/* 

node map.js
subTableList =
 [ { label: 'False 1 ❌', disabled: false },
  { label: 'False 2 ❌', disabled: false },
  { label: 'False 3 ❌', disabled: false },
  { label: 'False 4 ❌', disabled: false },
  { label: 'Ture 1 ✅', disabled: true },
  { label: 'Ture 2 ✅', disabled: true },
  { label: 'Ture 3 ✅', disabled: true } ]

MapList =
 [ { label: 'Ture 3 ✅', disabled: true },
  { label: 'Ture 2 ✅', disabled: true },
  { label: 'Ture 1 ✅', disabled: true },
  { label: 'False 1 ❌', disabled: false },
  { label: 'False 2 ❌', disabled: false },
  { label: 'False 3 ❌', disabled: false },
  { label: 'False 4 ❌', disabled: false } ]
  
*/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

js ^ operator

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR

const a = 1;        // 00000000000000000000000000000001
const b = 3;        // 00000000000000000000000000000011

console.log(a ^ b); // 00000000000000000000000000000010
// 2

// ^ 异或, 11 的 0， 01，10 的 1，00 的 0

1 * true;
1
1 * false;
0

0 * true;
0
0 * false;
0


(false ^ true);
1
(true ^ false);
1

(false ^ false);
0
(true ^ true);
0

(false ^ true) * false;
1
(false ^ true) ^ true;
0

falsy / 假值

!false;
true
!!false;
false

!true;
false
!!true;
true

+false;
0
-false;
-0

+true;
1
-true;
-1

js sort asc & js sort desc

升序 / 降序

const arr = ['X', 'Y', 'A', 'B'];

const upOrder = [...arr].sort((a, b) => {
  const temp = [a, b].sort();
  // 升序 asc / Ascending
  return temp[0] === a ? -1 : 1;
});


const downOrder = [...arr].sort((a, b) => {
  const temp = [a, b].sort();
  // 降序 desc / Descending
  return temp[0] === a ? 1 : -1;
});

console.log('upOrder =', upOrder);
// ["A", "B", "X", "Y"]

console.log('downOrder =', downOrder);
// ["Y", "X", "B", "A"]

// keep origin === [...arr]
console.log('arr =', arr);
// ["X", "Y", "A", "B"]

refs

---

---

©xgqfrms 2012-2020

www.cnblogs.com 发布文章使用：只允许注册用户才可以访问！

---