如何使用功能樣式進行z順序插入

我想根據插入順序（推到最后）或基于名為 z 的物件屬性以遞增順序插入陣列。（例如，在 2d 圖形中繪制順序，添加的順序或被 z 順序覆寫）。

下面的代碼為此付出了很多麻煩，向后回圈，發現索引太遠，跳過一個箍插入而沒有突變。（從這里借來的）。

似乎應該有比我擁有的更簡潔和實用的東西。我是否遺漏了可以簡化和改進它的語言的某些部分？

編輯我一直在考慮findIndex這種方法，但我認為我需要類似reverseFindIndex, 以在 z 相等時獲得最后的插入順序，并且在我知道索引后我仍然想改進非變異插入。

let children = [
  { z: 10 }, { z: 10 }, { z: 0 }, { z: 0 }, { z: -1 }, { z: -1 }
]

function insertZ(object, children) {
  for (var index = children.length - 1; index >= 0; index--) { // yuck, not functional
    if (object.z <= children[index].z) break;  // yuck, break
  }
  index  ;  // yuck, went too far
  return [  // yuck, ugly non-mutating insert
  ...children.slice(0, index),
  object,
  ...children.slice(index)
  ]
}

let object = { z: 7, name: 'new guy' }   // after the 10s, before the 0s
// other test cases...
// let object = { z: 10, name: 'new guy' }  // after the 10s, before the 0s 
// let object = { z: -1, name: 'new guy' }  // after the -1s
// let object = { z: 90, name: 'new guy' }  // before everything

console.log(insertZ(object, children))

uj5u.com熱心網友回復：

您可以使用遞回來查找插入點，并傳遞索引：

function insertZ(object, children, index = 0) {
    if (index >= children.length || children[index].z < object.z) {
        return [
            ...children.slice(0, index),
            object,
            ...children.slice(index),
        ];
    }
    return insertZ(object, children, index   1);
}

現場示例：

顯示代碼片段

let children = [{ z: 10 }, { z: 10 }, { z: 0 }, { z: 0 }, { z: -1 }, { z: -1 }];

function insertZ(object, children, index = 0) {
    if (index >= children.length || children[index].z < object.z) {
        return [
            ...children.slice(0, index),
            object,
            ...children.slice(index),
        ];
    }
    return insertZ(object, children, index   1);
}

let object1 = { z: 7, name: "new guy" };    // after the 10s, before the 0s
console.log(insertZ(object1, children));
let object2 = { z: 10, name: "new guy" };   // after the 10s, before the 0s
console.log(insertZ(object2, children));
let object3 = { z: -1, name: "new guy" };   // after the -1s
console.log(insertZ(object3, children));
let object4 = { z: 90, name: "new guy" };   // before everything
console.log(insertZ(object4, children));
// Testing adding to an empty array
console.log(insertZ(object4, []));

.as-console-wrapper {
    max-height: 100% !important;
}

如果需要，為了避免呼叫者傳遞 duff 索引，可以通過私有內部函式完成作業：

顯示代碼片段

let children = [{ z: 10 }, { z: 10 }, { z: 0 }, { z: 0 }, { z: -1 }, { z: -1 }];

function insertZ(object, children) {
    const worker = (object, dhildren, index = 0) => {
        if (index >= children.length || children[index].z < object.z) {
            return [
                ...children.slice(0, index),
                object,
                ...children.slice(index),
            ];
        }
        return worker(object, children, index   1);
    };
    return worker(object, children);
}

let object1 = { z: 7, name: "new guy" };    // after the 10s, before the 0s
console.log(insertZ(object1, children));
let object2 = { z: 10, name: "new guy" };   // after the 10s, before the 0s
console.log(insertZ(object2, children));
let object3 = { z: -1, name: "new guy" };   // after the -1s
console.log(insertZ(object3, children));
let object4 = { z: 90, name: "new guy" };   // before everything
console.log(insertZ(object4, children));
// Testing adding to an empty array
console.log(insertZ(object4, []));

.as-console-wrapper {
    max-height: 100% !important;
}

或者，您可以對一堆臨時陣列使用遞回：

function insertZ(object, children) {
    if (children.length === 0) {
        return [object];
    }
    const [first] = children;
    if (first.z < object.z) {
        return [object, ...children];
    }
    return [first, ...insertZ(object, children.slice(1))];
}

現場示例：

顯示代碼片段

let children = [{ z: 10 }, { z: 10 }, { z: 0 }, { z: 0 }, { z: -1 }, { z: -1 }];

function insertZ(object, children) {
    if (children.length === 0) {
        return [object];
    }
    const [first] = children;
    if (first.z < object.z) {
        return [object, ...children];
    }
    return [first, ...insertZ(object, children.slice(1))];
}

let object1 = { z: 7, name: "new guy" };    // after the 10s, before the 0s
console.log(insertZ(object1, children));
let object2 = { z: 10, name: "new guy" };   // after the 10s, before the 0s
console.log(insertZ(object2, children));
let object3 = { z: -1, name: "new guy" };   // after the -1s
console.log(insertZ(object3, children));
let object4 = { z: 90, name: "new guy" };   // before everything
console.log(insertZ(object4, children));
// Testing adding to an empty array:
console.log(insertZ(object4, []));

.as-console-wrapper {
    max-height: 100% !important;
}

uj5u.com熱心網友回復：

畢竟下面的代碼片段將推送一個新物件z > <target_value>，即使已經有相同的物件z

let children = [
  { z: 10 }, { z: 10 }, { z: 7 }, { z: 0 }, { z: 0 }, { z: -1 }, { z: -1 }
]

let object = { z: 7, name: 'new guy' }   // after the 10s, before the 0s
children.push(object);
children.sort((a, b) => a.z > b.z ? -1 : 1);
console.log(children);

如果你想在你只需將條件更改為之前插入它a.z >= b.z。

let children = [
  { z: 10 }, { z: 10 }, { z: 7 }, { z: 0 }, { z: 0 }, { z: -1 }, { z: -1 }
]

let object = { z: 7, name: 'new guy' }   // after the 10s, before the 0s
children.push(object);
children.sort((a, b) => a.z >= b.z ? -1 : 1);
console.log(children);

標籤：javascript

上一篇：拖放后重新渲染

下一篇：如何從物件串列中獲取唯一值？