Operator delete jest nieoczekiwanie powolny!

Spójrz na benchmark.

Delete jest jedynym prawdziwym sposobem na usunięcie właściwości obiektu bez żadnych resztek, ale działa ~ 100 razy wolniej , w porównaniu z jego "alternatywą", Ustawienie object[key] = undefined.

Ta alternatywa nie jest poprawną odpowiedzią na to pytanie! Ale jeśli używasz go ostrożnie, możesz znacznie przyspieszyć niektóre algorytmy. Jeśli używasz delete w pętlach i masz problemy z performance, przeczytaj szczegółowe wyjaśnienie.

Kiedy należy użyć delete i kiedy ustawić wartość na undefined ?

Obiekt może być postrzegany jako zbiór par klucz-wartość. To, co nazywam "wartością", jest prymitywnym lub odniesieniem do innego obiektu, połączonego z tym "kluczem".

Użycie delete, gdy przekazujesz obiekt wyniku do kodu, nad którym nie masz kontroli (lub gdy nie jesteś pewien swojego zespołu lub siebie).

To usuwa klucz z hashmap .

 var obj = {
     field: 1     
 };
 delete obj.field;

Użyj ustawienia do undefined, kiedy zależy ci na wydajności. To może dać poważny impuls do kodu.

Klucz pozostaje na swoim miejscu w hashmapie , tylko wartość jest zastępowana przez undefined. Zrozum, że pętla for..in nadal będzie się powtarzała nad tym kluczem.

 var obj = {
     field: 1     
 };
 obj.field = undefined;

Używając tej metody, nie wszystkie sposoby określania istnienia własności będą działać zgodnie z oczekiwaniami.

Jednak to kod:

object.field === undefined

Będzie zachowywać się równoważnie dla obu metod.

Testy

Podsumowując, różnice dotyczą sposobów określania istnienia własności oraz pętli for..in.

 console.log('* -> "Takes prototype inheritance into consideration, that means it lookups all over prototype chain too."');

 console.log(obj.field === undefined, 'obj.field === undefined', 'You get "undefined" value when querying for "field" in object-hashmap. *');

 console.log(obj["field"] === undefined, 'obj["field"] === undefined', 'Just another way to query (equivalent). *');

 console.log(typeof obj.field === "undefined", 'typeof obj.field === "undefined"', 'Get the value attached to "field" key, and check it\'s type is "undefined". *');

 console.log("field" in obj, '"field" in obj', 'This statement returns true if "field" key exists in the hashmap. False otherwise. *');

 console.log(obj.hasOwnProperty("field"), 'obj.hasOwnProperty("field")', 'This statement returns true if \'field\' key exists in the hashmap. The ONLY way NOT to lookup for property in the prototype chain!');
 //Object.keys().indexOf() is an overkill that runs much slower :)

 var counter = 0,
     key;
 for (key in obj) {
     counter++;
 }
 console.assert(counter === 0, 'counter === 0', '"field" is not iterated using "for .. in" loop. *');

Uważaj Na Wycieki Pamięci!

Podczas gdy używanie obj[prop] = undefined jest szybsze niż wykonywanie delete obj[prop], inną ważną kwestią jest to, że obj[prop] = undefined może nie zawsze być właściwe. delete obj[prop] usuwa prop z obj i usuwa go z pamięci, podczas gdy obj[prop] = undefined po prostu ustawia wartość prop do undefined, która pozostawia prop nadal w pamięci. W związku z tym, w sytuacjach, gdy istnieje wiele kluczy tworzonych i usuwanych, użycie obj[prop] = undefined może wymusić kosztowne uzgadnianie pamięci (powodując zamrożenie strony) i potencjalnie błąd poza pamięcią. Sprawdź poniższy kod.

"use strict";
var theNodeList=[], i, current, numberOfNodes=65536, body=document.body, nodeRecords=[];
for (i = 0; i !== numberOfNodes; i++) {
    nodeRecords[i] = [];
    current = theNodeList[i] = document.createElement("div");
    current.textContent = i;
    document.body.appendChild( current );
}
var lastTime = -1;
requestAnimationFrame(function recordUpdates(){
    var currentTime = Math.round( performance.now()*1000 )
    for (i = 0; i !== numberOfNodes; i++) {
        if (lastTime !== -1) {
            // the previously collected data is no longer in use
            /*************************************************/
            /****/ nodeRecords[i][lastTime] = undefined; /****/
            /*************************************************/
        }
        nodeRecords[i][currentTime] = theNodeList[i].outerHTML;
    }
    lastTime = currentTime;
    requestAnimationFrame( recordUpdates );
});

W powyższym kodzie po prostu wykonanie nodeRecords[i][lastTime] = undefined; spowoduje ogromny wyciek pamięci, ponieważ każda klatka animacji. Każda ramka, wszystkie 65536 elementów DOM zajmie kolejne 65536 Indywidualne slotów, ale poprzednie 65536 slotów będzie ustawione tylko na undefined co pozostawia je wiszące w pamięci. Śmiało, spróbuj uruchomić powyższy kod w konsoli i przekonaj się sam. Po wymuszeniu błędu out-of-memory, spróbuj uruchomić go ponownie, z wyjątkiem następującej wersji kodu, która zamiast tego używa operatora delete.

"use strict";
var theNodeList=[], i, current, numberOfNodes=65536, body=document.body, nodeRecords=[];
for (i = 0; i !== numberOfNodes; i++) {
    nodeRecords[i] = [];
    current = theNodeList[i] = document.createElement("div");
    current.textContent = i;
    document.body.appendChild( current );
}
var lastTime = -1;
requestAnimationFrame(function recordUpdates(){
    var currentTime = Math.round( performance.now()*1000 )
    for (i = 0; i !== numberOfNodes; i++) {
        if (lastTime !== -1) {
            // the previously collected data is no longer in use
            /********************************************/
            /****/ delete nodeRecords[i][lastTime]; /****/
            /********************************************/
        }
        nodeRecords[i][currentTime] = theNodeList[i].outerHTML;
    }
    lastTime = currentTime;
    requestAnimationFrame( recordUpdates );
});

Jak widać w powyższym fragmencie kodu, istnieją rzadkie przypadki użycia operatora delete. Jednak nie martw się tym problemem zbytnio. Będzie to problem tylko z obiektami o długiej żywotności, które otrzymują nowe klucze stale dodawane do nich. W każdym innym przypadku (co jest prawie w każdym przypadku programowania w świecie rzeczywistym), najodpowiedniejsze jest użycie obj[prop] = undefined. Głównym celem tej sekcji jest zwrócenie na to uwagi, aby w rzadkich przypadkach, gdy stanie się to problemem w Twoim kodzie, możesz łatwiej zrozumieć problem, a tym samym nie musisz marnować godzin na rozcinanie kodu, aby zlokalizować i zrozumieć ten problem problem.

Nie Zawsze Należy Ustawić undefined

Jednym z aspektów Javascript, który należy wziąć pod uwagę, jest polimorfizm. Polimorfizm polega na przypisaniu tej samej zmiennej / slot-in-an-object różnych typów, jak pokazano poniżej.

var foo = "str";
foo = 100;          // variable foo is now labeled polymorphic by the browser
var bar = ["Some", "example"];
bar[2] = "text";    // bar is a monomorphic array here because all its entries have the
                    // same type: string primitive
bar[1] = undefined; // bar is now a polymorphic array

1. są powolne i nieefektywne w pamięci. Podczas uzyskiwania dostępu do określonego indeksu, zamiast tylko uzyskać globalny typ tablicy, Przeglądarka zamiast tego ma aby uzyskać typ na podstawie indeksu, przy czym każdy indeks przechowuje dodatkowe metadane swojego typu.
2. raz polimorficzny, zawsze polimorficzny. Gdy tablica jest polimorficzna, polimorfizmu nie można cofnąć w przeglądarkach Webkit. Tak więc, nawet jeśli przywrócisz tablicę polimorficzną do stanu niematerialnego, będzie ona nadal przechowywana przez przeglądarkę jako tablica polimorficzna.

Ale jak analogia narkotykowa ma związek z operacją delete? Odpowiedź dziedziczy ostatnią linię kodu w powyższym fragmencie. Tak więc niech zostanie ponownie zbadane, tym razem z twist.

var bar = ["Some", "example"];
bar[2] = "text";    // bar is not a polymorphic array here because all its entries have the
                    // same type: string primitive
bar[1] = "";        // bar is still a monomorphic array
bar[1] = undefined; // bar is now a polymorphic array

Obserwuj. bar[1] = "" nie wymusza polimorfizmu, podczas gdy bar[1] = undefined robi. Dlatego zawsze, o ile to możliwe, należy użyć odpowiedniego typu dla swoich obiektów, aby nie spowodować przypadkowo polimorfizmu. Jedna z takich osób może użyć poniższej listy jako ogólnego odniesienia, aby uzyskać idą. Prosimy jednak nie korzystać wyraźnie z poniższych pomysłów. Zamiast tego użyj tego, co działa dobrze dla Twojego kodu.

• gdy używasz tablicy / zmiennej wpisanej do Boolean primitive, użyj false lub undefined jako pustej wartości. Chociaż unikanie niepotrzebnego polimorfizmu jest dobre, przepisanie całego kodu, aby wyraźnie go zabronić, prawdopodobnie spowoduje spadek wydajności. Używaj powszechnego osądu!
• przy użyciu tablicy / zmiennej wpisanej do liczby, użyj 0 jako pustej wartości. Zauważ, że wewnętrznie istnieją dwa typy liczb: szybkie liczby całkowite (2147483647 do -2147483648 włącznie) i powolne liczby zmiennoprzecinkowe (Wszystko inne niż NaN i Infinity). Gdy liczba całkowita jest zdegradowana do liczby podwójnej, nie może być promowana z powrotem do liczby całkowitej.
• podczas używania tablicy / zmiennej wpisanej do ciągu znaków primitive, użyj "" jako pustej wartości.
• kiedy używasz symbolu, czekaj, dlaczego używasz symbolu?!?! Symbolami są złe juju dla wydajności. Wszystko zaprogramowane do używania symboli może być przeprogramowane tak, aby nie używać symboli, co skutkuje szybszym kodem bez symboli. Symbole są naprawdę super nieefektywne meta-cukier.
• kiedy używasz czegokolwiek innego, używaj null.

Jednakże, należy pamiętać! Nie zaczynaj nagle robić tego z całym swoim istniejącym kodem teraz, ponieważ prawdopodobnie złamie to taki istniejący kod i / lub wprowadzi dziwne błędy. Raczej taka skuteczna praktyka musi być zaimplementowane od samego początku, a podczas konwersji istniejącego kodu zaleca się podwójne, potrójne, poczwórne sprawdzenie wszystkich linii odnoszących się do tego, ponieważ próba uaktualnienia starego kodu do tej nowej praktyki może być równie ryzykowna, jak satysfakcjonująca.

var myObject = {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"};
    
delete myObject.regex;

console.log ( myObject.regex); // logs: undefined

To działa w Firefoksie i Internet Explorerze, i myślę, że działa we wszystkich innych.

Aktualizacja 2018-07-21: przez długi czas czułem się zażenowany tą odpowiedzią, więc myślę, że nadszedł czas, aby poprawić ją trochę. Wystarczy mały komentarz, wyjaśnienie i formatowanie, aby przyspieszyć czytanie niepotrzebnie długich i zawiłych części tej odpowiedzi.

WERSJA SKRÓCONA

Rzeczywista odpowiedź na pytanie

Jak mówili inni, możesz użyć delete.

obj // {"foo": "bar"}
delete obj["foo"]
obj // {}
obj["foo"] // undefined

Odpowiednik tablicy

Nie delete z tablicy. Zamiast tego użyj Array.prototype.splice.

arr // [1,2,3,4,5]
arr.splice(3,1); // 4
arr // [1,2,3,5]

WERSJA DŁUGA

JavaScript jest językiem OOP, więc wszystko jest obiektem, łącznie z tablicami . Dlatego uważam, że konieczne jest zwrócenie szczególnej uwagi.

W tablicach, w przeciwieństwie do zwykłych starych obiektów, używając delete pozostawia śmieci w postaci null, tworząc "dziurę" w tablicy.

var array = [1, 2, 3, 4];
delete array[2];
/* Expected result --> [1, 2, 4]
 * Actual result   --> [1, 2, null, 4]
 */

Jak widzisz, delete nie zawsze działa tak, jak można się spodziewać. Wartość jest nadpisywana, ale pamięć nie jest ponownie przydzielona. To znaczy, array[4] nie jest przeniesiony do array[3]. Co jest przeciwieństwem Array.prototype.unshift, która wstawia element na początku tablicy i przesuwa wszystko w górę (array[0] staje się array[1], itd.)

Szczerze mówiąc, poza ustawieniem na null, a nie undefined--co jest prawnie dziwne--to zachowanie nie powinno być zaskakujące, ponieważ delete jest operatorem jednoargumentowym, jak typeof, który jest mocno zagotowany w języku i nie powinien się przejmować o typie obiektu, na którym jest używany, podczas gdy Array jest podklasą Objectz metodami zaprojektowanymi specjalnie do pracy z tablicami. Nie ma więc żadnego powodu, aby delete mieć przygotowaną specjalną sprawę do ponownego przesunięcia tablicy, ponieważ to po prostu spowolniłoby sprawę niepotrzebną pracą. Z perspektywy czasu moje oczekiwania były nierealne.

Ignorowanie niebezpieczeństw i problemów związanych z null i marnowaniem przestrzeni może być problematyczne, jeśli tablica musi być precyzyjna.

Co jest strasznym usprawiedliwieniem dla pozbycia sięnull s--null jest niebezpieczne tylko wtedy, gdy jest używane niewłaściwie, i nie ma nic wspólnego z"precyzją". Prawdziwym powodem, dla którego nie powinieneś delete z tablicy jest to, że pozostawianie wypełnionych śmieciami i niechlujnych struktur danych jest niechlujne i podatny na robaki.

To, co następuje, to wymyślony scenariusz, który jest dość długi, więc możesz przejść do sekcji, rozwiązanie , jeśli chcesz. Jedynym powodem, dla którego opuszczam tę sekcję, jest to, że myślę, że niektórzy ludzie prawdopodobnie uważają, że jest zabawna, i nie chcę być "tym facetem", który publikuje "zabawną" odpowiedź, a następnie usuwa z niej wszystkie "zabawne" później.

Wymyślony i długi scenariusz PDP-11

Dla na przykład, powiedzmy, że tworzysz aplikację webową, która używa serializacji JSON do przechowywania tablicy używanej do "tabulatorów"w łańcuchu znaków (w tym przypadku localStorage). Załóżmy również, że kod wykorzystuje indeksy liczbowe członków tablicy, aby "tytułować" je podczas rysowania na ekranie. Dlaczego to robisz, a nie tylko przechowujesz "tytuł"? Ponieważ... powody .

Dobra, powiedzmy, że próbujesz zapisać pamięć na prośbę tego jednego użytkownika, który uruchamia PDP-11 minikomputer z lat 60-tych z systemem UNIX i napisał własną, opartą na Elinks, zgodną z JavaScript, przyjazną dla Drukarki, przeglądarkę, ponieważ X11 jest wykluczone.

Pomijając coraz bardziej głupi scenariusz edge, użycie {[11] } na wspomnianej tablicy spowoduje null zanieczyszczenie tablicy i prawdopodobnie później spowoduje błędy w aplikacji. A jeśli sprawdzisz null, to po prostu pominiesz liczby, co spowoduje, że karty będą renderowane jak [1] [2] [4] [5] ....

if (array[index] == null)
    continue;
else
    title = (index + 1).toString();
/* 0 -> "1"
 * 1 -> "2"
 * 2 -> (nothing)
 * 3 -> "4"
 */

Tak, zdecydowanie nie tego chciałaś.

Teraz, można zachować drugi iterator, Jak j, aby zwiększyć tylko wtedy, gdy ważne wartości są odczytywane z tablicy. Ale to nie rozwiązałoby problemu null, a i tak musisz zadowolić tego trolla użytkownika PDP-11. Niestety, jego komputer po prostu nie ma wystarczająco dużo pamięci, aby pomieścić ostatnią liczbę całkowitą_{(Nie pytaj, jak radzi sobie z tablicą o zmiennej szerokości...)}.

Więc, on wysyła Ci e-mail w gniewie:

Hey, your webapp broke my browser! I checked my localStorage database after your stupid code made my browser segfault, and this is what I found:

>"tabs:['Hello World', 'foo bar baz', null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, null, ... ]"

After clearing my precious data, it segfaulted again, and I did a backtrace, and what do I find? WHAT DO I FIND!? YOU USE TOO MANY VARIABLES!

>var i = index;
>var j = 1;

Grr, I am angry now.
-Troll Davidson

/ Align = "left" / Ten facet ciągle narzeka na Twoją aplikację, a Ty chcesz mu powiedzieć, żeby się zamknął i poszedł po lepszy komputer.

Rozwiązanie: Array.prototype.splice

Na szczęście tablice mają wyspecjalizowaną metodę usuwania indeksów i realokacji pamięci: Array.prototype.splice(). Mógłbyś napisać coś takiego:

Array.prototype.remove = function(index){
  this.splice(index,1);
}
...
array = [1, 2, 3, 4];
array.remove(2);
// Result -> [1, 2, 4]

I tak po prostu, zadowoliłeś Pana PDP-11. Hura! [140]}(i tak bym mu to powiedział...)

Array.prototyp.splice vs Array.prototyp.slice

Uważam, że ważne jest zwrócenie uwagi na różnicę między tymi dwoma funkcjami o podobnej nazwie, ponieważ obie są bardzo przydatne.

Array.prototyp.splice (start, n)

.splice() mutuje tablicę i zwraca usunięte indeksy. Tablica jest wycinana począwszy od indeksu, start, A n elementy są wycinane. Jeśli n jest nieokreślone, cała tablica po wycięciu start (n = array.length - start).

let a = [5,4,3,2,1];
let chunk = a.splice(2,2);

// a     [5,4,3,2,1]
// start  0 1 2 - -
// n      - - 1 2 -

chunk; // [3,2]
a;     // [5,4,1]

Array.prototyp.slice (początek, koniec)

.slice() jest nieniszcząca i zwraca nową tablicę zawierającą wskazane indeksy od start do end. Jeśli end jest nieokreślone, zachowanie jest takie samo jak .splice() (end = array.length). Zachowanie jest nieco trudne, ponieważ z jakiegoś powodu end indeksy od 1 zamiast 0. Nie wiem, dlaczego to robi, ale tak to jest. Ponadto, jeśli end <= start, wynik jest pusty / align = "left" /

let a = [5,4,3,2,1];
let chunks = [
    a.slice(2,0),
    a.slice(2,2),
    a.slice(2,3),
    a.slice(2,5) ];

// a             [5,4,3,2,1]
// start          0 1 2 - -
// end, for...    - - - - -
//   chunks[0]  0 - - - - -   
//   chunks[1]    1 2 - - -
//   chunks[2]    1 2 3 - -
//   chunks[3]    1 2 3 4 5

chunks; // [ [], [], [3], [3,2,1] ]
a;      // [5,4,3,2,1]

To właściwie nie jest to, co się dzieje, ale łatwiej jest myśleć o tym w ten sposób. Według MDN, oto co się naprawdę dzieje:

// a             [5,4,3,2,1]
// start          0 1 2 - - -
// end, for...    - - - - - -
//   chunks[0]    0 - - - - -
//   chunks[1]    0 1 2 - - -
//   chunks[2]    0 1(2)3 - -
//   chunks[3]    0 1(2 3 4)5

Indeks określony przez end jest po prostu wykluczony z plasterka. Wskaźniki w nawiasach wskazują, co zostanie pocięte. Tak czy inaczej, zachowanie nie jest intuicyjne i z pewnością spowoduje, że jego część błędów off-by-one, więc może okazać się przydatna funkcja owijania, aby ściślej naśladować zachowanie .splice():

function ez_slice(array, start = 0, n = null){
    if(!Array.isArray(array) || !is_number(start))
        return null;

    if(is_number(n))
        return array.slice(start, start + n);

    if(n === null)
        return array.slice(start);

    return null;
}

ez_slice([5,4,3,2,1], 2, 1) // [3]
ez_slice([5,4,3,2,1], 2)    // [3,2,1]

/* Fun fact: isNaN is unreliable.
 * [NaN, [], {}, 0, 1, Infinity, undefined, null, "Hi"].filter(isNaN)
 * [NaN, {}, undefined, "Hi"]
 *
 * What we want is...
 *
 * [NaN, [], {}, 0, 1, Infinity, undefined, null, "Hi"].filter(is_nan)
 * [NaN]
 */
function is_nan(num){
    return typeof num === "number"
        && num !== num;
}

function is_number(num){
    return !is_nan(num)
        && typeof num === "number"
        && isFinite(num);
}

Zauważ, że funkcja wrapper jest zaprojektowana tak, aby była bardzo ścisła w odniesieniu do typów i zwróci null, jeśli cokolwiek jest wyłączone. To obejmuje umieszczenie w łańcuchu jak "3". Od programisty zależy sumienność w odniesieniu do jego typów. Ma to zachęcić do dobrych praktyk programistycznych.

Aktualizacja dotycząca is_array()

To dotyczy tego (teraz-usuniętego) fragmentu:

function is_array(array){
    return array !== null
        && typeof array === "object"
        && typeof array.length !== "undefined"
        && array.__proto__ === Array.prototype;
}

Więc jak się okazuje, istnieje wbudowany sposób, aby stwierdzić, czy array jest tablicą, czyli Array.isArray(), wprowadzoną w ECMAScript 5 (Grudzień 2009). Znalazłem to, gdy szukałem, czy nie było pytanie pytające o odróżnianie tablic od obiektów, aby zobaczyć, czy nie było lepszego rozwiązania niż Moje, lub dodać moje, jeśli nie było żadnego. Tak więc, jeśli używasz wersji JavaScript, która jest wcześniejsza niż ECMA 5, jest Twój polyfill. Jednak zdecydowanie odradzam używanie mojej funkcji is_array(), ponieważ kontynuowanie obsługi starych wersji JavaScript oznacza kontynuowanie obsługi starych przeglądarek, które je implementują, co oznacza zachęcanie do korzystania z niebezpiecznego oprogramowania i narażanie użytkowników na złośliwe oprogramowanie. Więc proszę, użyj Array.isArray(). Użyj let i const. Korzystaj z nowych funkcji dodawanych do języka. Nie używaj prefiksów dostawcy. Usuń to gówno IE polyfill ze swojej strony. Usuń też ten gówniany XHTML <!CDATA[[... -- przenieśliśmy się do HTML5 w 2014 roku. Im szybciej wszyscy wycofają poparcie dla tych starych / ezoterycznych przeglądarek, tym im szybciej dostawcy przeglądarek zastosują się do standardu internetowego i zastosują nową technologię, tym szybciej przejdziemy do bezpieczniejszej sieci.

Stare pytanie, Nowoczesna odpowiedź. Korzystanie z funkcji destrukcji obiektów, ECMAScript 6 , jest tak proste, jak:

const { a, ...rest } = { a: 1, b: 2, c: 3 };

Lub z próbką pytań:

const myObject = {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"};
const { regex, ...newObject } = myObject;
console.log(newObject);

Możesz zobaczyć go w akcji w edytorze Babel try-out.

Edit:

Aby przypisać tę samą zmienną, użyj let:

let myObject = {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"};
({ regex, ...myObject } = myObject);
console.log(myObject);

Inną alternatywą jest użycie podkreślenia .biblioteka js.

Zauważ, że _.pick() i _.omit() obie zwracają kopię obiektu i nie modyfikują bezpośrednio oryginalnego obiektu. Przypisanie wyniku do oryginalnego obiektu powinno załatwić sprawę (nie pokazano).

Referencja: link _.pick (object, * keys)

Zwraca kopię obiektu, przefiltrowaną tak, aby miała tylko wartości dla klucze z białej listy (lub tablica ważnych kluczy).

var myJSONObject = 
{"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"};

_.pick(myJSONObject, "ircEvent", "method");
=> {"ircEvent": "PRIVMSG", "method": "newURI"};

Odniesienie: link _.omit (object, *keys)

Zwraca kopię obiektu, przefiltrowaną w celu pominięcia klawisze na czarnej liście (lub tablica klawiszy).

var myJSONObject = 
{"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"};

_.omit(myJSONObject, "regex");
=> {"ircEvent": "PRIVMSG", "method": "newURI"};

Dla tablic, _.filter() i _.reject() mogą być używane w podobny sposób.

Termin, którego użyłeś w tytule pytania Remove a property from a JavaScript object, można interpretować na różne sposoby. Jednym z nich jest usunięcie go dla całej pamięci, a lista kluczy obiektów lub druga jest po prostu usunięcie go z obiektu. Jak wspomniano w niektórych innych odpowiedziach, słowo kluczowe delete jest główną częścią. Załóżmy, że masz swój obiekt:

myJSONObject = {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"};

Jeśli zrobisz:

console.log(Object.keys(myJSONObject));

Wynik będzie:

["ircEvent", "method", "regex"]

Możesz usunąć ten konkretny klucz z kluczy obiektu like:

delete myJSONObject["regex"];

Wtedy twój klucz obiektowy używając Object.keys(myJSONObject) będzie:

["ircEvent", "method"]

Ale chodzi o to, że jeśli zależy ci na pamięci i chcesz, aby obiekt został usunięty z pamięci, zaleca się ustawienie go na null przed usunięciem klucza:

myJSONObject["regex"] = null;
delete myJSONObject["regex"];

Innym ważnym punktem tutaj jest uważanie na inne odniesienia do tego samego obiektu. Na przykład, jeśli utworzysz zmienną taką jak:

var regex = myJSONObject["regex"];

Lub dodać go jako nowy wskaźnik do innego obiektu like:

var myOtherObject = {};
myOtherObject["regex"] = myJSONObject["regex"];

Wtedy nawet jeśli usuniesz go ze swojego obiektu myJSONObject, ten konkretny obiekt nie zostanie usunięty z pamięci, ponieważ zmienna regex i myOtherObject["regex"] nadal mają swoje wartości. Więc jak możemy na pewno usunąć obiekt z pamięci?

Odpowiedzią byłobyusunięcie wszystkich odniesień, które masz w kodzie, wskazanie na ten właśnie obiekt , a także Nie używanie instrukcjivar do tworzenia nowych odniesień do tego obiektu . Ten ostatni punkt dotyczący var statements, jest jednym z najważniejszych problemów, z którymi zwykle mamy do czynienia, ponieważ użycie var statements uniemożliwiłoby usunięcie utworzonego obiektu.

Co oznacza, że w tym przypadku nie będziesz mógł usunąć tego obiektu, ponieważ utworzyłeś zmienną regex za pomocą instrukcji var, a jeśli to zrobisz:

delete regex; //False

Wynikiem będzie false, co oznacza, że polecenie delete nie zostało wykonane zgodnie z oczekiwaniami. Ale gdybyś nie stworzył tego zmienna wcześniej, a miałeś tylko myOtherObject["regex"] jako ostatnią istniejącą referencję, mogłeś to zrobić po prostu usuwając ją w ten sposób:

myOtherObject["regex"] = null;
delete myOtherObject["regex"];

Innymi słowy, obiekt JavaScript zostaje zabity, gdy tylko nie ma odniesienia w kodzie wskazującym na ten obiekt.

Aktualizacja: Dzięki @AgentME:

Ustawienie właściwości NA null przed jej usunięciem nie powoduje cokolwiek (chyba że obiekt został zapieczętowany przez obiekt.foka i usuwanie nie powiodło się. Zazwyczaj tak nie jest, chyba że konkretnie try).

Aby uzyskać więcej informacji na Object.seal: obiekt.foka()

Załóżmy, że masz obiekt, który wygląda tak:

var Hogwarts = {
    staff : [
        'Argus Filch',
        'Filius Flitwick',
        'Gilderoy Lockhart',
        'Minerva McGonagall',
        'Poppy Pomfrey',
        ...
    ],
    students : [
        'Hannah Abbott',
        'Katie Bell',
        'Susan Bones',
        'Terry Boot',
        'Lavender Brown',
        ...
    ]
};

Usuwanie właściwości obiektu

Jeśli chcesz użyć całej tablicy staff, właściwym sposobem na to jest:

delete Hogwarts.staff;

Alternatywnie, możesz również zrobić to:

delete Hogwarts['staff'];

Podobnie, usunięcie całej tablicy uczniów byłoby wykonywane przez wywołanie delete Hogwarts.students; lub delete Hogwarts['students'];.

Usuwanie indeksu tablicy

Teraz, jeśli chcesz usunąć jednego pracownika lub ucznia, procedura jest nieco inna, ponieważ obie właściwości same są tablicami.

Jeśli znasz indeks swojego pracownika, możesz po prostu zrobić to:

Hogwarts.staff.splice(3, 1);

Jeśli nie znasz indeksu, musisz również przeszukać indeks:

Hogwarts.staff.splice(Hogwarts.staff.indexOf('Minerva McGonnagall') - 1, 1);

Uwaga

Chociaż technicznie można użyć delete dla tablicy, użycie jej skutkowałoby uzyskaniem nieprawidłowych wyników podczas wywołania na przykład Hogwarts.staff.length później. Innymi słowy, delete usunąłby element, ale nie aktualizuje wartości właściwości length. Użycie delete również zepsuje indeksowanie.

Tak więc, podczas usuwania wartości z obiektu, zawsze najpierw zastanów się, czy masz do czynienia z właściwościami obiektu, czy też z wartościami tablic, i wybierz odpowiednią strategię na tej podstawie.

Jeśli chcesz eksperymentować z tym, możesz użyć this Fiddle jako punkt wyjścia.

[[9]}ECMAScript 2015 (lub ES6) został wyposażony w wbudowany obiekt Reflect . Możliwe jest usunięcie właściwości obiektu przez wywołanie Reflect.deleteProperty () funkcja z obiektem docelowym i kluczem właściwości jako parametrami:

Reflect.deleteProperty(myJSONObject, 'regex');

Co jest równoważne:

delete myJSONObject['regex'];

Ale jeżeli właściwość obiektu nie jest konfigurowalna, nie można jej usunąć ani za pomocą funkcji deleteProperty, ani operatora delete:

let obj = Object.freeze({ prop: "value" });
let success = Reflect.deleteProperty(obj, "prop");
console.log(success); // false
console.log(obj.prop); // value

Obiekt.freeze () sprawia, że wszystkie właściwości obiekt nie jest konfigurowalny (poza innymi rzeczami). deleteProperty function (podobnie jak delete operator ) zwraca false gdy próbuje usunąć którąkolwiek z jego właściwości. Jeżeli właściwość jest konfigurowalna to zwraca true, nawet jeżeli właściwość nie istnieje.

Różnica pomiędzy delete i deleteProperty jest przy użyciu trybu ścisłego:

"use strict";

let obj = Object.freeze({ prop: "value" });
Reflect.deleteProperty(obj, "prop"); // false
delete obj["prop"];
// TypeError: property "prop" is non-configurable and can't be deleted

Operatorem delete jest najlepszy sposób, aby to zrobić.

Przykład na żywo do pokazania:

var foo = {bar: 'bar'};
delete foo.bar;
console.log('bar' in foo); // Logs false, because bar was deleted from foo.

Ja osobiście używam podkreślenia.js do manipulacji obiektami i tablicami:

myObject = _.omit(myObject, 'regex');

Ten post jest bardzo stary i uważam, że jest bardzo pomocny, więc postanowiłem udostępnić funkcję unset, którą napisałem na wypadek, gdyby ktoś inny zobaczył ten post i pomyślał, dlaczego nie jest to takie proste, jak w PHP unset function.

Powodem napisania tej nowej funkcji unset jest zachowanie indeksu wszystkich innych zmiennych w tej hash_mapie. Spójrz na poniższy przykład i zobacz, jak indeks "test2" nie zmienił się po usunięciu wartości z hash_map.

function unset(unsetKey, unsetArr, resort){
  var tempArr = unsetArr;
  var unsetArr = {};
  delete tempArr[unsetKey];
  if(resort){
    j = -1;
  }
  for(i in tempArr){
    if(typeof(tempArr[i]) !== 'undefined'){
      if(resort){
        j++;
      }else{
        j = i;
      }
      unsetArr[j] = tempArr[i];
    }
  }
  return unsetArr;
}

var unsetArr = ['test','deletedString','test2'];

console.log(unset('1',unsetArr,true)); // output Object {0: "test", 1: "test2"}
console.log(unset('1',unsetArr,false)); // output Object {0: "test", 2: "test2"}

Inne rozwiązanie, za pomocą Array#reduce.

var myObject = {
  "ircEvent": "PRIVMSG",
  "method": "newURI",
  "regex": "^http://.*"
};

myObject = Object.keys(myObject).reduce(function(obj, key) {
  if (key != "regex") {           //key you want to remove
    obj[key] = myObject[key];
  }
  return obj;
}, {});

console.log(myObject);

Jednakzmutuje oryginalny obiekt. Jeśli chcesz utworzyć nowy obiekt Bez podanego klucza, po prostu Przypisz funkcję reduce do nowej zmiennej, np.:

(ES6)

const myObject = {
  ircEvent: 'PRIVMSG',
  method: 'newURI',
  regex: '^http://.*',
};

const myNewObject = Object.keys(myObject).reduce((obj, key) => {
  key !== 'regex' ? obj[key] = myObject[key] : null;
  return obj;
}, {});

console.log(myNewObject);

Jest tu wiele dobrych odpowiedzi, ale chcę tylko powiedzieć, że podczas używania delete w celu usunięcia właściwości w JavaScript, często mądrze jest najpierw sprawdzić, czy ta właściwość istnieje, aby zapobiec błędom.

E. g

var obj = {"property":"value", "property2":"value"};

if (obj && obj.hasOwnProperty("property2")) {
  delete obj.property2;
} else {
  //error handling
}

Ze względu na dynamiczny charakter JavaScript często zdarza się, że po prostu nie wiesz, czy właściwość istnieje, czy nie. Sprawdzanie, czy obj istnieje Przed & & również upewnia się, że nie wyrzucisz błędu z powodu wywołania funkcji hasOwnProperty () na niezdefiniowanej obiekt.

Przepraszam, jeśli to nie dodało do twojego konkretnego przypadku użycia, ale uważam, że jest to dobry projekt do dostosowania podczas zarządzania obiektami i ich właściwościami.

Użycie metody delete jest najlepszym sposobem, aby to zrobić, zgodnie z opisem MDN operator delete usuwa właściwość z obiektu. Więc możesz po prostu napisać:

delete myObject.regex;
// OR
delete myObject['regex'];

Operator delete usuwa daną właściwość z obiektu. On pomyślne usunięcie, zwróci true, w przeciwnym razie FALSE zostanie zwrócone. Jednak ważne jest, aby wziąć pod uwagę następujące scenariusze:

• Jeśli właściwość, którą próbujesz usunąć, nie istnieje, usuń nie będzie miało żadnego efektu i zwróci true

• Jeśli w prototypie obiektu istnieje właściwość o tej samej nazwie łańcucha, następnie, po usunięciu, obiekt użyje właściwości z prototype chain (innymi słowy, delete ma wpływ tylko na własne właściwości).

• Żadna właściwość zadeklarowana za pomocą var nie może zostać usunięta z zakresu globalnego lub z zakresu funkcji.

• Jako takie, delete nie może usunąć żadnych funkcji w globalnym zakres (niezależnie od tego, czy jest to część z definicji funkcji, czy funkcja (wyrażenie).

• Funkcje, które są częścią obiektu (oprócz
  zasięg globalny) można usunąć za pomocą delete.

• Żadna własność zadeklarowana za pomocą let lub const nie może zostać usunięta z zakresu, w jakim zostały zdefiniowane. Nie można usunąć właściwości konfigurowalnych. Obejmuje to właściwości obiektów wbudowanych, takich jak matematyka, tablica, obiekt i właściwości, które są tworzone jako nie-konfigurowalne metodami takimi jak obiekt.defineProperty ().

Poniższy fragment daje inny prosty przykład:

var Employee = {
      age: 28,
      name: 'abc',
      designation: 'developer'
    }
    
    console.log(delete Employee.name);   // returns true
    console.log(delete Employee.age);    // returns true
    
    // When trying to delete a property that does 
    // not exist, true is returned 
    console.log(delete Employee.salary); // returns true

Aby uzyskać więcej informacji na temat i zobaczyć więcej przykładu, odwiedź link poniżej:

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

Jeśli chcesz usunąć właściwość głęboko zagnieżdżoną w obiekcie, możesz użyć następującej funkcji rekurencyjnej ze ścieżką do właściwości jako drugim argumentem:

var deepObjectRemove = function(obj, path_to_key){
    if(path_to_key.length === 1){
        delete obj[path_to_key[0]];
        return true;
    }else{
        if(obj[path_to_key[0]])
            return deepObjectRemove(obj[path_to_key[0]], path_to_key.slice(1));
        else
            return false;
    }
};

Przykład:

var a = {
    level1:{
        level2:{
            level3: {
                level4: "yolo"
            }
        }
    }
};

deepObjectRemove(a, ["level1", "level2", "level3"]);
console.log(a);

//Prints {level1: {level2: {}}}

Wypróbuj następującą metodę. Przypisz wartość właściwości Object do undefined. Następnie stringify obiekt i parse.

 var myObject = {"ircEvent": "PRIVMSG", "method": "newURI", "regex": "^http://.*"};

myObject.regex = undefined;
myObject = JSON.parse(JSON.stringify(myObject));

console.log(myObject);

Używając ramda#dissoc otrzymasz nowy obiekt bez atrybutu regex:

const newObject = R.dissoc('regex', myObject);
// newObject !== myObject

Możesz również użyć innych funkcji, aby osiągnąć ten sam efekt - omit, pick,...

Możesz po prostu usunąć dowolną właściwość obiektu za pomocą słowa kluczowego delete.

Na przykład:

var obj = {key1:"val1",key2:"val2",key3:"val3"}

Aby usunąć dowolną właściwość, powiedzmy key1, Użyj słowa kluczowego delete w następujący sposób:

delete obj.key1

Lub możesz również użyć notacji podobnej do tablicy:

delete obj[key1]

Ref: MDN.

Składnia Spread (ES6)

Aby uzupełnić odpowiedź @Koen w tym wątku, jeśli chcesz usunąć zmienną dynamiczną za pomocą składni spread, możesz to zrobić w następujący sposób:

const key = 'a';

const { [key]: foo, ...rest } = { a: 1, b: 2, c: 3 };

console.log(rest); // { b: 2, c: 3 }

* foo będzie nową zmienną o wartości a (czyli 1).

Spróbuj tego

delete myObject['key'];

Witam możesz spróbować tego prostego sortowania

var obj = [];

obj.key1 = {name: "John", room: 1234};
obj.key2 = {name: "Jim", room: 1234};

delete(obj.key1);

Twierdzenie dana, że "delete" jest bardzo powolne, a benchmark, który zamieścił, był wątpliwy. Sam przeprowadziłem więc test w Chrome 59. Wydaje się, że 'delete' jest około 30 razy wolniejsze:

var iterationsTotal = 10000000;  // 10 million
var o;
var t1 = Date.now(),t2;
for (let i=0; i<iterationsTotal; i++) {
   o = {a:1,b:2,c:3,d:4,e:5};
   delete o.a; delete o.b; delete o.c; delete o.d; delete o.e;
}
console.log ((t2=Date.now())-t1);  // 6135
for (let i=0; i<iterationsTotal; i++) {
   o = {a:1,b:2,c:3,d:4,e:5};
   o.a = o.b = o.c = o.d = o.e = undefined;
}
console.log (Date.now()-t2);  // 205

Zauważ, że celowo wykonałem więcej niż jedną operację "delete" w jednym cyklu pętli, aby zminimalizować efekt wywołany przez inne operacje.

Rozważ utworzenie nowego obiektu bez właściwości "regex", ponieważ oryginalny obiekt zawsze może być odwołany przez inne części twojego programu. Dlatego należy unikać manipulowania nim.

const myObject = {
    "ircEvent": "PRIVMSG",
    "method": "newURI",
    "regex": "^http://.*"
};

const { regex, ...newMyObject } = myObject;

console.log(newMyObject);

Obiekt.assign () & obiekt.keys () & Array.map ()

const obj = {
    "Filters":[
        {
            "FilterType":"between",
            "Field":"BasicInformationRow.A0",
            "MaxValue":"2017-10-01",
            "MinValue":"2017-09-01",
            "Value":"Filters value"
        }
    ]
};

let new_obj1 = Object.assign({}, obj.Filters[0]);
let new_obj2 = Object.assign({}, obj.Filters[0]);

/*

// old version

let shaped_obj1 = Object.keys(new_obj1).map(
    (key, index) => {
        switch (key) {
            case "MaxValue":
                delete new_obj1["MaxValue"];
                break;
            case "MinValue":
                delete new_obj1["MinValue"];
                break;
        }
        return new_obj1;
    }
)[0];


let shaped_obj2 = Object.keys(new_obj2).map(
    (key, index) => {
        if(key === "Value"){
            delete new_obj2["Value"];
        }
        return new_obj2;
    }
)[0];


*/


// new version!

let shaped_obj1 = Object.keys(new_obj1).forEach(
    (key, index) => {
        switch (key) {
            case "MaxValue":
                delete new_obj1["MaxValue"];
                break;
            case "MinValue":
                delete new_obj1["MinValue"];
                break;
            default:
                break;
        }
    }
);

let shaped_obj2 = Object.keys(new_obj2).forEach(
    (key, index) => {
        if(key === "Value"){
            delete new_obj2["Value"];
        }
    }
);

Usuwanie właściwości w JavaScript

Istnieje wiele różnych opcji przedstawionych na tej stronie, nie dlatego, że większość opcji jest błędna-lub ponieważ odpowiedzi są duplikaty-ale dlatego, że odpowiednia technika zależy od sytuacji, w której się znajdujesz i celów zadań, które ty i / lub twój zespół staracie się spełnić. Aby odpowiedzieć na pytanie jednoznacznie, trzeba wiedzieć:

1. wersja ECMAScript, którą kierujesz
2. zakres typów obiektów, które chcesz aby usunąć właściwości i typ nazw właściwości, które musisz pominąć(tylko ciągi znaków? Symbole? Słabe odniesienia mapowane z dowolnych obiektów? Są to wszystkie typy wskaźników właściwości w JavaScript od lat)
3. etos programowania / wzorce, których Ty i twój zespół używacie. Czy preferujesz podejście funkcjonalne i mutacja jest verboten w Twoim zespole, czy też stosujesz mutacyjne techniki obiektowe Dzikiego Zachodu?
4. Czy chcesz to osiągnąć w czystym JavaScript a może chcesz i możesz korzystać z biblioteki stron trzecich?

Po udzieleniu odpowiedzi na te cztery pytania, istnieją zasadniczo cztery kategorie "usuwania własności" w JavaScript do wyboru, aby osiągnąć swoje cele. Są to:

Usunięcie Właściwości obiektu Mutacyjnego, niebezpieczne

Ta kategoria jest do pracy na literałach obiektów lub instancjach obiektów, gdy chcesz zachować / nadal używać oryginalnego odniesienia i nie używasz bezpaństwowych zasad funkcjonalnych w Twój kod. Przykładowy fragment składni w tej kategorii:

'use strict'
const iLikeMutatingStuffDontI = { myNameIs: 'KIDDDDD!', [Symbol.for('amICool')]: true }
delete iLikeMutatingStuffDontI[Symbol.for('amICool')] // true
Object.defineProperty({ myNameIs: 'KIDDDDD!', 'amICool', { value: true, configurable: false })
delete iLikeMutatingStuffDontI['amICool'] // throws

Ta kategoria jest najstarszą, najprostszą i najczęściej wspieraną kategorią usuwania nieruchomości. Obsługuje indeksy Symbol & array oprócz ciągów znaków i działa we wszystkich wersjach JavaScript z wyjątkiem pierwszego wydania. Jest to jednak działanie mutacyjne, które narusza niektóre zasady programowania i ma wpływ na wydajność. Może również powodować nieprzewidziane wyjątki, gdy jest używany na nie-konfigurowalny właściwości w trybie ścisłym .

REST-based string property ominięcie

Ta kategoria jest przeznaczona do pracy na zwykłych obiektach lub tablicach w nowszych wersjach ECMAScript, gdy wymagane jest podejście niemutacyjne i nie trzeba uwzględniać kluczy symboli:

const foo = { name: 'KIDDDDD!', [Symbol.for('isCool')]: true }
const { name, ...coolio } = foo // coolio doesn't have "name"
const { isCool, ...coolio2 } = foo // coolio2 has everything from `foo` because `isCool` doesn't account for Symbols :(

Mutacyjne usuwanie właściwości obiektu, bezpieczne

Ta kategoria służy do operowania literałami obiektów lub instancjami obiektów, gdy chcesz zachować / kontynuować używanie oryginalnego odniesienia podczas ochrony przeciw rzucaniu WYJĄTKÓW na właściwości niekonfigurowalne:

'use strict'
const iLikeMutatingStuffDontI = { myNameIs: 'KIDDDDD!', [Symbol.for('amICool')]: true }
Reflect.deleteProperty(iLikeMutatingStuffDontI, Symbol.for('amICool')) // true
Object.defineProperty({ myNameIs: 'KIDDDDD!', 'amICool', { value: true, configurable: false })
Reflect.deleteProperty(iLikeMutatingStuffDontI, 'amICool') // false

Ponadto, podczas gdy mutowanie obiektów w miejscu nie jest bezpaństwowe, możesz użyć natury funkcjonalnej Reflect.deleteProperty do częściowego zastosowania i innych technik funkcjonalnych, które nie są możliwe przy użyciu instrukcji delete.

Pominięcie właściwości ciągu w oparciu o składnię

Ta kategoria jest przeznaczona do operowania na obiektach lub tablicach w nowszych wersjach ECMAScript, gdy pożądane jest podejście niemutacyjne, a Ty nie trzeba rozliczać się z kluczami symbolu:

const foo = { name: 'KIDDDDD!', [Symbol.for('isCool')]: true }
const { name, ...coolio } = foo // coolio doesn't have "name"
const { isCool, ...coolio2 } = foo // coolio2 has everything from `foo` because `isCool` doesn't account for Symbols :(

Pominięcie własności opartej na bibliotekach

Ta kategoria ogólnie pozwala na większą elastyczność funkcjonalną, w tym rozliczanie symboli i pomijanie więcej niż jednej właściwości w jednym stwierdzeniu:

const o = require("lodash.omit")
const foo = { [Symbol.for('a')]: 'abc', b: 'b', c: 'c' }
const bar = o(foo, 'a') // "'a' undefined"
const baz = o(foo, [ Symbol.for('a'), 'b' ]) // Symbol supported, more than one prop at a time, "Symbol.for('a') undefined"

const myObject = {
        "ircEvent": "PRIVMSG",
        "method": "newURI",
        "regex": "^http://.*"
    };

const { regex, ...other } = myObject;

console.log(myObject)
console.log(regex)
console.log(other)

Użycie ES6:

(destrukcja + operator spreadu)

    const myObject = {
      regex: "^http://.*",
      b: 2,
      c: 3
    };
    const { regex, ...noRegex } = myObject;
    console.log(noRegex); // => { b: 2, c: 3 }

Bardzo proste:

var myObject = {
    "ircEvent": "PRIVMSG",
    "method": "newURI",
    "regex": "^http://.*"
};

delete myObject.regex;

Korzystanie z lodash

import omit from 'lodash/omit';

const prevObject = {test: false, test2: true};
// Removes test2 key from previous object
const nextObject = omit(prevObject, 'test2');

Używanie Ramdy

R.omit(['a', 'd'], {a: 1, b: 2, c: 3, d: 4}); //=> {b: 2, c: 3}