如何使用 javascript 对间接数组进行排序？

Question

在我的项目中，我需要对包含其他数组（它的项目）索引的数组进行排序。我已经搜索了很多小时，但没有找到任何人解决我的问题。

var arr = [1, 4, 3, 4, 5, 6, 7, 8, 9];

function sorting(){

    let arr2 = [0, 1, 2, 3, 4, 5, 6, 7, 8];

    //sorting code

}

现在，我想对 arr2 进行排序，因此当我使用此类代码（在本段下）循环遍历它时，我使用排序数组 (arr2) 中的索引访问 arr。

  arr[arr2[i]]

我的第一步是使用 arr2.sort(function(a,b){arr[a] - arr[b]}，但每次排序都不好。我尝试制作自己的排序函数，但我的问题留下来了。

总而言之，我想对 arr2 进行排序，因此当我循环它时，我会按升序（或降序）顺序获得 arr 的值。

编辑我修复了这个问题，但是出现了另一个问题，当我在 html 上应用 arr2 时，顺序混乱了。

    var arr = [1, 4, 3, 4, 5, 6, 7, 8, 9];

    function sorting(){

        let arr2 = [0, 1, 2, 3, 4, 5, 6, 7, 8];

        //The sorting block code (done)

        z = document.getElementsByClassName("triable"); //this is on what I applied arr2

        for (let i = 0; i < z.length; i++){

            z[i].style.order = arr2[i]; //this line work, but doesn't correctly do what I what it to do

        }

    }

对于html，我有一些带有“triable”类的div，上面的代码需要应用css样式（顺序），以便div在视觉上改变位置

Answer 1

函数任意排序这是解决您的问题的另一种方法。假设我们有一些fruits并且任意的order我们希望对它们进行排序 -const fruits =&nbsp; //&nbsp; &nbsp;0&nbsp; &nbsp; &nbsp; &nbsp; 1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 2&nbsp; &nbsp; &nbsp; &nbsp; 3&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;4&nbsp;&nbsp; [ "apple", "banana", "cherry", "orange", "peach" ]&nbsp;&nbsp;const order =&nbsp; [ 1, 3, 2, 0, 4 ]我们希望能够写出这样的东西 -fruits.sort(sortByIndex(fruits, order))console.log(fruits)// [ "banana", "orange", "cherry", "apple", "peach" ]//&nbsp; &nbsp; &nbsp; 1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;3&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;2&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;0&nbsp; &nbsp; &nbsp; &nbsp; 4我们希望有一个Comparison模块来处理我们的排序代码 -const { empty, map } =&nbsp; Comparison&nbsp;&nbsp;const sortByIndex = (values = [], indexes = []) =>&nbsp; map(empty, x => indexes.indexOf(values.indexOf(x)))现在我们只需要实施Comparison-const Comparison =&nbsp; { empty: (a, b) =>&nbsp; &nbsp; &nbsp; a < b ? -1&nbsp; &nbsp; &nbsp; &nbsp; : a > b ? 1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : 0&nbsp; , map: (m, f) =>&nbsp; &nbsp; &nbsp; (a, b) => m(f(a), f(b))&nbsp; }const { empty, map } =&nbsp; Comparisonconst sortByIndex = (values = [], indexes = []) =>&nbsp; map(empty, x => indexes.indexOf(values.indexOf(x)))const fruits =&nbsp; [ "apple", "banana", "cherry", "orange", "peach" ]&nbsp; //&nbsp; &nbsp;0&nbsp; &nbsp; &nbsp; &nbsp; 1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 2&nbsp; &nbsp; &nbsp; &nbsp; 3&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;4&nbsp;&nbsp;&nbsp;const order =&nbsp; [ 1, 3, 2, 0, 4 ]console.log(fruits)// [ "apple", "banana", "cherry", "orange", "peach" ]console.log(fruits.sort(sortByIndex(fruits, order)))// [ "banana", "orange", "cherry", "apple", "peach" ]为什么是模块？实现一个Comparison模块意味着我们有一个整洁的地方来存储所有的比较逻辑。我们可以轻松实现其他有用的功能，例如reverse现在concat-const Comparison =&nbsp; { // ...&nbsp; , concat: (m, n) =>&nbsp; &nbsp; &nbsp; (a, b) => Ordered.concat(m(a, b), n(a, b))&nbsp; , reverse: (m) =>&nbsp; &nbsp; &nbsp; (a, b) => m(b, a)&nbsp; }const Ordered =&nbsp; { empty: 0&nbsp; , concat: (a, b) =>&nbsp; &nbsp; &nbsp; a === 0 ? b : a&nbsp; }现在我们可以轻松地对复杂的排序逻辑进行建模 -const sortByName =&nbsp; map(empty, x => x.name)const sortByAge =&nbsp; map(empty, x => x.age)const data =&nbsp; [ { name: 'Alicia', age: 10 }&nbsp; , { name: 'Alice', age: 15 }&nbsp; , { name: 'Alice', age: 10 }&nbsp; , { name: 'Alice', age: 16 }&nbsp; ]排序依据name然后排序依据age-data.sort(concat(sortByName, sortByAge))// [ { name: 'Alice', age: 10 }// , { name: 'Alice', age: 15 }// , { name: 'Alice', age: 16 }// , { name: 'Alicia', age: 10 }// ]排序依据age然后排序依据name-data.sort(concat(sortByAge, sortByName))// [ { name: 'Alice', age: 10 }// , { name: 'Alicia', age: 10 }// , { name: 'Alice', age: 15 }// , { name: 'Alice', age: 16 }// ]并且毫不费力地reverse进行任何分类。在这里我们排序name然后反向排序age-data.sort(concat(sortByName, reverse(sortByAge)))// [ { name: 'Alice', age: 16 }// , { name: 'Alice', age: 15 }// , { name: 'Alice', age: 10 }// , { name: 'Alicia', age: 10 }// ]功能原理我们的Comparison模块灵活而可靠。这使我们能够以类似公式的方式编写排序器 -// this...concat(reverse(sortByName), reverse(sortByAge))// is the same as...reverse(concat(sortByName, sortByAge))与concat表达式类似 -// this...concat(sortByYear, concat(sortByMonth, sortByDay))// is the same as...concat(concat(sortByYear, sortByMonth), sortByDay)// is the same as...nsort(sortByYear, sortByMonth, sortByDay)发疯nsort现在假设我们要按任意数量的因素进行排序。例如，对日期对象进行排序需要三个比较：year、month和day-const { empty, map, reverse, nsort } =&nbsp; Comparisonconst data =&nbsp; [ { year: 2020, month: 4, day: 5 }&nbsp; , { year: 2018, month: 1, day: 20 }&nbsp; , { year: 2019, month: 3, day: 14 }&nbsp; ]const sortByDate =&nbsp; nsort&nbsp; &nbsp; ( map(empty, x => x.year)&nbsp; // primary: sort by year&nbsp; &nbsp; , map(empty, x => x.month) // secondary: sort by month&nbsp; &nbsp; , map(empty, x => x.day)&nbsp; &nbsp;// tertiary: sort by day&nbsp; &nbsp; )现在我们可以按year, month, day-排序data.sort(sortByDate)// [ { year: 2019, month: 11, day: 14 }// , { year: 2020, month: 4, day: 3 }// , { year: 2020, month: 4, day: 5 }// ]并且同样可以轻松地按year, month, day-进行反向排序data.sort(reverse(sortByDate))// [ { year: 2020, month: 4, day: 5 }// , { year: 2020, month: 4, day: 3 }// , { year: 2019, month: 11, day: 14 }// ]由于功能原理，实现 N 排序变得轻而易举。我们concat并empty尽一切努力——const Comparison =&nbsp; { // ...&nbsp; , nsort: (...m) =>&nbsp; &nbsp; &nbsp; m.reduce(Comparison.concat, Comparison.empty)&nbsp; }展开下面的代码片段以查看此代码的实际效果 -const Comparison =&nbsp; { empty: (a, b) =>&nbsp; &nbsp; &nbsp; a < b ? -1&nbsp; &nbsp; &nbsp; &nbsp; : a > b ? 1&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; : 0&nbsp; , map: (m, f) =>&nbsp; &nbsp; &nbsp; (a, b) => m(f(a), f(b))&nbsp; , concat: (m, n) =>&nbsp; &nbsp; &nbsp; (a, b) => Ordered.concat(m(a, b), n(a, b))&nbsp; , reverse: (m) =>&nbsp; &nbsp; &nbsp; (a, b) => m(b, a)&nbsp; , nsort: (...m) =>&nbsp; &nbsp; &nbsp; m.reduce(Comparison.concat, Comparison.empty)&nbsp; }const Ordered =&nbsp; { empty: 0&nbsp; , concat: (a, b) =>&nbsp; &nbsp; &nbsp; a === 0 ? b : a&nbsp; }const { empty, map, concat, reverse, nsort } =&nbsp; Comparisonconst sortByDate =&nbsp; nsort&nbsp; &nbsp; ( map(empty, x => x.year)&nbsp; // primary&nbsp; &nbsp; , map(empty, x => x.month) // secondary&nbsp; &nbsp; , map(empty, x => x.day)&nbsp; &nbsp;// tertiary&nbsp; &nbsp; )const data =&nbsp; [ { year: 2020, month: 4, day: 5 }&nbsp; , { year: 2019, month: 11, day: 14 }&nbsp; , { year: 2020, month: 4, day: 3 }&nbsp; ]console.log(data.sort(reverse(sortByDate)))// [ { year: 2020, month: 4, day: 5 }// , { year: 2020, month: 4, day: 3 }// , { year: 2019, month: 11, day: 14 }// ]JavaScript 模块上面Comparison和Ordered被定义为简单对象。JavaScript 是一种非常灵活的语言，并且import语法export明确可用于模块化您的程序。以这种方式编写模块可以让我们清楚地了解事情应该去哪里，并为我们提供足够的空间来扩展我们的代码 -// Comparison.jsimport { lt, gt, eq, concat:_concat } from "./Ordered"const asc = (a, b) =>&nbsp; (console.log(a, b), a < b) ? lt&nbsp; &nbsp; : a > b ? gt&nbsp; &nbsp; &nbsp; : eqconst empty =&nbsp; ascconst map =&nbsp; (m, f) =>&nbsp; (a, b) => m(f(a), f(b))const concat = (m, n) =>&nbsp; (a, b) => _concat(m(a, b), n(a, b))const reverse = (m) =>&nbsp; (a, b) => m(b, a)const desc =&nbsp; reverse(asc)export { asc, concat, desc, empty, map, reverse }// Ordered.jsconst lt =&nbsp;&nbsp; -1const gt =&nbsp; 1const eq =&nbsp; 0const empty =&nbsp; eqconst concat = (a, b) =>&nbsp; a === eq ? b : aexport { concat, empty, eq, gt, lt }

Answer 2

您需要返回增量。undefined否则，每次调用都会返回回调。arr2.sort(function(a, b) {&nbsp; &nbsp; return arr[b] - arr[a];});为了添加正确的顺序，您不需要获取索引来indices寻址正确的元素并指定i为样式顺序值。function sort() {&nbsp; &nbsp; var array = [1, 4, 3, 4, 5, 6, 7, 8, 9],&nbsp; &nbsp; &nbsp; &nbsp; z = document.getElementsByClassName("triable");&nbsp; &nbsp; [...array.keys()]&nbsp; &nbsp; &nbsp; &nbsp; .sort((a, b) => array[b] - array[a])&nbsp; &nbsp; &nbsp; &nbsp; .forEach((v, i) => z[v].style.order = i);}<button onclick="sort()">sort</button><br><div style="display: flex;"><span class="triable">1</span><span class="triable">4</span><span class="triable">3</span><span class="triable">4</span><span class="triable">5</span><span class="triable">6</span><span class="triable">7</span><span class="triable">8</span><span class="triable">9</span>&nbsp;</div>

Answer 3

代码很多，但有效:)对于 ASC 排序：var test = [1, 4, 3, 4, 5, 6, 7, 8, 9];console.log("Original Array: " + test);var len = test.length;var indices = new Array(len);for (var i = 0; i < len; ++i) indices[i] = i;indices.sort(function (a, b) { return test[a] < test[b] ? -1 : test[a] > test[b] ? 1 : 0; });test.sort();console.log("Sort-ASC " + test);console.log("Index from Array " + indices);对于 DESC 排序：var test = [1, 4, 3, 4, 5, 6, 7, 8, 9];console.log("Originales Array: " + test)var len = test.length;var indices = new Array(len);for (var i = 0; i < len; ++i) indices[i] = i;indices.sort(function (a, b) { return test[a] < test[b] ? -1 : test[a] > test[b] ? 1 : 0; });indices.reverse();test.sort();test.reverse();console.log("Sort-DESC " + test);console.log("Index from Array " + indices);

Answer 4

使用这个 arr.sort(function(a, b){return a - b}); 很简单。// 使用 return 否则不会触发 - + 加号表示 ascndng dcndng ordee 简单方法 ..... 快乐编码