Verwenden Sie Objekte als Arrays für große Datenmengen in JS

Meistens haben wir Daten in einem Array-Typ verwendet und viele Funktionen zum Filtern von Arrays verwendet.

Wenn Sie ein Array für small amount of data verwenden , es ist in Ordnung, da es nur eine kleine Datenmenge ist. Wenn Sie jedoch mit vielen Daten arbeiten, können Sie diese genauso gut als object speichern .

Sehen wir uns die Leistung an

Wenn es um die Leistung geht, ist das Abrufen von Daten aus einem Array zeitaufwändig, da Sie alle Elemente in einem Array überprüfen müssen.

let array = [
    {
        id: 1,
        name: "John",
        age: 23
    },
    {
        id: 2,
        name: "Samuel",
        age: 21
    },
    {
        id: 3,
        name: "marvin",
        age: 26
    },
    {
        id: 4,
        name: "james",
        age: 28
    }
];

let getUser = array.filter((person) => person.id === 3)[0]
console.log(getUser)

// output: { id: 3, name: 'marvin', age: 26 }

Während Sie in Object die Eigenschaftsnamen als ID ändern können (Sie können beim Benennen der Eigenschaften für Ihre Objekte kreativ sein), wird das Abrufen von Daten noch schneller.

// in this example the properties name I did, is a string "id_"+id
let objects = {
    id_1: {
        id: 1,
        name: "John",
        age: 23
    },
    id_2: {
        id: 2,
        name: "Samuel",
        age: 21
    },
    id_3: {
        id: 3,
        name: "marvin",
        age: 26
    },
    id_4: {
        id: 4,
        name: "james",
        age: 28
    }
};

console.log(objects.id_4); // or objects['id_4']
//{ id: 4, name: 'james', age: 28 }

Wenn Sie sich Objekte ansehen, können wir Daten einfach mit Eigenschaftsnamen abrufen, was es noch schneller macht, Sie müssen nicht alle Daten in einer Schleife durchlaufen.

Hier ist ein Leistungstest mit einem Low-Spec-Laptop.

var a1 = [{id: 29938, name: 'name1'}, {id: 32994, name: 'name1'}];

var a2 = []; // this is the array
a2[29938] = {id: 29938, name: 'name1'};
a2[32994] = {id: 32994, name: 'name1'};

var o = {}; // this is the object
o['29938'] = {id: 29938, name: 'name1'};
o['32994'] = {id: 32994, name: 'name1'};

// lets generate 2000 data on each.
for (var f = 0; f < 2000; f++) { //lets add items to our array a2 and object variable called o,
    var newNo = Math.floor(Math.random()*60000+10000); 
    if (!o[newNo.toString()]) o[newNo.toString()] = {id: newNo, name: 'test'};
    if (!a2[newNo]) a2[newNo] = {id: newNo, name: 'test' };
    a1.push({id: newNo, name: 'test'});
}

Der erste Test ist ein Array.

var id = 29938;
var result;
for (var i = 0; i < a1.length; i++) {
    if(a1[i].id === id) {
        result = a1[i];
        break;
    }
}
console.log(result);
// this took 1049 ms

Der 2. Test ist das assoziative Array (Objekt).

var id = 29938;
var result = a2[id];
console.log(result)
// this took 43ms!!!

Der 3. Test ist das Objekt.

var id = '29938';
var result = o[id];
console.log(result)
// this took 51ms!!!

Wie Sie sehen können, haben wir mehr als 2000 Daten generiert, und assoziatives Array (Objekte) und der Objekttyp sind hier klare Gewinner.

Danke, dass Sie meine kurzen Artikel gelesen haben. Wenn Sie mir Kaffee kaufen möchten, klicken Sie auf das Bild.