JSFiddle - React, Tailwind, and code Playground

HTML

Look in the console.

JavaScript

// Rules:
//  * An object's own properties come first, followed by prototype properties that
//    haven't already been visited.
//  * Properties with names that are "array indexes" are before others and in order
//    numerically.
//  * They're followed by String-named properties in creation order.
//  * They're followed by Symbol-named properties in creation order (not tested here
//    because we're looking at `for-in` and `Object.keys`, neither of which visits
//    Symbol-named properties).

// A prototype for our target object
const p = {
    // Won't be visited at all, superceded by o.foo
    "foo":      null,
    // Will be index 6 in an `in` loop, won't be in `keys` at all (not own)
    "bar":      6,
    // Will be index 7 in an `in` loop, won't be in `keys` at all (not own)
    "bongo":    7,
    // Will be index 5 in an `in` loop (array index)
    2:          5,
    // Will be index 4 in an `in` loop (array index)
    "1":        4,
    // Won't be in either
    [Symbol()]: null
};

// Our target object
const o = Object.create(p);
// Will be index 2 visited
o.foo = 2;
// Won't be visited by either
o[Symbol()] = null;
// Will be index 1 visited (array index)
o[4] = 1;
// Will be index 0 visited (array index)
o["3"] = 0;
// Will be index 3 visited
o.baz = 3;
let expect = 0;
let good = true;
console.log("for-in:");
for (const name in o) {
    const v = o[name];
    console.log(name, v, v == expect);
    good = good && v == expect;
    ++expect;
}
console.log("for-in: " + (good ? "All good" : "Order not respected"));
console.log("Object.keys:");
good = true;
Object.keys(o).forEach((name, expect) => {
    const v = o[name];
    console.log(name, v, v == expect);
    good = good && v == expect;
});
console.log("Object.keys: " + (good ? "All good" : "Order not respected"));