aboutsummaryrefslogtreecommitdiff
path: root/files/pl/conflicting/web/javascript/reference/operators/spread_syntax
diff options
context:
space:
mode:
authorFlorian Merz <me@fiji-flo.de>2021-02-11 14:49:24 +0100
committerFlorian Merz <me@fiji-flo.de>2021-02-11 14:49:24 +0100
commitde5c456ebded0e038adbf23db34cc290c8829180 (patch)
tree2819c07a177bb7ec5f419f3f6a14270d6bcd7fda /files/pl/conflicting/web/javascript/reference/operators/spread_syntax
parent8260a606c143e6b55a467edf017a56bdcd6cba7e (diff)
downloadtranslated-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.html230
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>