Jak używać argumentów i parametrów ES6?
Opublikowany: 2022-03-10ECMAScript 6 (lub ECMAScript 2015) to najnowsza wersja standardu ECMAScript i znacznie poprawiła obsługę parametrów w JavaScript. Możemy teraz używać między innymi parametrów odpoczynku, wartości domyślnych i destrukturyzacji.
W tym samouczku szczegółowo omówimy argumenty i parametry oraz zobaczymy, jak ECMAScript 6 je uaktualnił.
Argumenty a parametry
Argumenty i parametry są często przywoływane zamiennie. Niemniej jednak na potrzeby tego samouczka dokonamy rozróżnienia. W większości standardów parametry (lub parametry formalne) to to, co jest podane w deklaracji funkcji, a argumenty (lub rzeczywiste parametry) to to, co jest przekazywane do funkcji. Rozważ tę funkcję:
function foo(param1, param2) { // do something } foo(10, 20);
W tej funkcji param1
i param2
są parametrami funkcji, a wartości przekazywane do funkcji ( 10
i 20
) są argumentami.
Operator rozprzestrzeniania się (…)
W ECMAScript 5 metoda apply()
jest wygodnym narzędziem do przekazywania tablicy jako argumentów do funkcji. Na przykład jest często używany z metodą Math.max()
w celu znalezienia najwyższej wartości w tablicy. Rozważ ten fragment kodu:
var myArray = [5, 10, 50]; Math.max(myArray); // Error: NaN Math.max.apply(Math, myArray); // 50
Metoda Math.max()
nie obsługuje tablic; akceptuje tylko liczby. Gdy tablica jest przekazywana do funkcji Math.max()
, zgłasza błąd. Ale gdy używana jest metoda apply()
, tablica jest wysyłana jako pojedyncze liczby, więc metoda Math.max()
może ją obsłużyć.
Na szczęście wraz z wprowadzeniem operatora rozsunięcia w ECMAScript 6 nie musimy już używać metody apply()
. Za pomocą operatora rozsunięcia możemy łatwo rozwinąć wyrażenie na wiele argumentów:
var myArray = [5, 10, 50]; Math.max(...myArray); // 50
W tym przypadku operator rozprzestrzeniania rozwija myArray
, aby utworzyć indywidualne wartości dla funkcji. Chociaż symulacja operatora rozsunięcia za pomocą funkcji apply()
w ECMAScript 5 jest możliwa, składnia jest myląca i brakuje jej elastyczności operatora rozsunięcia. Operator rozrzutu jest nie tylko łatwiejszy w użyciu, ale zawiera więcej funkcji. Na przykład może być użyty wiele razy i może być mieszany z innymi argumentami w wywołaniu function
:
function myFunction() { for(var i in arguments){ console.log(arguments[i]); } } var params = [10, 15]; myFunction(5, ...params, 20, ...[25]); // 5 10 15 20 25
Kolejną zaletą operatora spreadu jest to, że można go łatwo używać z konstruktorami:
new Date(...[2016, 5, 6]); // Mon Jun 06 2016 00:00:00 GMT-0700 (Pacific Daylight Time)
Oczywiście moglibyśmy przepisać poprzedni kod w ECMAScript 5, ale musielibyśmy użyć skomplikowanego wzorca, aby uniknąć błędu typu:
new Date.apply(null, [2016, 4, 24]); // TypeError: Date.apply is not a constructor new (Function.prototype.bind.apply(Date, [null].concat([2016, 5, 6]))); // Mon Jun 06 2016 00:00:00 GMT-0700 (Pacific Daylight Time)
Rozpowszechnianie obsługi przeglądarki operatora w wywołaniach funkcji
Przeglądarki komputerowe:
Chrom | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari |
---|---|---|---|---|---|
46 | 27 | – | Utrzymany | – | 7,1 |
Przeglądarki mobilne:
Chrome na Androida | Firefox Mobile | Mobilne Safari | Opera Mobile | IE Mobile |
---|---|---|---|---|
46 | 27 | 8 | – | – |
Parametry odpoczynku
Parametr rest ma taką samą składnię jak operator rozproszenia, ale zamiast rozwijać tablicę do parametrów, zbiera parametry i zamienia je w tablicę.
function myFunction(...options) { return options; } myFunction('a', 'b', 'c'); // ["a", "b", "c"]
Jeśli nie ma argumentów, parametr rest zostanie ustawiony na pustą tablicę:
function myFunction(...options) { return options; } myFunction(); // []
Parametr rest jest szczególnie przydatny podczas tworzenia funkcji wariadycznej (funkcji, która przyjmuje zmienną liczbę argumentów). Mając tę zaletę, że są tablicami, parametry resztowe mogą łatwo zastąpić obiekt arguments
(co wyjaśnimy w dalszej części tego samouczka). Rozważ tę funkcję, napisaną w ECMAScript 5:
function checkSubstrings(string) { for (var i = 1; i < arguments.length; i++) { if (string.indexOf(arguments[i]) === -1) { return false; } } return true; } checkSubstrings('this is a string', 'is', 'this'); // true
Ta funkcja sprawdza, czy ciąg zawiera pewną liczbę podciągów. Pierwszy problem z tą funkcją polega na tym, że musimy zajrzeć do wnętrza function
, aby zobaczyć, że przyjmuje ona wiele argumentów. Drugi problem polega na tym, że iteracja musi zaczynać się od 1
zamiast od 0
, ponieważ arguments[0]
wskazuje na pierwszy argument. Jeśli później zdecydujemy się dodać kolejny parametr przed lub po łańcuchu, możemy zapomnieć o aktualizacji pętli. Przy pozostałych parametrach z łatwością unikniemy tych problemów:
function checkSubstrings(string, ...keys) { for (var key of keys) { if (string.indexOf(key) === -1) { return false; } } return true; } checkSubstrings('this is a string', 'is', 'this'); // true
Wyjście tej funkcji jest takie samo jak poprzednie. Tutaj znowu string
parametrów jest wypełniany argumentem, który jest przekazywany jako pierwszy, ale reszta argumentów jest umieszczana w tablicy i przypisywana do zmiennych keys
.
Użycie parametru rest zamiast obiektu arguments
poprawia czytelność kodu i pozwala uniknąć problemów z optymalizacją w JavaScript. Niemniej jednak parametr spoczynkowy nie jest pozbawiony ograniczeń. Na przykład musi to być ostatni argument; w przeciwnym razie wystąpi błąd składni:
function logArguments(a, ...params, b) { console.log(a, params, b); } logArguments(5, 10, 15); // SyntaxError: parameter after rest parameter
Innym ograniczeniem jest to, że w deklaracji function
dozwolony jest tylko jeden parametr rest:
function logArguments(...param1, ...param2) { } logArguments(5, 10, 15); // SyntaxError: parameter after rest parameter
Obsługa przeglądarki parametrów odpoczynku
Przeglądarki komputerowe:
Chrom | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari |
---|---|---|---|---|---|
47 | 15 | – | Utrzymany | 34 | – |
Przeglądarki mobilne:
Chrome na Androida | Firefox Mobile | Mobilne Safari | Opera Mobile | IE Mobile |
---|---|---|---|---|
47 | 15 | – | – | – |
Parametry domyślne
Parametry domyślne w ECMAScript 5
JavaScript nie obsługuje parametrów domyślnych w ECMAScript 5, ale istnieje proste obejście. Używając logicznego operatora OR
( ||
) wewnątrz funkcji, możemy łatwo zasymulować domyślne parametry w ECMAScript 5. Rozważmy tę funkcję:
function foo(param1, param2) { param1 = param1 || 10; param2 = param2 || 10; console.log(param1, param2); } foo(5, 5); // 5 5 foo(5); // 5 10 foo(); // 10 10
Ta funkcja oczekuje dwóch argumentów, ale gdy zostanie wywołana bez argumentów, użyje wartości domyślnych. Wewnątrz funkcji brakujące argumenty są automatycznie ustawiane na niezdefiniowane; więc możemy wykryć te argumenty i zadeklarować dla nich wartości domyślne. Aby wykryć brakujące argumenty i ustawić wartości domyślne, używamy operatora logicznego OR
( ||
). Ten operator sprawdza swój pierwszy argument: Jeśli jest prawdziwy, operator go zwraca; jeśli nie, operator zwraca swój drugi argument.
Takie podejście jest powszechnie stosowane w funkcjach, ale ma wadę. Przekazanie 0
lub null
spowoduje również wyzwolenie wartości domyślnej, ponieważ są one uważane za wartości fałszywe. Tak więc, jeśli rzeczywiście musimy przekazać tej funkcji 0
lub null
, potrzebowalibyśmy alternatywnego sposobu sprawdzenia, czy brakuje argumentu:
function foo(param1, param2) { if(param1 === undefined){ param1 = 10; } if(param2 === undefined){ param2 = 10; } console.log(param1, param2); } foo(0, null); // 0, null foo(); // 10, 10
Wewnątrz tej funkcji typy przekazanych argumentów są sprawdzane, aby upewnić się, że są niezdefiniowane przed przypisaniem wartości domyślnych. Takie podejście wymaga nieco więcej kodu, ale jest bezpieczniejszą alternatywą i pozwala nam przekazać 0
i null
do funkcji.
Parametry domyślne w ECMAScript 6
Dzięki ECMAScript 6 nie musimy już sprawdzać niezdefiniowanych wartości, aby symulować parametry domyślne. Możemy teraz umieścić wartości domyślne bezpośrednio w deklaracji function
:
function foo(a = 10, b = 10) { console.log(a, b); } foo(5); // 5 10 foo(0, null); // 0 null
Jak widać, pominięcie argumentu wyzwala wartość domyślną, ale przekazanie 0
lub null
nie spowoduje. Możemy nawet użyć funkcji do pobrania wartości parametrów domyślnych:
function getParam() { alert("getParam was called"); return 3; } function multiply(param1, param2 = getParam()) { return param1 * param2; } multiply(2, 5); // 10 multiply(2); // 6 (also displays an alert dialog)
Zauważ, że funkcja getParam
jest wywoływana tylko wtedy, gdy pominięto drugi argument. Tak więc, gdy wywołamy funkcję multiply()
z dwoma parametrami, alert nie zostanie wyświetlony.
Inną interesującą cechą parametrów domyślnych jest to, że w deklaracji function
możemy odwoływać się do innych parametrów i zmiennych:
function myFunction(a=10, b=a) { console.log('a = ' + a + '; b = ' + b); } myFunction(); // a=10; b=10 myFunction(22); // a=22; b=22 myFunction(2, 4); // a=2; b=4
Możesz nawet wykonać operacje w deklaracji function
:
function myFunction(a, b = ++a, c = a*b) { console.log(c); } myFunction(5); // 36
Zwróć uwagę, że w przeciwieństwie do niektórych innych języków, JavaScript ocenia parametry domyślne w czasie połączenia:
function add(value, array = []) { array.push(value); return array; } add(5); // [5] add(6); // [6], not [5, 6]
Obsługa domyślnej przeglądarki parametrów
Przeglądarki komputerowe:
Funkcja | Chrom | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari |
---|---|---|---|---|---|---|
Podstawowe wsparcie | 49 | 15 | – | 14 | – | – |
Parametry bez wartości domyślnych po parametrze domyślnym | 49 | 26 | – | 14 | – | – |
Przeglądarki mobilne:
Funkcja | Chrome na Androida | Firefox Mobile | Mobilne Safari | Opera Mobile | IE Mobile |
---|---|---|---|---|---|
Podstawowe wsparcie | 49 | 15 | – | – | – |
Parametry bez wartości domyślnych po parametrze domyślnym | 46 | 26 | – | – | – |
Destrukturyzacja
Destrukturyzacja to nowa funkcja w ECMAScript 6, która umożliwia nam wyodrębnianie wartości z tablic i obiektów oraz przypisywanie ich do zmiennych przy użyciu składni podobnej do literałów obiektów i tablic. Składnia jest jasna i łatwa do zrozumienia i jest szczególnie przydatna podczas przekazywania argumentów do funkcji.
W ECMAScript 5 obiekt konfiguracyjny jest często używany do obsługi dużej liczby opcjonalnych parametrów, zwłaszcza gdy kolejność właściwości nie ma znaczenia. Rozważ tę funkcję:
function initiateTransfer(options) { var protocol = options.protocol, port = options.port, delay = options.delay, retries = options.retries, timeout = options.timeout, log = options.log; // code to initiate transfer } options = { protocol: 'http', port: 800, delay: 150, retries: 10, timeout: 500, log: true }; initiateTransfer(options);
Ten wzorzec jest powszechnie używany przez programistów JavaScript i działa dobrze, ale musimy zajrzeć do ciała function
, aby zobaczyć, jakich parametrów oczekuje. Przy zdestrukturyzowanych parametrach możemy wyraźnie wskazać parametry w deklaracji function
:
function initiateTransfer({protocol, port, delay, retries, timeout, log}) { // code to initiate transfer }; var options = { protocol: 'http', port: 800, delay: 150, retries: 10, timeout: 500, log: true } initiateTransfer(options);
W tej funkcji użyliśmy wzorca destrukturyzacji obiektu zamiast obiektu konfiguracyjnego. Dzięki temu nasza funkcja jest nie tylko bardziej zwięzła, ale i bardziej czytelna.
Możemy również łączyć parametry zdestrukturyzowane z parametrami zwykłymi:
function initiateTransfer(param1, {protocol, port, delay, retries, timeout, log}) { // code to initiate transfer } initiateTransfer('some value', options);
Zauważ, że błąd typu zostanie zgłoszony, jeśli parametry zostaną pominięte w wywołaniu function
:
function initiateTransfer({protocol, port, delay, retries, timeout, log}) { // code to initiate transfer } initiateTransfer(); // TypeError: Cannot match against 'undefined' or 'null'
Jest to pożądane zachowanie, gdy potrzebujemy parametrów, które mają być wymagane, ale co, jeśli chcemy, aby były opcjonalne? Aby zapobiec temu błędowi, gdy brakuje parametrów, musimy przypisać domyślną wartość do zdestrukturyzowanych parametrów:
function initiateTransfer({protocol, port, delay, retries, timeout, log} = {}) { // code to initiate transfer } initiateTransfer(); // no error
W tej funkcji pusty obiekt jest dostarczany jako wartość domyślna dla zdestrukturyzowanych parametrów. Teraz, jeśli ta funkcja zostanie wywołana bez żadnych parametrów, nie wystąpi żaden błąd.
Możemy również przypisać domyślną wartość do każdego destrukturyzowanego parametru:
function initiateTransfer({ protocol = 'http', port = 800, delay = 150, retries = 10, timeout = 500, log = true }) { // code to initiate transfer }
W tym przykładzie każda właściwość ma parametr domyślny, eliminując potrzebę ręcznego sprawdzania niezdefiniowanych parametrów i przypisywania wartości domyślnych w treści function
.
Obsługa destrukturyzacji przeglądarki
Przeglądarki komputerowe:
Funkcja | Chrom | Firefox | Internet Explorer | Microsoft Edge | Opera | Safari |
---|---|---|---|---|---|---|
Podstawowe wsparcie | 49 | 2,0 | – | 14 | – | 7,1 |
Zdestrukturyzowany parametr z przypisaniem wartości domyślnej | 49 | 47 | – | 14 | – | – |
Przeglądarki mobilne:
Funkcja | Chrome na Androida | Firefox Mobile | Mobilne Safari | Opera Mobile | IE Mobile |
---|---|---|---|---|---|
Podstawowe wsparcie | 49 | 1 | 8 | – | – |
Parametry bez wartości domyślnych po parametrze domyślnym | 49 | 47 | – | – | – |
Przekazywanie argumentów
Istnieją dwa sposoby przekazywania argumentów do funkcji: przez odwołanie lub przez wartość. Modyfikowanie argumentu przekazywanego przez odwołanie jest odzwierciedlane globalnie, ale modyfikowanie argumentu przekazywanego przez wartość jest odzwierciedlane tylko wewnątrz funkcji.
W niektórych językach, takich jak Visual Basic i PowerShell, mamy możliwość określenia, czy przekazać argument przez odwołanie, czy przez wartość, ale nie dotyczy to JavaScript.
Przekazywanie argumentów według wartości
Technicznie rzecz biorąc, JavaScript może przekazywać tylko wartość. Kiedy przekazujemy argument do funkcji według wartości, kopia tej wartości jest tworzona w zakresie function
. W związku z tym wszelkie zmiany wartości są odzwierciedlane tylko wewnątrz function
. Rozważ ten przykład:
var a = 5; function increment(a) { a = ++a; console.log(a); } increment(a); // 6 console.log(a); // 5
Tutaj modyfikacja argumentu wewnątrz funkcji nie ma wpływu na oryginalną wartość. Tak więc, gdy zmienna jest logowana spoza funkcji, drukowana wartość nadal wynosi 5
.
Przekazywanie argumentów przez odniesienie
W JavaScript wszystko jest przekazywane przez wartość, ale kiedy przekazujemy zmienną, która odnosi się do obiektu (w tym tablic), „wartość” jest odwołaniem do obiektu, a zmiana właściwości obiektu, do którego odwołuje się zmienna, zmienia leżący u podstaw obiekt.
Rozważ tę funkcję:
function foo(param){ param.bar = 'new value'; } obj = { bar : 'value' } console.log(obj.bar); // value foo(obj); console.log(obj.bar); // new value
Jak widać, właściwość obiektu jest modyfikowana wewnątrz funkcji, ale zmodyfikowana wartość jest widoczna poza funkcją.
Kiedy przekazujemy nieprymitywną wartość, taką jak tablica lub obiekt, za sceną tworzona jest zmienna, która wskazuje lokalizację oryginalnego obiektu w pamięci. Ta zmienna jest następnie przekazywana do funkcji, a jej modyfikacja wpłynie na oryginalny obiekt.
Sprawdzanie typu i brakujące lub dodatkowe parametry
W silnie typizowanym języku musimy określić typ parametrów w deklaracji function
, ale JavaScript nie ma tej funkcji. W JavaScript nie ma znaczenia, jaki typ danych lub ile argumentów przekazujemy do funkcji.
Załóżmy, że mamy funkcję, która przyjmuje tylko jeden argument. Kiedy wywołujemy tę funkcję, nie jesteśmy ograniczeni do przekazania tylko jednego argumentu do funkcji; możemy przekazać jeden, dwa lub więcej argumentów! Możemy nawet zdecydować, że nie przekażemy niczego i nie pojawią się żadne błędy.
Liczba argumentów i parametrów może się różnić na dwa sposoby:
- Mniej argumentów niż parametrów .
Brakujące parametry będą równeundefined
. - Więcej argumentów niż parametrów .
Dodatkowe parametry zostaną zignorowane, ale można je pobrać za pomocą specjalnych argumentów zmiennych przypominających tablicę (omówionych dalej).
Obowiązkowe argumenty
Jeśli w wywołaniu function
brakuje argumentu, zostanie on ustawiony na undefined
. Możemy wykorzystać to zachowanie i zgłosić błąd, jeśli argument zostanie pominięty:
function foo(mandatory, optional) { if (mandatory === undefined) { throw new Error('Missing parameter: mandatory'); } }
W ECMAScript 6 możemy pójść dalej i użyć domyślnych parametrów do ustawienia obowiązkowych argumentów:
function throwError() { throw new Error('Missing parameter'); } function foo(param1 = throwError(), param2 = throwError()) { // do something } foo(10, 20); // ok foo(10); // Error: missing parameter
Argumenty Obiekt
Obsługa parametrów resztowych została dodana do ECMAScript 4 z zamiarem zastąpienia obiektu arguments
, ale ECMAScript 4 nigdy nie doszedł do skutku. Wraz z wydaniem ECMAScript 6 JavaScript oficjalnie obsługuje pozostałe parametry. Odrzucono również plan rezygnacji z obsługi obiektu arguments
.
Obiekt arguments
jest obiektem podobnym do tablicy, który jest dostępny we wszystkich funkcjach. Pozwala to na pobranie wartości argument
przekazanych do funkcji według numeru, a nie według nazwy. Obiekt pozwala nam przekazać dowolną liczbę argumentów do funkcji. Rozważ następujący fragment kodu:
function checkParams(param1) { console.log(param1); // 2 console.log(arguments[0], arguments[1]); // 2 3 console.log(param1 + arguments[0]); // 2 + 2 } checkParams(2, 3);
Ta funkcja oczekuje, że otrzyma tylko jeden argument. Kiedy wywołujemy go z dwoma argumentami, pierwszy argument jest dostępny w funkcji przez nazwę parametru param1
lub argumenty obiektu arguments[0]
, ale drugi argument jest dostępny tylko jako arguments[1]
. Zauważ też, że obiekt arguments
może być używany w połączeniu z nazwanymi argumentami.
Obiekt arguments
zawiera wpis dla każdego argumentu przekazanego do funkcji, a indeks pierwszego wpisu zaczyna się od 0
. Gdybyśmy chcieli uzyskać dostęp do większej liczby argumentów w powyższym przykładzie, napisalibyśmy arguments[2]
, arguments[3]
i tak dalej.
Moglibyśmy nawet całkowicie pominąć ustawianie nazwanych parametrów i po prostu użyć obiektu arguments
:
function checkParams() { console.log(arguments[1], arguments[0], arguments[2]); } checkParams(2, 4, 6); // 4 2 6
W rzeczywistości nazwane parametry są wygodą, a nie koniecznością. Podobnie parametry resztowe mogą służyć do odzwierciedlenia przekazanych argumentów:
function checkParams(...params) { console.log(params[1], params[0], params[2]); // 4 2 6 console.log(arguments[1], arguments[0], arguments[2]); // 4 2 6 } checkParams(2, 4, 6);
Obiekt arguments
jest obiektem podobnym do tablicy, ale brakuje w nim metod tablicowych, takich jak slice()
i foreach()
. Aby użyć metod tablicowych na obiekcie arguments
, obiekt musi najpierw zostać przekonwertowany na rzeczywistą tablicę:
function sort() { var a = Array.prototype.slice.call(arguments); return a.sort(); } sort(40, 20, 50, 30); // [20, 30, 40, 50]
W tej funkcji Array.prototype.slice.call()
służy do szybkiego przekształcenia obiektu arguments
w tablicę. Następnie metoda sort()
sortuje elementy tablicy i zwraca je.
ECMAScript 6 ma jeszcze prostszy sposób. Array.from()
, nowy dodatek w ECMAScript 6, tworzy nową tablicę z dowolnego obiektu podobnego do tablicy:
function sort() { var a = Array.from(arguments); return a.sort(); } sort(40, 20, 50, 30); // [20, 30, 40, 50]
Właściwość długości
Chociaż obiekt arguments nie jest technicznie tablicą, ma właściwość length
, której można użyć do sprawdzenia liczby argumentów przekazanych do funkcji:
function countArguments() { console.log(arguments.length); } countArguments(); // 0 countArguments(10, null, "string"); // 3
Używając właściwości length
mamy lepszą kontrolę nad liczbą argumentów przekazywanych do funkcji. Na przykład, jeśli funkcja wymaga do działania dwóch argumentów, możemy użyć właściwości length
do sprawdzenia liczby przekazanych argumentów i zgłosić błąd, jeśli jest ich mniej niż oczekiwano:
function foo(param1, param2) { if (arguments.length < 2) { throw new Error("This function expects at least two arguments"); } else if (arguments.length === 2) { // do something } }
Parametry resztowe są tablicami, więc mają właściwość length
. W ECMAScript 6 poprzedni kod można przepisać z parametrami reszty:
function foo(...params) { if (params.length < 2) { throw new Error("This function expects at least two arguments"); } else if (params.length === 2) { // do something } }
Właściwości dzwoniącego i dzwoniącego
Właściwość callee
odnosi się do funkcji, która jest aktualnie uruchomiona, a obiekt caller
odnosi się do funkcji, która wywołała aktualnie wykonywaną funkcję. W trybie ścisłym ECMAScript 5 te właściwości są przestarzałe, a próba uzyskania do nich dostępu powoduje wystąpienie błędu TypeError.
Właściwość arguments.callee
jest przydatna w funkcjach rekurencyjnych (funkcja rekurencyjna to zwykła funkcja, która odwołuje się do siebie po nazwie), zwłaszcza gdy nazwa funkcji nie jest dostępna (funkcja anonimowa). Ponieważ funkcja anonimowa nie ma nazwy, jedynym sposobem odwoływania się do niej jest arguments.callee
.
var result = (function(n) { if (n <= 1) { return 1; } else { return n * arguments.callee(n - 1); } })(4); // 24
Obiekt argumentów w trybie ścisłym i nieścisłym
W trybie nieścisłym ECMAScript 5 obiekt arguments
ma niezwykłą cechę: utrzymuje swoje wartości zsynchronizowane z wartościami odpowiednich nazwanych parametrów.
Rozważ następujący fragment kodu:
function foo(param) { console.log(param === arguments[0]); // true arguments[0] = 500; console.log(param === arguments[0]); // true return param } foo(200); // 500
Wewnątrz tej funkcji do arguments[0]
przypisywana jest nowa wartość. Ponieważ wartości arguments
zawsze pozostają zsynchronizowane z wartościami nazwanych parametrów, zmiana na arguments[0]
zmieni również wartość param
. W rzeczywistości są jak dwie różne nazwy dla tej samej zmiennej. W trybie ścisłym ECMAScript 5 to mylące zachowanie obiektu arguments
zostało usunięte:
"use strict"; function foo(param) { console.log(param === arguments[0]); // true arguments[0] = 500; console.log(param === arguments[0]); // false return param } foo(200); // 200
Tym razem zmiana arguments[0]
nie wpływa na param
, a dane wyjściowe są zgodne z oczekiwaniami. Dane wyjściowe tej funkcji w ECMAScript 6 są takie same jak w trybie ścisłym ECMAScript 5, ale należy pamiętać, że gdy w deklaracji function
używane są wartości domyślne, nie ma to wpływu na obiekt arguments
:
function foo(param1, param2 = 10, param3 = 20) { console.log(param1 === arguments[0]); // true console.log(param2 === arguments[1]); // true console.log(param3 === arguments[2]); // false console.log(arguments[2]); // undefined console.log(param3); // 20 } foo('string1', 'string2');
W tej funkcji, mimo że param3
ma wartość domyślną, nie jest ona równa arguments[2]
, ponieważ do funkcji przekazywane są tylko dwa argumenty. Innymi słowy, ustawienie wartości domyślnych nie ma wpływu na obiekt arguments
.
Wniosek
ECMAScript 6 wprowadził setki małych i dużych ulepszeń do JavaScript. Coraz więcej programistów korzysta z funkcji ECMAScript 6 i wkrótce te funkcje będą nieuniknione. W tym samouczku dowiedzieliśmy się, jak ECMAScript 6 uaktualnił obsługę parametrów w JavaScript, ale właśnie zarysowaliśmy powierzchnię ECMAScript 6. Warto sprawdzić wiele innych nowych i interesujących funkcji tego języka.
Spinki do mankietów
- Tabela zgodności ECMAScript 6, Jurij Zaytsev
- „Specyfikacja języka ECMAScript 2015”, ECMA International