diff options
Diffstat (limited to 'files/bg/web/javascript/reference/operators/spread_syntax/index.html')
| -rw-r--r-- | files/bg/web/javascript/reference/operators/spread_syntax/index.html | 249 |
1 files changed, 249 insertions, 0 deletions
diff --git a/files/bg/web/javascript/reference/operators/spread_syntax/index.html b/files/bg/web/javascript/reference/operators/spread_syntax/index.html new file mode 100644 index 0000000000..7ed649a4bc --- /dev/null +++ b/files/bg/web/javascript/reference/operators/spread_syntax/index.html @@ -0,0 +1,249 @@ +--- +title: Разпределящ синтаксис +slug: Web/JavaScript/Reference/Operators/Spread_syntax +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +original_slug: Web/JavaScript/Reference/Operators/разпределящ_синтаксис +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Разпределящият синтаксис </strong>позволява на итериращ се израз като масив или символен низ да бъде разширен на места, където се използват нула или повече аргументи (или извиквания на функции), елементи (дефиниция на масиви), както и обект да бъде разширен на места, където се очакват нула или повече двойки от тип ключ-стойност (дефиниция на обекти).</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-spreadsyntax.html")}}</div> + +<p class="hidden">Кода на този интерактивен пример се пази в GitHub хранилище. Ако искате да допринесете към интерактивния примерен проект, моля клонирайте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и ни изпратете pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<p>За извиквания на функции:</p> + +<pre class="syntaxbox">myFunction(...iterableObj); +</pre> + +<p>За стойности на масиви или символни низове:</p> + +<pre class="syntaxbox">[...iterableObj, '4', 'five', 6];</pre> + +<p>За стойности на обекти (ново от ECMAScript 2018):</p> + +<pre class="syntaxbox">let objClone = { ...obj };</pre> + +<h2 id="Примери">Примери</h2> + +<h3 id="Разпределящ_синтаксис_при_извикване_на_функции">Разпределящ синтаксис при извикване на функции</h3> + +<p><code style="">Замяна на apply()</code></p> + +<p>Често се използва {{jsxref("Function.prototype.apply()")}} в случаите, когато искаме да използваме елементите на даден масив като аргументи на функция. </p> + +<pre class="brush: js">function myFunction(x, y, z) { } +var args = [0, 1, 2]; +myFunction.apply(null, args);</pre> + +<p>С разпределящия синтаксис можем да запишем горния израз по следния начин: </p> + +<pre class="brush: js">function myFunction(x, y, z) { } +var args = [0, 1, 2]; +myFunction(...args);</pre> + +<p>Всеки аргумент в списъка от аргументи може да използва разпределящия синтаксис и той може да бъде използван няколко пъти.</p> + +<pre class="brush: js">function myFunction(v, w, x, y, z) { } +var args = [0, 1]; +myFunction(-1, ...args, 2, ...[3]);</pre> + +<h4 id="Използване_на_аpply_вместо_new_за_конструиране_на_обект">Използване на <code>аpply</code> вместо <code>new</code> за конструиране на обект</h4> + +<p>Когато извикваме конструктор с {{jsxref("Operators/new", "new")}} не е възможно директно да бъде използван масив и функцията apply(apply прави <code>[[Извикване]],</code> а не <code>[[Конструиране]]</code>). С помощта на разпределящия синтаксис обаче масивът може да бъде използван лесно за конструиране на обект:</p> + +<pre class="brush: js">var dateFields = [1970, 0, 1]; // 1 Jan 1970 +var d = new Date(...dateFields); +</pre> + +<p>За да използваме <code>new</code> с масив от параметри без разпределящ синтаксис, трябва да го направим косвено чрез прилагане на части:</p> + +<pre class="brush: js">function applyAndNew(constructor, args) { + function partial () { + return constructor.apply(this, args); + }; + if (typeof constructor.prototype === "object") { + partial.prototype = Object.create(constructor.prototype); + } + return partial; +} + + +function myConstructor () { + console.log("arguments.length: " + arguments.length); + console.log(arguments); + this.prop1="val1"; + this.prop2="val2"; +}; + +var myArguments = ["hi", "how", "are", "you", "mr", null]; +var myConstructorWithArguments = applyAndNew(myConstructor, myArguments); + +console.log(new myConstructorWithArguments); +// (вътрешна бележка за myConstructor): arguments.length: 6 +// (вътрешна бележка myConstructor): ["hi", "how", "are", "you", "mr", null] +// (бележка на "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"}</pre> + +<h3 id="Разпределящ_синтаксис_при_стойности_на_масиви">Разпределящ синтаксис при стойности на масиви</h3> + +<h4 id="По-мощен_запис_при_създаване_на_масив">По-мощен запис при създаване на масив</h4> + +<p>Без разпределящ синтаксис създаването на нов масив с помощта на вече съществуващ като част от него, синтаксисът за създаване на масив вече не върши работа. Трябва да пишем повече, например да използваме някой от следните методи: {{jsxref("Array.prototype.push", "push()")}}, {{jsxref("Array.prototype.splice", "splice()")}}, {{jsxref("Array.prototype.concat", "concat()")}} и т.н. Използвайки разпределящия синтаксис записът става много по-кратък:</p> + +<pre class="brush: js">var parts = ['shoulders', 'knees']; +var lyrics = ['head', ...parts, 'and', 'toes']; +// ["head", "shoulders", "knees", "and", "toes"] +</pre> + +<p>Както се използва разпределящ синтаксис за списък от аргументи, <code>...</code> може да бъде използван и при създаване на масив, и то многократно.</p> + +<h4 id="Копиране_на_масив">Копиране на масив</h4> + +<pre class="brush: js">var arr = [1, 2, 3]; +var arr2 = [...arr]; // като arr.slice() +arr2.push(4); + +// arr2 става [1, 2, 3, 4] +// arr остава неафектиран +</pre> + +<div class="blockIndicator note"> +<p><strong>Забележка</strong>: Разпределящият синтаксис ефективно минава едно ниво по-дълбоко докато копира масив. Затова може да не е подходящ за копиране на многомерни масиви както показва следния пример(същото е с {{jsxref("Object.assign()")}} и разпределящ синтаксис).</p> +</div> + +<pre class="brush: js">var a = [[1], [2], [3]]; +var b = [...a]; +b.shift().shift(); // 1 +// Сега масивът a също е афектиран: [[], [2], [3]] +</pre> + +<h4 id="По-добър_начин_за_конкатениране_на_масиви">По-добър начин за конкатениране на масиви</h4> + +<p>{{jsxref("Array.prototype.concat()")}} често е използван за конкатениране на масив към края на вече съществуващ масив. Без използване на разпределящ синтаксис това може да бъде направено по следния начин:</p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +// Добавя всички елементи от arr2 след тези на arr1 +arr1 = arr1.concat(arr2);</pre> + +<p>С разпределящ синтаксис това има вида: </p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +arr1 = [...arr1, ...arr2]; // arr1 сега е [0, 1, 2, 3, 4, 5] +</pre> + +<p>{{jsxref("Array.prototype.unshift()")}} често се използва за добавяне на масив със стойности в началото на вече съществуващ масив. Без разпределящ синтаксис това може да бъде направено по следния начин: </p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +// Добавя всички елементи от arr2 преди тези на arr1 +Array.prototype.unshift.apply(arr1, arr2) // arr1 сега е [3, 4, 5, 0, 1, 2]</pre> + +<p>С разпределящ синтаксис става по следния начин: </p> + +<pre class="brush: js">var arr1 = [0, 1, 2]; +var arr2 = [3, 4, 5]; +arr1 = [...arr2, ...arr1]; // arr1 сега е [3, 4, 5, 0, 1, 2] +</pre> + +<div class="blockIndicator note"> +<p><strong>Забележка: </strong>За разлика от <code>unshift()</code>, това създава нов <code>arr1</code>, а не модифицира оригиналния масив <code>arr1</code>. </p> +</div> + +<h3 id="Разпределящ_синтаксис_при_дефиниця_на_обекти">Разпределящ синтаксис при дефиниця на обекти</h3> + +<p>Предложението за <a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a> (етап 4) добавя разпределящи свойства към дефиницията на обекти. То копира собствени изброими свойства от даден обект към нов обект.</p> + +<p>Повърхностното клониране(изключващо prototype) или смесването на обекти вече е възможно с помощта на по-кратък синтаксис от {{jsxref("Object.assign()")}}.</p> + +<pre class="brush: js">var obj1 = { foo: 'bar', x: 42 }; +var obj2 = { foo: 'baz', y: 13 }; + +var clonedObj = { ...obj1 }; +// Обект { foo: "bar", x: 42 } + +var mergedObj = { ...obj1, ...obj2 }; +// Обект { foo: "baz", x: 42, y: 13 }</pre> + +<p>Обърнете внимание, че {{jsxref("Object.assign()")}} извиква <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setters</a> за разлика от разпределящия синтаксис.</p> + +<p>Забележете, че функцията {{jsxref("Object.assign()")}} не може нито да бъде подменена, нито да се напише подобна:</p> + +<pre class="brush: js">var obj1 = { foo: 'bar', x: 42 }; +var obj2 = { foo: 'baz', y: 13 }; +const merge = ( ...objects ) => ( { ...objects } ); + +var mergedObj = merge ( obj1, obj2); +// Обект { 0: { foo: 'bar', x: 42 }, 1: { foo: 'baz', y: 13 } } + +var mergedObj = merge ( {}, obj1, obj2); +// Обект { 0: {}, 1: { foo: 'bar', x: 42 }, 2: { foo: 'baz', y: 13 } }</pre> + +<p>В горния пример разпределящият синтаксис не работи както се очаква: той разпределя масив от аргументи в дефиницията на обекта според зададените параметри. </p> + +<h3 id="Само_за_итериращи_променливи">Само за итериращи променливи</h3> + +<p>Разпределящият синтаксис (както и разпределящите свойства) може да бъде приложен само върху обекти, които могат да бъдат итерирани:</p> + +<pre class="brush: js">var obj = {'key1': 'value1'}; +var array = [...obj]; // TypeError: obj не може да се итерира +</pre> + +<h3 id="Разпределящ_синтаксис_с_много_стойности">Разпределящ синтаксис с много стойности </h3> + +<p>Когато използваме разпределящ синтаксис за извикване на функции трябва да бъдем запознати с възможността за надвишаване на лимита на брой на аргументи на функция в Javascript. За повече информация вижте {{jsxref("Function.prototype.apply", "apply()")}}.</p> + +<h2 id="Обединяващ_синтаксис_параметри">Обединяващ синтаксис (параметри) </h2> + +<p>Обединяващият синтаксис изглежда точно както разпределящия синтаксис, но е използван за разлагане на масиви и обекти. Иначе казано, обединяващият синтаксис е точно обратното на разпределящия синтаксис: докато разпределящият синтаксис разширява масива си със стойности, обединяващият синтаксис събира няколко елемента и ги събира в един елемент. За повече информация вижте <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">rest parameters.</a></p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ES2015', '#sec-array-initializer')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Дефинирана в няколко секции на спецификацията: <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('ES2018', '#sec-object-initializer')}}</td> + <td>{{Spec2('ES2018')}}</td> + <td>Дефинирана в <a href="http://www.ecma-international.org/ecma-262/9.0/#sec-object-initializer">Object Initializer</a></td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Няма промени.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-initializer')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Няма промени.</td> + </tr> + </tbody> +</table> + +<h2 id="Съвместимост_с_браузъри">Съвместимост с браузъри</h2> + + + +<p>{{Compat("javascript.operators.spread")}}</p> + +<h2 id="Вижте_още">Вижте още</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/rest_parameters">Rest parameters</a> (също ‘<code>...</code>’)</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply">fn.apply</a> (също ‘<code>...</code>’)</li> +</ul> |