diff options
| author | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:49:24 +0100 |
|---|---|---|
| committer | Florian Merz <me@fiji-flo.de> | 2021-02-11 14:49:24 +0100 |
| commit | de5c456ebded0e038adbf23db34cc290c8829180 (patch) | |
| tree | 2819c07a177bb7ec5f419f3f6a14270d6bcd7fda /files/pl/conflicting/web/javascript/reference/operators/spread_syntax | |
| parent | 8260a606c143e6b55a467edf017a56bdcd6cba7e (diff) | |
| download | translated-content-de5c456ebded0e038adbf23db34cc290c8829180.tar.gz translated-content-de5c456ebded0e038adbf23db34cc290c8829180.tar.bz2 translated-content-de5c456ebded0e038adbf23db34cc290c8829180.zip | |
unslug pl: move
Diffstat (limited to 'files/pl/conflicting/web/javascript/reference/operators/spread_syntax')
| -rw-r--r-- | files/pl/conflicting/web/javascript/reference/operators/spread_syntax/index.html | 230 |
1 files changed, 230 insertions, 0 deletions
diff --git a/files/pl/conflicting/web/javascript/reference/operators/spread_syntax/index.html b/files/pl/conflicting/web/javascript/reference/operators/spread_syntax/index.html new file mode 100644 index 0000000000..c8cc1533f8 --- /dev/null +++ b/files/pl/conflicting/web/javascript/reference/operators/spread_syntax/index.html @@ -0,0 +1,230 @@ +--- +title: Spread syntax +slug: Web/JavaScript/Referencje/Operatory/Spread_operator +tags: + - ECMAScript 2015 + - Iterator + - JavaScript + - Operator Rozwinięcia +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +translation_of_original: Web/JavaScript/Reference/Operators/Spread_operator +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>Operator spread umożliwia rozwinięcie wyrażenia. <strong>Składnia rozwinięcia</strong> pozwala na rozwinięcie wyrażenia w miejscach, w których potrzebne jest wiele argumentów (do wywołań funkcji), wiele elementów (do literałów tablicowych) lub wiele zmiennych ().</p> + +<h2 id="Składnia">Składnia</h2> + +<p>Do wywołań funkcji:</p> + +<pre class="brush: js">mojaFunkcja(...iterowalnyObiekt); +</pre> + +<p>Do literałów tablicowych:</p> + +<pre class="brush: js">[...iterowalnyObiekt, 4, 5, 6]</pre> + +<p> </p> + +<p>Do przypisań destrukturyzujących:</p> + +<pre class="brush: js">var [glowa, ...ogon] = [1, 2, 3, 4]</pre> + +<h2 id="Przykłady">Przykłady</h2> + +<h3 id="Lepsze_zastosowanie">Lepsze zastosowanie</h3> + +<p><strong>Przykład:</strong> powszechne jest użycie {{jsxref( "Function.prototype.apply")}} w przypadkach, gdy chcesz użyć tablic jako argumentów funkcji.</p> + +<pre class="brush: js">function mojaFunkcja(x, y, z) { } +var args = [0, 1, 2]; +mojaFunkcja.apply(null, args);</pre> + +<p>Ze składnią rozwinięcia (spread) ES2015 powyższy kod można zapisać jako:</p> + +<pre class="brush: js">function mojaFunkcja(x, y, z) { } +var args = [0, 1, 2]; +mojaFunkcja(...args);</pre> + +<p>Dowolny argument w liście argumentów może użyć składni rozwinięcia i może być użyty wiele razy.</p> + +<pre class="brush: js">function myFunction(v, w, x, y, z) { } +var args = [0, 1]; +myFunction(-1, ...args, 2, ...[3]);</pre> + +<h3 id="Potężniejszy_literał_tablicowy">Potężniejszy literał tablicowy</h3> + +<p><strong>Przykład:</strong> Jeżeli masz tablicę i chcesz utworzyć nową tablicę z tą tablicą jako jej częścią, składnia literału tablicowego nie jest już wystarczająca i należy cofnąć się do programowania imperatywnego, użyć kombinacji <code>push</code>, <code>splice</code>, <code>concat</code>, itp. Z użyciem składni rozwinięcia wygląda to dużo prościej:</p> + +<pre class="brush: js">var czesci = ['ramiona', 'kolana']; +var rymowanka = ['glowa', ...czesci, 'i', 'palce']; // <span class="objectBox objectBox-array"><a class="objectLink "><span class="arrayLeftBracket">[</span></a><span class="objectBox objectBox-string">"glowa"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"</span></span>ramiona<span class="objectBox objectBox-array"><span class="objectBox objectBox-string">"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"kolana"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"i"</span><span class="arrayComma">, </span><span class="objectBox objectBox-string">"palce"</span></span>] +</pre> + +<p>Tak samo jak rozwinięcie może być użyte do list argumentów, <code>...</code> mogą być użyte wszędzie w literale tablicowym, także wiele razy.</p> + +<h3 id="Zastosowanie_z_new">Zastosowanie z new</h3> + +<p><strong>Przykład:</strong> W ES5 nie jest możliwa kompozycja <code>new</code> z <code>apply.</code> (W ES5, <code>apply</code> wykonuje <code>[[Call]]<font face="Open Sans, arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">, a nie </span></font></code><code>[[Construct]].</code>) W ES2015 składnia rozwinięcia wygląda następująco:</p> + +<pre class="brush: js">var daty = czytajDaty(bazaDanych); +var d = new Date(...daty);</pre> + +<h3 id="Kopiowanie_tablicy">Kopiowanie tablicy</h3> + +<pre class="brush: js">var tablica = [1,2,3]; +var tablica2 = [...tablica]; // jak tablica.slice() +tablica2.push(4); // tablica2 staje się [1,2,3,4], tablica pozostaje niezmieniona + +</pre> + +<h3 id="Ulepszone_push">Ulepszone push</h3> + +<p><strong>Przykład:</strong> {{jsxref("Global_Objects/Array/push", "push")}} jest często używany, by dodać tablicę na koniec innej tablicy. W ES5 jest to często osiągane przez:</p> + +<pre class="brush: js">var tablica1 = [0, 1, 2]; +var tablica2 = [3, 4, 5]; +// Dodaj wszystkie elementy z tablica2 do tablica1 +Array.prototype.push.apply(tablica1, tablica2);</pre> + +<p>W ES2015 z rozwinięciem wygląda to następująco:</p> + +<pre class="brush: js">var tablica1 = [0, 1, 2]; +var tablica2 = [3, 4, 5]; +tablica1.push(...tablica2);</pre> + +<h3 id="Użycie_jedynie_dla_obiektów_iterowalnych">Użycie jedynie dla obiektów iterowalnych</h3> + +<pre class="brush: js">var obiekt = {"klucz1":"wartosc1"}; +function mojaFunkcja(x) { + /* ... */ +} +// proba rozwinięcia nieiterowalnego elementu +// spowoduje błąd +mojaFunkcja(...obiekt); +var args = [...obiekt]; +// TypeError: obiekt is not iterable</pre> + +<h2 id="Operator_reszty">Operator reszty</h2> + +<p>Operator reszty, który wygląda dokładnie jak składnia rozwinięcia (spread), jest używany do destrukturyzacji obiektów i tablic. W pewnym stopniu, elementy reszty są przeciwieństwem elementów rozwinięcia: rozwinięcie 'rozbija' tablicę na elementy, natomiast reszta zbiera wiele elementów i 'zwija' je w jeden element.</p> + +<h2 id="Specyfikacje">Specyfikacje</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specyfikacja</th> + <th scope="col">Stan</th> + <th scope="col">Komentasz</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#sec-array-initializer')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Zdefiniowany w kilku sekcjach specyfikacji: <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-array-initializer">Array Initializer</a>, <a href="http://www.ecma-international.org/ecma-262/6.0/#sec-argument-lists">Argument Lists</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funkcja</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>Operacja rozwinięcia w literałach tablicowych</td> + <td>{{CompatChrome("46")}}</td> + <td>{{ CompatGeckoDesktop("16") }}</td> + <td>{{CompatIE("Edge")}}</td> + <td>{{CompatNo}}</td> + <td>7.1</td> + </tr> + <tr> + <td>Operacja rozwinięcia w wywołaniach funkcji</td> + <td>{{CompatChrome("46")}}</td> + <td>{{ CompatGeckoDesktop("27") }}</td> + <td>{{CompatIE("Edge")}}</td> + <td>{{CompatNo}}</td> + <td>7.1</td> + </tr> + <tr> + <td>Operacja rozwinięcia w destrukturyzacji</td> + <td>{{CompatChrome("49")}}</td> + <td>{{ CompatGeckoDesktop("34") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Funkcja</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>Operacja rozwinięcia w literałach tablicowych</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome("46")}}</td> + <td>{{ CompatGeckoMobile("16") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + <td>{{CompatChrome("46")}}</td> + </tr> + <tr> + <td>Operacja rozwinięcia w wywołaniach funkcji</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome("46")}}</td> + <td>{{ CompatGeckoMobile("27") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + <td>{{CompatChrome("46")}}</td> + </tr> + <tr> + <td>Operacja rozwinięcia w destrukturyzacji</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("34") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Zobacz_też">Zobacz też</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Parametry reszty</a></li> + <li><a href="http://exploringjs.com/es6/ch_destructuring.html#sec_rest-operator">Operator reszty</a></li> +</ul> |
