diff options
Diffstat (limited to 'files/bg/web/javascript')
21 files changed, 5014 insertions, 0 deletions
diff --git a/files/bg/web/javascript/guide/index.html b/files/bg/web/javascript/guide/index.html new file mode 100644 index 0000000000..efc0745c96 --- /dev/null +++ b/files/bg/web/javascript/guide/index.html @@ -0,0 +1,122 @@ +--- +title: Ръководство по JavaScript +slug: Web/JavaScript/Guide +tags: + - JavaScript + - ръководство +translation_of: Web/JavaScript/Guide +--- +<div>{{jsSidebar("JavaScript Guide")}}</div> + +<p class="summary">Ръководството по JavaScript ви обяснява как да използвате <a href="/bg/docs/Web/JavaScript">JavaScript</a> и ви дава обща представа за езика. Ако се нуждаете от изчерпателни сведения за отделна възможност на езика, потърсете в <a href="/bg/docs/Web/JavaScript/Reference">Справочника за JavaScript</a>.</p> + +<h2 id="Глави">Глави</h2> + +<p>This Guide is divided into several chapters:</p> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Introduction">Introduction</a></span> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Introduction#Where_to_find_JavaScript_information">About this guide</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#What_is_JavaScript">About JavaScript</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_Java">JavaScript and Java</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#JavaScript_and_the_ECMAScript_Specification">ECMAScript</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#Getting_started_with_JavaScript">Tools</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Introduction#Hello_world">Hello World</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types">Grammar and types</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Basics">Basic syntax & comments</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Declarations">Declarations</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_scope">Variable scope</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Variable_hoisting">Variable hoisting</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Data_structures_and_types">Data structures and types</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Grammar_and_types#Literals">Literals</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling">Control flow and error handling</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#if...else_statement">if...else</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#switch_statement">switch</a></code><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Exception_handling_statements"><code>try</code>/<code>catch</code>/<code>throw</code></a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Utilizing_Error_objects">Error objects</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Control_flow_and_error_handling#Promises">Promises</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration">Loops and iteration</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for_statement">for</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#while_statement">while</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#do...while_statement">do...while</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#break_statement">break</a>/<a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#continue_statement">continue</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...in_statement">for..in</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Loops_and_iteration#for...of_statement">for..of</a></code></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Functions</a></span> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Functions#Defining_functions">Defining functions</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Calling_functions">Calling functions</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Function_scope">Function scope</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Closures">Closures</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Using_the_arguments_object">Arguments</a> & <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Function_parameters">parameters</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Functions#Arrow_functions">Arrow functions</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators">Expressions and operators</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Assignment_operators">Assignment</a> & <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Comparison_operators">Comparisons</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Arithmetic_operators">Arithmetic operators</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Bitwise_operators">Bitwise</a> & <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Logical_operators">logical operators</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Conditional_(ternary)_operator">Conditional (ternary) operator</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates">Numbers and dates</a></span><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Numbers"> Number literals</a> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Number_object"><code>Number</code> object</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Math_object"><code>Math</code> object</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Numbers_and_dates#Date_object"><code>Date</code> object</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting">Text formatting</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#String_literals">String literals</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#String_objects"><code>String</code> object</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#Multi-line_template_literals">Template literals</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Text_formatting#Internationalization">Internationalization</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">Regular Expressions</a></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections">Indexed collections</a></span> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Array_object">Arrays</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Typed_Arrays">Typed arrays</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections">Keyed collections</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#Map_object">Map</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#WeakMap_object">WeakMap</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#Set_object">Set</a></code><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Keyed_collections#WeakSet_object">WeakSet</a></code></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects">Working with objects</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">Objects and properties</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">Creating objects</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_methods">Defining methods</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">Getter and setter</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model">Details of the object model</a></span> + <p><a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Class-based_vs._prototype-based_languages">Prototype-based OOP</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Creating_the_hierarchy">Creating object hierarchies</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Details_of_the_Object_Model#Property_inheritance_revisited">Inheritance</a></p> + </li> +</ul> + +<ul class="card-grid"> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators">Iterators and generators</a></span> + + <p><a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterators">Iterators</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Iterables">Iterables</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators#Generators">Generators</a></p> + </li> + <li><span><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming">Meta programming</a></span> + <p><code><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Proxies">Proxy</a></code><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Handlers_and_traps">Handlers and traps</a><br> + <a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Revocable_Proxy">Revocable Proxy</a><br> + <code><a href="/en-US/docs/Web/JavaScript/Guide/Meta_programming#Reflection">Reflect</a></code></p> + </li> +</ul> + +<p>{{Next("Web/JavaScript/Guide/Introduction")}}</p> diff --git a/files/bg/web/javascript/guide/text_formatting/index.html b/files/bg/web/javascript/guide/text_formatting/index.html new file mode 100644 index 0000000000..b96734f66e --- /dev/null +++ b/files/bg/web/javascript/guide/text_formatting/index.html @@ -0,0 +1,255 @@ +--- +title: Text formatting +slug: Web/JavaScript/Guide/Text_formatting +translation_of: Web/JavaScript/Guide/Text_formatting +--- +<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}</div> + +<p class="summary">This chapter introduces how to work with strings and text in JavaScript.</p> + +<h2 id="Strings">Strings</h2> + +<p>JavaScript's <a href="/en-US/docs/Glossary/String">String</a> type is used to represent textual data. It is a set of "elements" of 16-bit unsigned integer values (UTF-16 code units). Each element in the String occupies a position in the String. The first element is at index 0, the next at index 1, and so on. The length of a String is the number of elements in it. You can create strings using string literals or string objects.</p> + +<div class="hidden">CAUTION: if you edit this page, do not include any characters above U+FFFF, until MDN bug 857438 is fixed ( <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=857438">https://bugzilla.mozilla.org/show_bug.cgi?id=857438</a> ).</div> + +<h3 id="String_literals">String literals</h3> + +<p>You can create simple strings using either single or double quotes:</p> + +<pre class="brush: js notranslate">'foo' +"bar"</pre> + +<p>More advanced strings can be created using escape sequences:</p> + +<h4 id="Hexadecimal_escape_sequences">Hexadecimal escape sequences</h4> + +<p>The number after \x is interpreted as a <a href="https://en.wikipedia.org/wiki/Hexadecimal">hexadecimal</a> number.</p> + +<pre class="brush: js notranslate">'\xA9' // "©" +</pre> + +<h4 id="Unicode_escape_sequences">Unicode escape sequences</h4> + +<p>The Unicode escape sequences require at least four hexadecimal digits following <code>\u</code>.</p> + +<pre class="brush: js notranslate">'\u00A9' // "©"</pre> + +<h4 id="Unicode_code_point_escapes">Unicode code point escapes</h4> + +<p>New in ECMAScript 2015. With Unicode code point escapes, any character can be escaped using hexadecimal numbers so that it is possible to use Unicode code points up to <code>0x10FFFF</code>. With simple Unicode escapes it is often necessary to write the surrogate halves separately to achieve the same result.</p> + +<p>See also {{jsxref("String.fromCodePoint()")}} or {{jsxref("String.prototype.codePointAt()")}}.</p> + +<pre class="brush: js notranslate">'\u{2F804}' + +// the same with simple Unicode escapes +'\uD87E\uDC04'</pre> + +<h3 id="String_objects">String objects</h3> + +<p>The {{jsxref("String")}} object is a wrapper around the string primitive data type.</p> + +<pre class="brush: js notranslate">const foo = new String('foo'); // Creates a String object +console.log(foo); // Displays: <span><span>[String: 'foo']</span></span> +typeof foo; // Returns 'object' +</pre> + +<p>You can call any of the methods of the <code>String</code> object on a string literal value—JavaScript automatically converts the string literal to a temporary <code>String</code> object, calls the method, then discards the temporary <code>String</code> object. You can also use the <code>String.length</code> property with a string literal.</p> + +<p>You should use string literals unless you specifically need to use a <code>String</code> object, because <code>String</code> objects can have counterintuitive behavior. For example:</p> + +<pre class="brush: js notranslate">const firstString = '2 + 2'; // Creates a string literal value +const secondString = new String('2 + 2'); // Creates a String object +eval(firstString); // Returns the number 4 +eval(secondString); // Returns the string "2 + 2"</pre> + +<p>A <code>String</code> object has one property, <code>length</code>, that indicates the number of UTF-16 code units in the string. For example, the following code assigns <code>helloLength</code> the value 13, because "Hello, World!" has 13 characters, each represented by one UTF-16 code unit. You can access each code unit using an array bracket style. You can't change individual characters because strings are immutable array-like objects:</p> + +<pre class="brush: js notranslate">const hello = 'Hello, World!'; +const helloLength = hello.length; +hello[0] = 'L'; // This has no effect, because strings are immutable +hello[0]; // This returns "H" +</pre> + +<p>Characters whose Unicode scalar values are greater than U+FFFF (such as some rare Chinese/Japanese/Korean/Vietnamese characters and some emoji) are stored in UTF-16 with two surrogate code units each. For example, a string containing the single character U+1F600 "Emoji grinning face" will have length 2. Accessing the individual code units in such a string using brackets may have undesirable consequences such as the formation of strings with unmatched surrogate code units, in violation of the Unicode standard. (Examples should be added to this page after MDN bug 857438 is fixed.) See also {{jsxref("String.fromCodePoint()")}} or {{jsxref("String.prototype.codePointAt()")}}.</p> + +<p>A <code>String</code> object has a variety of methods: for example those that return a variation on the string itself, such as <code>substring</code> and <code>toUpperCase</code>.</p> + +<p>The following table summarizes the methods of {{jsxref("String")}} objects.</p> + +<table class="standard-table"> + <caption> + <h4 id="Methods_of_String">Methods of <code>String</code></h4> + </caption> + <thead> + <tr> + <th scope="col">Method</th> + <th scope="col">Description</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{jsxref("String.charAt", "charAt")}}, {{jsxref("String.charCodeAt", "charCodeAt")}}, {{jsxref("String.codePointAt", "codePointAt")}}</td> + <td>Return the character or character code at the specified position in string.</td> + </tr> + <tr> + <td>{{jsxref("String.indexOf", "indexOf")}}, {{jsxref("String.lastIndexOf", "lastIndexOf")}}</td> + <td>Return the position of specified substring in the string or last position of specified substring, respectively.</td> + </tr> + <tr> + <td>{{jsxref("String.startsWith", "startsWith")}}, {{jsxref("String.endsWith", "endsWith")}}, {{jsxref("String.includes", "includes")}}</td> + <td>Returns whether or not the string starts, ends or contains a specified string.</td> + </tr> + <tr> + <td>{{jsxref("String.concat", "concat")}}</td> + <td>Combines the text of two strings and returns a new string.</td> + </tr> + <tr> + <td>{{jsxref("String.fromCharCode", "fromCharCode")}}, {{jsxref("String.fromCodePoint", "fromCodePoint")}}</td> + <td>Constructs a string from the specified sequence of Unicode values. This is a method of the String class, not a String instance.</td> + </tr> + <tr> + <td>{{jsxref("String.split", "split")}}</td> + <td>Splits a <code>String</code> object into an array of strings by separating the string into substrings.</td> + </tr> + <tr> + <td>{{jsxref("String.slice", "slice")}}</td> + <td>Extracts a section of a string and returns a new string.</td> + </tr> + <tr> + <td>{{jsxref("String.substring", "substring")}}, {{jsxref("String.substr", "substr")}}</td> + <td>Return the specified subset of the string, either by specifying the start and end indexes or the start index and a length.</td> + </tr> + <tr> + <td>{{jsxref("String.match", "match")}}, {{jsxref("String.matchAll", "matchAll")}}, {{jsxref("String.replace", "replace")}}, {{jsxref("String.search", "search")}}</td> + <td>Work with regular expressions.</td> + </tr> + <tr> + <td>{{jsxref("String.toLowerCase", "toLowerCase")}}, {{jsxref("String.toUpperCase", "toUpperCase")}}</td> + <td> + <p>Return the string in all lowercase or all uppercase, respectively.</p> + </td> + </tr> + <tr> + <td>{{jsxref("String.normalize", "normalize")}}</td> + <td>Returns the Unicode Normalization Form of the calling string value.</td> + </tr> + <tr> + <td>{{jsxref("String.repeat", "repeat")}}</td> + <td>Returns a string consisting of the elements of the object repeated the given times.</td> + </tr> + <tr> + <td>{{jsxref("String.trim", "trim")}}</td> + <td>Trims whitespace from the beginning and end of the string.</td> + </tr> + </tbody> +</table> + +<h3 id="Multi-line_template_literals">Multi-line template literals</h3> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Template_literals">Template literals</a> are string literals allowing embedded expressions. You can use multi-line strings and string interpolation features with them.</p> + +<p>Template literals are enclosed by the back-tick (` `) (<a class="external external-icon" href="https://en.wikipedia.org/wiki/Grave_accent">grave accent</a>) character instead of double or single quotes. Template literals can contain place holders. These are indicated by the Dollar sign and curly braces (<code>${expression}</code>).</p> + +<h4 id="Multi-lines">Multi-lines</h4> + +<p>Any new line characters inserted in the source are part of the template literal. Using normal strings, you would have to use the following syntax in order to get multi-line strings:</p> + +<pre class="brush: js notranslate">console.log('string text line 1\n\ +string text line 2'); +// "string text line 1 +// string text line 2"</pre> + +<p>To get the same effect with multi-line strings, you can now write:</p> + +<pre class="brush: js notranslate">console.log(`string text line 1 +string text line 2`); +// "string text line 1 +// string text line 2"</pre> + +<h4 id="Embedded_expressions">Embedded expressions</h4> + +<p>In order to embed expressions within normal strings, you would use the following syntax:</p> + +<pre class="brush: js notranslate">const five = 5; +const ten = 10; +console.log('Fifteen is ' + (five + ten) + ' and not ' + (2 * five + ten) + '.'); +// "Fifteen is 15 and not 20."</pre> + +<p>Now, with template literals, you are able to make use of the syntactic sugar making substitutions like this more readable:</p> + +<pre class="brush: js notranslate">const five = 5; +const ten = 10; +console.log(`Fifteen is ${five + ten} and not ${2 * five + ten}.`); +// "Fifteen is 15 and not 20."</pre> + +<p>For more information, read about <a href="/en-US/docs/Web/JavaScript/Reference/Template_literals">Template literals</a> in the <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript reference</a>.</p> + +<h2 id="Internationalization">Internationalization</h2> + +<p>The {{jsxref("Intl")}} object is the namespace for the ECMAScript Internationalization API, which provides language sensitive string comparison, number formatting, and date and time formatting. The constructors for {{jsxref("Collator")}}, {{jsxref("NumberFormat")}}, and {{jsxref("DateTimeFormat")}} objects are properties of the <code>Intl</code> object.</p> + +<h3 id="Date_and_time_formatting">Date and time formatting</h3> + +<p>The {{jsxref("DateTimeFormat")}} object is useful for formatting date and time. The following formats a date for English as used in the United States. (The result is different in another time zone.)</p> + +<pre class="brush: js notranslate">const msPerDay = 24 * 60 * 60 * 1000; + +// July 17, 2014 00:00:00 UTC. +const july172014 = new Date(msPerDay * (44 * 365 + 11 + 197)); + +const options = { year: '2-digit', month: '2-digit', day: '2-digit', + hour: '2-digit', minute: '2-digit', timeZoneName: 'short' }; +const americanDateTime = new Intl.DateTimeFormat('en-US', options).format; + +console.log(americanDateTime(july172014)); // 07/16/14, 5:00 PM PDT +</pre> + +<h3 id="Number_formatting">Number formatting</h3> + +<p>The {{jsxref("NumberFormat")}} object is useful for formatting numbers, for example currencies.</p> + +<pre class="brush: js notranslate">const gasPrice = new Intl.NumberFormat('en-US', + { style: 'currency', currency: 'USD', + minimumFractionDigits: 3 }); + +console.log(gasPrice.format(5.259)); // $5.259 + +const hanDecimalRMBInChina = new Intl.NumberFormat('zh-CN-u-nu-hanidec', + { style: 'currency', currency: 'CNY' }); + +console.log(hanDecimalRMBInChina.format(1314.25)); // ￥ 一,三一四.二五 +</pre> + +<h3 id="Collation">Collation</h3> + +<p>The {{jsxref("Collator")}} object is useful for comparing and sorting strings.</p> + +<p>For example, there are actually two different sort orders in German, <em>phonebook</em> and <em>dictionary</em>. Phonebook sort emphasizes sound, and it’s as if “ä”, “ö”, and so on were expanded to “ae”, “oe”, and so on prior to sorting.</p> + +<pre class="brush: js notranslate">const names = ['Hochberg', 'Hönigswald', 'Holzman']; + +const germanPhonebook = new Intl.Collator('de-DE-u-co-phonebk'); + +// as if sorting ["Hochberg", "Hoenigswald", "Holzman"]: +console.log(names.sort(germanPhonebook.compare).join(', ')); +// logs "Hochberg, Hönigswald, Holzman" +</pre> + +<p>Some German words conjugate with extra umlauts, so in dictionaries it’s sensible to order ignoring umlauts (except when ordering words differing <em>only</em> by umlauts: <em>schon</em> before <em>schön</em>).</p> + +<pre class="brush: js notranslate">const germanDictionary = new Intl.Collator('de-DE-u-co-dict'); + +// as if sorting ["Hochberg", "Honigswald", "Holzman"]: +console.log(names.sort(germanDictionary.compare).join(', '));<font><font> +// nhật ký "Hồ Chí Minh, Holzman, Hönigswald"</font></font> +</pre> + +<p><font><font>Để biết thêm thông tin về API {{jsxref ("Intl")}}, xem thêm </font></font><a href="https://hacks.mozilla.org/2014/12/introducing-the-javascript-internationalization-api/"><font><font>Giới thiệu API quốc tế hóa JavaScript</font></font></a><font><font> .</font></font></p> + +<div> +<article> +<p>{{PreviousNext("Web/JavaScript/Guide/Numbers_and_dates", "Web/JavaScript/Guide/Regular_Expressions")}}</p> +</article> +</div> diff --git a/files/bg/web/javascript/index.html b/files/bg/web/javascript/index.html new file mode 100644 index 0000000000..70e8bf97af --- /dev/null +++ b/files/bg/web/javascript/index.html @@ -0,0 +1,127 @@ +--- +title: JavaScript +slug: Web/JavaScript +tags: + - JavaScript + - Landing + - Learn + - NeedsTranslation + - TopicStub + - 'l10n:priority' +translation_of: Web/JavaScript +--- +<div>{{JsSidebar}}</div> + +<p class="summary"><strong>JavaScript</strong> (<strong>JS</strong>) е лека интерпретация или JIT- компилиран програмен език с {{Glossary("First-class Function(Първокласни функции)", "първокласни функции")}}. <span class="tlid-translation translation"><span title="">Въпреки, че е най-добре познат като скриптов език за уеб страници</span></span> , <a class="external" href="https://en.wikipedia.org/wiki/JavaScript#Uses_outside_Web_pages">също така и много работни среди без браузър</a> го използват. Такива като <a class="external" href="https://nodejs.org/">node.js</a>, <a href="https://couchdb.apache.org/">Apache CouchDB</a> и <a href="http://www.adobe.com/devnet/acrobat/javascript.html">Adobe Acrobat</a>. JavaScript също е и {{Glossary("Прототипно базиран език за програмиране", "прототипно базиран")}}, използващ мулти-парадигма, динамичен език. Поддържа обектно ориентирано програмиране , императивни и декларативни (функционално програмиране) стилове. Прочетете повече <a href="/en-US/docs/Web/JavaScript/About_JavaScript">за JavaScript</a>.</p> + +<p><span class="tlid-translation translation"><span title="">Този раздел на сайта е посветен на самия език на JavaScript</span></span> , и не съдържа части/информация,<span class="tlid-translation translation"><span title="">които са специфични за уеб страници или други хост среди.</span></span></p> + +<p>За информация относно {{Glossary("API","APIs")}} специфични за УЕБ страниците, моля вижте <a href="/en-US/docs/Web/API">Web APIs</a> или <a href="/en-US/docs/Glossary/DOM">DOM</a>.</p> + +<p>Стандарта за JavaScript се нарича <a href="/en-US/docs/Web/JavaScript/Language_Resources">ECMAScript</a>. От 2012, всички модерни браузъри напълно поддържат ECMAScript 5.1. По-старите браузъри поддържат поне ECMAScript 3. На 17 Юни 2015 г. , <a href="https://www.ecma-international.org">ECMA International</a> публикува шестата основна версия на ECMAScript, която и официално се нарича ECMAScript 2015 и е първоначално наричана ECMAScript 6 или ES6. От тогава, ECMAScript стандартите се появяват на годишна база. Тази документация се отнася до най-новата версия на проекта, която понастоящем е ECMAScript 2018.</p> + +<p>Не бъркайте JavaScript със <a href="https://en.wikipedia.org/wiki/Java_(programming_language)">езика за програмиране Java</a>. И двата езика "Java" и "JavaScript" <span class="tlid-translation translation"><span title="">са търговски марки или регистрирани търговски марки на Oracle в САЩ</span></span> и други държави. И двата езика за програмиране имат много различен синтакс, семантика и изпозлване.</p> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Уроци">Уроци</h2> + +<p><span class="tlid-translation translation"><span title="">Научете се как да програмирате с JavaScript чрез ръководства и уроци.</span></span></p> + +<h3 id="За_напълно_начианещи">За напълно начианещи</h3> + +<p>Разгледайте темата <a href="/en-US/docs/Learn/JavaScript">Lеearning Area JavaScript topic</a> ако искате да учите JavaScript, <span class="tlid-translation translation"><span title="">но нямате предишен опит в JavaScript или програмирането.</span> <span title="">Пълните налични модули са както следва:</span></span></p> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript първи стъпки</a></dt> + <dd><span class="tlid-translation translation"><span title="">Отговори на някои основни въпроси като "Какво е JavaScript?", "Как изглежда?" И "какво може да направи?", Заедно с обсъждане на ключови характеристики на JavaScript, като променливи, низове, числа и масиви.</span></span></dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Building_blocks">JavaScript изграждащи блокове</a></dt> + <dd>Продължава с нашето покритие за ключовите характеристики на Javascript, насочвайки вниманието ни към често срещаните типове блокове код, като условни изрази, цикли, функции и събития.</dd> +</dl> + +<h3 id="Javascript_ръководство">Javascript ръководство</h3> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide">JavaScript ръководство</a></dt> + <dd>Много по-подробно и детйално ръководство за езика JavaScript , насочено повече към хора с опит в програмирането или с друг език за програмиране.</dd> +</dl> + +<h3 id="Средно_напреднали">Средно напреднали</h3> + +<dl> + <dt><a href="/en-US/docs/Learn/JavaScript/Objects">Въведение в JavaScript обектите</a></dt> + <dd>Обектно-ориентираният характер на Javascript e важен за разбиране, ако искате да стигнете по-далеч със знанията за езика и да пишете по-ефективен код. Затова сме Ви предоставили този модул , за да Ви помогне по-добре.</dd> + <dt><a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs">Уеб 'APIs' от страна на клиента</a></dt> + <dd>Когато пишете клиентски ориентиран JavaScript за уеб сайтове или приложения,<span lang="bg"> няма да стигнете много далеч, преди да започнете да използвате API - интерфейси за манипулиране на различни аспекти на браузъра и операционната система на която сайтът работи, или дори данни от други уеб сайтове или услуги. В този модул ще разгледаме какво представляват API-тата и как да използваме някои от най-често използваните приложни програмни интерфейси(API), с които ще се сблъскате най-често в работата си .</span></dd> +</dl> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript">Повторно въвеждане в JavaScript</a></dt> + <dd><span style="background-color: #ffffff; color: #212121; display: inline !important; float: none; font-family: arial,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: pre-wrap;">Преглед за тези, които мислят, че знаят повече за JavaScript.</span></dd> +</dl> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures">Структори от данни в JavaScript</a></dt> + <dd> + <pre class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="unicode-bidi: isolate; background-color: rgb(255, 255, 255); border: none; padding: 0px 0.14em 0px 0px; position: relative; margin: 0px; font-family: inherit; overflow: hidden; text-align: left; width: 275px; white-space: pre-wrap; font-size: 16px !important; line-height: 24px !important; font-weight: 400; color: rgb(33, 33, 33); font-style: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; text-decoration-style: initial; height: 48px;"><span lang="bg">Преглед на наличните структури от данни в JavaScript.</span></pre> + </dd> + <dt><a href="/en-US/docs/Web/JavaScript/Equality_comparisons_and_sameness">Сравнение на равенството и еднаквостта</a></dt> + <dd>JavaScript осигурява три различни операции за сравнение на стойности: стриктно равенство, използвайки <code>===</code>, свободно сравнение, използвайки <code>==</code>, и метода {{jsxref("Global_Objects/Object/is", "Object.is()")}} .</dd> +</dl> + +<h3 id="Напреднали">Напреднали</h3> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Inheritance_and_the_prototype_chain">Наследяване и прототипна верига</a></dt> + <dd>Обяснение на широко неразбраното и подценено прототипно-базирано наследяване.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Строг режим</a></dt> + <dd>Строгия режим дефинира/определя, че не можете да използвате която и да е променлива преди да я инициализирате/създадете. Това е ограничен вариант на ECMAScript 5 стандарта, за по-бърза работа и по-лесно остраняване на грешки(дебъгване).</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript типизирани/типове масиви</a></dt> + <dd>Типизираните масиви в JavaScript <span lang="bg">предоставят механизъм за достъп до необработени двоични данни.</span></dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_Management">Управелние на паметта</a></dt> + <dd>Жизненият цикъл на паметта и събирането на "боклука" в Javascript.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/EventLoop">Конкурентен модел и цикъл на събитията</a></dt> + <dd>JavaScript има конкурентен модел, който е базиран на "цикъл на сибитията (event loop) ".</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Препратка">Препратка</h2> + +<p>Разгледайте пълната справочна документация на <a href="/en-US/docs/Web/JavaScript/Reference">JavaScript.</a></p> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">Стандартни обекти</a></dt> + <dd>Запознайте се със стандартните вградени обекти {{jsxref("Array")}}, {{jsxref("Boolean")}}, {{jsxref("Date")}}, {{jsxref("Error")}}, {{jsxref("Function")}}, {{jsxref("JSON")}}, {{jsxref("Math")}}, {{jsxref("Number")}}, {{jsxref("Object")}}, {{jsxref("RegExp")}}, {{jsxref("String")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("WeakMap")}}, {{jsxref("WeakSet")}}, and others.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Изрази и оператори</a></dt> + <dd>Научете повече за поведението на JavaScript операторите {{jsxref("Оператори/instanceof", "instanceof")}}, {{jsxref("Оператори/typeof", "typeof")}}, {{jsxref("Оператори/new", "new")}}, {{jsxref("Оператори/this", "this")}}, <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">оператора precedence</a>, и още.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Statements">Изавления и декларации</a></dt> + <dd>Научете как {{jsxref("Изавления/do...while", "do-while")}}, {{jsxref("Изавления/for...in", "for-in")}}, {{jsxref("Изавления/for...of", "for-of")}}, {{jsxref("Изавления/try...catch", "try-catch")}}, {{jsxref("Изавления/let", "let")}}, {{jsxref("Изавления/var", "var")}}, {{jsxref("Изавления/const", "const")}}, {{jsxref("Изавления/if...else", "if-else")}}, {{jsxref("Изавления/switch", "switch")}}, и още JavaScript изавления и ключови думи за работа.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Функции</a></dt> + <dd>Научете се как да работите с JavaScript's функциите за разработване на вашите приложения.</dd> +</dl> + +<h2 id="Инструменти_ресурси">Инструменти & ресурси</h2> + +<p>Полезни инструменти за писане и отстраняване на грешки във вашият <strong>JavaScript код</strong>.</p> + +<dl> + <dt><a href="/en-US/docs/Tools">Firefox Инструменти за Разработчици</a></dt> + <dd><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a>, <a href="/en-US/docs/Tools/Web_Console">Web Console</a>, <a href="/en-US/docs/Tools/Profiler">JavaScript Profiler</a>, <a href="/en-US/docs/Tools/Debugger">Debugger</a>, и още.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Shells">JavaScript Щитове</a></dt> + <dd>JavaScript щита позволява бързото тестване на откъси от JavaScript код.</dd> + <dt><a href="https://togetherjs.com/">TogetherJS</a></dt> + <dd><span style="background-color: #ffffff; color: #212121; display: inline !important; float: none; font-family: arial,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: pre-wrap;">Сътрудничеството става лесно. Като добавите TogetherJS към сайта си, вашите потребители могат да си помагат един на друг в уебсайта ви и то в реално време!</span></dd> + <dt><a href="https://stackoverflow.com/questions/tagged/javascript">Stack Overflow</a></dt> + <dd>Stack Overflow въпроси маркирани с "JavaScript".</dd> + <dt><a href="/en-US/docs/Web/JavaScript/New_in_JavaScript">JavaScript версии и бележки по изданието</a></dt> + <dd>Прегледайте последните истории свързани с JavaScript's и състоянието на изпълнение.</dd> + <dt><a href="https://jsfiddle.net/">JSFiddle</a></dt> + <dd>Редактирай JavaScript, CSS, HTML и получете резултати на живо.<span lang="bg"> Използвайте външни ресурси и сътрудничете с екипа си онлайн.</span></dd> + <dt><a href="https://plnkr.co/">Plunker</a></dt> + <dd> + <pre class="tw-data-text tw-ta tw-text-small" dir="ltr" id="tw-target-text" style="unicode-bidi: isolate; background-color: rgb(255, 255, 255); border: none; padding: 0px 0.14em 0px 0px; position: relative; margin: 0px; font-family: inherit; overflow: hidden; text-align: left; width: 275px; white-space: pre-wrap; font-size: 16px !important; line-height: 24px !important; font-weight: 400; color: rgb(33, 33, 33); font-style: normal; letter-spacing: normal; text-indent: 0px; text-transform: none; text-decoration-style: initial; height: 168px;"><span lang="bg">Plunker е онлайн общност за създаване, сътрудничество и споделяне на идеи за уеб разработки. Редактирайте вашите JavaScript, CSS, HTML файлове и получете резултати на живо и структура на файла.</span></pre> + </dd> +</dl> +</div> +</div> diff --git a/files/bg/web/javascript/inheritance_and_the_prototype_chain/index.html b/files/bg/web/javascript/inheritance_and_the_prototype_chain/index.html new file mode 100644 index 0000000000..65194d2deb --- /dev/null +++ b/files/bg/web/javascript/inheritance_and_the_prototype_chain/index.html @@ -0,0 +1,563 @@ +--- +title: Inheritance and the prototype chain +slug: Web/JavaScript/Inheritance_and_the_prototype_chain +translation_of: Web/JavaScript/Inheritance_and_the_prototype_chain +--- +<div>{{jsSidebar("Advanced")}}</div> + +<div></div> + +<p>JavaScript е малко объркващ за разработчиците с опит в езиците, базирани на класове (като Java или C ++), тъй като е динамичен и не осигурява реализация на клас сам по себе си (ключовата дума клас е въведена в ES2015, но е <a href="https://en.wikipedia.org/wiki/Syntactic_sugar">syntax sugar</a>) и JavaScript остава прототипно базиран.</p> + +<p>Когато става дума за наследяване, JavaScript има само една конструкция: обекти. Всеки обект има свойство, което съдържа връзка към друг обект, наречен негов <strong>прототип</strong>. Този прототип има собствен прототип и така нататък, докато прототипа не стане <code>null</code>. По дефиниция null няма прототип и действа като крайна връзка в тази верига на прототипа.</p> + +<p>Nearly all objects in JavaScript are instances of {{jsxref("Object")}} which sits on the top of a prototype chain.</p> + +<p>While this confusion is often considered to be one of JavaScript's weaknesses, the prototypal inheritance model itself is, in fact, more powerful than the classic model. It is, for example, fairly trivial to build a classic model on top of a prototypal model.</p> + +<h2 id="Inheritance_with_the_prototype_chain">Inheritance with the prototype chain</h2> + +<h3 id="Inheriting_properties">Inheriting properties</h3> + +<p>JavaScript objects are dynamic "bags" of properties (referred to as <strong>own properties</strong>). JavaScript objects have a link to a prototype object. When trying to access a property of an object, the property will not only be sought on the object but on the prototype of the object, the prototype of the prototype, and so on until either a property with a matching name is found or the end of the prototype chain is reached.</p> + +<div class="note"> +<p>Following the ECMAScript standard, the notation <code>someObject.[[Prototype]]</code> is used to designate the prototype of <code>someObject</code>. Since ECMAScript 2015, the <code>[[Prototype]]</code> is accessed using the accessors {{jsxref("Object.getPrototypeOf()")}} and {{jsxref("Object.setPrototypeOf()")}}. This is equivalent to the JavaScript property <code>__proto__</code> which is non-standard but de-facto implemented by many browsers.</p> + +<p>It should not be confused with the <code><em>func</em>.prototype</code> property of functions, which instead specifies the <code>[[Prototype]]</code> to be assigned to all <em>instances</em> of objects created by the given function when used as a constructor. The <code><strong>Object.prototype</strong></code> property represents the {{jsxref("Object")}} prototype object.</p> +</div> + +<p>Here is what happens when trying to access a property:</p> + +<pre class="brush: js">// Let's create an object o from function f with its own properties a and b: +let f = function () { + this.a = 1; + this.b = 2; +} +let o = new f(); // {a: 1, b: 2} + +// add properties in f function's prototype +f.prototype.b = 3; +f.prototype.c = 4; + +// do not set the prototype f.prototype = {b:3,c:4}; this will break the prototype chain +// o.[[Prototype]] has properties b and c. +// o.[[Prototype]].[[Prototype]] is Object.prototype. +// Finally, o.[[Prototype]].[[Prototype]].[[Prototype]] is null. +// This is the end of the prototype chain, as null, +// by definition, has no [[Prototype]]. +// Thus, the full prototype chain looks like: +// {a: 1, b: 2} ---> {b: 3, c: 4} ---> Object.prototype ---> null + +console.log(o.a); // 1 +// Is there an 'a' own property on o? Yes, and its value is 1. + +console.log(o.b); // 2 +// Is there a 'b' own property on o? Yes, and its value is 2. +// The prototype also has a 'b' property, but it's not visited. +// This is called Property Shadowing + +console.log(o.c); // 4 +// Is there a 'c' own property on o? No, check its prototype. +// Is there a 'c' own property on o.[[Prototype]]? Yes, its value is 4. + +console.log(o.d); // undefined +// Is there a 'd' own property on o? No, check its prototype. +// Is there a 'd' own property on o.[[Prototype]]? No, check its prototype. +// o.[[Prototype]].[[Prototype]] is Object.prototype and there is no 'd' property by default, check its prototype. +// o.[[Prototype]].[[Prototype]].[[Prototype]] is null, stop searching, +// no property found, return undefined. +</pre> + +<p><a href="https://repl.it/@khaled_hossain_code/prototype">Code Link</a></p> + +<p>Setting a property to an object creates an own property. The only exception to the getting and setting behavior rules is when there is an inherited property with a <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters">getter or a setter</a>.</p> + +<h3 id="Inheriting_methods">Inheriting "methods"</h3> + +<p>JavaScript does not have "methods" in the form that class-based languages define them. In JavaScript, any function can be added to an object in the form of a property. An inherited function acts just as any other property, including property shadowing as shown above (in this case, a form of <em>method overriding</em>).</p> + +<p>When an inherited function is executed, the value of <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code></a> points to the inheriting object, not to the prototype object where the function is an own property.</p> + +<pre class="brush: js">var o = { + a: 2, + m: function() { + return this.a + 1; + } +}; + +console.log(o.m()); // 3 +// When calling o.m in this case, 'this' refers to o + +var p = Object.create(o); +// p is an object that inherits from o + +p.a = 4; // creates a property 'a' on p +console.log(p.m()); // 5 +// when p.m is called, 'this' refers to p. +// So when p inherits the function m of o, +// 'this.a' means p.a, the property 'a' of p + + +</pre> + +<h2 id="Using_prototypes_in_JavaScript">Using prototypes in JavaScript</h2> + +<p>Let's look at what happens behind the scenes in a bit more detail.</p> + +<p>In JavaScript, as mentioned above, functions are able to have properties. All functions have a special property named <code>prototype</code>. Please note that the code below is free-standing (it is safe to assume there is no other JavaScript on the webpage other than the below code). For the best learning experience, it is highly recommended that you open a console, navigate to the "console" tab, copy-and-paste in the below JavaScript code, and run it by pressing the Enter/Return key. (The console is included in most web browser's Developer Tools. More information is available for <a href="/en-US/docs/Tools">Firefox Developer Tools</a>, <a href="https://developers.google.com/web/tools/chrome-devtools/">Chrome DevTools</a>, and <a href="https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide">Edge DevTools</a>.)</p> + +<pre class="brush: js">function doSomething(){} +console.log( doSomething.prototype ); +// It does not matter how you declare the function, a +// function in JavaScript will always have a default +// prototype property. +// (Ps: There is one exception that arrow function doesn't have a default prototype property) +var doSomething = function(){}; +console.log( doSomething.prototype ); +</pre> + +<p>As seen above, <code>doSomething()</code> has a default <code>prototype</code> property, as demonstrated by the console. After running this code, the console should have displayed an object that looks similar to this.</p> + +<pre class="brush: js">{ + constructor: ƒ doSomething(), + __proto__: { + constructor: ƒ Object(), + hasOwnProperty: ƒ hasOwnProperty(), + isPrototypeOf: ƒ isPrototypeOf(), + propertyIsEnumerable: ƒ propertyIsEnumerable(), + toLocaleString: ƒ toLocaleString(), + toString: ƒ toString(), + valueOf: ƒ valueOf() + } +}</pre> + +<p>We can add properties to the prototype of <code>doSomething()</code>, as shown below.</p> + +<pre class="brush: js">function doSomething(){} +doSomething.prototype.foo = "bar"; +console.log( doSomething.prototype );</pre> + +<p>This results in:</p> + +<pre class="brush: js">{ + foo: "bar", + constructor: ƒ doSomething(), + __proto__: { + constructor: ƒ Object(), + hasOwnProperty: ƒ hasOwnProperty(), + isPrototypeOf: ƒ isPrototypeOf(), + propertyIsEnumerable: ƒ propertyIsEnumerable(), + toLocaleString: ƒ toLocaleString(), + toString: ƒ toString(), + valueOf: ƒ valueOf() + } +} +</pre> + +<p>We can now use the <code>new</code> operator to create an instance of <code>doSomething()</code> based on this prototype. To use the new operator, simply call the function normally except prefix it with <code>new</code>. Calling a function with the <code>new</code> operator returns an object that is an instance of the function. Properties can then be added onto this object.</p> + +<p>Try the following code:</p> + +<pre class="brush: js">function doSomething(){} +doSomething.prototype.foo = "bar"; // add a property onto the prototype +var doSomeInstancing = new doSomething(); +doSomeInstancing.prop = "some value"; // add a property onto the object +console.log( doSomeInstancing );</pre> + +<p>This results in an output similar to the following:</p> + +<pre class="brush: js">{ + prop: "some value", + __proto__: { + foo: "bar", + constructor: ƒ doSomething(), + __proto__: { + constructor: ƒ Object(), + hasOwnProperty: ƒ hasOwnProperty(), + isPrototypeOf: ƒ isPrototypeOf(), + propertyIsEnumerable: ƒ propertyIsEnumerable(), + toLocaleString: ƒ toLocaleString(), + toString: ƒ toString(), + valueOf: ƒ valueOf() + } + } +}</pre> + +<p>As seen above, the <code>__proto__</code> of <code>doSomeInstancing</code> is <code>doSomething.prototype</code>. But, what does this do? When you access a property of <code>doSomeInstancing</code>, the browser first looks to see if <code>doSomeInstancing</code> has that property.</p> + +<p>If <code>doSomeInstancing</code> does not have the property, then the browser looks for the property in the <code>__proto__</code> of <code>doSomeInstancing</code> (a.k.a. doSomething.prototype). If the <code>__proto__</code> of doSomeInstancing has the property being looked for, then that property on the <code>__proto__</code> of doSomeInstancing is used.</p> + +<p>Otherwise, if the <code>__proto__</code> of doSomeInstancing does not have the property, then the <code>__proto__</code> of the <code>__proto__</code> of doSomeInstancing is checked for the property. By default, the <code>__proto__</code> of any function's prototype property is <code>window.Object.prototype</code>. So, the <code>__proto__</code> of the <code>__proto__</code> of doSomeInstancing (a.k.a. the <code>__proto__</code> of doSomething.prototype (a.k.a. <code>Object.prototype</code>)) is then looked through for the property being searched for.</p> + +<p>If the property is not found in the <code>__proto__</code> of the <code>__proto__</code> of doSomeInstancing, then the <code>__proto__</code> of the <code>__proto__</code> of the <code>__proto__</code> of doSomeInstancing is looked through. However, there is a problem: the <code>__proto__</code> of the <code>__proto__</code> of the <code>__proto__</code> of doSomeInstancing does not exist. Then, and only then, after the entire prototype chain of <code>__proto__</code>'s is looked through, and there are no more <code>__proto__</code>s does the browser assert that the property does not exist and conclude that the value at the property is <code>undefined</code>.</p> + +<p>Let's try entering some more code into the console:</p> + +<pre class="brush: js">function doSomething(){} +doSomething.prototype.foo = "bar"; +var doSomeInstancing = new doSomething(); +doSomeInstancing.prop = "some value"; +console.log("doSomeInstancing.prop: " + doSomeInstancing.prop); +console.log("doSomeInstancing.foo: " + doSomeInstancing.foo); +console.log("doSomething.prop: " + doSomething.prop); +console.log("doSomething.foo: " + doSomething.foo); +console.log("doSomething.prototype.prop: " + doSomething.prototype.prop); +console.log("doSomething.prototype.foo: " + doSomething.prototype.foo);</pre> + +<p>This results in the following:</p> + +<pre class="brush: js">doSomeInstancing.prop: some value +doSomeInstancing.foo: bar +doSomething.prop: undefined +doSomething.foo: undefined +doSomething.prototype.prop: undefined +doSomething.prototype.foo: bar</pre> + +<h2 id="Different_ways_to_create_objects_and_the_resulting_prototype_chain">Different ways to create objects and the resulting prototype chain</h2> + +<h3 id="Objects_created_with_syntax_constructs">Objects created with syntax constructs</h3> + +<pre class="brush: js">var o = {a: 1}; + +// The newly created object o has Object.prototype as its [[Prototype]] +// o has no own property named 'hasOwnProperty' +// hasOwnProperty is an own property of Object.prototype. +// So o inherits hasOwnProperty from Object.prototype +// Object.prototype has null as its prototype. +// o ---> Object.prototype ---> null + +var b = ['yo', 'whadup', '?']; + +// Arrays inherit from Array.prototype +// (which has methods indexOf, forEach, etc.) +// The prototype chain looks like: +// b ---> Array.prototype ---> Object.prototype ---> null + +function f() { + return 2; +} + +// Functions inherit from Function.prototype +// (which has methods call, bind, etc.) +// f ---> Function.prototype ---> Object.prototype ---> null +</pre> + +<h3 id="With_a_constructor">With a constructor</h3> + +<p>A "constructor" in JavaScript is "just" a function that happens to be called with the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new operator</a>.</p> + +<pre class="brush: js">function Graph() { + this.vertices = []; + this.edges = []; +} + +Graph.prototype = { + addVertex: function(v) { + this.vertices.push(v); + } +}; + +var g = new Graph(); +// g is an object with own properties 'vertices' and 'edges'. +// g.[[Prototype]] is the value of Graph.prototype when new Graph() is executed. +</pre> + +<h3 id="With_Object.create">With <code>Object.create</code></h3> + +<p>ECMAScript 5 introduced a new method: {{jsxref("Object.create()")}}. Calling this method creates a new object. The prototype of this object is the first argument of the function:</p> + +<pre class="brush: js">var a = {a: 1}; +// a ---> Object.prototype ---> null + +var b = Object.create(a); +// b ---> a ---> Object.prototype ---> null +console.log(b.a); // 1 (inherited) + +var c = Object.create(b); +// c ---> b ---> a ---> Object.prototype ---> null + +var d = Object.create(null); +// d ---> null +console.log(d.hasOwnProperty); +// undefined, because d doesn't inherit from Object.prototype +</pre> + +<h3 id="delete_Operator_with_Object.create_and_new_operator"><code>delete</code> Operator with <code>Object.create</code> and <code>new</code> operator</h3> + +<p>Using <code>Object.create</code> of another object demonstrates prototypical inheritance with the <code>delete</code> operation:</p> + +<pre class="brush: js">var a = {a: 1}; + +var b = Object.create(a); + +console.log(a.a); // print 1 +console.log(b.a); // print 1 +b.a=5; +console.log(a.a); // print 1 +console.log(b.a); // print 5 +delete b.a; +console.log(a.a); // print 1 +console.log(b.a); // print 1(b.a value 5 is deleted but it showing value from its prototype chain) +delete a.a; +console.log(a.a); // print undefined +console.log(b.a); // print undefined</pre> + +<p>The <code>new</code> operator has a shorter chain in this example:</p> + +<pre class="brush: js">function Graph() { + this.vertices = [4,4]; +} + +var g = new Graph(); +console.log(g.vertices); // print [4,4] +g.vertices = 25; +console.log(g.vertices); // print 25 +delete g.vertices; +console.log(g.vertices); // print undefined +</pre> + +<h3 id="With_the_class_keyword">With the <code>class</code> keyword</h3> + +<p>ECMAScript 2015 introduced a new set of keywords implementing <a href="/en-US/docs/Web/JavaScript/Reference/Classes">classes</a>. The new keywords include {{jsxref("Statements/class", "class")}}, {{jsxref("Classes/constructor", "constructor")}}, {{jsxref("Classes/static", "static")}}, {{jsxref("Classes/extends", "extends")}}, and {{jsxref("Operators/super", "super")}}.</p> + +<pre class="brush: js">'use strict'; + +class Polygon { + constructor(height, width) { + this.height = height; + this.width = width; + } +} + +class Square extends Polygon { + constructor(sideLength) { + super(sideLength, sideLength); + } + get area() { + return this.height * this.width; + } + set sideLength(newLength) { + this.height = newLength; + this.width = newLength; + } +} + +var square = new Square(2); +</pre> + +<h3 id="Performance">Performance</h3> + +<p>The lookup time for properties that are high up on the prototype chain can have a negative impact on the performance, and this may be significant in the code where performance is critical. Additionally, trying to access nonexistent properties will always traverse the full prototype chain.</p> + +<p>Also, when iterating over the properties of an object, <strong>every</strong> enumerable property that is on the prototype chain will be enumerated. To check whether an object has a property defined on <em>itself</em> and not somewhere on its prototype chain, it is necessary to use the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a> method which all objects inherit from <code>Object.prototype</code>. To give you a concrete example, let's take the above graph example code to illustrate it:</p> + +<pre class="brush: js">console.log(g.hasOwnProperty('vertices')); +// true + +console.log(g.hasOwnProperty('nope')); +// false + +console.log(g.hasOwnProperty('addVertex')); +// false + +console.log(g.__proto__.hasOwnProperty('addVertex')); +// true +</pre> + +<p><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/hasOwnProperty"><code>hasOwnProperty</code></a> is the only thing in JavaScript which deals with properties and does <strong>not</strong> traverse the prototype chain.</p> + +<p>Note: It is <strong>not</strong> enough to check whether a property is <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/undefined"><code>undefined</code></a>. The property might very well exist, but its value just happens to be set to <code>undefined</code>.</p> + +<h3 id="Bad_practice_Extension_of_native_prototypes">Bad practice: Extension of native prototypes</h3> + +<p>One misfeature that is often used is to extend <code>Object.prototype</code> or one of the other built-in prototypes.</p> + +<p>This technique is called monkey patching and breaks <em>encapsulation</em>. While used by popular frameworks such as Prototype.js, there is still no good reason for cluttering built-in types with additional <em>non-standard</em> functionality.</p> + +<p>The <strong>only</strong> good reason for extending a built-in prototype is to backport the features of newer JavaScript engines, like <code>Array.forEach</code>.</p> + +<h3 id="Summary_of_methods_for_extending_the_prototype_chain">Summary of methods for extending the prototype chain</h3> + +<p>Here are all 4 ways and their pros/cons. All of the examples listed below create exactly the same resulting <code>inst</code> object (thus logging the same results to the console), except in different ways for the purpose of illustration.</p> + +<table class="standard-table" style="text-align: top;"> + <tbody> + <tr> + <td style="width: 1%;">Name</td> + <td style="vertical-align: top; width: 1%;">Example(s)</td> + <td style="vertical-align: top;">Pro(s)</td> + <td style="vertical-align: top; width: 60%;">Con(s)</td> + </tr> + <tr> + <td>New-initialization</td> + <td style="vertical-align: top;"> + <pre class="brush: js"> +function foo(){} +foo.prototype = { + foo_prop: "foo val" +}; +function bar(){} +var proto = new foo; +proto.bar_prop = "bar val"; +bar.prototype = proto; +var inst = new bar; +console.log(inst.foo_prop); +console.log(inst.bar_prop); +</pre> + </td> + <td style="vertical-align: top;">Supported in every browser imaginable (support goes all the way back to IE 5.5!). Also, it is very fast, very standard, and very JIST-optimizable.</td> + <td style="vertical-align: top;">In order to use this method, the function in question must be initialized. During this initialization, the constructor may store unique information that must be generated per-object. However, this unique information would only be generated once, potentially leading to problems. Additionally, the initialization of the constructor may put unwanted methods onto the object. However, both these are generally not problems at all (in fact, usually beneficial) if it is all your own code and you know what does what where.</td> + </tr> + <tr> + <td>Object.create</td> + <td style="vertical-align: top;"> + <pre class="brush: js"> +function foo(){} +foo.prototype = { + foo_prop: "foo val" +}; +function bar(){} +var proto = Object.create( + foo.prototype +); +proto.bar_prop = "bar val"; +bar.prototype = proto; +var inst = new bar; +console.log(inst.foo_prop); +console.log(inst.bar_prop); +</pre> + + <pre class="brush: js"> +function foo(){} +foo.prototype = { + foo_prop: "foo val" +}; +function bar(){} +var proto = Object.create( + foo.prototype, + { + bar_prop: { + value: "bar val" + } + } +); +bar.prototype = proto; +var inst = new bar; +console.log(inst.foo_prop); +console.log(inst.bar_prop)</pre> + </td> + <td style="vertical-align: top;">Support in all in-use-today browsers which are all non-microsoft browsers plus IE9 and up. Allows the direct setting of __proto__ in a way that is one-time-only so that the browser can better optimize the object. Also allows the creation of objects without a prototype via <code>Object.create(null)</code>.</td> + <td style="vertical-align: top;">Not supported in IE8 and below. However, as Microsoft has discontinued extended support for systems running these old browsers, this should not be a concern for most applications. Additionally, the slow object initialization can be a performance black hole if using the second argument because each object-descriptor property has its own separate descriptor object. When dealing with hundreds of thousands of object descriptors in the form of object, there can arise a serious issue with lag.</td> + </tr> + <tr> + <td> + <p>Object.setPrototypeOf</p> + </td> + <td style="vertical-align: top;"> + <pre class="brush: js"> +function foo(){} +foo.prototype = { + foo_prop: "foo val" +}; +function bar(){} +var proto = { + bar_prop: "bar val" +}; +Object.setPrototypeOf( + proto, foo.prototype +); +bar.prototype = proto; +var inst = new bar; +console.log(inst.foo_prop); +console.log(inst.bar_prop); +</pre> + + <pre class="brush: js"> +function foo(){} +foo.prototype = { + foo_prop: "foo val" +}; +function bar(){} +var proto; +proto=Object.setPrototypeOf( + { bar_prop: "bar val" }, + foo.prototype +); +bar.prototype = proto; +var inst = new bar; +console.log(inst.foo_prop); +console.log(inst.bar_prop)</pre> + </td> + <td style="vertical-align: top;">Support in all in-use-today browsers which are all non-microsoft browsers plus IE9 and up. Allows the dynamic manipulation of an objects prototype and can even force a prototype on a prototype-less object created with <code>Object.create(null)</code>.</td> + <td style="vertical-align: top;">Should-be-deprecated and ill-performant. Making your Javascript run fast is completely out of the question if you dare use this in the final production code because many browsers optimize the prototype and try to guess the location of the method in the memory when calling an instance in advance, but setting the prototype dynamically disrupts all these optimizations and can even force some browsers to recompile for deoptimization your code just to make it work according to the specs. Not supported in IE8 and below.</td> + </tr> + <tr> + <td>__proto__</td> + <td style="vertical-align: top;"> + <pre class="brush: js"> +function foo(){} +foo.prototype = { + foo_prop: "foo val" +}; +function bar(){} +var proto = { + bar_prop: "bar val", + __proto__: foo.prototype +}; +bar.prototype = proto; +var inst = new bar; +console.log(inst.foo_prop); +console.log(inst.bar_prop); +</pre> + + <pre class="brush: js"> +var inst = { + __proto__: { + bar_prop: "bar val", + __proto__: { + foo_prop: "foo val", + __proto__: Object.prototype + } + } +}; +console.log(inst.foo_prop); +console.log(inst.bar_prop)</pre> + </td> + <td style="vertical-align: top;">Support in all in-use-today browsers which are all non-microsoft browsers plus IE11 and up. Setting __proto__ to something that is not an object only fails silently. It does not throw an exception.</td> + <td style="vertical-align: top;">Grossly deprecated and non-performant. Making your Javascript run fast is completely out of the question if you dare use this in the final production code because many browsers optimize the prototype and try to guess the location of the method in the memory when calling an instance in advance, but setting the prototype dynamically disrupts all these optimizations and can even force some browsers to recompile for deoptimization your code just to make it work according to the specs. Not supported in IE10 and below.</td> + </tr> + </tbody> +</table> + +<h2 id="prototype_and_Object.getPrototypeOf"><code>prototype</code> and <code>Object.getPrototypeOf</code></h2> + +<p>JavaScript is a bit confusing for developers coming from Java or C++, as it's all dynamic, all runtime, and it has no classes at all. It's all just instances (objects). Even the "classes" we simulate are just a function object.</p> + +<p>You probably already noticed that our <code>function A</code> has a special property called <code>prototype</code>. This special property works with the JavaScript <code>new </code>operator. The reference to the prototype object is copied to the internal <code>[[Prototype]]</code> property of the new instance. For example, when you do <code>var a1 = new A()</code>, JavaScript (after creating the object in memory and before running function <code>A()</code> with <code>this</code> defined to it) sets <code>a1.[[Prototype]] = A.prototype</code>. When you then access properties of the instance, JavaScript first checks whether they exist on that object directly, and if not, it looks in <code>[[Prototype]]</code>. This means that all the stuff you define in <code>prototype</code> is effectively shared by all instances, and you can even later change parts of <code>prototype</code> and have the changes appear in all existing instances, if you wanted to.</p> + +<p>If, in the example above, you do <code>var a1 = new A(); var a2 = new A();</code> then <code>a1.doSomething</code> would actually refer to <code>Object.getPrototypeOf(a1).doSomething</code>, which is the same as the <code>A.prototype.doSomething</code> you defined, i.e. <code>Object.getPrototypeOf(a1).doSomething == Object.getPrototypeOf(a2).doSomething == A.prototype.doSomething</code>.</p> + +<p>In short, <code>prototype</code> is for types, while <code>Object.getPrototypeOf()</code> is the same for instances.</p> + +<p><code>[[Prototype]]</code> is looked at <em>recursively</em>, i.e. <code>a1.doSomething</code>, <code>Object.getPrototypeOf(a1).doSomething</code>, <code>Object.getPrototypeOf(Object.getPrototypeOf(a1)).doSomething</code> etc., until it's found or <code>Object.getPrototypeOf </code>returns null.</p> + +<p>So, when you call</p> + +<pre class="brush: js">var o = new Foo();</pre> + +<p>JavaScript actually just does</p> + +<pre class="brush: js">var o = new Object(); +o.[[Prototype]] = Foo.prototype; +Foo.call(o);</pre> + +<p>(or something like that) and when you later do</p> + +<pre class="brush: js">o.someProp;</pre> + +<p>it checks whether <code>o</code> has a property <code>someProp</code>. If not, it checks <code>Object.getPrototypeOf(o).someProp</code>, and if that doesn't exist it checks <code>Object.getPrototypeOf(Object.getPrototypeOf(o)).someProp</code>, and so on.</p> + +<h2 id="In_conclusion">In conclusion</h2> + +<p>It is essential to understand the prototypal inheritance model before writing complex code that makes use of it. Also, be aware of the length of the prototype chains in your code and break them up if necessary to avoid possible performance problems. Further, the native prototypes should <strong>never</strong> be extended unless it is for the sake of compatibility with newer JavaScript features.</p> diff --git a/files/bg/web/javascript/reference/classes/constructor/index.html b/files/bg/web/javascript/reference/classes/constructor/index.html new file mode 100644 index 0000000000..4d3971672e --- /dev/null +++ b/files/bg/web/javascript/reference/classes/constructor/index.html @@ -0,0 +1,130 @@ +--- +title: constructor +slug: Web/JavaScript/Reference/Classes/constructor +tags: + - Класове + - Конструктор +translation_of: Web/JavaScript/Reference/Classes/constructor +--- +<div>{{jsSidebar("Classes")}}</div> + +<p>Методът <code>constructor</code> е специален метод за създаване и инициализиране на обект , <span lang="bg">създаден в рамките </span>класът (<code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class</a></code><span lang="bg">).</span></p> + +<div>{{EmbedInteractiveExample("pages/js/classes-constructor.html")}}</div> + +<p class="hidden"><span lang="bg">Източникът на този интерактивен пример се съхранява в хранилище на GitHub. Ако искате да допринесете за проекта за интерактивни примери, моля клонирайте </span> <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> <span lang="bg"> и ни изпратете заявка за изтегляне.</span></p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">constructor([<em>arguments</em>]) { ... }</pre> + +<h2 id="Описание">Описание</h2> + +<p>Може да има само един специален метод с име "constructor" в даден клас (class). <span lang="bg">Ако има повече от </span>един метод с името <code>constructor</code> в класът си , ще се появи грешка {{jsxref("SyntaxError")}}.</p> + +<p>Конструктора (<code>constructor</code>) може да използва ключовата дума <code>super</code> за да извика конструктора на родителския клас.</p> + +<p>Ако не посочите метода конструктор, ще се използва конструктор по подразбиране</p> + +<h2 id="Примери">Примери</h2> + +<h3 id="Използване_на_метода_constructor">Използване на метода <code>constructor</code></h3> + +<p>Този примерен код е взет от <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">classes sample</a> (<a href="https://googlechrome.github.io/samples/classes-es6/index.html">демо на живо</a>).</p> + +<pre class="brush: js">class Square extends Polygon { + constructor(length) { + // Here, it calls the parent class' constructor with lengths + // provided for the Polygon's width and height + super(length, length); + // Note: In derived classes, super() must be called before you + // can use 'this'. Leaving this out will cause a reference error. + this.name = 'Square'; + } + + get area() { + return this.height * this.width; + } + + set area(value) { + this.area = value; + } +}</pre> + +<h3 id="Друг_пример">Друг пример</h3> + +<p>Разгледайте този код :</p> + +<pre class="brush: js">class Polygon { + constructor() { + this.name = "Polygon"; + } +} + +class Square extends Polygon { + constructor() { + super(); + } +} + +class Rectangle {} + +Object.setPrototypeOf(Square.prototype, Rectangle.prototype); + +console.log(Object.getPrototypeOf(Square.prototype) === Polygon.prototype); //false +console.log(Object.getPrototypeOf(Square.prototype) === Rectangle.prototype); //true + +let newInstance = new Square(); +console.log(newInstance.name); //Polygon</pre> + +<p>Тук прототипа на класът <strong>Square</strong> се променя, но все пак конструктора на предишния базов клас <strong>Polygon </strong>се извиква, когато се създава нова инстанция(екземлпяр) от класът <strong>Square</strong>. Това е така , защото в класът <strong>Squre </strong>използваме ключовата дума <code>super</code>, извиквайки конструктора на родителският клас <strong>Polygon </strong>.</p> + +<h3 id="Конструктор_по_подразбиране">Конструктор по подразбиране</h3> + +<p>Както е посочено,ако не посочите метод конструктор, ще се използва конструктор по подразбиране . За базовите класове , конструктора по подразбиране е :</p> + +<pre class="brush: js">constructor() {} +</pre> + +<p>За производни класове, конструктора по подразбиране е :</p> + +<pre class="brush: js">constructor(...args) { + super(...args); +}</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-static-semantics-constructormethod', 'Constructor Method')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Съвместимост_с_браузъра">Съвместимост с браузъра</h2> + + + +<p>{{Compat("javascript.classes.constructor")}}</p> + +<h2 id="Въжте_също">Въжте също</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">ключовата дума super()</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>класов</code> израз</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>деклариране на клас</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Класове</a></li> +</ul> diff --git a/files/bg/web/javascript/reference/classes/extends/index.html b/files/bg/web/javascript/reference/classes/extends/index.html new file mode 100644 index 0000000000..940e815d6c --- /dev/null +++ b/files/bg/web/javascript/reference/classes/extends/index.html @@ -0,0 +1,112 @@ +--- +title: extends +slug: Web/JavaScript/Reference/Classes/extends +tags: + - JavaScript наследяване + - Класове + - наследяване +translation_of: Web/JavaScript/Reference/Classes/extends +--- +<div>{{jsSidebar("Classes")}}</div> + +<p>Ключовата дума <strong><code>extends</code></strong> се използва в <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">декларацията на класове</a> или <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">класовите изрази</a> за създаване на клас, който е дете на друг клас.</p> + +<div>{{EmbedInteractiveExample("pages/js/classes-extends.html", "taller")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">class ChildClass extends ParentClass { ... }</pre> + +<h2 id="Описание">Описание</h2> + +<p>Ключовата дума <strong><code>extends</code></strong> може да бъде използвана като подклас на потребителски класове, както и за вградени обекти.</p> + +<p>Прототипът (<code>.prototype</code>) на разширението трябва да е {{jsxref("Object")}} или {{jsxref("null")}}.</p> + +<h2 id="Примери">Примери</h2> + +<h3 id="Използване_на_extends">Използване на <code>extends</code></h3> + +<p>Първият пример създава клас, наречен <code>Square</code> от клас, наречен <code>Polygon</code> (<code>Square</code> класът наследява клас <code>Polygon</code> ). Този пример е взет от това <a href="https://googlechrome.github.io/samples/classes-es6/index.html">демо на живо</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(източник)</a>.</p> + +<pre class="brush: js">class Square extends Polygon { + constructor(length) { + // Here, it calls the parent class' constructor with lengths + // provided for the Polygon's width and height + super(length, length); + // Note: In derived classes, super() must be called before you + // can use 'this'. Leaving this out will cause a reference error. + this.name = 'Square'; + } + + get area() { + return this.height * this.width; + } +}</pre> + +<h3 id="Използване_на_extends_с_вградени_обекти">Използване на <code>extends</code> с вградени обекти</h3> + +<p>Този пример разширява вграденият {{jsxref("Date")}} обект. Този пример е взет от това <a href="https://googlechrome.github.io/samples/classes-es6/index.html">демо на живо</a> <a href="https://github.com/GoogleChrome/samples/blob/gh-pages/classes-es6/index.html">(източник)</a>.</p> + +<pre class="brush: js">class myDate extends Date { + constructor() { + super(); + } + + getFormattedDate() { + var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; + return this.getDate() + '-' + months[this.getMonth()] + '-' + this.getFullYear(); + } +}</pre> + +<h3 id="Наследяване_на_null">Наследяване на <code>null</code></h3> + +<p>Наследяване от {{jsxref("null")}} работи както при нормалните класове, eс изключение на това , <span lang="bg">че обектът на прототипа не наследява от</span> {{jsxref("Object.prototype")}}.</p> + +<pre class="brush: js">class nullExtends extends null { + constructor() {} +} + +Object.getPrototypeOf(nullExtends); // Function.prototype +Object.getPrototypeOf(nullExtends.prototype) // null + +new nullExtends(); //ReferenceError: this is not defined +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификации</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-class-definitions', 'extends')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'extends')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Съвместимост_с_браузъра">Съвместимост с браузъра</h2> + + + +<p>{{Compat("javascript.classes.extends")}}</p> + +<h2 id="Вижте_още">Вижте още</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Класове</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">ключовата дума super</a></li> + <li><a href="https://medium.com/beginners-guide-to-mobile-web-development/super-and-extends-in-javascript-es6-understanding-the-tough-parts-6120372d3420">Anurag Majumdar - Super & Extends in JavaScript</a></li> +</ul> diff --git a/files/bg/web/javascript/reference/classes/index.html b/files/bg/web/javascript/reference/classes/index.html new file mode 100644 index 0000000000..dc88fc8548 --- /dev/null +++ b/files/bg/web/javascript/reference/classes/index.html @@ -0,0 +1,431 @@ +--- +title: Classes +slug: Web/JavaScript/Reference/Classes +tags: + - Classes + - Constructors + - ECMAScript 2015 + - Inheritance + - Intermediate + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference/Classes +--- +<div>{{JsSidebar("Classes")}}</div> + +<p>JavaScript classes, introduced in ECMAScript 2015, are primarily syntactical sugar over JavaScript's existing prototype-based inheritance. The class syntax <em>does not</em> introduce a new object-oriented inheritance model to JavaScript.</p> + +<h2 id="Defining_classes">Defining classes</h2> + +<p>Classes are in fact "special <a href="/en-US/docs/Web/JavaScript/Reference/Functions">functions</a>", and just as you can define <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expressions</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function declarations</a>, the class syntax has two components: <a href="/en-US/docs/Web/JavaScript/Reference/Operators/class">class expressions</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">class declarations</a>.</p> + +<h3 id="Class_declarations">Class declarations</h3> + +<p>One way to define a class is using a <strong>class declaration</strong>. To declare a class, you use the <code>class</code> keyword with the name of the class ("Rectangle" here).</p> + +<pre class="brush: js">class Rectangle { + constructor(height, width) { + this.height = height; + this.width = width; + } +}</pre> + +<h4 id="Hoisting">Hoisting</h4> + +<p>An important difference between <strong>function declarations</strong> and <strong>class declarations</strong> is that function declarations are {{Glossary("Hoisting", "hoisted")}} and class declarations are not. You first need to declare your class and then access it, otherwise code like the following will throw a {{jsxref("ReferenceError")}}:</p> + +<pre class="brush: js example-bad">const p = new Rectangle(); // ReferenceError + +class Rectangle {} +</pre> + +<h3 id="Class_expressions">Class expressions</h3> + +<p>A <strong>class expression</strong> is another way to define a class. Class expressions can be named or unnamed. The name given to a named class expression is local to the class's body. (it can be retrieved through the class's (not an instance's) {{jsxref("Function.name", "name")}} property, though).</p> + +<pre class="brush: js">// unnamed +let Rectangle = class { + constructor(height, width) { + this.height = height; + this.width = width; + } +}; +console.log(Rectangle.name); +// output: "Rectangle" + +// named +let Rectangle = class Rectangle2 { + constructor(height, width) { + this.height = height; + this.width = width; + } +}; +console.log(Rectangle.name); +// output: "Rectangle2" +</pre> + +<div class="note"> +<p><strong>Note:</strong> Class <strong>expressions</strong> are subject to the same hoisting restrictions as described in the {{anch("Class declarations")}} section.</p> +</div> + +<h2 id="Class_body_and_method_definitions">Class body and method definitions</h2> + +<p>The body of a class is the part that is in curly brackets <code>{}</code>. This is where you define class members, such as methods or constructor.</p> + +<h3 id="Strict_mode">Strict mode</h3> + +<p>The body of a class is executed in <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>, i.e., code written here is subject to stricter syntax for increased performance, some otherwise silent errors will be thrown, and certain keywords are reserved for future versions of ECMAScript.</p> + +<h3 id="Constructor">Constructor</h3> + +<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/constructor">constructor</a></code> method is a special method for creating and initializing an object created with a <code>class</code>. There can only be one special method with the name "constructor" in a class. A {{jsxref("SyntaxError")}} will be thrown if the class contains more than one occurrence of a <code>constructor</code> method.</p> + +<p>A constructor can use the <code>super</code> keyword to call the constructor of the super class.</p> + +<h3 id="Prototype_methods">Prototype methods</h3> + +<p>See also <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a>.</p> + +<pre class="brush: js">class Rectangle { + constructor(height, width) { + this.height = height; + this.width = width; + } + // Getter + get area() { + return this.calcArea(); + } + // Method + calcArea() { + return this.height * this.width; + } +} + +const square = new Rectangle(10, 10); + +console.log(square.area); // 100</pre> + +<h3 id="Static_methods">Static methods</h3> + +<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/static">static</a></code> keyword defines a static method for a class. Static methods are called without <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Introduction_to_Object-Oriented_JavaScript#The_object_(class_instance)" title='An example of class instance is "var john = new Person();"'>instantiating </a>their class and <strong>cannot </strong>be called through a class instance. Static methods are often used to create utility functions for an application.</p> + +<pre class="brush: js">class Point { + constructor(x, y) { + this.x = x; + this.y = y; + } + + static distance(a, b) { + const dx = a.x - b.x; + const dy = a.y - b.y; + + return Math.hypot(dx, dy); + } +} + +const p1 = new Point(5, 5); +const p2 = new Point(10, 10); + +console.log(Point.distance(p1, p2)); // 7.0710678118654755</pre> + +<h3 id="Boxing_with_prototype_and_static_methods">Boxing with prototype and static methods</h3> + +<p>When a static or prototype method is called without a value for <em>this</em>, the <em>this</em> value will be <code>undefined</code> inside the method. This behavior will be the same even if the <code>"use strict"</code> directive isn't present, because code within the <code>class</code> body's syntactic boundary is always executed in strict mode.</p> + +<pre class="brush: js">class Animal { + speak() { + return this; + } + static eat() { + return this; + } +} + +let obj = new Animal(); +obj.speak(); // Animal {} +let speak = obj.speak; +speak(); // undefined + +Animal.eat() // class Animal +let eat = Animal.eat; +eat(); // undefined</pre> + +<p>If the above is written using traditional function-based syntax, then autoboxing in method calls will happen in non–strict mode based on the initial <em>this</em> value. If the initial value is <code>undefined</code>, <em>this</em> will be set to the global object.</p> + +<p>Autoboxing will not happen in strict mode, the <em>this</em> value remains as passed.</p> + +<pre class="brush: js">function Animal() { } + +Animal.prototype.speak = function() { + return this; +} + +Animal.eat = function() { + return this; +} + +let obj = new Animal(); +let speak = obj.speak; +speak(); // global object + +let eat = Animal.eat; +eat(); // global object +</pre> + +<h3 id="Instance_properties">Instance properties</h3> + +<p>Instance properties must be defined inside of class methods:</p> + +<pre class="brush: js">class Rectangle { + constructor(height, width) { + this.height = height; + this.width = width; + } +}</pre> + +<p>Static class-side properties and prototype data properties must be defined outside of the ClassBody declaration:</p> + +<pre class="brush: js">Rectangle.staticWidth = 20; +Rectangle.prototype.prototypeWidth = 25; +</pre> + +<h3 id="Field_declarations">Field declarations</h3> + +<div class="warning"> +<p>Public and private field declarations are an <a href="https://github.com/tc39/proposal-class-fields">experimental feature (stage 3)</a> proposed at <a href="https://tc39.github.io/beta/">TC39</a>, the JavaScript standards committee. Support in browsers is limited, but the feature can be used through a build step with systems like <a href="https://babeljs.io/">Babel</a>.</p> +</div> + +<h4 id="Public_field_declarations">Public field declarations</h4> + +<p>With the JavaScript field declaration syntax, the above example can be written as:</p> + +<pre class="brush: js">class Rectangle { + height = 0; + width; + constructor(height, width) { + this.height = height; + this.width = width; + } +} +</pre> + +<p>By declaring fields up-front, class definitions become more self-documenting, and the fields are always present.</p> + +<p>As seen above, the fields can be declared with or without a default value.</p> + +<h4 id="Private_field_declarations">Private field declarations</h4> + +<p>Using private fields, the definition can be refined as below.</p> + +<pre class="brush: js">class Rectangle { + #height = 0; + #width; + constructor(height, width) { + this.#height = height; + this.#width = width; + } +} +</pre> + +<p>It's an error to reference private fields from outside of the class; they can only be read or written within the class body. By defining things which are not visible outside of the class, you ensure that your classes' users can't depend on internals, which may change version to version.</p> + +<div class="note"> +<p>Private fields can only be declared up-front in a field declaration.</p> +</div> + +<p>Private fields cannot be created later through assigning to them, the way that normal properties can.</p> + +<p> </p> + +<h2 id="Sub_classing_with_extends">Sub classing with <code>extends</code></h2> + +<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Classes/extends">extends</a></code> keyword is used in <em>class declarations</em> or <em>class expressions</em> to create a class as a child of another class.</p> + +<pre class="brush: js">class Animal { + constructor(name) { + this.name = name; + } + + speak() { + console.log(this.name + ' makes a noise.'); + } +} + +class Dog extends Animal { + constructor(name) { + super(name); // call the super class constructor and pass in the name parameter + } + + speak() { + console.log(this.name + ' barks.'); + } +} + +let d = new Dog('Mitzie'); +d.speak(); // Mitzie barks. +</pre> + +<p>If there is a constructor present in the subclass, it needs to first call super() before using "this".</p> + +<p>One may also extend traditional function-based "classes":</p> + +<pre class="brush: js">function Animal (name) { + this.name = name; +} + +Animal.prototype.speak = function () { + console.log(this.name + ' makes a noise.'); +} + +class Dog extends Animal { + speak() { + console.log(this.name + ' barks.'); + } +} + +let d = new Dog('Mitzie'); +d.speak(); // Mitzie barks. +</pre> + +<p>Note that classes cannot extend regular (non-constructible) objects. If you want to inherit from a regular object, you can instead use {{jsxref("Object.setPrototypeOf()")}}:</p> + +<pre class="brush: js">const Animal = { + speak() { + console.log(this.name + ' makes a noise.'); + } +}; + +class Dog { + constructor(name) { + this.name = name; + } +} + +// If you do not do this you will get a TypeError when you invoke speak +Object.setPrototypeOf(Dog.prototype, Animal); + +let d = new Dog('Mitzie'); +d.speak(); // Mitzie makes a noise. +</pre> + +<h2 id="Species">Species</h2> + +<p>You might want to return {{jsxref("Array")}} objects in your derived array class <code>MyArray</code>. The species pattern lets you override default constructors.</p> + +<p>For example, when using methods such as {{jsxref("Array.map", "map()")}} that returns the default constructor, you want these methods to return a parent <code>Array</code> object, instead of the <code>MyArray</code> object. The {{jsxref("Symbol.species")}} symbol lets you do this:</p> + +<pre class="brush: js">class MyArray extends Array { + // Overwrite species to the parent Array constructor + static get [Symbol.species]() { return Array; } +} + +let a = new MyArray(1,2,3); +let mapped = a.map(x => x * x); + +console.log(mapped instanceof MyArray); // false +console.log(mapped instanceof Array); // true +</pre> + +<h2 id="Super_class_calls_with_super">Super class calls with <code>super</code></h2> + +<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></code> keyword is used to call corresponding methods of super class. This is one advantage over prototype-based inheritance.</p> + +<pre class="brush: js">class Cat { + constructor(name) { + this.name = name; + } + + speak() { + console.log(`${this.name} makes a noise.`); + } +} + +class Lion extends Cat { + speak() { + super.speak(); + console.log(`${this.name} roars.`); + } +} + +let l = new Lion('Fuzzy'); +l.speak(); +// Fuzzy makes a noise. +// Fuzzy roars. +</pre> + +<h2 id="Mix-ins">Mix-ins</h2> + +<p>Abstract subclasses or <em>mix-ins</em> are templates for classes. An ECMAScript class can only have a single superclass, so multiple inheritance from tooling classes, for example, is not possible. The functionality must be provided by the superclass.</p> + +<p>A function with a superclass as input and a subclass extending that superclass as output can be used to implement mix-ins in ECMAScript:</p> + +<pre class="brush: js">let calculatorMixin = Base => class extends Base { + calc() { } +}; + +let randomizerMixin = Base => class extends Base { + randomize() { } +}; +</pre> + +<p>A class that uses these mix-ins can then be written like this:</p> + +<pre class="brush: js">class Foo { } +class Bar extends calculatorMixin(randomizerMixin(Foo)) { }</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES2017', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2017')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.classes")}}</p> + +<h2 id="Running_in_Scratchpad">Running in Scratchpad</h2> + +<p>A class can't be redefined. If you're playing with code in Scratchpad (Firefox menu Tools > Web Developer > Scratchpad) and you 'Run' a definition of a class with the same name twice, you'll get a confusing SyntaxError: redeclaration of let <class-name>.</p> + +<p>To re-run a definition, use Scratchpad's menu Execute > Reload and Run.<br> + Please vote for bug <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1428672">#1428672</a>.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions">Functions</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class"><code>class</code> declaration</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>class</code> expression</a></li> + <li>{{jsxref("Operators/super", "super")}}</li> + <li><a href="https://hacks.mozilla.org/2015/07/es6-in-depth-classes/">Blog post: "ES6 In Depth: Classes"</a></li> + <li><a href="https://github.com/tc39/proposal-class-fields">Fields and public/private class properties proposal (stage 3)</a></li> +</ul> diff --git a/files/bg/web/javascript/reference/classes/static/index.html b/files/bg/web/javascript/reference/classes/static/index.html new file mode 100644 index 0000000000..971bf40345 --- /dev/null +++ b/files/bg/web/javascript/reference/classes/static/index.html @@ -0,0 +1,135 @@ +--- +title: static +slug: Web/JavaScript/Reference/Classes/static +tags: + - Класове + - Статичен + - статичен метод +translation_of: Web/JavaScript/Reference/Classes/static +--- +<div>{{jsSidebar("Classes")}}</div> + +<p><span class="seoSummary">Ключовата дума <code><strong>static</strong></code> дефинира статичен метод за клас. Static methods aren't called on instances of the class. Instead, they're called on the class itself.</span> <span lang="bg">Това често са помощни функции, като например функции за създаване или клониране на обекти.</span></p> + +<div>{{EmbedInteractiveExample("pages/js/classes-static.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">static <em>methodName</em>() { ... }</pre> + +<h2 id="Описание">Описание</h2> + +<p>Статичните методи се правят директно в класът и не могат да се извикват като инстанции на клас.</p> + +<h2 id="Извикване_на_статичен_метод">Извикване на статичен метод</h2> + +<h3 id="От_друг_статичен_метод">От друг статичен метод</h3> + +<p>За да извикате статичен метод в рамките на друг статичен метод от същия клас, може да използвате ключовата дума <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>.</p> + +<pre class="brush: js">class StaticMethodCall { + static staticMethod() { + return 'Static method has been called'; + } + static anotherStaticMethod() { + return this.staticMethod() + ' from another static method'; + } +} +StaticMethodCall.staticMethod(); +// 'Static method has been called' + +StaticMethodCall.anotherStaticMethod(); +// 'Static method has been called from another static method'</pre> + +<h3 id="От_конструктора_на_клас_и_други_методи">От конструктора на клас и други методи</h3> + +<p>Статичните методи не са пряко достъпни, когато се използва ключовата дума <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code> от нестатични методи. Трябва да ги извикате, използвайки името на класа: <code>CLASSNAME.STATIC_METHOD_NAME()</code> или да извикате метода като собственост на <code>constructor</code>: <code>this.constructor.STATIC_METHOD_NAME()</code>.</p> + +<pre class="brush: js">class StaticMethodCall { + constructor() { + console.log(StaticMethodCall.staticMethod()); + // 'static method has been called.' + + console.log(this.constructor.staticMethod()); + // 'static method has been called.' + } + + static staticMethod() { + return 'static method has been called.'; + } +}</pre> + +<h2 id="Примери">Примери</h2> + +<p>Следният пример показва няколко неща:</p> + +<ol> + <li>Как статичните методи се изпълняват в класът.</li> + <li>Това , че клас със статичен член може да бъде под-класиран.</li> + <li>Как статичният метод може и не може да бъде извикан.</li> +</ol> + +<pre class="brush: js">class Triple { + static triple(n) { + if (n === undefined) { + n = 1; + } + return n * 3; + } +} + +class BiggerTriple extends Triple { + static triple(n) { + return super.triple(n) * super.triple(n); + } +} + +console.log(Triple.triple()); // 3 +console.log(Triple.triple(6)); // 18 + +var tp = new Triple(); + +console.log(BiggerTriple.triple(3)); +// 81 (not affected by parent's instantiation) + +console.log(tp.triple()); +// 'tp.triple is not a function'. +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификации</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-class-definitions', 'Class definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Съвместимост_с_браузера">Съвместимост с браузера</h2> + + + +<p>{{Compat("javascript.classes.static")}}</p> + +<h2 id="Вижте_още">Вижте още</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/class"><code>класови</code> израз</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Statements/class">декларация на <code>клас</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Classes">Класове</a></li> +</ul> diff --git a/files/bg/web/javascript/reference/errors/index.html b/files/bg/web/javascript/reference/errors/index.html new file mode 100644 index 0000000000..c295fccea6 --- /dev/null +++ b/files/bg/web/javascript/reference/errors/index.html @@ -0,0 +1,31 @@ +--- +title: JavaScript error reference +slug: Web/JavaScript/Reference/Errors +tags: + - Debugging + - Error + - Errors + - Exception + - JavaScript + - NeedsTranslation + - TopicStub + - exceptions +translation_of: Web/JavaScript/Reference/Errors +--- +<p>{{jsSidebar("Errors")}}</p> + +<p>Below, you'll find a list of errors which are thrown by JavaScript. These errors can be a helpful debugging aid, but the reported problem isn't always immediately clear. The pages below will provide additional details about these errors. Each error is an object based upon the {{jsxref("Error")}} object, and has a <code>name</code> and a <code>message</code>.</p> + +<p>Errors displayed in the Web console may include a link to the corresponding page below to help you quickly comprehend the problem in your code.</p> + +<h2 id="List_of_errors">List of errors</h2> + +<p>In this list, each page is listed by name (the type of error) and message (a more detailed human-readable error message). Together, these two properties provide a starting point toward understanding and resolving the error. For more information, follow the links below!</p> + +<p>{{ListSubPages("/en-US/docs/Web/JavaScript/Reference/Errors")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Learn/JavaScript/First_steps/What_went_wrong">What went wrong? Troubleshooting JavaScript</a>: Beginner's introductory tutorial on fixing JavaScript errors.</li> +</ul> diff --git a/files/bg/web/javascript/reference/errors/unexpected_type/index.html b/files/bg/web/javascript/reference/errors/unexpected_type/index.html new file mode 100644 index 0000000000..372560f00e --- /dev/null +++ b/files/bg/web/javascript/reference/errors/unexpected_type/index.html @@ -0,0 +1,70 @@ +--- +title: 'TypeError: "x" is (not) "y"' +slug: Web/JavaScript/Reference/Errors/Unexpected_type +tags: + - JavaScript + - TypeError + - Грешки +translation_of: Web/JavaScript/Reference/Errors/Unexpected_type +--- +<div>{{jsSidebar("Errors")}}</div> + +<h2 id="Съобщение">Съобщение</h2> + +<pre class="syntaxbox">TypeError: "x" is (not) "y" + +Примери: +TypeError: "x" is undefined +TypeError: "x" is null +TypeError: "undefined" is not an object +TypeError: "x" is not an object or null +TypeError: "x" is not a symbol +</pre> + +<h2 id="Вид_на_грешката">Вид на грешката</h2> + +<p>{{jsxref("TypeError")}}.</p> + +<h2 id="Какво_се_обърка"><span class="short_text" id="result_box" lang="bg"><span>Какво се обърка?</span></span></h2> + +<p>Върнатият тип не отговаря на очакванията. Това се случва често при върната стойност {{jsxref("undefined")}} или {{jsxref("null")}}.</p> + +<p>Някои методи като {{jsxref("Object.create()")}} или {{jsxref("Symbol.keyFor()")}} освен това изискват да им бъде предоставен определен тип.</p> + +<h2 id="Примери">Примери</h2> + +<h3 id="Случаи_предизвикващи_грешката">Случаи, предизвикващи грешката</h3> + +<pre class="brush: js example-bad">// Случаи, при които методът substring няма да работи. +// Такива са undefined и null. +var foo = undefined; +foo.substring(1); // TypeError: foo is undefined + +var foo = null; +foo.substring(1); // TypeError: foo is null + + +// Методи, които очакват да бъдат извикани +// върху точно определен тип. +var foo = {} +Symbol.keyFor(foo); // TypeError: foo is not a symbol + +var foo = 'bar' +Object.create(foo); // TypeError: "foo" is not an object or null +</pre> + +<h3 id="Поправяне_на_грешката">Поправяне на грешката</h3> + +<p>За да оправите грешката в случай на указател, сочещ към стойност <code>undefined</code> или <code>null</code>, можете да използвате оператора <a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof">typeof</a>.</p> + +<pre class="brush: js">if (typeof foo !== 'undefined') { + // Сега знаем, че foo има определена стойност + // и можем да продължим. +}</pre> + +<h2 id="Вижте_също">Вижте също</h2> + +<ul> + <li>{{jsxref("undefined")}}</li> + <li>{{jsxref("null")}}</li> +</ul> diff --git a/files/bg/web/javascript/reference/functions/arrow_functions/index.html b/files/bg/web/javascript/reference/functions/arrow_functions/index.html new file mode 100644 index 0000000000..f2efe8ec10 --- /dev/null +++ b/files/bg/web/javascript/reference/functions/arrow_functions/index.html @@ -0,0 +1,394 @@ +--- +title: Arrow functions +slug: Web/JavaScript/Reference/Functions/Arrow_functions +tags: + - Средно напреднали + - Функции + - Функции със стрелка + - референция +translation_of: Web/JavaScript/Reference/Functions/Arrow_functions +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>Функционалният израз със стрелка има по-кратък синтаксис, отколкото стандартното дефиниране на функция и няма свой собствен <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/super">super</a></code>, или <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></code>. Тези функции не са подходящи за изполване като метод функции(methods) и не могат да бъдат използвани като конструктори.</p> + +<div>{{EmbedInteractiveExample("pages/js/functions-arrow.html")}}</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<h3 id="Основен_синтаксис">Основен синтаксис</h3> + +<pre class="syntaxbox notranslate">(param1, param2, …, paramN) => { statements } +(param1, param2, …, paramN) => expression +// равнозначно на: => { return expression; } + +// Скобите не са задължителни, когато има само един входен параметър: +(singleParam) => { statements } +singleParam => { statements } + +// Списъка с аргументи за функции без аргументи трябва да бъде написан, като се използват скоби. +() => { statements } +</pre> + +<h3 id="Напреднал_синтаксис">Напреднал синтаксис</h3> + +<pre class="syntaxbox notranslate">// Резултата може да бъде ограден в скоби за да бъде върнат под формата на обект(object literal expression): +params => ({foo: bar}) + +// Поддържат се <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest </a>оператора и <a href="en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">параметри по подразбиране</a> +(param1, param2, ...rest) => { statements } +(param1 = defaultValue1, param2, …, paramN = defaultValueN) => { +statements } + +// <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">Деструктуриране</a> на списъка с входни аргументи също се поддържа +var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c; +f(); // 6 +</pre> + +<h2 id="Описание">Описание</h2> + +<p>Вижте също <a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 In Depth: Arrow functions" on hacks.mozilla.org</a>.</p> + +<p>Два фактора повлияха за въвеждането на функциите със стрелка: по-къси функции и липсата на ключовата дума <code>this</code>.</p> + +<h3 id="По-кракти_функции">По-кракти функции</h3> + +<pre class="brush: js notranslate">var elements = [ + 'Hydrogen', + 'Helium', + 'Lithium', + 'Beryllium' +]; + +elements.<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(function(element) { + return element.length; +}); // извикването на описания код ще върне следния масив: [8, 6, 7, 9] + +// Горе описаната функция може да бъде написана и като функция със стрелка по следния начин +elements.map((element) => { + return element.length; +}); // [8, 6, 7, 9] + +// Когато има само един входен параметър можем да премахнем скобите: +elements.<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(element => { + return element.length; +}); // [8, 6, 7, 9] + +// Когато единственото нещо в функцията е връщане на резултат, можем да премахнем `return` +// и също така да премахнем скобите +elements.map(element => element.length); // [8, 6, 7, 9] + +// In this case, because we only need the length property, we can use destructing parameter: +// Notice that the string `"length"` corrosponds to the property we want to get whereas the +// obviously non-special `lengthFooBArX` is just the name of a variable which can be changed +// to any valid variable name you want +elements.<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(({ "length": lengthFooBArX }) => lengthFooBArX); // [8, 6, 7, 9] + +// This destructing parameter assignment can be written as seen below. However, note that there +// is no specific `"length"` to select which property we want to get. Instead, the literal name +// itself of the variable `length` is used as the property we want to retrieve from the object. +elements.<a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map">map</a>(({ length }) => length); // [8, 6, 7, 9] +</pre> + +<h3 id="Без_отделна_ключова_дума_this">Без отделна ключова дума <code>this</code></h3> + +<p>Допреди функциите със стрелка, всяка нова функция дефинираше своя собствена стойност <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/this">this</a></code> (въз основа на това как се нарича функцията, нов обект в случай на конструктор, недифинарна при извикване на функции в <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">строг режим</a>,основният обект ако функцията се извиква като "object method", etc.). Това се оказа по-малко от идеалното с обектно-ориентирания стил на програмиране.</p> + +<pre class="brush: js notranslate">function Person() { + // The Person() constructor defines `this` as an instance of itself. + this.age = 0; + + setInterval(function growUp() { + // In non-strict mode, the growUp() function defines `this` + // as the global object (because it's where growUp() is executed.), + // which is different from the `this` + // defined by the Person() constructor. + this.age++; + }, 1000); +} + +var p = new Person();</pre> + +<p>В ECMAScript 3/5, проблемът с <code>this</code> беше поправим като присвоим стойността на <code>this</code> към променлива , която може да бъде затворена.</p> + +<pre class="brush: js notranslate">function Person() { + var that = this; + that.age = 0; + + setInterval(function growUp() { + // The callback refers to the `that` variable of which + // the value is the expected object. + that.age++; + }, 1000); +}</pre> + +<p>Като алтернатива, може да бъде създадена <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind">свързана функция</a> така че <code>this</code> стойността може да бъде предадена на свързаната целева функция (функцията <code>growUp()</code> в примера по-горе).</p> + +<p>Функцията със стрелка няма свой собствен <code>this;</code> Стойността <code>this</code> от използвания лексикален контекст и др. <span style="background-color: #ffffff; color: #212121; display: inline !important; float: none; font-family: arial,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: pre-wrap;">Функциите със стрелки следват </span>нормалните правила на промелнива. Така че, докато търсим за <code>this,</code> който не присъства в текущият обхват на функцията, те взимат <code>this</code> от околният обхват. По този начин,в следния код, <code>this</code> <span lang="bg">в рамките на функцията</span>, която се предава на <code>setInterval</code> функцията, има същата стойност като на тази в околната лексикална функция:</p> + +<pre class="brush: js notranslate">function Person(){ + this.age = 0; + + setInterval(() => { + this.age++; // |this| properly refers to the Person object + }, 1000); +} + +var p = new Person();</pre> + +<h4 id="Връзка_със_строг_режим">Връзка със строг режим</h4> + +<p>Като се има в предвид , че <code>this</code> идва от околния лексикален контекст, <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">строгите правила за режима</a> по отношение на <code>this</code> се игнорират.</p> + +<pre class="brush: js notranslate">var f = () => { 'use strict'; return this; }; +f() === window; // or the global object</pre> + +<p><span lang="bg">Всички други правила за строг режим се прилагат нормално</span></p> + +<h4 id="Извикване_чрез_повикване_или_прилагане">Извикване чрез повикване или прилагане</h4> + +<p>Тъй като функциите със стрелка нямат свой собствен <code>this</code>, методите <code>call()</code> <code>или apply()</code> могат само да предават параметри. <code>thisArg</code> се игнорира.</p> + +<pre class="brush: js notranslate">var adder = { + base: 1, + + add: function(a) { + var f = v => v + this.base; + return f(a); + }, + + addThruCall: function(a) { + var f = v => v + this.base; + var b = { + base: 2 + }; + + return f.call(b, a); + } +}; + +console.log(adder.add(1)); // This would log to 2 +console.log(adder.addThruCall(1)); // This would log to 2 still</pre> + +<h3 id="Без_обвързване_на_arguments">Без обвързване на <code>arguments</code></h3> + +<p>Функциите със стрелка нямат свой собствен <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">обект</a> от <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments"><code>аргументи</code> </a>.<span style="background-color: #ffffff; color: #212121; display: inline !important; float: none; font-family: arial,sans-serif; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: normal; text-align: left; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: pre-wrap;">Следователно в този пример <code>аргументите </code>са просто препратка към аргументите на заобикалящото ги поле</span>:</p> + +<pre class="brush: js notranslate">var arguments = [1, 2, 3]; +var arr = () => arguments[0]; + +arr(); // 1 + +function foo(n) { + var f = () => arguments[0] + n; // <em>foo</em>'s implicit arguments binding. arguments[0] is n + return f(); +} + +foo(3); // 6</pre> + +<p>В повечето случаи, използването на <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters(остатъчни параметри)</a> е добра алтернатива от използването на обект с <code>аргументи</code>.</p> + +<pre class="brush: js notranslate">function foo(n) { + var f = (...args) => args[0] + n; + return f(10); +} + +foo(1); // 11</pre> + +<h3 id="Функции_със_стрелка_използвани_като_методи">Функции със стрелка използвани като методи</h3> + +<p><span class="tlid-translation translation"><span title="">Както бе посочено по-горе, изразите на функциите със стрелките са най-подходящи за функциите, различни от метода.</span> <span title="">Нека видим какво се случва, когато се опитаме да ги използваме като методи:</span></span></p> + +<pre class="brush: js notranslate">'use strict'; + +var obj = { + i: 10, + b: () => console.log(this.i, this), + c: function() { + console.log(this.i, this); + } +} + +obj.b(); // prints undefined, Window {...} (or the global object) +obj.c(); // prints 10, Object {...}</pre> + +<p>Функциите със стрелка нямат свой собствен <code>this</code>. Друг пример затова е : {{jsxref("Object.defineProperty()")}}:</p> + +<pre class="brush: js notranslate">'use strict'; + +var obj = { + a: 10 +}; + +Object.defineProperty(obj, 'b', { + get: () => { + console.log(this.a, typeof this.a, this); // undefined 'undefined' Window {...} (or the global object) + return this.a + 10; // represents global object 'Window', therefore 'this.a' returns 'undefined' + } +}); +</pre> + +<h3 id="Използване_на_оператора_new">Използване на оператора <code>new</code></h3> + +<p>Функциите със стрелка не мога да бъдат използвани като конструктории ще генерират грешка , когато се изпозват с оператора <code>new</code>.</p> + +<pre class="brush: js notranslate">var Foo = () => {}; +var foo = new Foo(); // TypeError: Foo is not a constructor</pre> + +<h3 id="Използване_на_свойството_prototype">Използване на свойството <code>prototype</code></h3> + +<p>Функциите със стрелки нямат свойството <code>prototype</code>.</p> + +<pre class="brush: js notranslate">var Foo = () => {}; +console.log(Foo.prototype); // undefined +</pre> + +<h3 id="Използване_на_ключовата_дума_yield">Използване на ключовата дума <code>yield</code></h3> + +<p><span class="tlid-translation translation"><span title="">Ключовата дума</span></span> <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/yield">yield</a></code> не може да бъде използвана в тялото на функцията със стрелка ( <span class="tlid-translation translation"><span title="">освен когато е позволено в рамките на функциите, които са вложени в нея</span></span> ). <span class="tlid-translation translation"><span title="">В резултат на това функциите със стрелки не могат да се използват като генератори.</span></span></p> + +<h2 id="Тялото_на_функция">Тялото на функция</h2> + +<p>Функциите със стрелка могат да имат или "сбито тяло" или обичайното "блоково тяло".</p> + +<p>В сбитото тяло е посочен само израз, който се превръща в неявна връщана стойност. <span class="tlid-translation translation"><span title="">В блоково тяло трябва да използвате изрично <code>return</code> декларация за връщане.</span></span></p> + +<pre class="brush: js notranslate">var func = x => x * x; +// concise body syntax, implied "return" + +var func = (x, y) => { return x + y; }; +// with block body, explicit "return" needed +</pre> + +<h2 id="Връщане_на_литерали_на_обекти">Връщане на литерали на обекти</h2> + +<p>Имайте в предвид , че връщането на литерали на обекти, използвайки сбит синтаксис <code>params => {object:literal}</code> няма да работи според очакванията.</p> + +<pre class="brush: js notranslate">var func = () => { foo: 1 }; +// Calling func() returns undefined! + +var func = () => { foo: function() {} }; +// SyntaxError: function statement requires a name</pre> + +<p>Това е защото кодът вътре в скобите ({}) се анализита като оследователност от изрази (или <code>foo</code>се третира като етикет, а не като ключ в буквален обект).</p> + +<p>Запомнете, че трябва да поставяте буквалният обект в скоби , както е показано в примера по-долу.</p> + +<pre class="brush: js notranslate">var func = () => ({foo: 1});</pre> + +<h2 id="Прекъсване_на_линията">Прекъсване на линията</h2> + +<p>Функцията със стрелка не може да съдържа прекъсната линия между нейните параметри и стрелка.</p> + +<pre class="brush: js notranslate">var func = (a, b, c) + => 1; +// SyntaxError: expected expression, got '=>'</pre> + +<p><span class="tlid-translation translation"><span title="">Все пак това може да бъде променено, чрез използване на скоби или поставяне на разделителната линия в аргументите, както е показано в примера по-долу, за да се гарантира, че кодът остава красив и пухкав.</span></span></p> + +<pre class="brush: js notranslate">var func = ( + a, + b, + c +) => ( + 1 +); +// no SyntaxError thrown</pre> + + + +<h2 id="Parsing_order">Parsing order</h2> + +<p>Въпреки че, стрелката във функцията със стрелка не е оператор, функциите със стрелка имат специални правила, които взаимодействат по различен начин с <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">оператора за предимство </a> сравнено с нормалните функции.</p> + +<pre class="brush: js notranslate">let callback; + +callback = callback || function() {}; // ok + +callback = callback || () => {}; +// SyntaxError: invalid arrow-function arguments + +callback = callback || (() => {}); // ok +</pre> + +<h2 id="Още_примери">Още примери</h2> + +<pre class="brush: js notranslate">// An empty arrow function returns undefined +let empty = () => {}; + +(() => 'foobar')(); +// Returns "foobar" +// (this is an Immediately Invoked Function Expression +// see 'IIFE' in glossary) + +var simple = a => a > 15 ? 15 : a; +simple(16); // 15 +simple(10); // 10 + +let max = (a, b) => a > b ? a : b; + +// Easy array filtering, mapping, ... + +var arr = [5, 6, 13, 0, 1, 18, 23]; + +var sum = arr.reduce((a, b) => a + b); +// 66 + +var even = arr.filter(v => v % 2 == 0); +// [6, 0, 18] + +var double = arr.map(v => v * 2); +// [10, 12, 26, 0, 2, 36, 46] + +// More concise promise chains +promise.then(a => { + // ... +}).then(b => { + // ... +}); + +// Parameterless arrow functions that are visually easier to parse +setTimeout( () => { + console.log('I happen sooner'); + setTimeout( () => { + // deeper code + console.log('I happen later'); + }, 1); +}, 1); +</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификации</th> + <th scope="col">Статус</th> + <th scope="col">Коментар</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arrow-function-definitions', 'Arrow Function Definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Съвместимост_с_браузера">Съвместимост с браузера</h2> + +<div> + + +<p>{{Compat("javascript.functions.arrow_functions")}}</p> +</div> + +<h2 id="Вижте_още">Вижте още</h2> + +<ul> + <li><a href="https://hacks.mozilla.org/2015/06/es6-in-depth-arrow-functions/">"ES6 In Depth: Arrow functions" on hacks.mozilla.org</a></li> +</ul> diff --git a/files/bg/web/javascript/reference/functions/index.html b/files/bg/web/javascript/reference/functions/index.html new file mode 100644 index 0000000000..adb0d13f05 --- /dev/null +++ b/files/bg/web/javascript/reference/functions/index.html @@ -0,0 +1,596 @@ +--- +title: Functions +slug: Web/JavaScript/Reference/Functions +tags: + - Constructor + - Function + - Functions + - JavaScript + - NeedsTranslation + - Parameter + - TopicStub + - parameters +translation_of: Web/JavaScript/Reference/Functions +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>Generally speaking, a function is a "subprogram" that can be <em>called</em> by code external (or internal in the case of recursion) to the function. Like the program itself, a function is composed of a sequence of statements called the <em>function body</em>. Values can be <em>passed</em> to a function, and the function will <em>return</em> a value.</p> + +<p>In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. What distinguishes them from other objects is that functions can be called. In brief, they are <code><a href="/en-US/docs/JavaScript/Reference/Global_Objects/Function">Function</a></code> objects.</p> + +<p>For more examples and explanations, see also the <a href="/en-US/docs/Web/JavaScript/Guide/Functions">JavaScript guide about functions</a>.</p> + +<h2 id="Description">Description</h2> + +<p>Every function in JavaScript is a <code>Function</code> object. See {{jsxref("Function")}} for information on properties and methods of <code>Function</code> objects.</p> + +<p>To return a value other than the default, a function must have a <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/return">return</a></code> statement that specifies the value to return. A function without a return statement will return a default value. In the case of a <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/constructor">constructor</a> called with the <code><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new">new</a></code> keyword, the default value is the value of its <code>this</code> parameter. For all other functions, the default return value is {{jsxref("undefined")}}.</p> + +<p>The parameters of a function call are the function's <em>arguments</em>. Arguments are passed to functions <em>by value</em>. If the function changes the value of an argument, this change is not reflected globally or in the calling function. However, object references are values, too, and they are special: if the function changes the referred object's properties, that change is visible outside the function, as shown in the following example:</p> + +<pre class="brush: js">/* Declare the function 'myFunc' */ +function myFunc(theObject) { + theObject.brand = "Toyota"; +} + +/* + * Declare variable 'mycar'; + * create and initialize a new Object; + * assign reference to it to 'mycar' + */ +var mycar = { + brand: "Honda", + model: "Accord", + year: 1998 +}; + +/* Logs 'Honda' */ +console.log(mycar.brand); + +/* Pass object reference to the function */ +myFunc(mycar); + +/* + * Logs 'Toyota' as the value of the 'brand' property + * of the object, as changed to by the function. + */ +console.log(mycar.brand); +</pre> + +<p>The <a href="/en-US/docs/Web/JavaScript/Reference/Operators/this"><code>this</code> keyword</a> does not refer to the currently executing function, so you must refer to <code>Function</code> objects by name, even within the function body.</p> + +<h2 id="Defining_functions">Defining functions</h2> + +<p>There are several ways to define functions:</p> + +<h3 id="The_function_declaration_(function_statement)">The function declaration (<code>function</code> statement)</h3> + +<p>There is a special syntax for declaring functions (see <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function">function statement</a> for details):</p> + +<pre class="syntaxbox">function <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_function_expression_(function_expression)">The function expression (<code>function</code> expression)</h3> + +<p>A function expression is similar to and has the same syntax as a function declaration (see <a href="/en-US/docs/Web/JavaScript/Reference/Operators/function">function expression</a> for details). A function expression may be a part of a larger expression. One can define "named" function expressions (where the name of the expression might be used in the call stack for example) or "anonymous" function expressions. Function expressions are not <em>hoisted</em> onto the beginning of the scope, therefore they cannot be used before they appear in the code.</p> + +<pre class="syntaxbox">function [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name. Can be omitted, in which case the function becomes known as an anonymous function.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function.</dd> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<p>Here is an example of an <strong>anonymous</strong> function expression (the <code>name</code> is not used):</p> + +<pre class="brush: js">var myFunction = function() { + statements +}</pre> + +<p>It is also possible to provide a name inside the definition in order to create a <strong>named</strong> function expression:</p> + +<pre class="brush: js">var myFunction = function namedFunction(){ + statements +} +</pre> + +<p>One of the benefits of creating a named function expression is that in case we encountered an error, the stack trace will contain the name of the function, making it easier to find the origin of the error.</p> + +<p>As we can see, both examples do not start with the <code>function</code> keyword. Statements involving functions which do not start with <code>function</code> are function expressions.</p> + +<p>When functions are used only once, a common pattern is an <a href="/en-US/docs/Glossary/IIFE">IIFE (Immediately Invokable Function Expression)</a>.</p> + +<pre class="brush: js">(function() { + statements +})();</pre> + +<p>IIFE are function expressions that are invoked as soon as the function is declared.</p> + +<h3 id="The_generator_function_declaration_(function*_statement)">The generator function declaration (<code>function*</code> statement)</h3> + +<p>There is a special syntax for generator function declarations (see {{jsxref('Statements/function*', 'function* statement')}} for details):</p> + +<pre class="syntaxbox">function* <em>name</em>([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_generator_function_expression_(function*_expression)">The generator function expression (<code>function*</code> expression)</h3> + +<p>A generator function expression is similar to and has the same syntax as a generator function declaration (see {{jsxref('Operators/function*', 'function* expression')}} for details):</p> + +<pre class="syntaxbox">function* [<em>name</em>]([<em>param</em>[, <em>param</em>[, ... <em>param</em>]]]) { + <em>statements</em> +} +</pre> + +<dl> + <dt><code>name</code></dt> + <dd>The function name. Can be omitted, in which case the function becomes known as an anonymous function.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument to be passed to the function.</dd> + <dt><code>statements</code></dt> + <dd>The statements comprising the body of the function.</dd> +</dl> + +<h3 id="The_arrow_function_expression_(>)">The arrow function expression (=>)</h3> + +<p>An arrow function expression has a shorter syntax and lexically binds its <code>this</code> value (see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow functions</a> for details):</p> + +<pre class="syntaxbox">([param[, param]]) => { + statements +} + +param => expression +</pre> + +<dl> + <dt><code>param</code></dt> + <dd>The name of an argument. Zero arguments need to be indicated with <code>()</code>. For only one argument, the parentheses are not required. (like <code>foo => 1</code>)</dd> + <dt><code>statements or expression</code></dt> + <dd>Multiple statements need to be enclosed in brackets. A single expression requires no brackets. The expression is also the implicit return value of the function.</dd> +</dl> + +<h3 id="The_Function_constructor">The <code>Function</code> constructor</h3> + +<div class="note"> +<p><strong>Note:</strong> Using the <code>Function</code> constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.</p> +</div> + +<p>As all other objects, {{jsxref("Function")}} objects can be created using the <code>new</code> operator:</p> + +<pre class="syntaxbox">new Function (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Zero or more names to be used by the function as formal parameters. Each must be a proper JavaScript identifier.</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>A string containing the JavaScript statements comprising the function body.</dd> +</dl> + +<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> + +<h3 id="The_GeneratorFunction_constructor">The <code>GeneratorFunction</code> constructor</h3> + +<div class="note"> +<p><strong>Note:</strong> <code>GeneratorFunction</code> is not a global object, but could be obtained from generator function instance (see {{jsxref("GeneratorFunction")}} for more detail).</p> +</div> + +<div class="note"> +<p><strong>Note:</strong> Using the <code>GeneratorFunction</code> constructor to create functions is not recommended since it needs the function body as a string which may prevent some JS engine optimizations and can also cause other problems.</p> +</div> + +<p>As all other objects, {{jsxref("GeneratorFunction")}} objects can be created using the <code>new</code> operator:</p> + +<pre class="syntaxbox">new GeneratorFunction (<em>arg1</em>, <em>arg2</em>, ... <em>argN</em>, <em>functionBody</em>) +</pre> + +<dl> + <dt><code>arg1, arg2, ... arg<em>N</em></code></dt> + <dd>Zero or more names to be used by the function as formal argument names. Each must be a string that conforms to the rules for a valid JavaScript identifier or a list of such strings separated with a comma; for example "<code>x</code>", "<code>theValue</code>", or "<code>a,b</code>".</dd> +</dl> + +<dl> + <dt><code>functionBody</code></dt> + <dd>A string containing the JavaScript statements comprising the function definition.</dd> +</dl> + +<p>Invoking the <code>Function</code> constructor as a function (without using the <code>new</code> operator) has the same effect as invoking it as a constructor.</p> + +<h2 id="Function_parameters">Function parameters</h2> + +<h3 id="Default_parameters">Default parameters</h3> + +<p>Default function parameters allow formal parameters to be initialized with default values if no value or <code>undefined</code> is passed. For more details, see<a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters"> default parameters</a>.</p> + +<h3 id="Rest_parameters">Rest parameters</h3> + +<p>The rest parameter syntax allows representing an indefinite number of arguments as an array. For more details, see <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest parameters</a>.</p> + +<h2 id="The_arguments_object">The <code>arguments</code> object</h2> + +<p>You can refer to a function's arguments within the function by using the <code>arguments</code> object. See <a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a>.</p> + +<ul> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a></code>: An array-like object containing the arguments passed to the currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/callee">arguments.callee</a></code> {{Deprecated_inline}}: The currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/caller">arguments.caller</a></code> {{Obsolete_inline}} : The function that invoked the currently executing function.</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/arguments/length">arguments.length</a></code>: The number of arguments passed to the function.</li> +</ul> + +<h2 id="Defining_method_functions">Defining method functions</h2> + +<h3 id="Getter_and_setter_functions">Getter and setter functions</h3> + +<p>You can define getters (accessor methods) and setters (mutator methods) on any standard built-in object or user-defined object that supports the addition of new properties. The syntax for defining getters and setters uses the object literal syntax.</p> + +<dl> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></dt> + <dd> + <p>Binds an object property to a function that will be called when that property is looked up.</p> + </dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></dt> + <dd>Binds an object property to a function to be called when there is an attempt to set that property.</dd> +</dl> + +<h3 id="Method_definition_syntax">Method definition syntax</h3> + +<p>Starting with ECMAScript 2015, you are able to define own methods in a shorter syntax, similar to the getters and setters. See <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a> for more information.</p> + +<pre class="brush: js">var obj = { + foo() {}, + bar() {} +};</pre> + +<h2 id="Constructor_vs._declaration_vs._expression">Constructor vs. declaration vs. expression</h2> + +<p>Compare the following:</p> + +<p>A function defined with the <code>Function</code> <em>constructor</em> assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = new Function('x', 'y', 'return x * y');</pre> + +<p>A <em>function declaration</em> of a function named <code>multiply</code>:</p> + +<pre class="brush: js">function multiply(x, y) { + return x * y; +} // there is no semicolon here +</pre> + +<p>A <em>function expression</em> of an anonymous function assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = function(x, y) { + return x * y; +}; +</pre> + +<p>A <em>function expression</em> of a function named <code>func_name</code> assigned to the variable <code>multiply:</code></p> + +<pre class="brush: js">var multiply = function func_name(x, y) { + return x * y; +}; +</pre> + +<h3 id="Differences">Differences</h3> + +<p>All do approximately the same thing, with a few subtle differences:</p> + +<p>There is a distinction between the function name and the variable the function is assigned to. The function name cannot be changed, while the variable the function is assigned to can be reassigned. The function name can be used only within the function's body. Attempting to use it outside the function's body results in an error (or <code>undefined</code> if the function name was previously declared via a <code>var</code> statement). For example:</p> + +<pre class="brush: js">var y = function x() {}; +alert(x); // throws an error +</pre> + +<p>The function name also appears when the function is serialized via <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/toString"><code>Function</code>'s toString method</a>.</p> + +<p>On the other hand, the variable the function is assigned to is limited only by its scope, which is guaranteed to include the scope in which the function is declared.</p> + +<p>As the 4th example shows, the function name can be different from the variable the function is assigned to. They have no relation to each other. A function declaration also creates a variable with the same name as the function name. Thus, unlike those defined by function expressions, functions defined by function declarations can be accessed by their name in the scope they were defined in:</p> + +<p>A function defined by '<code>new Function'</code> does not have a function name. However, in the <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> JavaScript engine, the serialized form of the function shows as if it has the name "anonymous". For example, <code>alert(new Function())</code> outputs:</p> + +<pre class="brush: js">function anonymous() { +} +</pre> + +<p>Since the function actually does not have a name, <code>anonymous</code> is not a variable that can be accessed within the function. For example, the following would result in an error:</p> + +<pre class="brush: js">var foo = new Function("alert(anonymous);"); +foo(); +</pre> + +<p>Unlike functions defined by function expressions or by the <code>Function</code> constructor, a function defined by a function declaration can be used before the function declaration itself. For example:</p> + +<pre class="brush: js">foo(); // alerts FOO! +function foo() { + alert('FOO!'); +} +</pre> + +<p>A function defined by a function expression or by a function declaration inherits the current scope. That is, the function forms a closure. On the other hand, a function defined by a <code>Function</code> constructor does not inherit any scope other than the global scope (which all functions inherit).</p> + +<pre class="brush: js">/* + * Declare and initialize a variable 'p' (global) + * and a function 'myFunc' (to change the scope) inside which + * declare a varible with same name 'p' (current) and + * define three functions using three different ways:- + * 1. function declaration + * 2. function expression + * 3. function constructor + * each of which will log 'p' + */ +var p = 5; +function myFunc() { + var p = 9; + + function decl() { + console.log(p); + } + var expr = function() { + console.log(p); + }; + var cons = new Function('\tconsole.log(p);'); + + decl(); + expr(); + cons(); +} +myFunc(); + +/* + * Logs:- + * 9 - for 'decl' by function declaration (current scope) + * 9 - for 'expr' by function expression (current scope) + * 5 - for 'cons' by Function constructor (global scope) + */ +</pre> + +<p>Functions defined by function expressions and function declarations are parsed only once, while those defined by the <code>Function</code> constructor are not. That is, the function body string passed to the <code>Function</code> constructor must be parsed each and every time the constructor is called. Although a function expression creates a closure every time, the function body is not reparsed, so function expressions are still faster than "<code>new Function(...)</code>". Therefore the <code>Function</code> constructor should generally be avoided whenever possible.</p> + +<p>It should be noted, however, that function expressions and function declarations nested within the function generated by parsing a <code>Function constructor</code> 's string aren't parsed repeatedly. For example:</p> + +<pre class="brush: js">var foo = (new Function("var bar = \'FOO!\';\nreturn(function() {\n\talert(bar);\n});"))(); +foo(); // The segment "function() {\n\talert(bar);\n}" of the function body string is not re-parsed.</pre> + +<p>A function declaration is very easily (and often unintentionally) turned into a function expression. A function declaration ceases to be one when it either:</p> + +<ul> + <li>becomes part of an expression</li> + <li>is no longer a "source element" of a function or the script itself. A "source element" is a non-nested statement in the script or a function body:</li> +</ul> + +<pre class="brush: js">var x = 0; // source element +if (x === 0) { // source element + x = 10; // not a source element + function boo() {} // not a source element +} +function foo() { // source element + var y = 20; // source element + function bar() {} // source element + while (y === 10) { // source element + function blah() {} // not a source element + y++; // not a source element + } +} +</pre> + +<h3 id="Examples">Examples</h3> + +<pre class="brush: js">// function declaration +function foo() {} + +// function expression +(function bar() {}) + +// function expression +x = function hello() {} + + +if (x) { + // function expression + function world() {} +} + + +// function declaration +function a() { + // function declaration + function b() {} + if (0) { + // function expression + function c() {} + } +} +</pre> + +<h2 id="Block-level_functions">Block-level functions</h2> + +<p>In <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>, starting with ES2015, functions inside blocks are now scoped to that block. Prior to ES2015, block-level functions were forbidden in strict mode.</p> + +<pre class="brush: js">'use strict'; + +function f() { + return 1; +} + +{ + function f() { + return 2; + } +} + +f() === 1; // true + +// f() === 2 in non-strict mode +</pre> + +<h3 id="Block-level_functions_in_non-strict_code">Block-level functions in non-strict code</h3> + +<p>In a word: Don't.</p> + +<p>In non-strict code, function declarations inside blocks behave strangely. For example:</p> + +<pre class="brush: js">if (shouldDefineZero) { + function zero() { // DANGER: compatibility risk + console.log("This is zero."); + } +} +</pre> + +<p>ES2015 says that if <code>shouldDefineZero</code> is false, then <code>zero</code> should never be defined, since the block never executes. However, it's a new part of the standard. Historically, this was left unspecified, and some browsers would define <code>zero</code> whether the block executed or not.</p> + +<p>In <a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">strict mode</a>, all browsers that support ES2015 handle this the same way: <code>zero</code> is defined only if <code>shouldDefineZero</code> is true, and only in the scope of the <code>if</code>-block.</p> + +<p>A safer way to define functions conditionally is to assign a function expression to a variable:</p> + +<pre class="brush: js">var zero; +if (shouldDefineZero) { + zero = function() { + console.log("This is zero."); + }; +} +</pre> + +<h2 id="Examples_2">Examples</h2> + +<h3 id="Returning_a_formatted_number">Returning a formatted number</h3> + +<p>The following function returns a string containing the formatted representation of a number padded with leading zeros.</p> + +<pre class="brush: js">// This function returns a string padded with leading zeros +function padZeros(num, totalLen) { + var numStr = num.toString(); // Initialize return value as string + var numZeros = totalLen - numStr.length; // Calculate no. of zeros + for (var i = 1; i <= numZeros; i++) { + numStr = "0" + numStr; + } + return numStr; +} +</pre> + +<p>The following statements call the padZeros function.</p> + +<pre class="brush: js">var result; +result = padZeros(42,4); // returns "0042" +result = padZeros(42,2); // returns "42" +result = padZeros(5,4); // returns "0005" +</pre> + +<h3 id="Determining_whether_a_function_exists">Determining whether a function exists</h3> + +<p>You can determine whether a function exists by using the <code>typeof</code> operator. In the following example, a test is performed to determine if the <code>window</code> object has a property called <code>noFunc</code> that is a function. If so, it is used; otherwise, some other action is taken.</p> + +<pre class="brush: js"> if ('function' === typeof window.noFunc) { + // use noFunc() + } else { + // do something else + } +</pre> + +<p>Note that in the <code>if</code> test, a reference to <code>noFunc</code> is used—there are no brackets "()" after the function name so the actual function is not called.</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-13', 'Function Definition')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: Arrow functions, Generator functions, default parameters, rest parameters.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-function-definitions', 'Function definitions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.functions")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Statements/function", "function statement")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Statements/function*", "function* statement")}}</li> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>{{jsxref("Function")}}</li> + <li>{{jsxref("GeneratorFunction")}}</li> + <li>{{jsxref("Functions/Arrow_functions", "Arrow functions")}}</li> + <li>{{jsxref("Functions/Default_parameters", "Default parameters")}}</li> + <li>{{jsxref("Functions/rest_parameters", "Rest parameters")}}</li> + <li>{{jsxref("Functions/arguments", "Arguments object")}}</li> + <li>{{jsxref("Functions/get", "getter")}}</li> + <li>{{jsxref("Functions/set", "setter")}}</li> + <li>{{jsxref("Functions/Method_definitions", "Method definitions")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope">Functions and function scope</a></li> +</ul> diff --git a/files/bg/web/javascript/reference/global_objects/array/index.html b/files/bg/web/javascript/reference/global_objects/array/index.html new file mode 100644 index 0000000000..1d2a114327 --- /dev/null +++ b/files/bg/web/javascript/reference/global_objects/array/index.html @@ -0,0 +1,460 @@ +--- +title: Array +slug: Web/JavaScript/Reference/Global_Objects/Array +tags: + - Array + - Example + - Global Objects + - JavaScript + - NeedsTranslation + - Reference + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Array +--- +<div>{{JSRef}}</div> + +<p>The JavaScript <strong><code>Array</code></strong> object is a global object that is used in the construction of arrays; which are high-level, list-like objects.</p> + +<p><strong>Create an Array</strong></p> + +<pre class="brush: js">var fruits = ['Apple', 'Banana']; + +console.log(fruits.length); +// 2 +</pre> + +<p><strong>Access (index into) an Array item</strong></p> + +<pre class="brush: js">var first = fruits[0]; +// Apple + +var last = fruits[fruits.length - 1]; +// Banana +</pre> + +<p><strong>Loop over an Array</strong></p> + +<pre class="brush: js">fruits.forEach(function(item, index, array) { + console.log(item, index); +}); +// Apple 0 +// Banana 1 +</pre> + +<p><strong>Add to the end of an Array</strong></p> + +<pre class="brush: js">var newLength = fruits.push('Orange'); +// ["Apple", "Banana", "Orange"] +</pre> + +<p><strong>Remove from the end of an Array</strong></p> + +<pre class="brush: js">var last = fruits.pop(); // remove Orange (from the end) +// ["Apple", "Banana"]; +</pre> + +<p><strong>Remove from the front of an Array</strong></p> + +<pre class="brush: js">var first = fruits.shift(); // remove Apple from the front +// ["Banana"]; +</pre> + +<p><strong>Add to the front of an Array</strong></p> + +<pre class="brush: js">var newLength = fruits.unshift('Strawberry') // add to the front +// ["Strawberry", "Banana"]; +</pre> + +<p><strong>Find the index of an item in the Array</strong></p> + +<pre class="brush: js">fruits.push('Mango'); +// ["Strawberry", "Banana", "Mango"] + +var pos = fruits.indexOf('Banana'); +// 1 +</pre> + +<p><strong>Remove an item by index position</strong></p> + +<pre class="brush: js">var removedItem = fruits.splice(pos, 1); // this is how to remove an item + +// ["Strawberry", "Mango"]</pre> + +<p><strong>Remove items from an index position</strong></p> + +<pre class="brush: js">var vegetables = ['Cabbage', 'Turnip', 'Radish', 'Carrot']; +console.log(vegetables); +// ["Cabbage", "Turnip", "Radish", "Carrot"] + +var pos = 1, n = 2; + +var removedItems = vegetables.splice(pos, n); +// this is how to remove items, n defines the number of items to be removed, +// from that position(pos) onward to the end of array. + +console.log(vegetables); +// ["Cabbage", "Carrot"] (the original array is changed) + +console.log(removedItems); +// ["Turnip", "Radish"]</pre> + +<p><strong>Copy an Array</strong></p> + +<pre class="brush: js">var shallowCopy = fruits.slice(); // this is how to make a copy +// ["Strawberry", "Mango"] +</pre> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">[<var>element0</var>, <var>element1</var>, ..., <var>elementN</var>] +new Array(<var>element0</var>, <var>element1</var>[, ...[, <var>elementN</var>]]) +new Array(<var>arrayLength</var>)</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>element<em>N</em></code></dt> + <dd>A JavaScript array is initialized with the given elements, except in the case where a single argument is passed to the <code>Array</code> constructor and that argument is a number (see the arrayLength parameter below). Note that this special case only applies to JavaScript arrays created with the <code>Array</code> constructor, not array literals created with the bracket syntax.</dd> + <dt><code>arrayLength</code></dt> + <dd>If the only argument passed to the <code>Array</code> constructor is an integer between 0 and 2<sup>32</sup>-1 (inclusive), this returns a new JavaScript array with its <code>length</code> property set to that number (<strong>Note:</strong> this implies an array of <code>arrayLength</code> empty slots, not slots with actual <code>undefined</code> values). If the argument is any other number, a {{jsxref("RangeError")}} exception is thrown.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>Arrays are list-like objects whose prototype has methods to perform traversal and mutation operations. Neither the length of a JavaScript array nor the types of its elements are fixed. Since an array's length can change at any time, and data can be stored at non-contiguous locations in the array, JavaScript arrays are not guaranteed to be dense; this depends on how the programmer chooses to use them. In general, these are convenient characteristics; but if these features are not desirable for your particular use, you might consider using typed arrays.</p> + +<p>Arrays cannot use strings as element indexes (as in an <a href="https://en.wikipedia.org/wiki/Associative_array">associative array</a>) but must use integers. Setting or accessing via non-integers using <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties">bracket notation</a> (or <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">dot notation</a>) will not set or retrieve an element from the array list itself, but will set or access a variable associated with that array's <a href="/en-US/docs/Web/JavaScript/Data_structures#Properties">object property collection</a>. The array's object properties and list of array elements are separate, and the array's <a href="/en-US/docs/Web/JavaScript/Guide/Indexed_collections#Array_methods">traversal and mutation operations</a> cannot be applied to these named properties.</p> + +<h3 id="Accessing_array_elements">Accessing array elements</h3> + +<p>JavaScript arrays are zero-indexed: the first element of an array is at index <code>0</code>, and the last element is at the index equal to the value of the array's {{jsxref("Array.length", "length")}} property minus 1. Using an invalid index number returns <code>undefined</code>.</p> + +<pre class="brush: js">var arr = ['this is the first element', 'this is the second element', 'this is the last element']; +console.log(arr[0]); // logs 'this is the first element' +console.log(arr[1]); // logs 'this is the second element' +console.log(arr[arr.length - 1]); // logs 'this is the last element' +</pre> + +<p>Array elements are object properties in the same way that <code>toString</code> is a property, but trying to access an element of an array as follows throws a syntax error because the property name is not valid:</p> + +<pre class="brush: js">console.log(arr.0); // a syntax error +</pre> + +<p>There is nothing special about JavaScript arrays and the properties that cause this. JavaScript properties that begin with a digit cannot be referenced with dot notation; and must be accessed using bracket notation. For example, if you had an object with a property named <code>'3d'</code>, it can only be referenced using bracket notation. E.g.:</p> + +<pre class="brush: js">var years = [1950, 1960, 1970, 1980, 1990, 2000, 2010]; +console.log(years.0); // a syntax error +console.log(years[0]); // works properly +</pre> + +<pre class="brush: js">renderer.3d.setTexture(model, 'character.png'); // a syntax error +renderer['3d'].setTexture(model, 'character.png'); // works properly +</pre> + +<p>Note that in the <code>3d</code> example, <code>'3d'</code> had to be quoted. It's possible to quote the JavaScript array indexes as well (e.g., <code>years['2']</code> instead of <code>years[2]</code>), although it's not necessary. The 2 in <code>years[2]</code> is coerced into a string by the JavaScript engine through an implicit <code>toString</code> conversion. It is, for this reason, that <code>'2'</code> and <code>'02'</code> would refer to two different slots on the <code>years</code> object and the following example could be <code>true</code>:</p> + +<pre class="brush: js">console.log(years['2'] != years['02']); +</pre> + +<p>Similarly, object properties which happen to be reserved words(!) can only be accessed as string literals in bracket notation (but it can be accessed by dot notation in firefox 40.0a2 at least):</p> + +<pre class="brush: js">var promise = { + 'var' : 'text', + 'array': [1, 2, 3, 4] +}; + +console.log(promise['var']); +</pre> + +<h3 id="Relationship_between_length_and_numerical_properties">Relationship between <code>length</code> and numerical properties</h3> + +<p>A JavaScript array's {{jsxref("Array.length", "length")}} property and numerical properties are connected. Several of the built-in array methods (e.g., {{jsxref("Array.join", "join()")}}, {{jsxref("Array.slice", "slice()")}}, {{jsxref("Array.indexOf", "indexOf()")}}, etc.) take into account the value of an array's {{jsxref("Array.length", "length")}} property when they're called. Other methods (e.g., {{jsxref("Array.push", "push()")}}, {{jsxref("Array.splice", "splice()")}}, etc.) also result in updates to an array's {{jsxref("Array.length", "length")}} property.</p> + +<pre class="brush: js">var fruits = []; +fruits.push('banana', 'apple', 'peach'); + +console.log(fruits.length); // 3 +</pre> + +<p>When setting a property on a JavaScript array when the property is a valid array index and that index is outside the current bounds of the array, the engine will update the array's {{jsxref("Array.length", "length")}} property accordingly:</p> + +<pre class="brush: js">fruits[5] = 'mango'; +console.log(fruits[5]); // 'mango' +console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] +console.log(fruits.length); // 6 +</pre> + +<p>Increasing the {{jsxref("Array.length", "length")}}.</p> + +<pre class="brush: js">fruits.length = 10; +console.log(Object.keys(fruits)); // ['0', '1', '2', '5'] +console.log(fruits.length); // 10 +</pre> + +<p>Decreasing the {{jsxref("Array.length", "length")}} property does, however, delete elements.</p> + +<pre class="brush: js">fruits.length = 2; +console.log(Object.keys(fruits)); // ['0', '1'] +console.log(fruits.length); // 2 +</pre> + +<p>This is explained further on the {{jsxref("Array.length")}} page.</p> + +<h3 id="Creating_an_array_using_the_result_of_a_match">Creating an array using the result of a match</h3> + +<p>The result of a match between a regular expression and a string can create a JavaScript array. This array has properties and elements which provide information about the match. Such an array is returned by {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, and {{jsxref("String.replace")}}. To help explain these properties and elements, look at the following example and then refer to the table below:</p> + +<pre class="brush: js">// Match one d followed by one or more b's followed by one d +// Remember matched b's and the following d +// Ignore case + +var myRe = /d(b+)(d)/i; +var myArray = myRe.exec('cdbBdbsbz'); +</pre> + +<p>The properties and elements returned from this match are as follows:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <td class="header">Property/Element</td> + <td class="header">Description</td> + <td class="header">Example</td> + </tr> + <tr> + <td><code>input</code></td> + <td>A read-only property that reflects the original string against which the regular expression was matched.</td> + <td>cdbBdbsbz</td> + </tr> + <tr> + <td><code>index</code></td> + <td>A read-only property that is the zero-based index of the match in the string.</td> + <td>1</td> + </tr> + <tr> + <td><code>[0]</code></td> + <td>A read-only element that specifies the last matched characters.</td> + <td>dbBd</td> + </tr> + <tr> + <td><code>[1], ...[n]</code></td> + <td>Read-only elements that specify the parenthesized substring matches, if included in the regular expression. The number of possible parenthesized substrings is unlimited.</td> + <td>[1]: bB<br> + [2]: d</td> + </tr> + </tbody> +</table> + +<h2 id="Properties">Properties</h2> + +<dl> + <dt><code>Array.length</code></dt> + <dd>The <code>Array</code> constructor's length property whose value is 1.</dd> + <dt>{{jsxref("Array.@@species", "get Array[@@species]")}}</dt> + <dd>The constructor function that is used to create derived objects.</dd> + <dt>{{jsxref("Array.prototype")}}</dt> + <dd>Allows the addition of properties to all array objects.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("Array.from()")}}</dt> + <dd>Creates a new <code>Array</code> instance from an array-like or iterable object.</dd> + <dt>{{jsxref("Array.isArray()")}}</dt> + <dd>Returns true if a variable is an array, if not false.</dd> + <dt>{{jsxref("Array.of()")}}</dt> + <dd>Creates a new <code>Array</code> instance with a variable number of arguments, regardless of number or type of the arguments.</dd> +</dl> + +<h2 id="Array_instances"><code>Array</code> instances</h2> + +<p>All <code>Array</code> instances inherit from {{jsxref("Array.prototype")}}. The prototype object of the <code>Array</code> constructor can be modified to affect all <code>Array</code> instances.</p> + +<h3 id="Properties_2">Properties</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Properties')}}</div> + +<h3 id="Methods_2">Methods</h3> + +<h4 id="Mutator_methods">Mutator methods</h4> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Mutator_methods')}}</div> + +<h4 id="Accessor_methods">Accessor methods</h4> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Accessor_methods')}}</div> + +<h4 id="Iteration_methods">Iteration methods</h4> + +<div>{{page('en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype', 'Iteration_methods')}}</div> + +<h2 id="Array_generic_methods"><code>Array</code> generic methods</h2> + +<div class="warning"> +<p><strong>Array generics are non-standard, deprecated and will get removed in the near future</strong>. </p> +</div> + +<p>Sometimes you would like to apply array methods to strings or other array-like objects (such as function {{jsxref("Functions/arguments", "arguments", "", 1)}}). By doing this, you treat a string as an array of characters (or otherwise treat a non-array as an array). For example, in order to check that every character in the variable <var>str</var> is a letter, you would write:</p> + +<pre class="brush: js">function isLetter(character) { + return character >= 'a' && character <= 'z'; +} + +if (Array.prototype.every.call(str, isLetter)) { + console.log("The string '" + str + "' contains only letters!"); +} +</pre> + +<p>This notation is rather wasteful and JavaScript 1.6 introduced a generic shorthand:</p> + +<pre class="brush: js">if (Array.every(str, isLetter)) { + console.log("The string '" + str + "' contains only letters!"); +} +</pre> + +<p>{{jsxref("Global_Objects/String", "Generics", "#String_generic_methods", 1)}} are also available on {{jsxref("String")}}.</p> + +<p>These are <strong>not</strong> part of ECMAScript standards and they are not supported by non-Gecko browsers. As a standard alternative, you can convert your object to a proper array using {{jsxref("Array.from()")}}; although that method may not be supported in old browsers:</p> + +<pre class="brush: js">if (Array.from(str).every(isLetter)) { + console.log("The string '" + str + "' contains only letters!"); +} +</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Creating_an_array">Creating an array</h3> + +<p>The following example creates an array, <code>msgArray</code>, with a length of 0, then assigns values to <code>msgArray[0]</code> and <code>msgArray[99]</code>, changing the length of the array to 100.</p> + +<pre class="brush: js">var msgArray = []; +msgArray[0] = 'Hello'; +msgArray[99] = 'world'; + +if (msgArray.length === 100) { + console.log('The length is 100.'); +} +</pre> + +<h3 id="Creating_a_two-dimensional_array">Creating a two-dimensional array</h3> + +<p>The following creates a chess board as a two-dimensional array of strings. The first move is made by copying the 'p' in (6,4) to (4,4). The old position (6,4) is made blank.</p> + +<pre class="brush: js">var board = [ + ['R','N','B','Q','K','B','N','R'], + ['P','P','P','P','P','P','P','P'], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + [' ',' ',' ',' ',' ',' ',' ',' '], + ['p','p','p','p','p','p','p','p'], + ['r','n','b','q','k','b','n','r'] ]; + +console.log(board.join('\n') + '\n\n'); + +// Move King's Pawn forward 2 +board[4][4] = board[6][4]; +board[6][4] = ' '; +console.log(board.join('\n')); +</pre> + +<p>Here is the output:</p> + +<pre class="eval">R,N,B,Q,K,B,N,R +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , , , , , + , , , , , , , +p,p,p,p,p,p,p,p +r,n,b,q,k,b,n,r + +R,N,B,Q,K,B,N,R +P,P,P,P,P,P,P,P + , , , , , , , + , , , , , , , + , , , ,p, , , + , , , , , , , +p,p,p,p, ,p,p,p +r,n,b,q,k,b,n,r +</pre> + +<h3 id="Using_an_array_to_tabulate_a_set_of_values">Using an array to tabulate a set of values</h3> + +<pre class="brush: js">values = []; +for (var x = 0; x < 10; x++){ + values.push([ + 2 ** x, + 2 * x ** 2 + ]) +}; +console.table(values)</pre> + +<p>Results in</p> + +<pre class="eval">0 1 0 +1 2 2 +2 4 8 +3 8 18 +4 16 32 +5 32 50 +6 64 72 +7 128 98 +8 256 128 +9 512 162</pre> + +<p>(First column is the (index))</p> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4', 'Array')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td>New methods added: {{jsxref("Array.isArray")}}, {{jsxref("Array.prototype.indexOf", "indexOf")}}, {{jsxref("Array.prototype.lastIndexOf", "lastIndexOf")}}, {{jsxref("Array.prototype.every", "every")}}, {{jsxref("Array.prototype.some", "some")}}, {{jsxref("Array.prototype.forEach", "forEach")}}, {{jsxref("Array.prototype.map", "map")}}, {{jsxref("Array.prototype.filter", "filter")}}, {{jsxref("Array.prototype.reduce", "reduce")}}, {{jsxref("Array.prototype.reduceRight", "reduceRight")}}</td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New methods added: {{jsxref("Array.from")}}, {{jsxref("Array.of")}}, {{jsxref("Array.prototype.find", "find")}}, {{jsxref("Array.prototype.findIndex", "findIndex")}}, {{jsxref("Array.prototype.fill", "fill")}}, {{jsxref("Array.prototype.copyWithin", "copyWithin")}}</td> + </tr> + <tr> + <td>{{SpecName('ES7', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ES7')}}</td> + <td>New method added: {{jsxref("Array.prototype.includes()")}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.Array")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Indexing_object_properties">JavaScript Guide: “Indexing object properties”</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Predefined_Core_Objects#Array_Object">JavaScript Guide: “Predefined Core Objects: <code>Array</code> Object”</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Array_comprehensions">Array comprehensions</a></li> + <li><a href="https://github.com/plusdude/array-generics">Polyfill for JavaScript 1.8.5 Array Generics and ECMAScript 5 Array Extras</a></li> + <li><a href="/en-US/docs/JavaScript_typed_arrays">Typed Arrays</a></li> +</ul> diff --git a/files/bg/web/javascript/reference/global_objects/array/splice/index.html b/files/bg/web/javascript/reference/global_objects/array/splice/index.html new file mode 100644 index 0000000000..36d82dc700 --- /dev/null +++ b/files/bg/web/javascript/reference/global_objects/array/splice/index.html @@ -0,0 +1,155 @@ +--- +title: Array.prototype.splice() +slug: Web/JavaScript/Reference/Global_Objects/Array/splice +tags: + - JavaScript + - splice + - Масив + - заместване + - метод + - премахване +translation_of: Web/JavaScript/Reference/Global_Objects/Array/splice +--- +<div>{{JSRef}}</div> + +<p>Методът <strong><code>splice()</code></strong> променя съдържанието на масива като изтрива или заменя съществуващи елементи и/или добавя нови.</p> + +<div>{{EmbedInteractiveExample("pages/js/array-splice.html")}}</div> + + + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">let <var>arrDeletedItems</var> = <var>array</var>.splice(<var>start</var>[, <var>deleteCount</var>[, <var>item1</var>[, <var>item2</var>[, ...]]]]) +</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code><var>start</var></code></dt> + <dd>Индексът, от който започва промяната на масива.</dd> + <dd>Ако числото е по-голямо от дължината на масива, стойността на <code><var>start</var></code> ще се промени автоматично и ще приеме стойност равна на дължината на масива. В този случай няма да бъдат изтрити елементи от масива. Методът ще се държи като функция за добавяне на елементи и ще добави толкова елементи колкото са подадени като item[n*].</dd> + <dd>Ако <code><var>start</var></code> е отрицателно число обработката на масива ще започне от края на масива.( Случай че, <code><var>start</var></code> e -1 това означава -n е индексът на n-тия последен елемент и следователно е еквивалентен на <code>array.length - n</code> ).</dd> + <dd>Ако <code><var>array</var>.length + <var>start</var></code> е по-малко от <code>0</code>, ще започне от индекс <code>0</code>.</dd> + <dt><code><var>deleteCount</var></code> {{optional_inline}}</dt> + <dd>Число, което показва колко елемента трябва да бъдат изтрити ( започва се от <code><var>start</var></code> ).</dd> + <dd>If <code><var>deleteCount</var></code> is omitted, or if its value is equal to or larger than <code><var>array</var>.length - <var>start</var></code> (that is, if it is equal to or greater than the number of elements left in the array, starting at <code><var>start</var></code>), then all the elements from <code><var>start</var></code> to the end of the array will be deleted.</dd> + <dd> + <div class="blockIndicator note"> + <p><strong>Note:</strong> In IE8, it won't delete all when <code><var>deleteCount</var></code> is omitted.</p> + </div> + </dd> + <dd>If <code><var>deleteCount</var></code> is <code>0</code> or negative, no elements are removed. In this case, you should specify at least one new element (see below).</dd> + <dt><code><var>item1</var>, <var>item2</var>, ...</code> {{optional_inline}}</dt> + <dd>The elements to add to the array, beginning from <code><var>start</var></code>. If you do not specify any elements, <code>splice()</code> will only remove elements from the array.</dd> +</dl> + +<h3 id="Върната_стойност">Върната стойност</h3> + +<p>Методът връща масив, съдържащ изтритите елементи.</p> + +<p>Ако само един елемент е премахнат, резултатът ще бъде масив с един елемент.</p> + +<p>Ако няма изтрити елементи, резултатът ще бъде празен масив.</p> + +<h2 id="Описание">Описание</h2> + +<p>Ако броя на добавените елементи се различава от броя на изтритите, ще има промяна в дължината на масива.</p> + +<h2 id="Примери">Примери</h2> + +<h3 id="Премахват_се_0_елемента_пред_индекс_2_и_се_добавя_drum">Премахват се 0 елемента пред индекс 2 и се добавя "drum"</h3> + +<pre class="brush: js">let myFish = ['angel', 'clown', 'mandarin', 'sturgeon'] +// Ако изходният ви код е в utf8, можете да ползвате всякакви азбуки +let премахнат = myFish.splice(2, 0, 'drum') + +// myFish = ["angel", "clown", "drum", "mandarin", "sturgeon"] +// премахнат = [], не са премахнати елементи</pre> + +<h3 id="Премахват_се_0_елемента_пред_индекс_2_и_се_добавят_drum_и_guitar">Премахват се 0 елемента пред индекс 2 и се добавят "drum" и "guitar"</h3> + +<pre class="brush: js">let myFish = ['angel', 'clown', 'mandarin', 'sturgeon'] +let removed = myFish.splice(2, 0, 'drum', 'guitar') + +// myFish = ["angel", "clown", "drum", "guitar", "mandarin", "sturgeon"] +// removed = [], не са премахнати елементи +</pre> + +<h3 id="Премахва_се_един_елемент_започвайки_от_индекс_3">Премахва се един елемент, започвайки от индекс 3</h3> + +<pre class="brush: js">let myFish = ['angel', 'clown', 'drum', 'mandarin', 'sturgeon'] +let removed = myFish.splice(3, 1) + +// removed = ["mandarin"] +// myFish = ["angel", "clown", "drum", "sturgeon"] +</pre> + +<h3 id="Remove_1_element_at_index_2_and_insert_trumpet">Remove 1 element at index 2, and insert "trumpet"</h3> + +<pre class="brush: js">let myFish = ['angel', 'clown', 'drum', 'sturgeon'] +let removed = myFish.splice(2, 1, 'trumpet') + +// myFish = ["angel", "clown", "trumpet", "sturgeon"] +// removed = ["drum"]</pre> + +<h3 id="Remove_2_elements_from_index_0_and_insert_parrot_anemone_and_blue">Remove 2 elements from index 0, and insert "parrot", "anemone" and "blue"</h3> + +<pre class="brush: js">let myFish = ['angel', 'clown', 'trumpet', 'sturgeon'] +let removed = myFish.splice(0, 2, 'parrot', 'anemone', 'blue') + +// myFish = ["parrot", "anemone", "blue", "trumpet", "sturgeon"] +// removed = ["angel", "clown"]</pre> + +<h3 id="Remove_2_elements_from_index_2">Remove 2 elements from index 2</h3> + +<pre class="brush: js">let myFish = ['parrot', 'anemone', 'blue', 'trumpet', 'sturgeon'] +let removed = myFish.splice(2, 2) + +// myFish = ["parrot", "anemone", "sturgeon"] +// removed = ["blue", "trumpet"]</pre> + +<h3 id="Remove_1_element_from_index_-2">Remove 1 element from index -2</h3> + +<pre class="brush: js">let myFish = ['angel', 'clown', 'mandarin', 'sturgeon'] +let removed = myFish.splice(-2, 1) + +// myFish = ["angel", "clown", "sturgeon"] +// removed = ["mandarin"]</pre> + +<h3 id="Remove_all_elements_after_index_2_incl.">Remove all elements after index 2 (incl.)</h3> + +<pre class="brush: js">let myFish = ['angel', 'clown', 'mandarin', 'sturgeon'] +let removed = myFish.splice(2) + +// myFish = ["angel", "clown"] +// removed = ["mandarin", "sturgeon"]</pre> + +<h2 id="Спецификация">Спецификация</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.splice', 'Array.prototype.splice')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Съвместимост_и_подръжка">Съвместимост и подръжка</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.splice")}}</p> +</div> + +<h2 id="Виж_повече">Виж повече</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()", "push()")}} / {{jsxref("Array.prototype.pop()", "pop()")}}— добавя/премахва елемент от края на масива</li> + <li>{{jsxref("Array.prototype.unshift()", "unshift()")}} / {{jsxref("Array.prototype.shift()", "shift()")}}— добавя/премахва елемент от началото на масива</li> + <li>{{jsxref("Array.prototype.concat()", "concat()")}}— връща нов масив състоящ се от този масив, обединен с друг масив или стойности.</li> +</ul> diff --git a/files/bg/web/javascript/reference/global_objects/arraybuffer/index.html b/files/bg/web/javascript/reference/global_objects/arraybuffer/index.html new file mode 100644 index 0000000000..6849a4d7b2 --- /dev/null +++ b/files/bg/web/javascript/reference/global_objects/arraybuffer/index.html @@ -0,0 +1,96 @@ +--- +title: ArrayBuffer +slug: Web/JavaScript/Reference/Global_Objects/ArrayBuffer +translation_of: Web/JavaScript/Reference/Global_Objects/ArrayBuffer +--- +<div>{{JSRef}}</div> + +<div></div> + +<p><strong><code>ArrayBuffer</code></strong> обекта се използва за репрезентиране на най общ бъфер за двоични данни със статична дължина.</p> + +<p>Това е масив от байтове, често наричан в други езици "byte array".Не можете директно да манипулирате съдържанието на <code>ArrayBuffer</code>; вместо това вие трябва да създадете <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">масив от типизирани обекти</a> или {{jsxref("DataView")}} обект, който ще представлява бъфера в специфичен формат, който ще се използва за да чете съдържанието на бъфера.</p> + +<p><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer/ArrayBuffer">ArrayBuffer()</a></code> конструктора създава нов <code>ArrayBuffer</code> от подадена дължина в байтове, можете също да получите <code>ArrayBuffer</code> от вече съществуващи данни, например <a href="/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding#Appendix_to_Solution_1_Decode_a_Base64_string_to_Uint8Array_or_ArrayBuffer">от Base64 низ</a> или от <a href="/en-US/docs/Web/API/FileReader/readAsArrayBuffer">файл от вашата система</a>.</p> + +<h2 id="Конструктор">Конструктор</h2> + +<dl> + <dt>{{jsxref("ArrayBuffer.ArrayBuffer", "ArrayBuffer()")}}</dt> + <dd>Създава нови <code>ArrayBuffer</code> обекти.</dd> +</dl> + +<h2 id="Свойства">Свойства</h2> + +<dl> + <dt><code>ArrayBuffer.length</code> </dt> + <dd>Връща броя параметри на конструктор функцията на <code>ArrayBuffer</code> , който е 1.</dd> + <dt>{{jsxref("ArrayBuffer.@@species", "get ArrayBuffer[@@species]")}}</dt> + <dd>Конструктор функцията, която се използва за създаване на нови обекти.</dd> + <dt><code>ArrayBuffer.prototype</code></dt> + <dd>Позволява за добавянето на допълнителни свойства към всички <code>ArrayBuffer</code> обекти.</dd> +</dl> + +<h2 id="Методи">Методи</h2> + +<dl> + <dt>{{jsxref("ArrayBuffer.isView", "ArrayBuffer.isView(arg)")}}</dt> + <dd>Връща <code>true</code> ако <code>arg</code> е един от буферните масивни типове, като <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray">масив от типизирани обекти</a> или {{jsxref("DataView")}}. Връща <code>false</code> в противен случай.</dd> + <dt>{{jsxref("ArrayBuffer.transfer", "ArrayBuffer.transfer(oldBuffer [, newByteLength])")}}</dt> + <dd> + <div class="line" id="file-arraybuffer-transfer-LC6">Връща нов <code>ArrayBuffer</code> ,чието съдържание е взето от данните на <code>oldBuffer</code> и след това се скъсява или се доплъват водещите нули (zero-extended) с <code>newByteLength</code>.</div> + </dd> +</dl> + +<h2 id="Инстанции">Инстанции</h2> + +<p>Всички <code>ArrayBuffer</code> инстанции наследяват <code>ArrayBuffer.prototype</code>.</p> + +<h3 id="Свойства_2">Свойства</h3> + +<dl> + <dt><code>ArrayBuffer.prototype.constructor</code></dt> + <dd>Е функцията, която създава прототипа на обекта. Началната стойност е стандартният, вграден конструктор на <code>ArrayBuffer</code>.</dd> + <dt>{{jsxref("ArrayBuffer.prototype.byteLength")}} {{readonlyInline}}</dt> + <dd>Големината, в байтове на <code>ArrayBuffer</code>. Това се установява когато масива се създава и не може да се променя.</dd> +</dl> + +<h3 id="Методи_2">Методи</h3> + +<dl> + <dt>{{jsxref("ArrayBuffer.prototype.slice()")}}</dt> + <dd>Връща нов <code>ArrayBuffer</code>, чието съдържание е копие на байтовете на този <code>ArrayBuffer</code> от <code>begin(началото)</code>, включително, до <code>end(края)</code>, изключае.Ако някое от <code>begin</code> или <code>end</code> е отрицателно, се отнася към индекс в края на масива, вместо в началото.</dd> +</dl> + +<h2 id="Пример">Пример</h2> + +<p>В този пример ще създадем 8-битов бъфер с {{jsxref("Int32Array")}} изглед, рефериращ към бъфера:</p> + +<pre class="brush: js">const buffer = new ArrayBuffer(8); +const view = new Int32Array(buffer);</pre> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Спецификация</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-arraybuffer-objects', 'ArrayBuffer')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Съвместимост_на_браузъра">Съвместимост на браузъра</h2> + +<div class="hidden">Таблицата за съвемстимост се генерира от структурни данни. Ако искате да допринесете към данните, моля вижте <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и ни изпратете pull request.</div> + +<p>{{Compat("javascript.builtins.ArrayBuffer")}}</p> + +<h2 id="Вижте_също">Вижте също</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Typed_arrays">JavaScript typed arrays</a></li> + <li>{{jsxref("SharedArrayBuffer")}}</li> +</ul> diff --git a/files/bg/web/javascript/reference/global_objects/index.html b/files/bg/web/javascript/reference/global_objects/index.html new file mode 100644 index 0000000000..6af3563dd3 --- /dev/null +++ b/files/bg/web/javascript/reference/global_objects/index.html @@ -0,0 +1,182 @@ +--- +title: Standard built-in objects +slug: Web/JavaScript/Reference/Global_Objects +tags: + - JavaScript + - NeedsTranslation + - Overview + - Reference + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects +--- +<p>{{JSSidebar("Objects")}}</p> + +<p>This chapter documents all of JavaScript's standard, built-in objects, including their methods and properties.</p> + +<p>The term "global objects" (or standard built-in objects) here is not to be confused with the <strong>global object</strong>. Here, global objects refer to <strong>objects in the global scope</strong>. The <strong>global object</strong> itself can be accessed using the {{JSxRef("Operators/this", "this")}} operator in the global scope (but only if ECMAScript 5 strict mode is not used; in that case it returns {{JSxRef("undefined")}}). In fact, the global scope <strong>consists of</strong> the properties of the global object, including inherited properties, if any.</p> + +<p>Other objects in the global scope are either <a href="/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Creating_new_objects">created by the user script</a> or provided by the host application. The host objects available in browser contexts are documented in the <a href="/en-US/docs/Web/API/Reference">API reference</a>. For more information about the distinction between the <a href="/en-US/docs/DOM/DOM_Reference">DOM</a> and core <a href="/en-US/docs/Web/JavaScript">JavaScript</a>, see <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a>.</p> + +<h2 id="Standard_objects_by_category">Standard objects by category</h2> + +<h3 id="Value_properties">Value properties</h3> + +<p>These global properties return a simple value; they have no properties or methods.</p> + +<ul> + <li>{{JSxRef("Infinity")}}</li> + <li>{{JSxRef("NaN")}}</li> + <li>{{JSxRef("undefined")}}</li> + <li>{{JSxRef("null")}} literal</li> + <li>{{JSxRef("globalThis")}}</li> +</ul> + +<h3 id="Function_properties">Function properties</h3> + +<p>These global functions—functions which are called globally rather than on an object—directly return their results to the caller.</p> + +<ul> + <li>{{JSxRef("Global_Objects/eval", "eval()")}}</li> + <li>{{JSxRef("Global_Objects/uneval", "uneval()")}} {{Non-standard_Inline}}</li> + <li>{{JSxRef("Global_Objects/isFinite", "isFinite()")}}</li> + <li>{{JSxRef("Global_Objects/isNaN", "isNaN()")}}</li> + <li>{{JSxRef("Global_Objects/parseFloat", "parseFloat()")}}</li> + <li>{{JSxRef("Global_Objects/parseInt", "parseInt()")}}</li> + <li>{{JSxRef("Global_Objects/decodeURI", "decodeURI()")}}</li> + <li>{{JSxRef("Global_Objects/decodeURIComponent", "decodeURIComponent()")}}</li> + <li>{{JSxRef("Global_Objects/encodeURI", "encodeURI()")}}</li> + <li>{{JSxRef("Global_Objects/encodeURIComponent", "encodeURIComponent()")}}</li> + <li>{{JSxRef("Global_Objects/escape", "escape()")}} {{Deprecated_Inline}}</li> + <li>{{JSxRef("Global_Objects/unescape", "unescape()")}} {{Deprecated_Inline}}</li> +</ul> + +<h3 id="Fundamental_objects">Fundamental objects</h3> + +<p>These are the fundamental, basic objects upon which all other objects are based. This includes objects that represent general objects, functions, and errors.</p> + +<ul> + <li>{{JSxRef("Object")}}</li> + <li>{{JSxRef("Function")}}</li> + <li>{{JSxRef("Boolean")}}</li> + <li>{{JSxRef("Symbol")}}</li> + <li>{{JSxRef("Error")}}</li> + <li>{{JSxRef("EvalError")}}</li> + <li>{{JSxRef("InternalError")}} {{Non-standard_Inline}}</li> + <li>{{JSxRef("RangeError")}}</li> + <li>{{JSxRef("ReferenceError")}}</li> + <li>{{JSxRef("SyntaxError")}}</li> + <li>{{JSxRef("TypeError")}}</li> + <li>{{JSxRef("URIError")}}</li> +</ul> + +<h3 id="Numbers_and_dates">Numbers and dates</h3> + +<p>These are the base objects representing numbers, dates, and mathematical calculations.</p> + +<ul> + <li>{{JSxRef("Number")}}</li> + <li>{{JSxRef("BigInt")}}</li> + <li>{{JSxRef("Math")}}</li> + <li>{{JSxRef("Date")}}</li> +</ul> + +<h3 id="Text_processing">Text processing</h3> + +<p>These objects represent strings and support manipulating them.</p> + +<ul> + <li>{{JSxRef("String")}}</li> + <li>{{JSxRef("RegExp")}}</li> +</ul> + +<h3 id="Indexed_collections">Indexed collections</h3> + +<p>These objects represent collections of data which are ordered by an index value. This includes (typed) arrays and array-like constructs.</p> + +<ul> + <li>{{JSxRef("Array")}}</li> + <li>{{JSxRef("Int8Array")}}</li> + <li>{{JSxRef("Uint8Array")}}</li> + <li>{{JSxRef("Uint8ClampedArray")}}</li> + <li>{{JSxRef("Int16Array")}}</li> + <li>{{JSxRef("Uint16Array")}}</li> + <li>{{JSxRef("Int32Array")}}</li> + <li>{{JSxRef("Uint32Array")}}</li> + <li>{{JSxRef("Float32Array")}}</li> + <li>{{JSxRef("Float64Array")}}</li> + <li>{{JSxRef("BigInt64Array")}}</li> + <li>{{JSxRef("BigUint64Array")}}</li> +</ul> + +<h3 id="Keyed_collections">Keyed collections</h3> + +<p>These objects represent collections which use keys; these contain elements which are iterable in the order of insertion.</p> + +<ul> + <li>{{JSxRef("Map")}}</li> + <li>{{JSxRef("Set")}}</li> + <li>{{JSxRef("WeakMap")}}</li> + <li>{{JSxRef("WeakSet")}}</li> +</ul> + +<h3 id="Structured_data">Structured data</h3> + +<p>These objects represent and interact with structured data buffers and data coded using JavaScript Object Notation (JSON).</p> + +<ul> + <li>{{JSxRef("ArrayBuffer")}}</li> + <li>{{JSxRef("SharedArrayBuffer")}} {{Experimental_Inline}}</li> + <li>{{JSxRef("Atomics")}} {{Experimental_Inline}}</li> + <li>{{JSxRef("DataView")}}</li> + <li>{{JSxRef("JSON")}}</li> +</ul> + +<h3 id="Control_abstraction_objects">Control abstraction objects</h3> + +<ul> + <li>{{JSxRef("Promise")}}</li> + <li>{{JSxRef("Generator")}}</li> + <li>{{JSxRef("GeneratorFunction")}}</li> + <li>{{JSxRef("AsyncFunction")}} {{Experimental_Inline}}</li> +</ul> + +<h3 id="Reflection">Reflection</h3> + +<ul> + <li>{{JSxRef("Reflect")}}</li> + <li>{{JSxRef("Proxy")}}</li> +</ul> + +<h3 id="Internationalization">Internationalization</h3> + +<p>Additions to the ECMAScript core for language-sensitive functionalities.</p> + +<ul> + <li>{{JSxRef("Intl")}}</li> + <li>{{JSxRef("Global_Objects/Collator", "Intl.Collator")}}</li> + <li>{{JSxRef("Global_Objects/DateTimeFormat", "Intl.DateTimeFormat")}}</li> + <li>{{JSxRef("Global_Objects/ListFormat", "Intl.ListFormat")}}</li> + <li>{{JSxRef("Global_Objects/NumberFormat", "Intl.NumberFormat")}}</li> + <li>{{JSxRef("Global_Objects/PluralRules", "Intl.PluralRules")}}</li> + <li>{{JSxRef("Global_Objects/RelativeTimeFormat", "Intl.RelativeTimeFormat")}}</li> + <li>{{JSxRef("Global_Objects/Locale", "Intl.Locale")}}</li> +</ul> + +<h3 id="WebAssembly">WebAssembly</h3> + +<ul> + <li>{{JSxRef("WebAssembly")}}</li> + <li>{{JSxRef("WebAssembly.Module")}}</li> + <li>{{JSxRef("WebAssembly.Instance")}}</li> + <li>{{JSxRef("WebAssembly.Memory")}}</li> + <li>{{JSxRef("WebAssembly.Table")}}</li> + <li>{{JSxRef("WebAssembly.CompileError")}}</li> + <li>{{JSxRef("WebAssembly.LinkError")}}</li> + <li>{{JSxRef("WebAssembly.RuntimeError")}}</li> +</ul> + +<h3 id="Other">Other</h3> + +<ul> + <li>{{JSxRef("Functions/arguments", "arguments")}}</li> +</ul> diff --git a/files/bg/web/javascript/reference/global_objects/promise/index.html b/files/bg/web/javascript/reference/global_objects/promise/index.html new file mode 100644 index 0000000000..3145756561 --- /dev/null +++ b/files/bg/web/javascript/reference/global_objects/promise/index.html @@ -0,0 +1,253 @@ +--- +title: Promise +slug: Web/JavaScript/Reference/Global_Objects/Promise +tags: + - JavaScript + - Promises + - Refere +translation_of: Web/JavaScript/Reference/Global_Objects/Promise +--- +<div>{{JSRef}}</div> + +<p><strong><code>Promise</code></strong> обектът представлява евентуалният завършек (или неуспех) на една асинхронна операция и нейната получена стойност.</p> + +<div class="note"> +<p><strong>Бележка:</strong> Тази статия описва <code>Promise</code> конструктора и методите и свойствата на такива обекти. За да научите начина по който работят <code>promises</code>и как може да ги използвате , съветваме ви първо да прочетете <a href="/docs/Web/JavaScript/Guide/Using_promises">Как да използваме promises. </a>Конструктора се използва предимно за обхващане на функции, които вече не поддържат <code>promises</code></p> +</div> + +<div>{{EmbedInteractiveExample("pages/js/promise-constructor.html")}}</div> + +<p class="hidden">The source for this interactive demo is stored in a GitHub repository. If you'd like to contribute to the interactive demo project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox">new Promise(<var>executor</var>);</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><code>екзекутор (executor)</code></dt> + <dd>Функция , която се предава с аргументи <code>resolve</code> и <code>reject</code>. Екзекутор (<code>executor</code>) функцията се изпълнява незабавно след изпълнението на <code>Promise</code>, предава <code>resolve</code> и <code>reject</code> функции (Екзекутора (<code>executor</code>) се извиква преди <code>Promise</code> конструктора , дори връща създадения обект). <code>resolve</code> и <code>reject</code> функциите, когато се извикват, разрешават или отхвърлят съответния <code>promise</code>. Екзекутора (<code>executor</code>) обикновено инициира някаква асинхронна работа и след като веднъж приключи, извиква <code>resolve</code> функцията, за да разреши <code>promise</code> или дори да го отхвъли ако възникне грешка. Ако възникне грешка в екзекутора (<code>executor</code>) , <code>promise</code> се отхвърля и върнатата стойност от екзекутора (<code>executor</code>) се отхвърля.</dd> +</dl> + +<h2 id="Описание">Описание</h2> + +<p><code><strong>Promise</strong></code> е прокси за стойността, която не е непременно известна , когато се създава <code>promise</code>. Позволява ви да свържете манипулаторите с асинхронно действие, евентуално връщайки успешна стойност или грешка. Това позволява асинхронните методи да връщат стойност като синхронни методи: вместо да ни върне незабавно финална стойност, асинхронния метод връща <em>promise</em>, който да ни предостави стойността в някакъв бъдещ момент.</p> + +<p><code>Promise</code> се намира в едно от тези състояния:</p> + +<ul> + <li><em>pending (изчакващо)</em>: първоначално състояние, нито изпълнено или отхвърлено.</li> + <li><em>fulfilled</em> (изпълнено): означава , че операцията е завършила успешно.</li> + <li><em>rejected (отказано)</em>: означава , че операцията не е завършила успешно.</li> +</ul> + +<p>Изчакващият promise може да бъде изпълнен със стойност или отказан с описание за грешка. Когато някоя от тези опции се случи, се извикват асоциираните манипулатори, поставени на опашка, след което се извикват <code>then</code> методите. (Ако promise вече е бил изпълнен или отказан, когато е приложен съответния манипулатор , манипулатора ще бъде извикан. Така че няма никакво състезателно условие между завършването на асинхронната операция и манипулаторите които са и били приложени.)</p> + +<p>Като <code>{{jsxref("Promise.then", "Promise.prototype.then()")}}</code> и <code>{{jsxref("Promise.catch", "Promise.prototype.catch()")}}</code> методи връщат promises, те могат да бъдат обхванати.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15911/promises.png" style="height: 297px; width: 801px;"></p> + +<div class="note"> +<p><strong>Забележка, не трябва да се бърка с:</strong> Няколко дргуи езика имат механизъм за мързеливо (lazy) оценяване и отлагане на изчисления, които те също наричат "promises" ... схема. Promises в JavaScript представляват процеси, които вече се случват и могат да бъдат обхванати с функции за обратно извикване (callback functions). Ако търсите мързеливо да изчислите израз, разгледайте <a href="/docs/Web/JavaScript/Reference/Functions/Arrow_functions">функциите със стрелка (arrow function)</a> без аргументи: <code>f = () => <em>израз(expression)</em></code> за създаване на мързеливо-изчислителен израз и <code>f()</code> за изчисление.</p> +</div> + +<div class="note"> +<p><strong>Забележка</strong>: Казва се че Promise се счита за <em>установен</em> ако е изпълнен или отказан, но не изчакващ. Също така ще чуете и термина <em>resolved</em>, който се изпозлва с promises — това означава че promise е установен или “заключен”, изчаквайки да съответства на състоянието на друг promise. <a href="https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md">States and fates</a> съдържа повече детайли относно promise терминологията.</p> +</div> + +<h2 id="Свойства">Свойства</h2> + +<dl> + <dt><code>Promise.length</code></dt> + <dd>Дължина на свойство, чиято дължина е винаги 1 (номер на аругмента на конструктора).</dd> + <dt>{{jsxref("Promise.prototype")}}</dt> + <dd>Представялва прототипа на <code>Promise</code> конструктора.</dd> +</dl> + +<h2 id="Методи">Методи</h2> + +<dl> + <dt>{{jsxref("Promise.all", "Promise.all(iterable)")}}</dt> + <dd>Изчаква всички promises да бъдат разрешени или отказани.</dd> + <dd>Ако върнатия promise е решен(resolves), той се решава с агрегиращ масив от стойности от разрешените promises в същата последователност, както е дефиниран в многобройните promises. Ако е отхвърлен, той се отхвърля с причина от първият promise който е бил отказан.</dd> + <dt>{{jsxref("Promise.allSettled", "Promise.allSettled()")}}</dt> + <dd>Изчаква докато всички promises са приключени/уредени (всеки може да бъде разрешен или отказан).</dd> + <dd>Връща promise което се решава след всички дадени promises били те разрешени или отказани, с масив от обекти , които описват резултата от всеки promise.</dd> + <dt>{{jsxref("Promise.race", "Promise.race(iterable)")}}</dt> + <dd>Изчаква докато някой от promises е разрешен или отказан.</dd> + <dd>Ако върнатият promise е разрешен,е разрешен със стойноста от първият promise.Ако е отказан, е отакзан с причината от първият promise който е бил отказан.</dd> + <dt>{{jsxref("Promise.reject", "Promise.reject()")}}</dt> + <dd>Връща нов <code>Promise</code> обект, който е отказан с предоставена причина.</dd> + <dt>{{jsxref("Promise.resolve", "Promise.resolve()")}}</dt> + <dd>Връща нов <code>Promise</code> който е разрешен с дадената му стойност. Ако стойността е thenable (i.e. има <code>then</code> метод), върнатият promise ще "следва" този thenable, приемайки евентуалното му състояние; в противен случай върнатия promise ще бъде запълнен със стойността. Обикновенно ако не знаете дадена стойност дали е promise или не, {{jsxref("Promise.resolve", "Promise.resolve(value)")}} замества и работи с върнатата стойност като promise.</dd> +</dl> + +<h2 id="Promise_прототип">Promise прототип</h2> + +<h3 id="Свойства_2">Свойства</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Properties')}}</p> + +<h3 id="Методи_2">Методи</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Methods')}}</p> + +<h2 id="Създаване_на_Promise">Създаване на Promise</h2> + +<p><code>Promise</code> се създава, използвайки ключовата дума <code>new</code> и нейният конструктор. Този конструктор приема като аргумент функция, наричаща се "executor function". Тази функция трябва да приеме две функции като параметри. Първата от тези функции (<code>resolve</code>) се извиква когато асинхронната задача завърши успешно и върне резултата от задачата като стойност. Вторият (<code>reject</code>) се извиква когато задачата се провали и връща причината за този провал, който обикновенно е обект съдържайки в себе си грешката.</p> + +<pre class="brush: js">const myFirstPromise = new Promise((resolve, reject) => { + // do something asynchronous which eventually calls either: + // + // resolve(someValue); // fulfilled + // or + // reject("failure reason"); // rejected +}); +</pre> + +<p>За да предоставите функция с promise функционалност, просто върнете promise:</p> + +<pre class="brush: js">function myAsyncFunction(url) { + return new Promise((resolve, reject) => { + const xhr = new XMLHttpRequest(); + xhr.open("GET", url); + xhr.onload = () => resolve(xhr.responseText); + xhr.onerror = () => reject(xhr.statusText); + xhr.send(); + }); +}</pre> + +<h2 id="Примери">Примери</h2> + +<h3 id="Основни_примери">Основни примери</h3> + +<pre class="brush: js">let myFirstPromise = new Promise((resolve, reject) => { + // We call resolve(...) when what we were doing asynchronously was successful, and reject(...) when it failed. + // In this example, we use setTimeout(...) to simulate async code. + // In reality, you will probably be using something like XHR or an HTML5 API. + setTimeout(function(){ + resolve("Success!"); // Yay! Everything went well! + }, 250); +}); + +myFirstPromise.then((successMessage) => { + // successMessage is whatever we passed in the resolve(...) function above. + // It doesn't have to be a string, but if it is only a succeed message, it probably will be. + console.log("Yay! " + successMessage); +}); +</pre> + +<h3 id="Разширени_примери">Разширени примери</h3> + +<pre class="brush: html hidden"><button id="btn">Make a promise!</button> +<div id="log"></div> +</pre> + +<p>Този малък пример показва механизма на <code>Promise</code>. <code>testPromise()</code> метод се извиква всеки път когато {{HTMLElement("button")}} е натиснат. Създава promise който ще бъде изпълнен, използвайки {{domxref("window.setTimeout()")}}, към promise броенето(номер започващ от 1) на всеки 1-3 секунди на случаен принцип. The <code>Promise()</code> се използва за създаването на promise.</p> + +<p>Изпълнението на promise е просто записано, чрез сет за обратно извикване (callback set) , използвайки {{jsxref("Promise.prototype.then()","p1.then()")}}. <span lang="bg">Няколко logs (данни) показват как синхронната част на метода е отделена от асинхронното завършване на обещанието.</span></p> + +<pre class="brush: js">'use strict'; +var promiseCount = 0; + +function testPromise() { + let thisPromiseCount = ++promiseCount; + + let log = document.getElementById('log'); + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Started (<small>Sync code started</small>)<br/>'); + + // We make a new promise: we promise a numeric count of this promise, starting from 1 (after waiting 3s) + let p1 = new Promise( + // The executor function is called with the ability to resolve or + // reject the promise + (resolve, reject) => { + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Promise started (<small>Async code started</small>)<br/>'); + // This is only an example to create asynchronism + window.setTimeout( + function() { + // We fulfill the promise ! + resolve(thisPromiseCount); + }, Math.random() * 2000 + 1000); + } + ); + + // We define what to do when the promise is resolved with the then() call, + // and what to do when the promise is rejected with the catch() call + p1.then( + // Log the fulfillment value + function(val) { + log.insertAdjacentHTML('beforeend', val + + ') Promise fulfilled (<small>Async code terminated</small>)<br/>'); + }).catch( + // Log the rejection reason + (reason) => { + console.log('Handle rejected promise ('+reason+') here.'); + }); + + log.insertAdjacentHTML('beforeend', thisPromiseCount + + ') Promise made (<small>Sync code terminated</small>)<br/>'); +}</pre> + +<pre class="brush:js hidden">if ("Promise" in window) { + let btn = document.getElementById("btn"); + btn.addEventListener("click",testPromise); +} else { + log = document.getElementById('log'); + log.innerHTML = "Live example not available as your browser doesn't support the <code>Promise<code> interface."; +} +</pre> + +<p>Този пример ще се стартира като кликнете на бутона. Имате нужда от браузер който поддържа <code>Promise</code>. Натискайки на бутона няколко пъти в кратки периоди от време , ще видите дори разллични promises , които се изпълняват един след друг.</p> + +<p>{{EmbedLiveSample("Advanced_Example", "500", "200")}}</p> + +<h2 id="Зареждане_на_снимка_с_XHR">Зареждане на снимка с XHR</h2> + +<p>Друг опростен пример използва <code>Promise</code> и {{domxref("XMLHttpRequest")}} за зареждане на снимки е наличен в GitHub профила на MDN и се казва <a href="https://github.com/mdn/js-examples/tree/master/promises-test">js-examples</a>. Тук също може да го видите и в действие <a href="https://mdn.github.io/js-examples/promises-test/">see it in action</a>. Всяка стъпка е коментирана и ви позволява да следвате Promise и XHR архитектурата внимателно.</p> + +<h2 id="Спецификации">Спецификации</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-promise-objects', 'Promise')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition in an ECMA standard.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-promise-objects', 'Promise')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Съвместимост_с_браузърите">Съвместимост с браузърите</h2> + +<p class="hidden">To contribute to this compatibility data, please write a pull request against this repository: <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>.</p> + +<p>{{Compat("javascript.builtins.Promise")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Using promises</a></li> + <li><a href="http://promisesaplus.com/">Promises/A+ specification</a></li> + <li><a href="https://medium.com/@ramsunvtech/promises-of-promise-part-1-53f769245a53">Venkatraman.R - JS Promise (Part 1, Basics)</a></li> + <li><a href="https://medium.com/@ramsunvtech/js-promise-part-2-q-js-when-js-and-rsvp-js-af596232525c#.dzlqh6ski">Venkatraman.R - JS Promise (Part 2 - Using Q.js, When.js and RSVP.js)</a></li> + <li><a href="https://tech.io/playgrounds/11107/tools-for-promises-unittesting/introduction">Venkatraman.R - Tools for Promises Unit Testing</a></li> + <li><a href="http://www.html5rocks.com/en/tutorials/es6/promises/">Jake Archibald: JavaScript Promises: There and Back Again</a></li> + <li><a href="http://de.slideshare.net/domenicdenicola/callbacks-promises-and-coroutines-oh-my-the-evolution-of-asynchronicity-in-javascript">Domenic Denicola: Callbacks, Promises, and Coroutines – Asynchronous Programming Patterns in JavaScript</a></li> + <li><a href="http://www.mattgreer.org/articles/promises-in-wicked-detail/">Matt Greer: JavaScript Promises ... In Wicked Detail</a></li> + <li><a href="https://www.promisejs.org/">Forbes Lindesay: promisejs.org</a></li> + <li><a href="https://github.com/jakearchibald/es6-promise/">Promise polyfill</a></li> + <li><a href="https://www.udacity.com/course/javascript-promises--ud898">Udacity: JavaScript Promises</a></li> +</ul> diff --git a/files/bg/web/javascript/reference/index.html b/files/bg/web/javascript/reference/index.html new file mode 100644 index 0000000000..fedbcb5e2d --- /dev/null +++ b/files/bg/web/javascript/reference/index.html @@ -0,0 +1,51 @@ +--- +title: Справочник за JavaScript +slug: Web/JavaScript/Reference +tags: + - JavaScript + - NeedsTranslation + - TopicStub + - 'l10n:priority' +translation_of: Web/JavaScript/Reference +--- +<div>{{JsSidebar}}</div> + +<p>Тази част от раздела JavaScript в MDN служи като хранилище за сведения за езика за програмиране JavaScript. Прочетете <a href="/bg/docs/Web/JavaScript/Reference/About">повече за този справочник</a>.</p> + +<h2 id="Глобални_обекти">Глобални обекти</h2> + +<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects">JavaScript standard built-in objects</a>, along with their methods and properties.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects', 'Standard_objects_by_category')}}</div> + +<h2 id="Statements">Statements</h2> + +<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Statements">JavaScript statements and declarations</a>.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Statements', 'Statements_and_declarations_by_category')}}</div> + +<h2 id="Изрази_и_оператори">Изрази и оператори</h2> + +<p>This chapter documents all the <a href="/en-US/docs/Web/JavaScript/Reference/Operators">JavaScript expressions and operators</a>.</p> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Operators', 'Expressions_and_operators_by_category')}}</div> + +<h2 id="Functions">Functions</h2> + +<p>This chapter documents how to work with <a href="/en-US/docs/Web/JavaScript/Reference/Functions">JavaScript functions</a> to develop your applications.</p> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments"><code>arguments</code></a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">Default parameters</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest parameters</a></li> +</ul> + +<h2 id="Additional_reference_pages">Additional reference pages</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Data_structures">Data types and data structures</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">Strict mode</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">Deprecated features</a></li> +</ul> diff --git a/files/bg/web/javascript/reference/operators/arithmetic_operators/index.html b/files/bg/web/javascript/reference/operators/arithmetic_operators/index.html new file mode 100644 index 0000000000..83f26e031d --- /dev/null +++ b/files/bg/web/javascript/reference/operators/arithmetic_operators/index.html @@ -0,0 +1,293 @@ +--- +title: Arithmetic operators +slug: Web/JavaScript/Reference/Operators/Arithmetic_Operators +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p><strong>Аритметичните оператори </strong>приемат числови стойности като техен операнд и връща единична числова стойност. Стандартните аритметични оператори са събиране (<strong>+</strong>), изваждане (<strong>-</strong>), умножение (<strong>*</strong>), делене(<strong>/</strong>)</p> + +<div>{{EmbedInteractiveExample("pages/js/expressions-arithmetic.html")}}</div> + +<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> + +<h2 id="Addition" name="Addition">Събиране (+)</h2> + +<p>Операторът за събиране произвежда сумата от числови операнди или конкатенация на стрингове.</p> + +<h3 id="Синтаксис">Синтаксис</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> <var>x</var> + <var>y</var> +</pre> + +<h3 id="Примери">Примери</h3> + +<pre class="brush: js">// Number + Number -> събиране +1 + 2 // 3 + +// Boolean + Number -> събиране +true + 1 // 2 + +// Boolean + Boolean -> събиране +false + false // 0 + +// Number + String -> конкатенация +5 + 'foo' // "5foo" + +// String + Boolean -> конкатенация +'foo' + false // "foofalse" + +// String + String -> конкатенация +'foo' + 'bar' // "foobar" +</pre> + +<h2 id="Subtraction" name="Subtraction">Subtraction (-)</h2> + +<p>The subtraction operator subtracts the two operands, producing their difference.</p> + +<h3 id="Syntax">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> <var>x</var> - <var>y</var> +</pre> + +<h3 id="Examples">Examples</h3> + +<pre class="brush: js">5 - 3 // 2 +3 - 5 // -2 +'foo' - 3 // NaN</pre> + +<h2 id="Division" name="Division">Division (/)</h2> + +<p>The division operator produces the quotient of its operands where the left operand is the dividend and the right operand is the divisor.</p> + +<h3 id="Syntax_2">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> <var>x</var> / <var>y</var> +</pre> + +<h3 id="Examples_2">Examples</h3> + +<pre class="brush: js">1 / 2 // returns 0.5 in JavaScript (In Java, returns 0; both are integers) +// (neither 1 nor 2 is explicitly a floating point number) + +Math.floor(3 / 2) // returns 1 +1.0 / 2.0 // returns 0.5 in both JavaScript and Java + +2.0 / 0 // returns Infinity +2.0 / 0.0 // ditto, because 0.0 === 0 +2.0 / -0.0 // returns -Infinity</pre> + +<h2 id="Multiplication" name="Multiplication">Multiplication (*)</h2> + +<p>The multiplication operator produces the product of the operands.</p> + +<h3 id="Syntax_3">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> <var>x</var> * <var>y</var> +</pre> + +<h3 id="Examples_3">Examples</h3> + +<pre class="brush: js"> 2 * 2 // 4 +-2 * 2 // -4 +Infinity * 0 // NaN +Infinity * Infinity // Infinity +'foo' * 2 // NaN +</pre> + +<h2 id="Remainder" name="Remainder">Remainder (%)</h2> + +<p>The remainder operator returns the remainder left over when one operand is divided by a second operand. It always takes the sign of the dividend.</p> + +<h3 id="Syntax_4">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> <var>var1</var> % <var>var2</var> +</pre> + +<h3 id="Examples_4">Examples</h3> + +<pre class="brush: js"> 12 % 5 // 2 +-12 % 5 // -2 +-1 % 2 // -1 + 1 % -2 // 1 +NaN % 2 // NaN + 1 % 2 // 1 + 2 % 3 // 2 +-4 % 2 // -0 +5.5 % 2 // 1.5 +</pre> + +<h2 id="Exponentiation" name="Exponentiation">Exponentiation (**)</h2> + +<p>The exponentiation operator returns the result of raising the first operand to the power of the second operand. That is, <code><var>var1</var></code><sup><code><var>var2</var></code></sup>, in the preceding statement, where <code><var>var1</var></code> and <code><var>var2</var></code> are variables. The exponentiation operator is right-associative. <code><var>a</var> ** <var>b</var> ** <var>c</var></code> is equal to <code><var>a</var> ** (<var>b</var> ** <var>c</var>)</code>.</p> + +<h3 id="Syntax_5">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> <var>var1</var> ** <var>var2</var> +</pre> + +<h3 id="Notes">Notes</h3> + +<p>In most languages, such as PHP, Python, and others that have an exponentiation operator (<code>**</code>), the exponentiation operator is defined to have a higher precedence than unary operators, such as unary <code>+</code> and unary <code>-</code>, but there are a few exceptions. For example, in Bash, the <code>**</code> operator is defined to have a lower precedence than unary operators.</p> + +<p>In JavaScript, it is impossible to write an ambiguous exponentiation expression; that is, you cannot put a unary operator (<code>+/-/~/!/delete/void/typeof</code>) immediately before the base number.</p> + +<pre class="brush: js">-2 ** 2; +// 4 in Bash, -4 in other languages. +// This is invalid in JavaScript, as the operation is ambiguous. + + +-(2 ** 2); +// -4 in JavaScript and the author's intention is unambiguous. +</pre> + +<h3 id="Examples_5">Examples</h3> + +<pre class="brush: js">2 ** 3 // 8 +3 ** 2 // 9 +3 ** 2.5 // 15.588457268119896 +10 ** -1 // 0.1 +NaN ** 2 // NaN + +2 ** 3 ** 2 // 512 +2 ** (3 ** 2) // 512 +(2 ** 3) ** 2 // 64 +</pre> + +<p>To invert the sign of the result of an exponentiation expression:</p> + +<pre class="brush: js">-(2 ** 2) // -4 +</pre> + +<p>To force the base of an exponentiation expression to be a negative number:</p> + +<pre class="brush: js">(-2) ** 2 // 4 +</pre> + +<div class="note"> +<p><strong>Note:</strong> JavaScript also has <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">a bitwise operator ^ (logical XOR)</a>. <code>**</code> and <code>^</code> are different (for example : <code>2 ** 3 === 8</code> when <code>2 ^ 3 === 1</code>.)</p> +</div> + +<h2 id="Increment" name="Increment">Increment (++)</h2> + +<p>The increment operator increments (adds one to) its operand and returns a value.</p> + +<ul> + <li>If used postfix, with operator after operand (for example, <code><var>x</var>++</code>), then it increments and returns the value before incrementing.</li> + <li>If used prefix, with operator before operand (for example, <code>++<var>x</var></code>), then it increments and returns the value after incrementing.</li> +</ul> + +<h3 id="Syntax_6">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> <var>x</var>++ or ++<var>x</var> +</pre> + +<h3 id="Examples_6">Examples</h3> + +<pre class="brush: js">// Postfix +var x = 3; +y = x++; // y = 3, x = 4 + +// Prefix +var a = 2; +b = ++a; // a = 3, b = 3 +</pre> + +<h2 id="Decrement" name="Decrement">Decrement (--)</h2> + +<p>The decrement operator decrements (subtracts one from) its operand and returns a value.</p> + +<ul> + <li>If used postfix, with operator after operand (for example, <code><var>x</var>--</code>), then it decrements and returns the value before decrementing.</li> + <li>If used prefix, with operator before operand (for example, <code>--<var>x</var></code>), then it decrements and returns the value after decrementing.</li> +</ul> + +<h3 id="Syntax_7">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> <var>x</var>-- or --<var>x</var> +</pre> + +<h3 id="Examples_7">Examples</h3> + +<pre class="brush: js">// Postfix +var x = 3; +y = x--; // y = 3, x = 2 + +// Prefix +var a = 2; +b = --a; // a = 1, b = 1 +</pre> + +<h2 id="Unary_negation" name="Unary_negation">Unary negation (-)</h2> + +<p>The unary negation operator precedes its operand and negates it.</p> + +<h3 id="Syntax_8">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> -<var>x</var> +</pre> + +<h3 id="Examples_8">Examples</h3> + +<pre class="brush: js">var x = 3; +y = -x; // y = -3, x = 3 + +// Unary negation operator can convert non-numbers into a number +var x = "4"; +y = -x; // y = -4 +</pre> + +<h2 id="Unary_plus" name="Unary_plus">Unary plus (+)</h2> + +<p>The unary plus operator precedes its operand and evaluates to its operand but attempts to convert it into a number, if it isn't already. Although unary negation (<code>-</code>) also can convert non-numbers, unary plus is the fastest and preferred way of converting something into a number, because it does not perform any other operations on the number. It can convert string representations of integers and floats, as well as the non-string values <code>true</code>, <code>false</code>, and <code>null</code>. Integers in both decimal and hexadecimal (<code>0x</code>-prefixed) formats are supported. Negative numbers are supported (though not for hex). If it cannot parse a particular value, it will evaluate to {{jsxref("NaN")}}.</p> + +<h3 id="Syntax_9">Syntax</h3> + +<pre class="syntaxbox"><strong>Operator:</strong> +<var>x</var> +</pre> + +<h3 id="Examples_9">Examples</h3> + +<pre class="brush: js">+3 // 3 ++'3' // 3 ++true // 1 ++false // 0 ++null // 0 ++function(val){ return val } // NaN +</pre> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('ESDraft', '#sec-additive-operators', 'Additive operators')}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-postfix-expressions', 'Postfix expressions')}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-11.5', 'Multiplicative operators')}}</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-11.4', 'Unary operator')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.operators.arithmetic")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Assignment operators</a></li> +</ul> diff --git a/files/bg/web/javascript/reference/operators/index.html b/files/bg/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..64ff89da64 --- /dev/null +++ b/files/bg/web/javascript/reference/operators/index.html @@ -0,0 +1,310 @@ +--- +title: Expressions and operators +slug: Web/JavaScript/Reference/Operators +tags: + - JavaScript + - NeedsTranslation + - Operators + - Overview + - Reference + - TopicStub +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p class="summary">This chapter documents all the JavaScript language operators, expressions and keywords.</p> + +<h2 id="Expressions_and_operators_by_category">Expressions and operators by category</h2> + +<p>For an alphabetical listing see the sidebar on the left.</p> + +<h3 id="Primary_expressions">Primary expressions</h3> + +<p>Basic keywords and general expressions in JavaScript.</p> + +<dl> + <dt>{{jsxref("Operators/this", "this")}}</dt> + <dd>The <code>this</code> keyword refers to a special property of an execution context.</dd> + <dt>{{jsxref("Operators/function", "function")}}</dt> + <dd>The <code>function</code> keyword defines a function expression.</dd> + <dt>{{jsxref("Operators/class", "class")}}</dt> + <dd>The <code>class</code> keyword defines a class expression.</dd> + <dt>{{jsxref("Operators/function*", "function*")}}</dt> + <dd>The <code>function*</code> keyword defines a generator function expression.</dd> + <dt>{{jsxref("Operators/yield", "yield")}}</dt> + <dd>Pause and resume a generator function.</dd> + <dt>{{jsxref("Operators/yield*", "yield*")}}</dt> + <dd>Delegate to another generator function or iterable object.</dd> + <dt>{{jsxref("Operators/async_function", "async function")}}</dt> + <dd>The <code>async function</code> defines an async function expression.</dd> + <dt>{{jsxref("Operators/await", "await")}}</dt> + <dd>Pause and resume an async function and wait for the promise's resolution/rejection.</dd> + <dt>{{jsxref("Global_Objects/Array", "[]")}}</dt> + <dd>Array initializer/literal syntax.</dd> + <dt>{{jsxref("Operators/Object_initializer", "{}")}}</dt> + <dd>Object initializer/literal syntax.</dd> + <dt>{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}</dt> + <dd>Regular expression literal syntax.</dd> + <dt>{{jsxref("Operators/Grouping", "( )")}}</dt> + <dd>Grouping operator.</dd> +</dl> + +<h3 id="Left-hand-side_expressions">Left-hand-side expressions</h3> + +<p>Left values are the destination of an assignment.</p> + +<dl> + <dt>{{jsxref("Operators/Property_accessors", "Property accessors", "", 1)}}</dt> + <dd>Member operators provide access to a property or method of an object<br> + (<code>object.property</code> and <code>object["property"]</code>).</dd> + <dt>{{jsxref("Operators/new", "new")}}</dt> + <dd>The <code>new</code> operator creates an instance of a constructor.</dd> + <dt><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></dt> + <dd>In constructors, <code>new.target</code> refers to the constructor that was invoked by {{jsxref("Operators/new", "new")}}.</dd> + <dt>{{jsxref("Operators/super", "super")}}</dt> + <dd>The <code>super</code> keyword calls the parent constructor.</dd> + <dt>{{jsxref("Operators/Spread_syntax", "...obj")}}</dt> + <dd>Spread syntax allows an expression to be expanded in places where multiple arguments (for function calls) or multiple elements (for array literals) are expected.</dd> +</dl> + +<h3 id="Increment_and_decrement">Increment and decrement</h3> + +<p>Postfix/prefix increment and postfix/prefix decrement operators.</p> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "A++", "#Increment")}}</dt> + <dd>Postfix increment operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "A--", "#Decrement")}}</dt> + <dd>Postfix decrement operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "++A", "#Increment")}}</dt> + <dd>Prefix increment operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "--A", "#Decrement")}}</dt> + <dd>Prefix decrement operator.</dd> +</dl> + +<h3 id="Unary_operators">Unary operators</h3> + +<p>A unary operation is operation with only one operand.</p> + +<dl> + <dt>{{jsxref("Operators/delete", "delete")}}</dt> + <dd>The <code>delete</code> operator deletes a property from an object.</dd> + <dt>{{jsxref("Operators/void", "void")}}</dt> + <dd>The <code>void</code> operator discards an expression's return value.</dd> + <dt>{{jsxref("Operators/typeof", "typeof")}}</dt> + <dd>The <code>typeof</code> operator determines the type of a given object.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Unary_plus")}}</dt> + <dd>The unary plus operator converts its operand to Number type.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Unary_negation")}}</dt> + <dd>The unary negation operator converts its operand to Number type and then negates it.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "~", "#Bitwise_NOT")}}</dt> + <dd>Bitwise NOT operator.</dd> + <dt>{{jsxref("Operators/Logical_Operators", "!", "#Logical_NOT")}}</dt> + <dd>Logical NOT operator.</dd> +</dl> + +<h3 id="Arithmetic_operators">Arithmetic operators</h3> + +<p>Arithmetic operators take numerical values (either literals or variables) as their operands and return a single numerical value.</p> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "+", "#Addition")}}</dt> + <dd>Addition operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "-", "#Subtraction")}}</dt> + <dd>Subtraction operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "/", "#Division")}}</dt> + <dd>Division operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "*", "#Multiplication")}}</dt> + <dd>Multiplication operator.</dd> + <dt>{{jsxref("Operators/Arithmetic_Operators", "%", "#Remainder")}}</dt> + <dd>Remainder operator.</dd> +</dl> + +<dl> + <dt>{{jsxref("Operators/Arithmetic_Operators", "**", "#Exponentiation")}}</dt> + <dd>Exponentiation operator.</dd> +</dl> + +<h3 id="Relational_operators">Relational operators</h3> + +<p>A comparison operator compares its operands and returns a <code>Boolean</code> value based on whether the comparison is true.</p> + +<dl> + <dt>{{jsxref("Operators/in", "in")}}</dt> + <dd>The <code>in</code> operator determines whether an object has a given property.</dd> + <dt>{{jsxref("Operators/instanceof", "instanceof")}}</dt> + <dd>The <code>instanceof</code> operator determines whether an object is an instance of another object.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "<", "#Less_than_operator")}}</dt> + <dd>Less than operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", ">", "#Greater_than_operator")}}</dt> + <dd>Greater than operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "<=", "#Less_than_or_equal_operator")}}</dt> + <dd>Less than or equal operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", ">=", "#Greater_than_or_equal_operator")}}</dt> + <dd>Greater than or equal operator.</dd> +</dl> + +<div class="note"> +<p><strong>Note: =></strong> is not an operator, but the notation for <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a>.</p> +</div> + +<h3 id="Equality_operators">Equality operators</h3> + +<p>The result of evaluating an equality operator is always of type <code>Boolean</code> based on whether the comparison is true.</p> + +<dl> + <dt>{{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}</dt> + <dd>Equality operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "!=", "#Inequality")}}</dt> + <dd>Inequality operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}</dt> + <dd>Identity operator.</dd> + <dt>{{jsxref("Operators/Comparison_Operators", "!==", "#Nonidentity")}}</dt> + <dd>Nonidentity operator.</dd> +</dl> + +<h3 id="Bitwise_shift_operators">Bitwise shift operators</h3> + +<p>Operations to shift all bits of the operand.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_Operators", "<<", "#Left_shift")}}</dt> + <dd>Bitwise left shift operator.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", ">>", "#Right_shift")}}</dt> + <dd>Bitwise right shift operator.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", ">>>", "#Unsigned_right_shift")}}</dt> + <dd>Bitwise unsigned right shift operator.</dd> +</dl> + +<h3 id="Binary_bitwise_operators">Binary bitwise operators</h3> + +<p>Bitwise operators treat their operands as a set of 32 bits (zeros and ones) and return standard JavaScript numerical values.</p> + +<dl> + <dt>{{jsxref("Operators/Bitwise_Operators", "&", "#Bitwise_AND")}}</dt> + <dd>Bitwise AND.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "|", "#Bitwise_OR")}}</dt> + <dd>Bitwise OR.</dd> + <dt>{{jsxref("Operators/Bitwise_Operators", "^", "#Bitwise_XOR")}}</dt> + <dd>Bitwise XOR.</dd> +</dl> + +<h3 id="Binary_logical_operators">Binary logical operators</h3> + +<p>Logical operators are typically used with boolean (logical) values, and when they are, they return a boolean value.</p> + +<dl> + <dt>{{jsxref("Operators/Logical_Operators", "&&", "#Logical_AND")}}</dt> + <dd>Logical AND.</dd> + <dt>{{jsxref("Operators/Logical_Operators", "||", "#Logical_OR")}}</dt> + <dd>Logical OR.</dd> +</dl> + +<h3 id="Conditional_ternary_operator">Conditional (ternary) operator</h3> + +<dl> + <dt>{{jsxref("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}</dt> + <dd> + <p>The conditional operator returns one of two values based on the logical value of the condition.</p> + </dd> +</dl> + +<h3 id="Assignment_operators">Assignment operators</h3> + +<p>An assignment operator assigns a value to its left operand based on the value of its right operand.</p> + +<dl> + <dt>{{jsxref("Operators/Assignment_Operators", "=", "#Assignment")}}</dt> + <dd>Assignment operator.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "*=", "#Multiplication_assignment")}}</dt> + <dd>Multiplication assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "/=", "#Division_assignment")}}</dt> + <dd>Division assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "%=", "#Remainder_assignment")}}</dt> + <dd>Remainder assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "+=", "#Addition_assignment")}}</dt> + <dd>Addition assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "-=", "#Subtraction_assignment")}}</dt> + <dd>Subtraction assignment</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "<<=", "#Left_shift_assignment")}}</dt> + <dd>Left shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", ">>=", "#Right_shift_assignment")}}</dt> + <dd>Right shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", ">>>=", "#Unsigned_right_shift_assignment")}}</dt> + <dd>Unsigned right shift assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "&=", "#Bitwise_AND_assignment")}}</dt> + <dd>Bitwise AND assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "^=", "#Bitwise_XOR_assignment")}}</dt> + <dd>Bitwise XOR assignment.</dd> + <dt>{{jsxref("Operators/Assignment_Operators", "|=", "#Bitwise_OR_assignment")}}</dt> + <dd>Bitwise OR assignment.</dd> + <dt>{{jsxref("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br> + {{jsxref("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</dt> + <dd> + <p>Destructuring assignment allows you to assign the properties of an array or object to variables using syntax that looks similar to array or object literals.</p> + </dd> +</dl> + +<h3 id="Comma_operator">Comma operator</h3> + +<dl> + <dt>{{jsxref("Operators/Comma_Operator", ",")}}</dt> + <dd>The comma operator allows multiple expressions to be evaluated in a single statement and returns the result of the last expression.</dd> +</dl> + +<h3 id="Non-standard_features" name="Non-standard_features">Non-standard features {{non-standard_inline}}</h3> + +<dl> + <dt>{{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}} {{non-standard_inline}}{{obsolete_inline(60)}}</dt> + <dd>The expression closure syntax is a shorthand for writing simple function.</dd> + <dt>{{jsxref("Operators/Legacy_generator_function", "Legacy generator function", "", 1)}} {{non-standard_inline}}{{obsolete_inline(58)}}</dt> + <dd>The <code>function</code> keyword can be used to define a legacy generator function inside an expression. To make the function a legacy generator, the function body should contains at least one {{jsxref("Operators/yield", "yield")}} expression.</dd> + <dt>{{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}} {{non-standard_inline}}{{obsolete_inline(58)}}</dt> + <dd>Array comprehensions.</dd> + <dt>{{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}} {{non-standard_inline}}{{obsolete_inline(58)}}</dt> + <dd>Generator comprehensions.</dd> +</dl> + +<h2 id="Specifications">Specifications</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11', 'Expressions')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11', 'Expressions')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: Spread syntax, rest syntax, destructuring assignment, <code>super</code> keyword.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.operators")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence">Operator precedence</a></li> +</ul> diff --git a/files/bg/web/javascript/reference/operators/разпределящ_синтаксис/index.html b/files/bg/web/javascript/reference/operators/разпределящ_синтаксис/index.html new file mode 100644 index 0000000000..e8a9b0dfe1 --- /dev/null +++ b/files/bg/web/javascript/reference/operators/разпределящ_синтаксис/index.html @@ -0,0 +1,248 @@ +--- +title: Разпределящ синтаксис +slug: Web/JavaScript/Reference/Operators/разпределящ_синтаксис +translation_of: Web/JavaScript/Reference/Operators/Spread_syntax +--- +<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> |