Dlaczego mogę dodać nazwane właściwości do tablicy tak, jakby była obiektem?

Następujące dwa różne fragmenty kodu wydają mi się równoważne:

var myArray = Array();
myArray['A'] = "Athens";
myArray['B'] = "Berlin";

I

var myObject = {'A': 'Athens', 'B':'Berlin'};

Ponieważ oba zachowują się tak samo, a także typeof(myArray) == typeof(myObjects) (oba dają 'obiekt').

Czy jest jakaś różnica między tymi wariantami?

Author: Quentin, 2009-05-17

7 answers

Praktycznie wszystko w javascript jest obiektem, więc możesz" nadużywać " obiektu Array, ustawiając na nim dowolne właściwości. To Należy jednak uznać za szkodliwe . Tablice służą do danych indeksowanych numerycznie - w przypadku kluczy nieliczbowych należy użyć obiektu.

Oto bardziej konkretny przykład, dlaczego nie-numeryczne klucze nie "pasują"do tablicy:

var myArray = Array();
myArray['A'] = "Athens";
myArray['B'] = "Berlin";

alert(myArray.length);

To nie wyświetli '2', Ale ' 0 ' - w rzeczywistości do tablicy nie dodano żadnych elementów, tylko kilka nowych właściwości dodanych do obiekt array.

 115
Author: Paul Dixon,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-05-17 09:44:42

W js tablice są obiektami, tylko nieznacznie zmodyfikowanymi (z kilkoma innymi funkcjami).

Funkcje takie jak:

concat
every   
filer
forEach
join
indexOf
lastIndexOf
map
pop
push
reverse
shift
slice
some
sort
splice
toSource
toString
unshift
valueOf 
 13
Author: Casey,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-05-17 09:17:23

Wszystko w JavaScript jest obiektem oprócz prymitywnych typów.

Kod

var myArray = Array();

Tworzy instancję obiektu Array podczas gdy

var myObject = {'A': 'Athens', 'B':'Berlin'};

Tworzy instancję obiektu object.

Wypróbuj następujący kod

alert(myArray.constructor)
alert(myObject.constructor)

Zobaczysz więc różnicę w typie konstruktora obiektu.

Instancja obiektu Array będzie zawierać wszystkie właściwości i metody prototypu tablicy.

 5
Author: Dasha Salo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-10-05 18:45:10

Ja myśli, ja zbyt metaforyczne i tajemnicze z poprzedniej odpowiedzi. Wyjaśnienie następuje.

Instancja Array, Boolean, Date, Function, Number, RegExp, String jest obiektem, ale wzbogaconym o metody i właściwości specyficzne dla każdego typu. Na przykład tablica ma predefiniowaną właściwość length, podczas gdy obiekty generyczne nie.

javascript:alert([].length+'\n'+{}.length)

Wyświetlacze

0
undefined

Wewnętrznie, interpreter FF Gecko rozróżnia również tablice i Obiekty generyczne z odrębnymi różnice w konstrukcjach językowych.

javascript:
  ra=[  "one",   "two",   "three"]; ra.a=4;
  ob={0:"one", 1:"two", 2:"three"}; ob.a=4;
  alert(
    ra            +"\n\n"+
    ob            +"\n\n"+
    ra.toSource() +"\n\n"+
    ra.a          +"\t .toSource() forgot me! \n\n"+
    ra.length     +"\t and my length! \n\n"+
    ob.toSource());
  ps=""; for(i in ra)ps+=i+" "; alert(ps);  /* NB .length is missing! */
  ps=""; for(i in ob)ps+=i+" "; alert(ps);

Wyświetlanie

one,two,three

[object Object]

["one", "two", "three"]

4    .toSource() forgot me! 

3    and my length! 

({0:"one", 1:"two", 2:"three", a:4})

I 0 1 2 a i 0 1 2 a.

Odnośnie stwierdzenia, że wszystkie obiekty są funkcjami:

Nie jest poprawne składniowo ani semantycznie używanie arbitralnej instancji obiektu jako funkcji, takiej jak 123() lub "abc"() lub []() lub {}() lub obj() gdzie obj jest dowolnym typem innym niż Function, więc arbitralna instancja obiektu nie jest Function. Jednak biorąc pod uwagę obiekt obj i jest to typ jak Array, Boolean, Date, ..., W Jaki Sposób obj stało się Array, Boolean, Date, ...? Co to jest Array, Boolean, Date, ...?

javascript:
    alert([Array, Boolean, Date, Function, 
              Number, Object, RegExp, String] . join('\n\n') );

Wyświetlacze

function Array() {
    [native code]
}

function Boolean() {
    [native code]
}

function Date() {
    [native code]
}

function Function() {
    [native code]
}

function Number() {
    [native code]
}

function Object() {
    [native code]
}

function RegExp() {
    [native code]
}

function String() {
    [native code]
}

W każdym przypadku, bez równania, typ obiektu przejawia się jako definicja function, stąd stwierdzenie, że wszystkie obiekty są funkcjami! (Język w policzku polega na tym, że celowo zaciemniłem i zatarłem rozróżnienie instancji obiektu od tego jej typu! Mimo to pokazuje "nie możesz mieć jednego bez drugiego", obiekt i funkcję! Kapitalizacja podkreśla Typ jako w przeciwieństwie do instancji.)

Zarówno paradygmat funkcjonalny, jak i obiektowy wydają się być fundamentalne dla programowania i implementacji wbudowanych prymitywów niskiego poziomu interpretera JS, takich jak Math i JSON i true.

 javascript:alert([Math, JSON, true.toSource()].join("\n\n"));

Wyświetlacze

[object Math]

[object JSON]

(new Boolean(true))

W czasie rozwoju Javascript, styl programowania zorientowanego obiektowo (OOP ' s - styl programowania zorientowanego obiektowo - "s" to mój własny kalambur!) był w modzie i tłumacz był podobnie ochrzczony Javą aby nadać mu większą wiarygodność. Techniki programowania funkcyjnego zostały sprowadzone do bardziej abstrakcyjnych i ezoterycznych egzaminów studiujących teorie automatów, funkcji rekurencyjnych, języków formalnych itp. i jako takie nie tak smaczne. Jednak mocne strony tych formalnych rozważań są wyraźnie widoczne w Javascript, szczególnie jak zaimplementowano w silniku Gecko FF (tj. .toSource()).


Definicja obiektu dla funkcji jest szczególnie satysfakcjonująca, gdyż jest zdefiniowana jako / align = "left" / zdefiniowany za pomocą własnej definicji!

function Function() { [native code] }
a ponieważ funkcja jest obiektem, to samo odczucie posiada dla
function Object() { [native code] }.

Większość innych definicji odpowiada statycznej wartości końcowej. Jednak eval() jest szczególnie potężnym prymitywem, więc łańcuch może również osadzać dowolną funkcjonalność.

Zauważ jeszcze raz, użyty powyżej język przysłówkowy zaciemnia rozróżnienie typu obiektu I instancji.

 4
Author: Ekim,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2011-05-18 15:02:49

Praktyczna różnica polega na ignorowaniu JSON.stringify na array Wszystkie nieliczbowe indeksy są ignorowane:

var arr = [];
var obj = {};

arr['name'] = 'John';
obj['name'] = 'John';

console.log(arr);    // will output [name: "John"]
console.log(obj);    // will output {name: "John"}

JSON.stringify(arr); // will return []
JSON.stringify(obj); // will return {"name":"John"}
 1
Author: user5513314,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-01-25 13:50:16

Różnica między tablicami a innymi obiektami w JavaScript. Podczas gdy tablice mają magicznie aktualizowaną właściwość length, dla obiektów innych niż tablice nie ma możliwości implementacji takiej właściwości.

var arrName = [];
arrName[5] = "test";
arrName.length; // <- 6

Tablice są używane do przechowywania rzeczy z indeksem porządkowym - używaj ich jak tradycyjnej tablicy, stosu lub kolejki. Obiekt jest skrótem-używaj go do danych, które mają odrębny klucz.

 0
Author: Parth Raval,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-19 06:51:48

{}-notacja jest tylko cukrem składniowym, aby Kod był ładniejszy; -)

JavaScript ma wiele podobnych konstrukcji, takich jak konstrukcja funkcji, gdzie function() jest tylko synonimem

var Func = new Function("<params>", "<code>");
 -1
Author: Dario,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2009-05-17 09:15:49