diff options
Diffstat (limited to 'files/he/web/javascript/reference')
23 files changed, 5336 insertions, 0 deletions
diff --git a/files/he/web/javascript/reference/errors/index.html b/files/he/web/javascript/reference/errors/index.html new file mode 100644 index 0000000000..c295fccea6 --- /dev/null +++ b/files/he/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/he/web/javascript/reference/functions/default_parameters/index.html b/files/he/web/javascript/reference/functions/default_parameters/index.html new file mode 100644 index 0000000000..2d4215bcad --- /dev/null +++ b/files/he/web/javascript/reference/functions/default_parameters/index.html @@ -0,0 +1,216 @@ +--- +title: Default parameters +slug: Web/JavaScript/Reference/Functions/Default_parameters +translation_of: Web/JavaScript/Reference/Functions/Default_parameters +--- +<div>{{jsSidebar("Functions")}}</div> + +<div dir="rtl"><strong>הצבת פרמטר ברירת מחדל לפונקציה </strong>מאפשר רישום של ערך ראשוני בזמן הגדרת הפונקציה, כך שאם לא מועבר ערך בקריאה (הפעלה) של הפונקציה, או שמעבירים <code>undefined</code> כערך, הערך הראשוני שהוגדר כברירת מחדל ישמש בתור הפרמטר של הפונקציה.</div> + +<p> </p> + +<h2 dir="rtl" id="שימוש_בשפה"><strong>שימוש בשפה</strong></h2> + +<pre class="syntaxbox">function [<em>name</em>]([<em>param1</em>[ = defaultValue1 ][, ..., <em>paramN</em>[ = defaultValueN ]]]) { + <em>statements</em> +} +</pre> + +<h2 dir="rtl" id="תיאור_שימושיות"><strong>תיאור שימושיות</strong></h2> + +<p dir="rtl">הערך ראשוני של פרמטר בפונקציה ב JavaScript שווה ל <code>undefined</code>. אומנם ישנם מקרים בהם זה יכול להיות נוח להציב ערך שונה כערך ראשוני לפרמטר של הפונקציה, כך שהערך יוגדר מראש ביצירת הפונקציה. ופה אנחנו נעזרים בהצבת פרמטר ברירת מחדל לפונקציה.</p> + +<p dir="rtl">האסטרטגיה הכללית שהשתמשו בה לפני פרמטר ברירת המחדל, היתה בדיקה שנכללה בתוך גוף הפונקציה ובדקה אם הפרמטר מכיל ערך או שהוא אינו מוגדר, ולא נעשה בו שימוש בקריאה לפונקציה. בדוגמא שלפנינו אם לא נעביר ערך ל <code>b</code> בקריאה לפונקציה (בהפעלה שלה, בכל הפעלה לש פונקציה אנחנו קוראים לה מהזיכרון), היא תקבל ערך לא מוגדר (<code>undefined</code>) וכאשר תיקראו לפונקציה <code>multiply</code> כדי לחשב את <code>a*b</code> התוצאה תהיה <code>NaN</code>. לשם כך השורה השניה בפונקציה בודקת אם קיים בפרמטר <code>b</code> ערך השונה מ <code>undefined</code> ואם לא נעשה שימוש בפרמטר <code>b</code> בקריאה לפונקציה אז מציבים בו ערך ראשוני של 1:</p> + +<pre class="brush: js">function multiply(a, b) { + b = (typeof b !== 'undefined') ? b : 1; + return a * b; +} + +multiply(5, 2); // 10 +multiply(5, 1); // 5 +multiply(5); // 5 +</pre> + +<p dir="rtl">בעזרת הצבה של פרמטר ברירת מחדל לפונקציה הניתן לשימוש מגרסה ES2015 הבדיקה בגוף הפונקציה כבר לא נחוצה. עכשיו אפשר פשוט להציב ערך ראשוני כערך ברירת מחדל בהגדרה של הפונקציה והפרמטרים שלה:</p> + +<pre class="brush: js">function multiply(a, b = 1) { + return a * b; +} + +multiply(5, 2); // 10 +multiply(5, 1); // 5 +multiply(5); // 5 +</pre> + +<h2 dir="rtl" id="דוגמאות"><strong>דוגמאות</strong></h2> + +<h3 dir="rtl" id="קריאה_לפונקציה_עם_ערך_של_undefined_מול_ערכים_שליליים_שונים.">קריאה לפונקציה עם ערך של <code>undefined</code> מול ערכים שליליים שונים.</h3> + +<p dir="rtl">בהפעלה השניה של הפונקציה בדוגמה <code>test</code> אנחנו מעבירים באופן מכוון ערך של <code>undefined</code> והפרמטר <code>num</code> עדיין מקבל את ערך ברירת המחדל שהגדרנו בעת יצירת הפונקציה <code>(num = 1)</code>. ניתן לראות בקריאות הבאות לפונקציה, כי אך ורק <code>undefined</code> זוכה להחלפה בערך ברירת המחדל ולא שום סוג של ערך שלילי אחר ( <code>num === fale!!</code> ).</p> + +<pre class="brush: js">function test(num = 1) { + console.log(typeof num); +} + +test(); // 'number' (num is set to 1) +test(undefined); // 'number' (num is set to 1 too) + +// test with other falsy values: +test(''); // 'string' (num is set to '') +test(null); // 'object' (num is set to null) +</pre> + +<h3 id="Evaluated_at_call_time">Evaluated at call time</h3> + +<p>The default argument gets evaluated at call time, so unlike e.g. in Python, a new object is created each time the function is called.</p> + +<pre class="brush: js">function append(value, array = []) { + array.push(value); + return array; +} + +append(1); //[1] +append(2); //[2], not [1, 2] + +</pre> + +<p>This even applies to functions and variables:</p> + +<pre class="brush: js">function callSomething(thing = something()) { + return thing; +} + +function something() { + return 'sth'; +} + +callSomething(); //sth</pre> + +<h3 id="Default_parameters_are_available_to_later_default_parameters">Default parameters are available to later default parameters</h3> + +<p>Parameters already encountered are available to later default parameters:</p> + +<pre class="brush: js">function singularAutoPlural(singular, plural = singular + 's', + rallyingCry = plural + ' ATTACK!!!') { + return [singular, plural, rallyingCry]; +} + +//["Gecko","Geckos", "Geckos ATTACK!!!"] +singularAutoPlural('Gecko'); + +//["Fox","Foxes", "Foxes ATTACK!!!"] +singularAutoPlural('Fox', 'Foxes'); + +//["Deer", "Deer", "Deer ... change."] +singularAutoPlural('Deer', 'Deer', 'Deer peaceably and respectfully \ + petition the government for positive change.') +</pre> + +<p>This functionality is approximated in a straight forward fashion and demonstrates how many edge cases are handled.</p> + +<pre class="brush: js">function go() { + return ':P'; +} + +function withDefaults(a, b = 5, c = b, d = go(), e = this, + f = arguments, g = this.value) { + return [a, b, c, d, e, f, g]; +} + +function withoutDefaults(a, b, c, d, e, f, g) { + switch (arguments.length) { + case 0: + a; + case 1: + b = 5; + case 2: + c = b; + case 3: + d = go(); + case 4: + e = this; + case 5: + f = arguments; + case 6: + g = this.value; + default: + } + return [a, b, c, d, e, f, g]; +} + +withDefaults.call({value: '=^_^='}); +// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="] + + +withoutDefaults.call({value: '=^_^='}); +// [undefined, 5, 5, ":P", {value:"=^_^="}, arguments, "=^_^="] +</pre> + +<h3 id="Functions_defined_inside_function_body">Functions defined inside function body</h3> + +<p>Introduced in Gecko 33 {{geckoRelease(33)}}. Functions declared in the function body cannot be referred inside default parameters and throw a {{jsxref("ReferenceError")}} (currently a {{jsxref("TypeError")}} in SpiderMonkey, see {{bug(1022967)}}). Default parameters are always executed first, function declarations inside the function body evaluate afterwards.</p> + +<pre class="brush: js">// Doesn't work! Throws ReferenceError. +function f(a = go()) { + function go() { return ':P'; } +} +</pre> + +<h3 id="Parameters_without_defaults_after_default_parameters">Parameters without defaults after default parameters</h3> + +<p>Prior to Gecko 26 {{geckoRelease(26)}}, the following code resulted in a {{jsxref("SyntaxError")}}. This has been fixed in {{bug(777060)}} and works as expected in later versions. Parameters are still set left-to-right, overwriting default parameters even if there are later parameters without defaults.</p> + +<pre class="brush: js">function f(x = 1, y) { + return [x, y]; +} + +f(); // [1, undefined] +f(2); // [2, undefined] +</pre> + +<h3 id="Destructured_parameter_with_default_value_assignment">Destructured parameter with default value assignment</h3> + +<p>You can use default value assignment with the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment">destructuring assignment</a> notation:</p> + +<pre class="brush: js">function f([x, y] = [1, 2], {z: z} = {z: 3}) { + return x + y + z; +} + +f(); // 6</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-function-definitions', 'Function Definitions')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</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> + +<div> + + +<p>{{Compat("javascript.functions.default_parameters")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a class="external" href="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values" rel="external" title="http://wiki.ecmascript.org/doku.php?id=harmony:parameter_default_values">Original proposal at ecmascript.org</a></li> +</ul> diff --git a/files/he/web/javascript/reference/functions/index.html b/files/he/web/javascript/reference/functions/index.html new file mode 100644 index 0000000000..a58e629441 --- /dev/null +++ b/files/he/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. A function can have up to 255 arguments.</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. A function can have up to 255 arguments.</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 benefit of creating a named function expression is that in case we encounted 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 <strong>IIFE (<em>Immediately Invokable Function Expression</em>)</strong>.</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. A function can have up to 255 arguments.</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. A function can have up to 255 arguments.</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 to represent 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="Function_constructor_vs._function_declaration_vs._function_expression"><code>Function</code> constructor vs. function declaration vs. function expression</h2> + +<p>Compare the following:</p> + +<p>A function defined with the <code>Function</code> constructor 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/he/web/javascript/reference/global_objects/array/from/index.html b/files/he/web/javascript/reference/global_objects/array/from/index.html new file mode 100644 index 0000000000..1ab52ffa12 --- /dev/null +++ b/files/he/web/javascript/reference/global_objects/array/from/index.html @@ -0,0 +1,243 @@ +--- +title: ()Array.from +slug: Web/JavaScript/Reference/Global_Objects/Array/from +translation_of: Web/JavaScript/Reference/Global_Objects/Array/from +--- +<div>מתודת ה-</div> + +<div dir="ltr"><code><strong>Array.from()</strong></code><strong> </strong></div> + +<div>יוצרת מערך חדש שהוא העתק בעומק אחד (לא יכלול את האובייקטים אליהם יש הפניות מאיברים במערך הנתון) של המערך או אובייקט איטרבילי המועבר כפרמטר.</div> + +<div dir="rtl"></div> + +<div>{{EmbedInteractiveExample("pages/js/array-from.html")}}</div> + + + +<h2 id="Syntax">Syntax</h2> + +<pre class="brush: js">Array.from(arrayLike[, mapFn[, thisArg]]) +</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>arrayLike</code></dt> + <dd>An array-like or iterable object to convert to an array.</dd> + <dt><code>mapFn</code> {{Optional_inline}}</dt> + <dd>Map function to call on every element of the array.</dd> + <dt><code>thisArg</code> {{Optional_inline}}</dt> + <dd>Value to use as <code>this</code> when executing <code>mapFn</code>.</dd> +</dl> + +<h3 id="Return_value">Return value</h3> + +<p>A new {{jsxref("Array")}} instance.</p> + +<h2 id="Description">Description</h2> + +<p><code>Array.from()</code> lets you create <code>Array</code>s from:</p> + +<ul> + <li>array-like objects (objects with a <code>length</code> property and indexed elements) or</li> + <li><a href="/en-US/docs/Web/JavaScript/Guide/iterable">iterable objects</a> (objects where you can get its elements, such as {{jsxref("Map")}} and {{jsxref("Set")}}).</li> +</ul> + +<p><code>Array.from()</code> has an optional parameter <code>mapFn</code>, which allows you to execute a {{jsxref("Array.prototype.map", "map")}} function on each element of the array (or subclass object) that is being created. More clearly,<code> Array.from(obj, mapFn, thisArg)</code> has the same result as <code>Array.from(obj).map(mapFn, thisArg)</code>, except that it does not create an intermediate array. This is especially important for certain array subclasses, like <a href="/en-US/docs/Web/JavaScript/Typed_arrays">typed arrays</a>, since the intermediate array would necessarily have values truncated to fit into the appropriate type.</p> + +<p>The <code>length</code> property of the <code>from()</code> method is 1.</p> + +<p>In ES2015, the class syntax allows for sub-classing of both built-in and user defined classes; as a result, static methods such as <code>Array.from</code> are "inherited" by subclasses of <code>Array</code> and create new instances of the subclass, not <code>Array</code>.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Array_from_a_String">Array from a <code>String</code></h3> + +<pre class="brush: js">Array.from('foo'); +// [ "f", "o", "o" ]</pre> + +<h3 id="Array_from_a_Set">Array from a <code>Set</code></h3> + +<pre class="brush: js">const set = new Set(['foo', 'bar', 'baz', 'foo']); +Array.from(set); +// [ "foo", "bar", "baz" ]</pre> + +<h3 id="Array_from_a_Map">Array from a <code>Map</code></h3> + +<pre class="brush: js">const map = new Map([[1, 2], [2, 4], [4, 8]]); +Array.from(map); +// [[1, 2], [2, 4], [4, 8]] + +const mapper = new Map([['1', 'a'], ['2', 'b']]); +Array.from(mapper.values()); +// ['a', 'b']; + +Array.from(mapper.keys()); +// ['1', '2']; +</pre> + +<h3 id="Array_from_an_Array-like_object_(arguments)">Array from an Array-like object (arguments)</h3> + +<pre class="brush: js">function f() { + return Array.from(arguments); +} + +f(1, 2, 3); + +// [ 1, 2, 3 ]</pre> + +<h3 id="Using_arrow_functions_and_Array.from">Using arrow functions and <code>Array.from</code></h3> + +<pre class="brush: js">// Using an arrow function as the map function to +// manipulate the elements +Array.from([1, 2, 3], x => x + x); +// [2, 4, 6] + + +// Generate a sequence of numbers +// Since the array is initialized with `undefined` on each position, +// the value of `v` below will be `undefined` +Array.from({length: 5}, (v, i) => i); +// [0, 1, 2, 3, 4] +</pre> + +<h3 id="Sequence_generator_(range)">Sequence generator (range)</h3> + +<pre class="brush: js">// Sequence generator function (commonly referred to as "range", e.g. Clojure, PHP etc) +const range = (start, stop, step) => Array.from({ length: (stop - start) / step + 1}, (_, i) => start + (i * step)); + +// Generate numbers range 0..4 +range(0, 4, 1); +// [0, 1, 2, 3, 4] + +// Generate numbers range 1..10 with step of 2 +range(1, 10, 2); +// [1, 3, 5, 7, 9] + +// Generate the alphabet using Array.from making use of it being ordered as a sequence +range('A'.charCodeAt(0), 'Z'.charCodeAt(0), 1).map(x => String.fromCharCode(x)); +// ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z"] +</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p><code>Array.from</code> was added to the ECMA-262 standard in the 6th edition (ES2015); as such it may not be present in other implementations of the standard. You can work around this by inserting the following code at the beginning of your scripts, allowing use of <code>Array.from</code> in implementations that don't natively support it. This algorithm is exactly the one specified in ECMA-262, 6th edition, assuming <code>Object</code> and <code>TypeError</code> have their original values and that <code>callback.call</code> evaluates to the original value of {{jsxref("Function.prototype.call")}}. In addition, since true iterables can not be polyfilled, this implementation does not support generic iterables as defined in the 6th edition of ECMA-262.</p> + +<pre class="brush: js">// Production steps of ECMA-262, Edition 6, 22.1.2.1 +if (!Array.from) { + Array.from = (function () { + var toStr = Object.prototype.toString; + var isCallable = function (fn) { + return typeof fn === 'function' || toStr.call(fn) === '[object Function]'; + }; + var toInteger = function (value) { + var number = Number(value); + if (isNaN(number)) { return 0; } + if (number === 0 || !isFinite(number)) { return number; } + return (number > 0 ? 1 : -1) * Math.floor(Math.abs(number)); + }; + var maxSafeInteger = Math.pow(2, 53) - 1; + var toLength = function (value) { + var len = toInteger(value); + return Math.min(Math.max(len, 0), maxSafeInteger); + }; + + // The length property of the from method is 1. + return function from(arrayLike/*, mapFn, thisArg */) { + // 1. Let C be the this value. + var C = this; + + // 2. Let items be ToObject(arrayLike). + var items = Object(arrayLike); + + // 3. ReturnIfAbrupt(items). + if (arrayLike == null) { + throw new TypeError('Array.from requires an array-like object - not null or undefined'); + } + + // 4. If mapfn is undefined, then let mapping be false. + var mapFn = arguments.length > 1 ? arguments[1] : void undefined; + var T; + if (typeof mapFn !== 'undefined') { + // 5. else + // 5. a If IsCallable(mapfn) is false, throw a TypeError exception. + if (!isCallable(mapFn)) { + throw new TypeError('Array.from: when provided, the second argument must be a function'); + } + + // 5. b. If thisArg was supplied, let T be thisArg; else let T be undefined. + if (arguments.length > 2) { + T = arguments[2]; + } + } + + // 10. Let lenValue be Get(items, "length"). + // 11. Let len be ToLength(lenValue). + var len = toLength(items.length); + + // 13. If IsConstructor(C) is true, then + // 13. a. Let A be the result of calling the [[Construct]] internal method + // of C with an argument list containing the single item len. + // 14. a. Else, Let A be ArrayCreate(len). + var A = isCallable(C) ? Object(new C(len)) : new Array(len); + + // 16. Let k be 0. + var k = 0; + // 17. Repeat, while k < len… (also steps a - h) + var kValue; + while (k < len) { + kValue = items[k]; + if (mapFn) { + A[k] = typeof T === 'undefined' ? mapFn(kValue, k) : mapFn.call(T, kValue, k); + } else { + A[k] = kValue; + } + k += 1; + } + // 18. Let putStatus be Put(A, "length", len, true). + A.length = len; + // 20. Return A. + return A; + }; + }()); +} +</pre> + +<h2 id="Specifications">Specifications</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('ESDraft', '#sec-array.from', 'Array.from')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-array.from', 'Array.from')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.Array.from")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array")}}</li> + <li>{{jsxref("Array.prototype.map()")}}</li> + <li>{{jsxref("TypedArray.from()")}}</li> +</ul> diff --git a/files/he/web/javascript/reference/global_objects/array/includes/index.html b/files/he/web/javascript/reference/global_objects/array/includes/index.html new file mode 100644 index 0000000000..0cc6181f0d --- /dev/null +++ b/files/he/web/javascript/reference/global_objects/array/includes/index.html @@ -0,0 +1,169 @@ +--- +title: Array.prototype.includes() +slug: Web/JavaScript/Reference/Global_Objects/Array/includes +tags: + - ג'אווה סקריפט + - מערך + - פוליפיל + - פרוטוטייפ +translation_of: Web/JavaScript/Reference/Global_Objects/Array/includes +--- +<div dir="rtl">{{JSRef}}</div> + +<div dir="rtl">שיטת <code><strong>includes()</strong></code> קובעת אם מערך מכיל אלמנט מסויים, מחזיר true או false בהתאם.</div> + +<div dir="rtl"> </div> + +<h2 dir="rtl" id="תחביר">תחביר</h2> + +<pre class="syntaxbox">var <var>boolean</var> = <var>array</var>.includes(<var>searchElement</var>[, <var>fromIndex</var>])</pre> + +<h3 dir="rtl" id="פרמטרים">פרמטרים</h3> + +<dl> + <dt dir="rtl"><code>searchElement</code></dt> + <dd dir="rtl">האלמנט אותו מחפשים</dd> + <dt dir="rtl"><code>fromIndex</code></dt> + <dd dir="rtl">אופציונלי. המיקום במערך בו להתחיל את החיפוש אחר searchElement. ערך שלילי יתחיל את החיפוש מהערך האחרון (array.length) + fromIndex בסדר עולה. ברירת מחדל 0.</dd> +</dl> + +<h3 dir="rtl" id="ערך_מוחזר_(Return)">ערך מוחזר (Return)</h3> + +<p dir="rtl">{{jsxref("Boolean")}}.</p> + +<h2 dir="rtl" id="דוגמאות">דוגמאות</h2> + +<pre class="brush: js">[1, 2, 3].includes(2); // true +[1, 2, 3].includes(4); // false +[1, 2, 3].includes(3, 3); // false +[1, 2, 3].includes(3, -1); // true +[1, 2, NaN].includes(NaN); // true +</pre> + +<h2 dir="rtl" id="פוליפיל_-_Polyfill">פוליפיל - Polyfill</h2> + +<pre class="brush: js">if (!Array.prototype.includes) { + Array.prototype.includes = function(searchElement /*, fromIndex*/) { + 'use strict'; + if (this == null) { + throw new TypeError('Array.prototype.includes called on null or undefined'); + } + + var O = Object(this); + var len = parseInt(O.length, 10) || 0; + if (len === 0) { + return false; + } + var n = parseInt(arguments[1], 10) || 0; + var k; + if (n >= 0) { + k = n; + } else { + k = len + n; + if (k < 0) {k = 0;} + } + var currentElement; + while (k < len) { + currentElement = O[k]; + if (searchElement === currentElement || + (searchElement !== searchElement && currentElement !== currentElement)) { // NaN !== NaN + return true; + } + k++; + } + return false; + }; +} +</pre> + +<h2 dir="rtl" id="מפרט">מפרט</h2> + +<table class="standard-table" dir="rtl" style="height: 185px; width: 490px;"> + <tbody> + <tr> + <th scope="col"><span style="display: none;"> </span><span style="display: none;"> </span>מפרט</th> + <th scope="col">סטטוס</th> + <th scope="col">הערה</th> + </tr> + <tr> + <td>{{SpecName('ES7', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td> + <td>{{Spec2('ES7')}}</td> + <td>הגדרה ראשונית</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.includes', 'Array.prototype.includes')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="תאימות_דפדפנים">תאימות דפדפנים</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>מאפיין</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>תמיכה בסיסית</td> + <td> + <p>{{CompatChrome(47)}}</p> + </td> + <td>43</td> + <td>{{CompatNo}}</td> + <td>14279+</td> + <td>34</td> + <td>9</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>מאפיין</th> + <th>Android</th> + <th>Android Webview</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Chrome for Android</th> + </tr> + <tr> + <td>תמיכה בסיסית</td> + <td>{{CompatNo}}</td> + <td> + <p>{{CompatChrome(47)}}</p> + </td> + <td>43</td> + <td>{{CompatNo}}</td> + <td>34</td> + <td>9</td> + <td> + <p>{{CompatChrome(47)}}</p> + </td> + </tr> + </tbody> +</table> +</div> + +<h2 dir="rtl" id="ראה_עוד">ראה עוד</h2> + +<ul dir="rtl"> + <li>{{jsxref("TypedArray.prototype.includes()")}}</li> + <li>{{jsxref("String.prototype.includes()")}}</li> + <li>{{jsxref("Array.prototype.indexOf()")}}</li> +</ul> diff --git a/files/he/web/javascript/reference/global_objects/array/index.html b/files/he/web/javascript/reference/global_objects/array/index.html new file mode 100644 index 0000000000..4dac733b4a --- /dev/null +++ b/files/he/web/javascript/reference/global_objects/array/index.html @@ -0,0 +1,485 @@ +--- +title: Array +slug: Web/JavaScript/Reference/Global_Objects/Array +tags: + - Global Objects + - JavaScript + - NeedsTranslation + - Reference + - TopicStub + - דוגמא + - מערך +translation_of: Web/JavaScript/Reference/Global_Objects/Array +--- +<p dir="rtl">האובייקט <strong>מערך(</strong>Array<strong>)</strong> בג'אווה סקריפט הוא אובייקט גלובלי אשר משמש לבניית מערכים שהם אובייקטים דמויי רשימה .</p> + +<p dir="rtl"><strong>צור מערך</strong></p> + +<pre class="brush: js notranslate" dir="rtl">var fruits = ["Apple", "Banana"]; + +console.log(fruits.length); +// 2 +</pre> + +<p dir="rtl"><strong>קבל גישה לאיבר(ע"י האינדקס שלו) במערך</strong></p> + +<pre class="brush: js notranslate">var first = fruits[0]; +// Apple + +var last = fruits[fruits.length - 1]; +// Banana +</pre> + +<p dir="rtl"><strong>השתמש בלולאה על המערך </strong></p> + +<pre class="brush: js notranslate" dir="rtl">fruits.forEach(function (item, index, array) { + console.log(item, index); +}); +// Apple 0 +// Banana 1 +</pre> + +<p dir="rtl"><strong>הוסף איבר לסוף המערך</strong></p> + +<pre class="brush: js notranslate">var newLength = fruits.push("Orange"); +// ["Apple", "Banana", "Orange"] +</pre> + +<p dir="rtl"><strong>הסר את האיבר האחרון במערך</strong></p> + +<pre class="brush: js notranslate">var last = fruits.pop(); // remove Orange (from the end) +// ["Apple", "Banana"]; +</pre> + +<p dir="rtl"><strong>הסר איבר הראשון מערך</strong></p> + +<pre class="brush: js notranslate">var first = fruits.shift(); // remove Apple from the front +// ["Banana"]; +</pre> + +<p dir="rtl"><strong>הוסף איבר לראשית המערך</strong></p> + +<pre class="brush: js notranslate">var newLength = fruits.unshift("Strawberry") // add to the front +// ["Strawberry", "Banana"]; +</pre> + +<p dir="rtl"><strong>מצא את האינדקס של איבר במערך</strong></p> + +<pre class="brush: js notranslate">fruits.push("Mango"); +// ["Strawberry", "Banana", "Mango"] + +var pos = fruits.indexOf("Banana"); +// 1 +</pre> + +<p dir="rtl"><strong>הסר איבר על ידי האינדקס(מיקום) שלו</strong></p> + +<pre class="brush: js notranslate">var removedItem = fruits.splice(pos, 1); // this is how to remove an item +// ["Strawberry", "Mango"] +</pre> + +<p dir="rtl"><strong>צור עותק של המערך</strong></p> + +<pre class="brush: js notranslate">var shallowCopy = fruits.slice(); // this is how to make a copy +// ["Strawberry", "Mango"] +</pre> + +<h2 id="תחביר">תחביר</h2> + +<pre class="syntaxbox notranslate"><code>[<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>)</code></pre> + +<h3 id="פרמטרים">פרמטרים</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 length set to that number. 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>Some people think that <a class="external" href="http://www.andrewdupont.net/2006/05/18/javascript-associative-arrays-considered-harmful/">you shouldn't use an array as an associative array</a>. In any case, you can use plain {{jsxref("Global_Objects/Object", "objects")}} instead, although doing so comes with its own caveats. See the post <a class="external" href="http://www.less-broken.com/blog/2010/12/lightweight-javascript-dictionaries.html">Lightweight JavaScript dictionaries with arbitrary keys</a> as an example.</p> + +<h3 dir="rtl" id="גישה_לאלמנטים_שבמערך">גישה לאלמנטים שבמערך</h3> + +<p dir="rtl">מערכים ב - JavaScript מסודרים לפי מספרים מאפס ומעלה: מספרו של האיבר הראשון במערך הוא 0 ומספרו של האיבר האחרון במערך שווה לכמות האיברים במערך (אורכו של המערך - Array.length) פחות 1.</p> + +<pre class="brush: js notranslate">var arr = ['this is the first element', 'this is the second 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 second 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 notranslate">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 notranslate">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 notranslate">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 notranslate">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 notranslate">var promise = { + 'var' : 'text', + 'array': [1, 2, 3, 4] +}; + +console.log(promise['array']); +</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 notranslate">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 notranslate">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 notranslate">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 notranslate">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 notranslate">// 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 near future</strong>. Note that you can not rely on them cross-browser. However, there is a <a href="https://github.com/plusdude/array-generics">shim available on GitHub</a>.</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 notranslate">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 notranslate">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 (though the ES2015 {{jsxref("Array.from()")}} can be used to achieve this). The following is a shim to allow its use in all browsers:</p> + +<pre class="brush: js notranslate">// Assumes Array extras already present (one may use polyfills for these as well) +(function() { + 'use strict'; + + var i, + // We could also build the array of methods with the following, but the + // getOwnPropertyNames() method is non-shimable: + // Object.getOwnPropertyNames(Array).filter(function(methodName) { + // return typeof Array[methodName] === 'function' + // }); + methods = [ + 'join', 'reverse', 'sort', 'push', 'pop', 'shift', 'unshift', + 'splice', 'concat', 'slice', 'indexOf', 'lastIndexOf', + 'forEach', 'map', 'reduce', 'reduceRight', 'filter', + 'some', 'every', 'find', 'findIndex', 'entries', 'keys', + 'values', 'copyWithin', 'includes' + ], + methodCount = methods.length, + assignArrayGeneric = function(methodName) { + if (!Array[methodName]) { + var method = Array.prototype[methodName]; + if (typeof method === 'function') { + Array[methodName] = function() { + return method.call.apply(method, arguments); + }; + } + } + }; + + for (i = 0; i < methodCount; i++) { + assignArrayGeneric(methods[i]); + } +}()); +</pre> + +<h2 id="דוגמאות">דוגמאות</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 notranslate">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 notranslate">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 notranslate">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> + +<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('ES2015', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ES2015')}}</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('ESDraft', '#sec-array-objects', 'Array')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>New method added: {{jsxref("Array.prototype.includes()")}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="ראה_גם">ראה גם</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/he/web/javascript/reference/global_objects/array/unshift/index.html b/files/he/web/javascript/reference/global_objects/array/unshift/index.html new file mode 100644 index 0000000000..9febfb5ad4 --- /dev/null +++ b/files/he/web/javascript/reference/global_objects/array/unshift/index.html @@ -0,0 +1,94 @@ +--- +title: Array.prototype.unshift() +slug: Web/JavaScript/Reference/Global_Objects/Array/unshift +translation_of: Web/JavaScript/Reference/Global_Objects/Array/unshift +--- +<div dir="rtl">{{JSRef}}</div> + +<div dir="rtl">המתודה ()<code><strong>unshift</strong></code> מוסיפה אלמנט אחד או יותר לתחילת מערך ומחזירה את גודלו החדש של המערך. </div> + +<div dir="rtl">{{EmbedInteractiveExample("pages/js/array-unshift.html")}}</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox"><var>arr</var>.unshift(<var>element1</var>[, ...[, <var>elementN</var>]])</pre> + +<h3 dir="rtl" id="פרמטרים">פרמטרים</h3> + +<dl> + <dt dir="rtl"><code>element<em>N</em></code></dt> + <dd dir="rtl">אלמנטים להוספה לתחילת המערך.</dd> +</dl> + +<h3 dir="rtl" id="ערך_מוחזר">ערך מוחזר</h3> + +<p dir="rtl">את ערך השדה {{jsxref("Array.length", "length")}} החדש של המערך עליו הופעלה המתודה.</p> + +<h2 dir="rtl" id="תאור">תאור</h2> + +<p dir="rtl">המתודה <code>unshift</code> מכניסה את ערכי האלמנטים שקיבלה כפרמטר לתחילת אובייקט המערך. </p> + +<p dir="rtl"><code>unshift</code> is intentionally generic; this method can be {{jsxref("Function.call", "called", "", 1)}} or {{jsxref("Function.apply", "applied", "", 1)}} to objects resembling arrays. Objects which do not contain a <code>length</code> property reflecting the last in a series of consecutive, zero-based numerical properties may not behave in any meaningful manner.</p> + +<h2 id="Examples">Examples</h2> + +<pre class="brush: js">var arr = [1, 2]; + +arr.unshift(0); // result of call is 3, the new array length +// arr is [0, 1, 2] + +arr.unshift(-2, -1); // = 5 +// arr is [-2, -1, 0, 1, 2] + +arr.unshift([-3]); +// arr is [[-3], -2, -1, 0, 1, 2] +</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('ES3')}}</td> + <td>{{Spec2('ES3')}}</td> + <td>Initial definition. Implemented in JavaScript 1.2.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.4.4.13', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-array.prototype.unshift', 'Array.prototype.unshift')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Array.unshift")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array.prototype.push()")}}</li> + <li>{{jsxref("Array.prototype.pop()")}}</li> + <li>{{jsxref("Array.prototype.shift()")}}</li> + <li>{{jsxref("Array.prototype.concat()")}}</li> +</ul> diff --git a/files/he/web/javascript/reference/global_objects/index.html b/files/he/web/javascript/reference/global_objects/index.html new file mode 100644 index 0000000000..f215b83a20 --- /dev/null +++ b/files/he/web/javascript/reference/global_objects/index.html @@ -0,0 +1,183 @@ +--- +title: Standard built-in objects +slug: Web/JavaScript/Reference/Global_Objects +tags: + - JavaScript + - Objects + - אובייקטים + - סקריפט + - פונקציות +translation_of: Web/JavaScript/Reference/Global_Objects +--- +<div>{{jsSidebar("Objects")}}</div> + +<p>This chapter documents all of JavaScript's standard, built-in objects, including their methods and properties.</p> + +<div class="onlyinclude"> +<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> (but only if ECMAScript 5 strict mode is not used; in that case it returns {{jsxref("undefined")}}). The <strong>global object</strong> itself can be accessed using the {{jsxref("Operators/this", "this")}} operator in the global scope. 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> +</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")}} {{experimental_inline}}</li> + <li>{{jsxref("Error")}}</li> + <li>{{jsxref("EvalError")}}</li> + <li>{{jsxref("InternalError")}}</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("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> +</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")}} {{experimental_inline}}</li> + <li>{{jsxref("Set")}} {{experimental_inline}}</li> + <li>{{jsxref("WeakMap")}} {{experimental_inline}}</li> + <li>{{jsxref("WeakSet")}} {{experimental_inline}}</li> +</ul> + +<h3 id="Vector_collections">Vector collections</h3> + +<p>{{Glossary("SIMD")}} vector data types are objects where data is arranged into lanes.</p> + +<ul> + <li>{{jsxref("SIMD")}} {{experimental_inline}}</li> + <li>{{jsxref("Float32x4", "SIMD.Float32x4")}} {{experimental_inline}}</li> + <li>{{jsxref("Float64x2", "SIMD.Float64x2")}} {{experimental_inline}}</li> + <li>{{jsxref("Int8x16", "SIMD.Int8x16")}} {{experimental_inline}}</li> + <li>{{jsxref("Int16x8", "SIMD.Int16x8")}} {{experimental_inline}}</li> + <li>{{jsxref("Int32x4", "SIMD.Int32x4")}} {{experimental_inline}}</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("DataView")}}</li> + <li>{{jsxref("JSON")}}</li> +</ul> + +<h3 id="Control_abstraction_objects">Control abstraction objects</h3> + +<ul> + <li>{{jsxref("Promise")}} {{experimental_inline}}</li> + <li>{{jsxref("Generator")}} {{experimental_inline}}</li> + <li>{{jsxref("GeneratorFunction")}} {{experimental_inline}}</li> +</ul> + +<h3 id="Reflection">Reflection</h3> + +<ul> + <li>{{jsxref("Reflect")}} {{experimental_inline}}</li> + <li>{{jsxref("Proxy")}} {{experimental_inline}}</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/NumberFormat", "Intl.NumberFormat")}}</li> +</ul> + +<h3 id="Non-standard_objects">Non-standard objects</h3> + +<ul> + <li>{{jsxref("Iterator")}} {{non-standard_inline}}</li> + <li>{{jsxref("ParallelArray")}} {{non-standard_inline}}</li> + <li>{{jsxref("StopIteration")}} {{non-standard_inline}}</li> +</ul> + +<h3 id="Other">Other</h3> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">arguments</a></code></li> +</ul> +</div> + +<p> </p> diff --git a/files/he/web/javascript/reference/global_objects/object/assign/index.html b/files/he/web/javascript/reference/global_objects/object/assign/index.html new file mode 100644 index 0000000000..72d2b16579 --- /dev/null +++ b/files/he/web/javascript/reference/global_objects/object/assign/index.html @@ -0,0 +1,272 @@ +--- +title: Object.assign() +slug: Web/JavaScript/Reference/Global_Objects/Object/assign +translation_of: Web/JavaScript/Reference/Global_Objects/Object/assign +--- +<p>{{JSRef}}</p> + +<p dir="rtl">מתודת <span class="seoSummary"><strong><code>Object.assign</code> מעתיקה אובייקט על שלל </strong>{{jsxref("Object/propertyIsEnumerable", "מאפייניו", "", 1)} {{jsxref("Object/hasOwnProperty", "הקיימים", "", 1)}} לאובייקט אחר וממזגת אותם ביחד. המתודה מחזירה את האובייקט שאליו העתקנו את התכונות החדשות. </span></p> + +<div dir="rtl">תחביר</div> + +<pre class="syntaxbox notranslate">Object.assign(<var>target</var>, ...<var>sources</var>)</pre> + +<h3 dir="rtl" id="פרמטרים">פרמטרים</h3> + +<dl> + <dt dir="rtl"><code><var>target - אובייקט היעד</var></code></dt> + <dd dir="rtl">אובייקט היעד- האובייקט שאליו אנחנו מעתיקים את כל המאפיינים של האובייקט המקורי, כאשר הוא מחזיר את האובייקט אחרי המיזוג.</dd> + <dt dir="rtl"><code><var>sources - אובייקט המקור</var></code></dt> + <dd></dd> +</dl> + +<dl> + <dd dir="rtl">אובייקט המקור - האובייקט מכיל את המאפיינים שאנחנו רוצים להעתיק לאובייקט נוסף. </dd> +</dl> + +<h3 dir="rtl" id="Return_value_-_הנתון_התוצאה">Return value - הנתון התוצאה</h3> + +<p dir="rtl">The target object - האובייקט שאליו העתקנו את התכונות של האובייקט המקורי.</p> + +<h2 dir="rtl" id="תיאור">תיאור</h2> + +<p dir="rtl">מאפיינים באובייקט היעד ישוכתבו או ידרסו ע"י המאפיינים של אובייקט המקור אם הם חולקים את אותו ה-{{jsxref("Object/keys", "key", "", 1)}}. מאפיינים חדשים שיוגדו על מאפיינים משותפים (properties) בהמשך ידרסו גם באובייקט היעד וגם באופייקט המקור.</p> + +<p dir="rtl"></p> + +<p>The <code>Object.assign()</code> method only copies <em>enumerable</em> and <em>own</em> properties from a source object to a target object. It uses <code>[[Get]]</code> on the source and <code>[[Set]]</code> on the target, so it will invoke <a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getters</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setters</a>. Therefore it <em>assigns</em> properties, versus copying or defining new properties. This may make it unsuitable for merging new properties into a prototype if the merge sources contain getters.</p> + +<p>For copying property definitions (including their enumerability) into prototypes, use {{jsxref("Object.getOwnPropertyDescriptor()")}} and {{jsxref("Object.defineProperty()")}} instead.</p> + +<p>Both {{jsxref("String")}} and {{jsxref("Symbol")}} properties are copied.</p> + +<p>In case of an error, for example if a property is non-writable, a {{jsxref("TypeError")}} is raised, and the <code><var>target</var></code> object is changed if any properties are added before the error is raised.</p> + +<div class="blockIndicator note"> +<p><strong>Note:</strong> <code>Object.assign()</code> does not throw on {{jsxref("null")}} or {{jsxref("undefined")}} sources.</p> +</div> + +<h2 id="Polyfill">Polyfill</h2> + +<p>This <a href="/en-US/docs/Glossary/Polyfill">polyfill</a> doesn't support symbol properties, since ES5 doesn't have symbols anyway:</p> + +<pre class="brush: js notranslate">if (typeof Object.assign !== 'function') { + // Must be writable: true, enumerable: false, configurable: true + Object.defineProperty(Object, "assign", { + value: function assign(target, varArgs) { // .length of function is 2 + 'use strict'; + if (target === null || target === undefined) { + throw new TypeError('Cannot convert undefined or null to object'); + } + + var to = Object(target); + + for (var index = 1; index < arguments.length; index++) { + var nextSource = arguments[index]; + + if (nextSource !== null && nextSource !== undefined) { + for (var nextKey in nextSource) { + // Avoid bugs when hasOwnProperty is shadowed + if (Object.prototype.hasOwnProperty.call(nextSource, nextKey)) { + to[nextKey] = nextSource[nextKey]; + } + } + } + } + return to; + }, + writable: true, + configurable: true + }); +} +</pre> + +<h2 id="Examples">Examples</h2> + +<h3 id="Cloning_an_object">Cloning an object</h3> + +<pre class="brush: js notranslate">const obj = { a: 1 }; +const copy = Object.assign({}, obj); +console.log(copy); // { a: 1 } +</pre> + +<h3 id="Deep_Clone" name="Deep_Clone">Warning for Deep Clone</h3> + +<p>For deep cloning, we need to use alternatives, because <code>Object.assign()</code> copies property values.</p> + +<p>If the source value is a reference to an object, it only copies the reference value.</p> + +<pre class="brush: js notranslate">function test() { + 'use strict'; + + let obj1 = { a: 0 , b: { c: 0}}; + let obj2 = Object.assign({}, obj1); + console.log(JSON.stringify(obj2)); // { "a": 0, "b": { "c": 0}} + + obj1.a = 1; + console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 0}} + console.log(JSON.stringify(obj2)); // { "a": 0, "b": { "c": 0}} + + obj2.a = 2; + console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 0}} + console.log(JSON.stringify(obj2)); // { "a": 2, "b": { "c": 0}} + + obj2.b.c = 3; + console.log(JSON.stringify(obj1)); // { "a": 1, "b": { "c": 3}} + console.log(JSON.stringify(obj2)); // { "a": 2, "b": { "c": 3}} + + // Deep Clone + obj1 = { a: 0 , b: { c: 0}}; + let obj3 = JSON.parse(JSON.stringify(obj1)); + obj1.a = 4; + obj1.b.c = 4; + console.log(JSON.stringify(obj3)); // { "a": 0, "b": { "c": 0}} +} + +test();</pre> + +<h3 id="Merging_objects">Merging objects</h3> + +<pre class="brush: js notranslate">const o1 = { a: 1 }; +const o2 = { b: 2 }; +const o3 = { c: 3 }; + +const obj = Object.assign(o1, o2, o3); +console.log(obj); // { a: 1, b: 2, c: 3 } +console.log(o1); // { a: 1, b: 2, c: 3 }, target object itself is changed.</pre> + +<h3 id="Merging_objects_with_same_properties">Merging objects with same properties</h3> + +<pre class="brush: js notranslate">const o1 = { a: 1, b: 1, c: 1 }; +const o2 = { b: 2, c: 2 }; +const o3 = { c: 3 }; + +const obj = Object.assign({}, o1, o2, o3); +console.log(obj); // { a: 1, b: 2, c: 3 }</pre> + +<p>The properties are overwritten by other objects that have the same properties later in the parameters order.</p> + +<h3 id="Copying_symbol-typed_properties">Copying symbol-typed properties</h3> + +<pre class="brush: js notranslate">const o1 = { a: 1 }; +const o2 = { [Symbol('foo')]: 2 }; + +const obj = Object.assign({}, o1, o2); +console.log(obj); // { a : 1, [Symbol("foo")]: 2 } (cf. bug 1207182 on Firefox) +Object.getOwnPropertySymbols(obj); // [Symbol(foo)] +</pre> + +<h3 id="Properties_on_the_prototype_chain_and_non-enumerable_properties_cannot_be_copied">Properties on the prototype chain and non-enumerable properties cannot be copied</h3> + +<pre class="brush: js notranslate">const obj = Object.create({ foo: 1 }, { // foo is on obj's prototype chain. + bar: { + value: 2 // bar is a non-enumerable property. + }, + baz: { + value: 3, + enumerable: true // baz is an own enumerable property. + } +}); + +const copy = Object.assign({}, obj); +console.log(copy); // { baz: 3 } +</pre> + +<h3 id="Primitives_will_be_wrapped_to_objects">Primitives will be wrapped to objects</h3> + +<pre class="brush: js notranslate">const v1 = 'abc'; +const v2 = true; +const v3 = 10; +const v4 = Symbol('foo'); + +const obj = Object.assign({}, v1, null, v2, undefined, v3, v4); +// Primitives will be wrapped, null and undefined will be ignored. +// Note, only string wrappers can have own enumerable properties. +console.log(obj); // { "0": "a", "1": "b", "2": "c" } +</pre> + +<h3 id="Exceptions_will_interrupt_the_ongoing_copying_task">Exceptions will interrupt the ongoing copying task</h3> + +<pre class="brush: js notranslate">const target = Object.defineProperty({}, 'foo', { + value: 1, + writable: false +}); // target.foo is a read-only property + +Object.assign(target, { bar: 2 }, { foo2: 3, foo: 3, foo3: 3 }, { baz: 4 }); +// TypeError: "foo" is read-only +// The Exception is thrown when assigning target.foo + +console.log(target.bar); // 2, the first source was copied successfully. +console.log(target.foo2); // 3, the first property of the second source was copied successfully. +console.log(target.foo); // 1, exception is thrown here. +console.log(target.foo3); // undefined, assign method has finished, foo3 will not be copied. +console.log(target.baz); // undefined, the third source will not be copied either. +</pre> + +<h3 id="Copying_accessors">Copying accessors</h3> + +<pre class="brush: js notranslate">const obj = { + foo: 1, + get bar() { + return 2; + } +}; + +let copy = Object.assign({}, obj); +console.log(copy); +// { foo: 1, bar: 2 } +// The value of copy.bar is obj.bar's getter's return value. + +// This is an assign function that copies full descriptors +function completeAssign(target, ...sources) { + sources.forEach(source => { + let descriptors = Object.keys(source).reduce((descriptors, key) => { + descriptors[key] = Object.getOwnPropertyDescriptor(source, key); + return descriptors; + }, {}); + + // By default, Object.assign copies enumerable Symbols, too + Object.getOwnPropertySymbols(source).forEach(sym => { + let descriptor = Object.getOwnPropertyDescriptor(source, sym); + if (descriptor.enumerable) { + descriptors[sym] = descriptor; + } + }); + Object.defineProperties(target, descriptors); + }); + return target; +} + +copy = completeAssign({}, obj); +console.log(copy); +// { foo:1, get bar() { return 2 } } +</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-object.assign', 'Object.assign')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + + + +<p>{{Compat("javascript.builtins.Object.assign")}}</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Object.defineProperties()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Enumerability_and_ownership_of_properties">Enumerability and ownership of properties</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#Spread_in_object_literals">Spread in object literals</a></li> +</ul> diff --git a/files/he/web/javascript/reference/global_objects/object/index.html b/files/he/web/javascript/reference/global_objects/object/index.html new file mode 100644 index 0000000000..9feed92ddc --- /dev/null +++ b/files/he/web/javascript/reference/global_objects/object/index.html @@ -0,0 +1,184 @@ +--- +title: Object +slug: Web/JavaScript/Reference/Global_Objects/Object +tags: + - Constructor + - JavaScript + - NeedsTranslation + - Object + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/Object +--- +<div>{{JSRef}}</div> + +<p>The <code><strong>Object</strong></code> constructor creates an object wrapper.</p> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">// Object initialiser or literal +{ [ <var>nameValuePair1</var>[, <var>nameValuePair2</var>[, ...<var>nameValuePairN</var>] ] ] } + +// Called as a constructor +new Object([<var>value</var>])</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>nameValuePair1, nameValuePair2, ... nameValuePair<em>N</em></code></dt> + <dd>Pairs of names (strings) and values (any value) where the name is separated from the value by a colon.</dd> + <dt><code>value</code></dt> + <dd>Any value.</dd> +</dl> + +<h2 id="Description">Description</h2> + +<p>The <code>Object</code> constructor creates an object wrapper for the given value. If the value is {{jsxref("null")}} or {{jsxref("undefined")}}, it will create and return an empty object, otherwise, it will return an object of a Type that corresponds to the given value. If the value is an object already, it will return the value.</p> + +<p>When called in a non-constructor context, <code>Object</code> behaves identically to <code>new Object()</code>.</p> + +<p>See also the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">object initializer / literal syntax</a>.</p> + +<h2 id="Properties_of_the_Object_constructor">Properties of the <code>Object</code> constructor</h2> + +<dl> + <dt><code>Object.length</code></dt> + <dd>Has a value of 1.</dd> + <dt>{{jsxref("Object.prototype")}}</dt> + <dd>Allows the addition of properties to all objects of type Object.</dd> +</dl> + +<h2 id="Methods_of_the_Object_constructor">Methods of the <code>Object</code> constructor</h2> + +<dl> + <dt>{{jsxref("Object.assign()")}}</dt> + <dd>Copies the values of all enumerable own properties from one or more source objects to a target object.</dd> + <dt>{{jsxref("Object.create()")}}</dt> + <dd>Creates a new object with the specified prototype object and properties.</dd> + <dt>{{jsxref("Object.defineProperty()")}}</dt> + <dd>Adds the named property described by a given descriptor to an object.</dd> + <dt>{{jsxref("Object.defineProperties()")}}</dt> + <dd>Adds the named properties described by the given descriptors to an object.</dd> + <dt>{{jsxref("Object.entries()")}}</dt> + <dd>Returns an array containing all of the <code>[key, value]</code> pairs of a given object's <strong>own</strong> enumerable string properties.</dd> + <dt>{{jsxref("Object.freeze()")}}</dt> + <dd>Freezes an object: other code can't delete or change any properties.</dd> + <dt>{{jsxref("Object.fromEntries()")}}</dt> + <dd>Returns a new object from an iterable of key-value pairs (reverses {{jsxref("Object.entries")}}).</dd> + <dt>{{jsxref("Object.getOwnPropertyDescriptor()")}}</dt> + <dd>Returns a property descriptor for a named property on an object.</dd> + <dt>{{jsxref("Object.getOwnPropertyDescriptors()")}}</dt> + <dd>Returns an object containing all own property descriptors for an object.</dd> + <dt>{{jsxref("Object.getOwnPropertyNames()")}}</dt> + <dd>Returns an array containing the names of all of the given object's <strong>own</strong> enumerable and non-enumerable properties.</dd> + <dt>{{jsxref("Object.getOwnPropertySymbols()")}}</dt> + <dd>Returns an array of all symbol properties found directly upon a given object.</dd> + <dt>{{jsxref("Object.getPrototypeOf()")}}</dt> + <dd>Returns the prototype of the specified object.</dd> + <dt>{{jsxref("Object.is()")}}</dt> + <dd>Compares if two values are the same value. Equates all NaN values (which differs from both Abstract Equality Comparison and Strict Equality Comparison).</dd> + <dt>{{jsxref("Object.isExtensible()")}}</dt> + <dd>Determines if extending of an object is allowed.</dd> + <dt>{{jsxref("Object.isFrozen()")}}</dt> + <dd>Determines if an object was frozen.</dd> + <dt>{{jsxref("Object.isSealed()")}}</dt> + <dd>Determines if an object is sealed.</dd> + <dt>{{jsxref("Object.keys()")}}</dt> + <dd>Returns an array containing the names of all of the given object's <strong>own</strong> enumerable string properties.</dd> + <dt>{{jsxref("Object.preventExtensions()")}}</dt> + <dd>Prevents any extensions of an object.</dd> + <dt>{{jsxref("Object.seal()")}}</dt> + <dd>Prevents other code from deleting properties of an object.</dd> + <dt>{{jsxref("Object.setPrototypeOf()")}}</dt> + <dd>Sets the prototype (i.e., the internal <code>[[Prototype]]</code> property).</dd> + <dt>{{jsxref("Object.values()")}}</dt> + <dd>Returns an array containing the values that correspond to all of a given object's <strong>own</strong> enumerable string properties.</dd> +</dl> + +<h2 id="Object_instances_and_Object_prototype_object"><code>Object</code> instances and <code>Object</code> prototype object</h2> + +<p>All objects in JavaScript are descended from <code>Object</code>; all objects inherit methods and properties from {{jsxref("Object.prototype")}}, although they may be overridden. For example, other constructors' prototypes override the <code>constructor</code> property and provide their own <code>toString()</code> methods. Changes to the <code>Object</code> prototype object are propagated to all objects unless the properties and methods subject to those changes are overridden further along the prototype chain.</p> + +<h3 id="Properties">Properties</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Properties') }}</div> + +<h3 id="Methods">Methods</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/prototype', 'Methods') }}</div> + +<h2 id="Deleting_a_property_from_an_object">Deleting a property from an object</h2> + +<p>There isn't any method in an Object itself to delete its own properties (e.g. like <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/delete">Map.prototype.delete()</a></code>). To do so one has to use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete">delete operator</a>.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_Object_given_undefined_and_null_types">Using <code>Object</code> given <code>undefined</code> and <code>null</code> types</h3> + +<p>The following examples store an empty <code>Object</code> object in <code>o</code>:</p> + +<pre class="brush: js">var o = new Object(); +</pre> + +<pre class="brush: js">var o = new Object(undefined); +</pre> + +<pre class="brush: js">var o = new Object(null); +</pre> + +<h3 id="Using_Object_to_create_Boolean_objects">Using <code>Object</code> to create <code>Boolean</code> objects</h3> + +<p>The following examples store {{jsxref("Boolean")}} objects in <code>o</code>:</p> + +<pre class="brush: js">// equivalent to o = new Boolean(true); +var o = new Object(true); +</pre> + +<pre class="brush: js">// equivalent to o = new Boolean(false); +var o = new Object(Boolean()); +</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('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.2', 'Object')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-object-objects', 'Object')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Added Object.assign, Object.getOwnPropertySymbols, Object.setPrototypeOf, Object.is</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-object-objects', 'Object')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>Added Object.entries, Object.values and Object.getOwnPropertyDescriptors.</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<div> + + +<p>{{Compat("javascript.builtins.Object")}}</p> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer">Object initializer</a></li> +</ul> diff --git a/files/he/web/javascript/reference/global_objects/promise/index.html b/files/he/web/javascript/reference/global_objects/promise/index.html new file mode 100644 index 0000000000..1f1c71827c --- /dev/null +++ b/files/he/web/javascript/reference/global_objects/promise/index.html @@ -0,0 +1,244 @@ +--- +title: Promise +slug: Web/JavaScript/Reference/Global_Objects/Promise +translation_of: Web/JavaScript/Reference/Global_Objects/Promise +--- +<div>{{JSRef}}</div> + +<p>The <strong><code>Promise</code></strong> object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.</p> + +<div class="note"> +<p><strong>Note:</strong> This article describes the <code>Promise</code> constructor and the methods and properties of such objects. To learn about the way promises work and how you can use them, we advise you to read <a href="/en-US/docs/Web/JavaScript/Guide/Using_promises">Using promises</a> first. The constructor is primarily used to wrap functions that do not already support promises.</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="brush: js">new Promise( /* executor */ function(resolve, reject) { ... } );</pre> + +<h3 id="פרמטרים">פרמטרים</h3> + +<dl> + <dt>executor</dt> + <dd>A function that is passed with the arguments <code>resolve</code> and <code>reject</code>. The <code>executor</code> function is executed immediately by the Promise implementation, passing <code>resolve</code> and <code>reject</code> functions (the executor is called before the <code>Promise</code> constructor even returns the created object). The <code>resolve</code> and <code>reject</code> functions, when called, resolve or reject the promise, respectively. The executor normally initiates some asynchronous work, and then, once that completes, either calls the <code>resolve</code> function to resolve the promise or else rejects it if an error occurred. If an error is thrown in the executor function, the promise is rejected. The return value of the executor is ignored.</dd> +</dl> + +<h2 id="תיאור">תיאור</h2> + +<p>A <code><strong>Promise</strong></code> is a proxy for a value not necessarily known when the promise is created. It allows you to associate handlers with an asynchronous action's eventual success value or failure reason. This lets asynchronous methods return values like synchronous methods: instead of immediately returning the final value, the asynchronous method returns a <em>promise</em> to supply the value at some point in the future.</p> + +<p>A <code>Promise</code> is in one of these states:</p> + +<ul> + <li><em>pending</em>: initial state, neither fulfilled nor rejected.</li> + <li><em>fulfilled</em>: meaning that the operation completed successfully.</li> + <li><em>rejected</em>: meaning that the operation failed.</li> +</ul> + +<p>A pending promise can either be <em>fulfilled</em> with a value, or <em>rejected</em> with a reason (error). When either of these options happens, the associated handlers queued up by a promise's <code>then</code> method are called. (If the promise has already been fulfilled or rejected when a corresponding handler is attached, the handler will be called, so there is no race condition between an asynchronous operation completing and its handlers being attached.)</p> + +<p>As the <code>{{jsxref("Promise.then", "Promise.prototype.then()")}}</code> and <code>{{jsxref("Promise.catch", "Promise.prototype.catch()")}}</code> methods return promises, they can be chained.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15911/promises.png" style="height: 297px; width: 801px;"></p> + +<div class="note"> +<p><strong>Not to be confused with:</strong> Several other languages have mechanisms for lazy evaluation and deferring a computation, which they also call "promises", e.g. Scheme. Promises in JavaScript represent processes which are already happening, which can be chained with callback functions. If you are looking to lazily evaluate an expression, consider the <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">arrow function</a> with no arguments: <code>f = () => <em>expression</em></code> to create the lazily-evaluated expression, and <code>f()</code> to evaluate.</p> +</div> + +<div class="note"> +<p><strong>Note</strong>: A promise is said to be <em>settled</em> if it is either fulfilled or rejected, but not pending. You will also hear the term <em>resolved</em> used with promises — this means that the promise is settled or “locked in” to match the state of another promise. <a href="https://github.com/domenic/promises-unwrapping/blob/master/docs/states-and-fates.md">States and fates</a> contains more details about promise terminology.</p> +</div> + +<h2 id="מאפיינים">מאפיינים</h2> + +<dl> + <dt><code>Promise.length</code></dt> + <dd>Length property whose value is always 1 (number of constructor arguments).</dd> + <dt>{{jsxref("Promise.prototype")}}</dt> + <dd>Represents the prototype for the <code>Promise</code> constructor.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("Promise.all", "Promise.all(iterable)")}}</dt> + <dd>Returns a promise that either fulfills when all of the promises in the iterable argument have fulfilled or rejects as soon as one of the promises in the iterable argument rejects. If the returned promise fulfills, it is fulfilled with an array of the values from the fulfilled promises in the same order as defined in the iterable. If the returned promise rejects, it is rejected with the reason from the first promise in the iterable that rejected. This method can be useful for aggregating results of multiple promises.</dd> + <dt>{{jsxref("Promise.race", "Promise.race(iterable)")}}</dt> + <dd>Returns a promise that fulfills or rejects as soon as one of the promises in the iterable fulfills or rejects, with the value or reason from that promise.</dd> + <dt>{{jsxref("Promise.reject", "Promise.reject(reason)")}}</dt> + <dd>Returns a <code>Promise</code> object that is rejected with the given reason.</dd> + <dt>{{jsxref("Promise.resolve", "Promise.resolve(value)")}}</dt> + <dd>Returns a <code>Promise</code> object that is resolved with the given value. If the value is a thenable (i.e. has a <code>then</code> method), the returned promise will "follow" that thenable, adopting its eventual state; otherwise the returned promise will be fulfilled with the value. Generally, if you don't know if a value is a promise or not, {{jsxref("Promise.resolve", "Promise.resolve(value)")}} it instead and work with the return value as a promise.</dd> +</dl> + +<h2 id="Promise_prototype">Promise prototype</h2> + +<h3 id="Properties">Properties</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Properties')}}</p> + +<h3 id="Methods_2">Methods</h3> + +<p>{{page('en-US/Web/JavaScript/Reference/Global_Objects/Promise/prototype','Methods')}}</p> + +<h2 id="Creating_a_Promise">Creating a Promise</h2> + +<p>A <code>Promise</code> object is created using the <code>new </code>keyword and its constructor. This constructor takes as its argument a function, called the "executor function". This function should take two functions as parameters. The first of these functions (<code>resolve</code>) is called when the asynchronous task completes successfully and returns the results of the task as a value. The second (<code>reject</code>) is called when the task fails, and returns the reason for failure, which is typically an error object.</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>To provide a function with promise functionality, simply have it return a 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>This small example shows the mechanism of a <code>Promise</code>. The <code>testPromise()</code> method is called each time the {{HTMLElement("button")}} is clicked. It creates a promise that will be fulfilled, using {{domxref("window.setTimeout()")}}, to the promise count (number starting from 1) every 1-3 seconds, at random. The <code>Promise()</code> constructor is used to create the promise.</p> + +<p>The fulfillment of the promise is simply logged, via a fulfill callback set using {{jsxref("Promise.prototype.then()","p1.then()")}}. A few logs show how the synchronous part of the method is decoupled from the asynchronous completion of the promise.</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>This example is started by clicking the button. You need a browser that supports <code>Promise</code>. By clicking the button several times in a short amount of time, you'll even see the different promises being fulfilled one after another.</p> + +<p>{{EmbedLiveSample("Advanced_Example", "500", "200")}}</p> + +<h2 id="טעינת_תמונה_באמצעות_XHR">טעינת תמונה באמצעות XHR</h2> + +<p>Another simple example using <code>Promise</code> and {{domxref("XMLHttpRequest")}} to load an image is available at the MDN GitHub <a href="https://github.com/mdn/js-examples/tree/master/promises-test">js-examples</a> repository. You can also <a href="https://mdn.github.io/js-examples/promises-test/">see it in action</a>. Each step is commented and allows you to follow the Promise and XHR architecture closely.</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="ראה_גם">ראה גם</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/he/web/javascript/reference/global_objects/string/index.html b/files/he/web/javascript/reference/global_objects/string/index.html new file mode 100644 index 0000000000..8b8911749e --- /dev/null +++ b/files/he/web/javascript/reference/global_objects/string/index.html @@ -0,0 +1,314 @@ +--- +title: 'String: מחרוזת' +slug: Web/JavaScript/Reference/Global_Objects/String +tags: + - ECMAScript 2015 + - JavaScript + - NeedsTranslation + - Reference + - String + - TopicStub +translation_of: Web/JavaScript/Reference/Global_Objects/String +--- +<div>{{JSRef}}</div> + +<p>The <strong><code>String</code></strong> global object is a constructor for strings or a sequence of characters.</p> + +<h2 id="תחביר">תחביר</h2> + +<p>String literals take the forms:</p> + +<pre class="syntaxbox">'string text' +"string text" +"中文 español Deutsch English देवनागरी العربية português বাংলা русский 日本語 ਪੰਜਾਬੀ 한국어 தமிழ் עברית"</pre> + +<p>Strings can also be created using the <code>String</code> global object directly:</p> + +<pre class="syntaxbox">String(thing)</pre> + +<h3 id="Parameters">Parameters</h3> + +<dl> + <dt><code>thing</code></dt> + <dd>Anything to be converted to a string.</dd> +</dl> + +<h3 id="Template_literals">Template literals</h3> + +<p>Starting with ECMAScript 2015, string literals can also be so-called <a href="/en-US/docs/Web/JavaScript/Reference/Template_literals">Template literals</a>:</p> + +<pre class="syntaxbox">`hello world` +`hello! + world!` +`hello ${who}` +escape `<a>${who}</a>`</pre> + +<dl> +</dl> + +<h3 id="Escape_notation">Escape notation</h3> + +<p>Besides regular, printable characters, special characters can be encoded using escape notation:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Code</th> + <th scope="col">Output</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>\XXX</code></td> + <td>an octal Latin-1 character.</td> + </tr> + <tr> + <td><code>\'</code></td> + <td>single quote</td> + </tr> + <tr> + <td><code>\"</code></td> + <td>double quote</td> + </tr> + <tr> + <td><code>\\</code></td> + <td>backslash</td> + </tr> + <tr> + <td><code>\n</code></td> + <td>new line</td> + </tr> + <tr> + <td><code>\r</code></td> + <td>carriage return</td> + </tr> + <tr> + <td><code>\v</code></td> + <td>vertical tab</td> + </tr> + <tr> + <td><code>\t</code></td> + <td>tab</td> + </tr> + <tr> + <td><code>\b</code></td> + <td>backspace</td> + </tr> + <tr> + <td><code>\f</code></td> + <td>form feed</td> + </tr> + <tr> + <td><code>\uXXXX</code></td> + <td>unicode codepoint</td> + </tr> + <tr> + <td><code>\u{X}</code> ... <code>\u{XXXXXX}</code></td> + <td>unicode codepoint {{experimental_inline}}</td> + </tr> + <tr> + <td><code>\xXX</code></td> + <td>the Latin-1 character</td> + </tr> + </tbody> +</table> + +<div class="note"> +<p>Unlike some other languages, JavaScript makes no distinction between single-quoted strings and double-quoted strings; therefore, the escape sequences above work in strings created with either single or double quotes.</p> +</div> + +<dl> +</dl> + +<h3 id="Long_literal_strings">Long literal strings</h3> + +<p>Sometimes, your code will include strings which are very long. Rather than having lines that go on endlessly, or wrap at the whim of your editor, you may wish to specifically break the string into multiple lines in the source code without affecting the actual string contents. There are two ways you can do this.</p> + +<p>You can use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition_()">+</a> operator to append multiple strings together, like this:</p> + +<pre class="brush: js">let longString = "This is a very long string which needs " + + "to wrap across multiple lines because " + + "otherwise my code is unreadable."; +</pre> + +<p>Or you can use the backslash character ("\") at the end of each line to indicate that the string will continue on the next line. Make sure there is no space or any other character after the backslash (except for a line break), or as an indent; otherwise it will not work. That form looks like this:</p> + +<pre class="brush: js">let longString = "This is a very long string which needs \ +to wrap across multiple lines because \ +otherwise my code is unreadable."; +</pre> + +<p>Both of these result in identical strings being created.</p> + +<h2 id="תיאור">תיאור</h2> + +<p>Strings are useful for holding data that can be represented in text form. Some of the most-used operations on strings are to check their {{jsxref("String.length", "length")}}, to build and concatenate them using the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/String_Operators">+ and += string operators</a>, checking for the existence or location of substrings with the {{jsxref("String.prototype.indexOf()", "indexOf()")}} method, or extracting substrings with the {{jsxref("String.prototype.substring()", "substring()")}} method.</p> + +<h3 id="Character_access">Character access</h3> + +<p>There are two ways to access an individual character in a string. The first is the {{jsxref("String.prototype.charAt()", "charAt()")}} method:</p> + +<pre class="brush: js">return 'cat'.charAt(1); // returns "a" +</pre> + +<p>The other way (introduced in ECMAScript 5) is to treat the string as an array-like object, where individual characters correspond to a numerical index:</p> + +<pre class="brush: js">return 'cat'[1]; // returns "a" +</pre> + +<p>For character access using bracket notation, attempting to delete or assign a value to these properties will not succeed. The properties involved are neither writable nor configurable. (See {{jsxref("Object.defineProperty()")}} for more information.)</p> + +<h3 id="Comparing_strings">Comparing strings</h3> + +<p>C developers have the <code>strcmp()</code> function for comparing strings. In JavaScript, you just use the <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators">less-than and greater-than operators</a>:</p> + +<pre class="brush: js">var a = 'a'; +var b = 'b'; +if (a < b) { // true + console.log(a + ' is less than ' + b); +} else if (a > b) { + console.log(a + ' is greater than ' + b); +} else { + console.log(a + ' and ' + b + ' are equal.'); +} +</pre> + +<p>A similar result can be achieved using the {{jsxref("String.prototype.localeCompare()", "localeCompare()")}} method inherited by <code>String</code> instances.</p> + +<h3 id="Distinction_between_string_primitives_and_String_objects">Distinction between string primitives and <code>String</code> objects</h3> + +<p>Note that JavaScript distinguishes between <code>String</code> objects and primitive string values. (The same is true of {{jsxref("Boolean")}} and {{jsxref("Global_Objects/Number", "Numbers")}}.)</p> + +<p>String literals (denoted by double or single quotes) and strings returned from <code>String</code> calls in a non-constructor context (i.e., without using the {{jsxref("Operators/new", "new")}} keyword) are primitive strings. JavaScript automatically converts primitives to <code>String</code> objects, so that it's possible to use <code>String</code> object methods for primitive strings. In contexts where a method is to be invoked on a primitive string or a property lookup occurs, JavaScript will automatically wrap the string primitive and call the method or perform the property lookup.</p> + +<pre class="brush: js">var s_prim = 'foo'; +var s_obj = new String(s_prim); + +console.log(typeof s_prim); // Logs "string" +console.log(typeof s_obj); // Logs "object" +</pre> + +<p>String primitives and <code>String</code> objects also give different results when using {{jsxref("Global_Objects/eval", "eval()")}}. Primitives passed to <code>eval</code> are treated as source code; <code>String</code> objects are treated as all other objects are, by returning the object. For example:</p> + +<pre class="brush: js">var s1 = '2 + 2'; // creates a string primitive +var s2 = new String('2 + 2'); // creates a String object +console.log(eval(s1)); // returns the number 4 +console.log(eval(s2)); // returns the string "2 + 2" +</pre> + +<p>For these reasons, the code may break when it encounters <code>String</code> objects when it expects a primitive string instead, although generally, authors need not worry about the distinction.</p> + +<p>A <code>String</code> object can always be converted to its primitive counterpart with the {{jsxref("String.prototype.valueOf()", "valueOf()")}} method.</p> + +<pre class="brush: js">console.log(eval(s2.valueOf())); // returns the number 4 +</pre> + +<div class="note"><strong>Note:</strong> For another possible approach to strings in JavaScript, please read the article about <a href="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code> — a C-like representation of strings based on typed arrays</a>.</div> + +<h2 id="מאפיינים">מאפיינים</h2> + +<dl> + <dt>{{jsxref("String.prototype")}}</dt> + <dd>Allows the addition of properties to a <code>String</code> object.</dd> +</dl> + +<h2 id="Methods">Methods</h2> + +<dl> + <dt>{{jsxref("String.fromCharCode()")}}</dt> + <dd>Returns a string created by using the specified sequence of Unicode values.</dd> + <dt>{{jsxref("String.fromCodePoint()")}}</dt> + <dd>Returns a string created by using the specified sequence of code points.</dd> + <dt>{{jsxref("String.raw()")}} {{experimental_inline}}</dt> + <dd>Returns a string created from a raw template string.</dd> +</dl> + +<h2 id="String_generic_methods"><code>String</code> generic methods</h2> + +<div class="warning"> +<p><strong>String generics are non-standard, deprecated and will get removed near future</strong>.</p> +</div> + +<p>The <code>String</code> instance methods are also available in Firefox as of JavaScript 1.6 (<strong>not</strong> part of the ECMAScript standard) on the <code>String</code> object for applying <code>String</code> methods to any object:</p> + +<pre class="brush: js">var num = "15"; +console.log(num.replace("5", "2")); +</pre> + +<p>For migrating away from String generics, see also <a href="/en-US/docs/Web/JavaScript/Reference/Errors/Deprecated_string_generics">Warning: String.x is deprecated; use String.prototype.x instead</a>.</p> + +<p>{{jsxref("Global_Objects/Array", "Generics", "#Array_generic_methods", 1)}} are also available on {{jsxref("Array")}} methods.</p> + +<h2 id="String_instances"><code>String</code> instances</h2> + +<h3 id="Properties">Properties</h3> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Properties')}}</div> + +<h3 id="Methods_2">Methods</h3> + +<h4 id="Methods_unrelated_to_HTML">Methods unrelated to HTML</h4> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'Methods_unrelated_to_HTML')}}</div> + +<h4 id="HTML_wrapper_methods">HTML wrapper methods</h4> + +<div>{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/prototype', 'HTML_wrapper_methods')}}</div> + +<h2 id="דוגמאות">דוגמאות</h2> + +<h3 id="String_conversion">String conversion</h3> + +<p>It's possible to use <code>String</code> as a more reliable {{jsxref("String.prototype.toString()", "toString()")}} alternative, as it works when used on {{jsxref("null")}}, {{jsxref("undefined")}}, and on {{jsxref("Symbol", "symbols")}}. For example:</p> + +<pre class="brush: js">var outputStrings = []; +for (var i = 0, n = inputValues.length; i < n; ++i) { + outputStrings.push(String(inputValues[i])); +} +</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('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-15.5', 'String')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES2015', '#sec-string-objects', 'String')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-string-objects', 'String')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="תאימות_דפדפן">תאימות דפדפן</h2> + +<p class="hidden">The compatibility table in this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> + +<p>{{Compat("javascript.builtins.String",2)}}</p> + +<h2 id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{domxref("DOMString")}}</li> + <li><a href="/en-US/Add-ons/Code_snippets/StringView"><code>StringView</code> — a C-like representation of strings based on typed arrays</a></li> + <li><a href="/en-US/docs/Web/API/DOMString/Binary">Binary strings</a></li> +</ul> diff --git a/files/he/web/javascript/reference/index.html b/files/he/web/javascript/reference/index.html new file mode 100644 index 0000000000..1f46b431e0 --- /dev/null +++ b/files/he/web/javascript/reference/index.html @@ -0,0 +1,58 @@ +--- +title: JavaScript reference +slug: Web/JavaScript/Reference +tags: + - JavaScript + - NeedsTranslation + - TopicStub +translation_of: Web/JavaScript/Reference +--- +<div dir="rtl">{{JsSidebar}}</div> + +<div dir="rtl">הדף הנ"ל משמש כמאגר של עובדות ורפרנסים לנושאים מרכזיים בשפת התכנות ג'אווה סקריפט. קרא עוד על <a href="/en-US/docs/Web/JavaScript/Reference/About">עמוד זה</a><strong>.</strong></div> + +<div dir="rtl"> </div> + +<h2 dir="rtl" id="אובייקטים_גלובאלים">אובייקטים גלובאלים</h2> + +<p dir="rtl">פרק זה הוא תיעוד של כלל האובייקטים שמובנים כסטנדרט בג'אווה סקריפט, יחד עם המתודות (methods) והתכונות (properties) שלהם.</p> + +<div dir="rtl">{{page('/en-US/docs/Web/JavaScript/Reference/Global_Objects', 'Standard objects (by category)')}}</div> + +<h2 dir="rtl" id="הצהרות">הצהרות</h2> + +<p dir="rtl">פרק זה הוא תיעוד של כלל <a href="/en-US/docs/Web/JavaScript/Reference/Statements">ההצהרות והמשפטים* בג'אווה סקריפט</a>.</p> + +<p dir="rtl">* התרגום של statement ו declaration לעברית הוא "הצהרה".<br> + כאן הכוונה להצהרה ( declaration ), לדוגמא - var a = 123.<br> + ומשפט (statement), לדוגמא - משפטי if.</p> + +<div dir="rtl">{{page('/he/docs/Web/JavaScript/Reference/Statements', 'Statements_and_declarations_by_category')}}</div> + +<h2 dir="rtl" id="ביטויים_ואופרטורים">ביטויים ואופרטורים</h2> + +<p dir="rtl">פרק זה הוא תיעוד של כלל <a href="/en-US/docs/Web/JavaScript/Reference/Operators">הביטויים והאופרטורים בג'אווה סקריפט</a>.</p> + +<div dir="rtl">{{page('/en-US/docs/Web/JavaScript/Reference/Operators', 'Expressions_and_operators_by_category')}}</div> + +<h2 dir="rtl" id="פונקציות">פונקציות</h2> + +<p dir="rtl">פרק זה הוא תיעוד של מהלך העבודה עם <a href="/en-US/docs/Web/JavaScript/Reference/Functions">פונקציות בג'אווה סקריפט</a> בפיתוח תוכנות.</p> + +<ul dir="rtl"> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/arguments">ארגומנטים</a></code></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">פונקציות חץ</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters">פרמטרים ברירת מחדל</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">פרמטרי רסט</a>*</li> +</ul> + +<p dir="rtl">* סביר שיש תרגום טוב יותר למונח rest parameters./</p> + +<h2 dir="rtl" id="רפרנסים_נוספים">רפרנסים נוספים</h2> + +<ul dir="rtl"> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">דקדוק לקסיקלי</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Data_structures">סוגי ומבני נתונים </a></li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Strict_mode">מצב קפדני (strict mode)</a></li> + <li><a href="/he/docs//en-US/docs/Web/JavaScript/Reference/Deprecated_and_obsolete_features">פיצ'רים שהוצאו משימוש</a></li> +</ul> diff --git a/files/he/web/javascript/reference/operators/destructuring_assignment/index.html b/files/he/web/javascript/reference/operators/destructuring_assignment/index.html new file mode 100644 index 0000000000..07b2957fe2 --- /dev/null +++ b/files/he/web/javascript/reference/operators/destructuring_assignment/index.html @@ -0,0 +1,416 @@ +--- +title: השמה מפורקת +slug: Web/JavaScript/Reference/Operators/Destructuring_assignment +translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment +--- +<div style="direction: rtl;">{{jsSidebar("Operators")}}</div> + +<p style="direction: rtl;">תחביר <strong>השמה מפורקת </strong>הוא ביטוי JavaScript המאפשר לחלץ נתונים ממערכים או אובייקטים לערכים מפורשים, בעזרת שימוש בתחביר שמשקף את מבנה המערך או האובייקט המילולי.</p> + +<h2 id="תחביר" style="direction: rtl;">תחביר</h2> + +<pre class="brush:js">var a, b, rest; +[a, b] = [1, 2] +console.log(a); // 1 +console.log(b); // 2 + +[a, b, ...rest] = [1, 2, 3, 4, 5] +console.log(a); // 1 +console.log(b); // 2 +console.log(rest); // [3, 4, 5] + +({a, b} = {a: 1, b :2}); +console.log(a); // 1 console.log(b); // 2 + +({a, b, ...rest} = {a: 1, b: 2, c: 3, d: 4}); //ES2016 +console.log(a); // 1 +console.log(b); // 2 +console.log(rest); // {c: 3, d: 4} +</pre> + +<div class="note"> +<p style="direction: rtl;">{a, b} = {a:1, b:2} הוא לא תחביר עצמאי תקף, כי {a, b} בצד השמאלי נחשב כבלוק ולא כאובייקט מילולי.</p> + +<p dir="rtl">עם זאת, ({a, b} = {a:1, b:2}) תקף, כמו גם {var {a, b} = {a:1, b:2.</p> +</div> + +<h2 id="תאור" style="direction: rtl;">תאור</h2> + +<div style="direction: rtl;"><span style="line-height: 1.5;">ביטויים ליטרלים של אובייקטים או מערכים מספקים דרך פשוטה ליצירה של חבילת נתונים <em>לפי דרישה</em>. לאחר יצירת חבילות נתונים אלה, ניתן להשתמש בהם בכל דרך שתרצה. ניתן אפילו להחזיר אותם מפונקציות.</span></div> + +<pre class="brush: js">var x = [10, 20, 30, 40, 50];</pre> + +<p style="direction: rtl;">השמה מפורקת משתמשת בתחביר דומה, אך צד שמאל של ההשמה מציין אילו ערכים לפרוק ממשתנה המקור.</p> + +<pre class="brush: js" style="direction: rtl;">var x = [10, 20, 30, 40, 50]; +var [y, x] = x; +console.log(y); // 10 +console.log(z); // 20 +</pre> + +<p style="direction: rtl;">דבר אחד שימושי במיוחד שאתה יכול לעשות עם השמה מפורקת הוא לקרוא מבנה שלם בהשמה אחת, אם כי יש עוד מספר דברים מעניינים שאתה יכול לעשות איתם, כפי שמוצג בדוגמאות הבאות.</p> + +<p style="direction: rtl;">יכולת זו דומה לתכונות קיימות בשפות כמו פרל ופייתון.</p> + +<h2 id="פירוק_מערך" style="direction: rtl;">פירוק מערך</h2> + +<h3 id="דוגמה_פשוטה" style="direction: rtl;">דוגמה פשוטה</h3> + +<pre class="brush: js">var foo = ["one", "two", "three"]; + +// without destructuring +var one = foo[0]; +var two = foo[1]; +var three = foo[2]; + +// with destructuring +var [one, two, three] = foo;</pre> + +<h3 id="השמה_ללא_הצהרה" style="direction: rtl;">השמה ללא הצהרה</h3> + +<p style="direction: rtl;">השמה מפורקת יכולה להתבצע ללא הצהרה בעת ההשמה.</p> + +<pre class="brush:js">var a, b; + +[a, b] = [1, 2];</pre> + +<h3 id="החלפת_משתנים" style="direction: rtl;">החלפת משתנים</h3> + +<p style="direction: rtl;">לאחר ביצוע הקוד הזה, b הוא 1 וa הוא 3. ללא השמה מפורקת, החלפת שני ערכים דורשת שימוש במשתנה זמני (או, בכמה שפות נמוכות, טריק ההחלפת XOR).</p> + +<pre class="brush:js">var a = 1; +var b = 3; + +[a, b] = [b, a];</pre> + +<h3 id="החזרה_מרובת_ערכים" style="direction: rtl;">החזרה מרובת ערכים</h3> + +<p style="direction: rtl;">תודה להשמה מפורקת פונקציות יכולות להחזיר ערכים מרובים. למרות שתמיד היה ניתן להחזיר מערך מפונקציה, זה עדיין מספק מידה נוספת של גמישות.</p> + +<pre class="brush:js">function f() { + return [1, 2]; +} +</pre> + +<p style="direction: rtl;">כפי שניתן לראות, החזרת תוצאות נעשית באמצעות סימון כמו מערך, עם כל הערכים בתוך סוגריים. אתה יכול להחזיר מספר בלתי מוגבל של תוצאות בדרך זו. בדוגמא זו, ()f מחזירה את הערכים [1, 2] כפלט שלה.</p> + +<pre class="brush:js">var a, b; +[a, b] = f(); +console.log("A is " + a + " B is " + b); +</pre> + +<p style="direction: rtl;">ההצהרה ()a, b] = f] מקצה את התוצאות של הפונקציה למשתנים בסוגריים, בהתאמה: a הוא 1 ו- b מוגדר 2.</p> + +<p style="direction: rtl;">גם אתה יכול לקבל את ערכי החזרה כמערך:</p> + +<pre class="brush:js">var a = f(); +console.log("A is " + a); +</pre> + +<p style="direction: rtl;">במקרה זה, a הוא מערך המכיל את הערכים 1 ו-2.</p> + +<h3 id="התעלמות_ממספר_ערכי_החזר" style="direction: rtl;">התעלמות ממספר ערכי החזר</h3> + +<p style="direction: rtl;">אתה יכול להתעלם מערכי החזר שאתה לא מעוניין בהם:</p> + +<pre class="brush:js">function f() { + return [1, 2, 3]; +} + +var [a, , b] = f(); +console.log("A is " + a + " B is " + b); +</pre> + +<p style="direction: rtl;">לאחר הרצת קוד זה, a הוא 1 ו- b הוא 3. הערך 2 נדחה. אתה יכול להתעלם מכל ערכי ההחזר בדרך זו. לדוגמה:</p> + +<pre class="brush:js">[,,] = f(); +</pre> + +<h3 id="משיכת_ערכים_מתוצאה_של_regular_expression" style="direction: rtl;">משיכת ערכים מתוצאה של regular expression</h3> + +<p dir="rtl">כאשר המתודה <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec"> exec</a> </code>של regular expression מוצאת התאמה, היא מחזירה מערך המכיל במיקום הראשון את כל ההתאמה של המחרוזת ולאחר מכן את כל החלקים של המחרוזת שתאמה כל קבוצה בסוגריים בregular expression. השמה מפורקת מאפשרת לך למשוך את החלקים מתוך מערך זה בקלות, תוך התעלמות מההתאמה המלאה אם היא לא נחוצה.</p> + +<pre class="brush:js">var url = "https://developer.mozilla.org/en-US/Web/JavaScript"; + +var parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url); +var [, protocol, fullhost, fullpath] = parsedURL; + +console.log(protocol); // logs "https" +</pre> + +<h2 id="פירוק_אובייקט" style="direction: rtl;">פירוק אובייקט</h2> + +<h3 id="דוגמה_פשוטה_2" style="direction: rtl;">דוגמה פשוטה</h3> + +<pre class="brush: js">var o = {p: 42, q: true}; +var {p, q} = o; + +console.log(p); // 42 +console.log(q); // true + +// Assign new variable names +var {p: foo, q: bar} = o; + +console.log(foo); // 42 +console.log(bar); // true </pre> + +<h3 id="השמה_ללא_הצהרה_2" style="direction: rtl;">השמה ללא הצהרה</h3> + +<p style="direction: rtl;">השמה מפורקת יכולה להתבצע ללא הצהרה בעת ההשמה.</p> + +<pre class="brush:js">var a, b; + +({a, b} = {a:1, b:2});</pre> + +<div class="note"> +<p>The <code>( .. )</code> around the assignment statement is required syntax when using object literal destructuring assignment without a declaration.</p> +</div> + +<h3 id="ברירות_המחדל_של_ארגומנטים_מפונקציה">ברירות המחדל של ארגומנטים מפונקציה</h3> + +<h4 id="גרסת_ES5">גרסת ES5</h4> + +<pre class="brush: js">function drawES5Chart(options) { + options = options === undefined ? {} : options; + var size = options.size === undefined ? 'big' : options.size; + var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords; + var radius = options.radius === undefined ? 25 : options.radius; + console.log(size, cords, radius); + // now finally do some chart drawing +} + +drawES5Chart({ + cords: { x: 18, y: 30 }, + radius: 30 +});</pre> + +<h4 id="גרסת_ES2015">גרסת ES2015</h4> + +<pre class="brush: js">function drawES2015Chart({size: size = 'big', cords: cords = { x: 0, y: 0 }, radius: radius = 25} = {}) +{ + console.log(size, cords, radius); + // do some chart drawing +} + +drawES2015Chart({ + cords: { x: 18, y: 30 }, + radius: 30 +});</pre> + +<div class="note"> +<p>In Firefox, default values for destructuring assignments are not yet implemented: var { x = 3 } = {} and var [foo = "bar"] = []. See {{bug(932080)}} for destructured default values in functions.</p> +</div> + +<h3 id="Module_(non-ES2015)_loading">Module (non-ES2015) loading</h3> + +<p>Destructuring can help to load specific subsets of a non-ES2015 module like here in the <a href="/en-US/Add-ons/SDK">Add-on SDK</a>:</p> + +<pre class="brush: js">const { Loader, main } = require('toolkit/loader'); +</pre> + +<h3 id="Nested_object_and_array_destructuring">Nested object and array destructuring</h3> + +<pre class="brush:js">var metadata = { + title: "Scratchpad", + translations: [ + { + locale: "de", + localization_tags: [ ], + last_edit: "2014-04-14T08:43:37", + url: "/de/docs/Tools/Scratchpad", + title: "JavaScript-Umgebung" + } + ], + url: "/en-US/docs/Tools/Scratchpad" +}; + +var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata; + +console.log(englishTitle); // "Scratchpad" +console.log(localeTitle); // "JavaScript-Umgebung"</pre> + +<h3 id="For_of_iteration_and_destructuring">For of iteration and destructuring</h3> + +<pre class="brush: js">var people = [ + { + name: "Mike Smith", + family: { + mother: "Jane Smith", + father: "Harry Smith", + sister: "Samantha Smith" + }, + age: 35 + }, + { + name: "Tom Jones", + family: { + mother: "Norah Jones", + father: "Richard Jones", + brother: "Howard Jones" + }, + age: 25 + } +]; + +for (var {name: n, family: { father: f } } of people) { + console.log("Name: " + n + ", Father: " + f); +} + +// "Name: Mike Smith, Father: Harry Smith" +// "Name: Tom Jones, Father: Richard Jones"</pre> + +<h3 id="Pulling_fields_from_objects_passed_as_function_parameter">Pulling fields from objects passed as function parameter</h3> + +<pre class="brush:js">function userId({id}) { + return id; +} + +function whois({displayName: displayName, fullName: {firstName: name}}){ + console.log(displayName + " is " + name); +} + +var user = { + id: 42, + displayName: "jdoe", + fullName: { + firstName: "John", + lastName: "Doe" + } +}; + +console.log("userId: " + userId(user)); // "userId: 42" +whois(user); // "jdoe is John"</pre> + +<p>This pulls the <code>id</code>, <code>displayName</code> and <code>firstName</code> from the user object and prints them.</p> + +<h3 id="Computed_object_property_names_and_destructuring">Computed object property names and destructuring</h3> + +<p>Computed property names, like on <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names">object literals</a>, can be used with destructuring.</p> + +<pre class="brush: js">let key = "z"; +let { [key]: foo } = { z: "bar" }; + +console.log(foo); // "bar" +</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-destructuring-assignment', 'Destructuring assignment')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("1.8.1") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>7.1</td> + </tr> + <tr> + <td>Computed property names</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoDesktop("34") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Spread operator</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoDesktop("34") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("1.0") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>8</td> + </tr> + <tr> + <td>Computed property names</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{ CompatGeckoMobile("34") }}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + <tr> + <td>Spread operator</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{ CompatGeckoMobile("34") }}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Firefox-specific_notes">Firefox-specific notes</h2> + +<ul> + <li>Firefox provided a non-standard language extension in <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JS1.7</a> for destructuring. This extension has been removed in Gecko 40 {{geckoRelease(40)}}. See {{bug(1083498)}}.</li> + <li>Starting with Gecko 41 {{geckoRelease(41)}} and to comply with the ES2015 specification, parenthesized destructuring patterns, like <code>([a, b]) = [1, 2]</code> or <code>({a, b}) = { a: 1, b: 2 }</code>, are now considered invalid and will throw a {{jsxref("SyntaxError")}}. See <a class="external external-icon" href="http://whereswalden.com/2015/06/20/new-changes-to-make-spidermonkeys-and-firefoxs-parsing-of-destructuring-patterns-more-spec-compliant/">Jeff Walden's blog post</a> and {{bug(1146136)}} for more details.</li> +</ul> + +<h2 dir="rtl" id="ראה_גם">ראה גם</h2> + +<ul dir="rtl"> + <li><a href="/he/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">אופרטורי השמה</a></li> + <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/">"ES6 in Depth: Destructuring" on hacks.mozilla.org</a></li> +</ul> diff --git a/files/he/web/javascript/reference/operators/index.html b/files/he/web/javascript/reference/operators/index.html new file mode 100644 index 0000000000..08b776e8d8 --- /dev/null +++ b/files/he/web/javascript/reference/operators/index.html @@ -0,0 +1,289 @@ +--- +title: Expressions and operators +slug: Web/JavaScript/Reference/Operators +tags: + - JavaScript + - NeedsTranslation + - Operators + - TopicStub +translation_of: Web/JavaScript/Reference/Operators +--- +<div>{{jsSidebar("Operators")}}</div> + +<p>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 the function's execution context.</dd> + <dt>{{jsxref("Operators/function", "function")}}</dt> + <dd>The <code>function</code> keyword defines a function expression.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/class", "class")}}</dt> + <dd>The <code>class</code> keyword defines a class expression.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/function*", "function*")}}</dt> + <dd>The <code>function*</code> keyword defines a generator function expression.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/yield", "yield")}}</dt> + <dd>Pause and resume a generator function</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/yield*", "yield*")}}</dt> + <dd>Delegate to another generator function or iterable object.</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>{{experimental_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}</dt> + <dd>Array comprehensions.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}</dt> + <dd>Generator comprehensions.</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>{{experimental_inline}} <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>{{experimental_inline}} {{jsxref("Operators/super", "super")}}</dt> + <dd>The <code>super</code> keyword calls the parent constructor.</dd> + <dt>{{experimental_inline}} {{jsxref("Operators/Spread_operator", "...obj")}}</dt> + <dd>The spread operator 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>{{experimental_inline}} {{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> + +<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>{{experimental_inline}} {{jsxref("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br> + {{experimental_inline}} {{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">Non-standard features</h3> + +<dl> + <dt>{{non-standard_inline}} {{jsxref("Operators/Legacy_generator_function", "Legacy generator function", "", 1)}}</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>{{non-standard_inline}} {{jsxref("Operators/Expression_closures", "Expression closures", "", 1)}}</dt> + <dd>The expression closure syntax is a shorthand for writing simple function.</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('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: Spread operator, destructuring assignment, <code>super</code> keyword, Array comprehensions, Generator comprehensions</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-11', 'Expressions')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-11', 'Expressions')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<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/he/web/javascript/reference/operators/operator_precedence/index.html b/files/he/web/javascript/reference/operators/operator_precedence/index.html new file mode 100644 index 0000000000..2f22b36031 --- /dev/null +++ b/files/he/web/javascript/reference/operators/operator_precedence/index.html @@ -0,0 +1,330 @@ +--- +title: Operator precedence +slug: Web/JavaScript/Reference/Operators/Operator_Precedence +translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence +--- +<div dir="rtl">{{jsSidebar("Operators")}}</div> + +<p style="direction: rtl;">קדימות אופרטורים קובעת את הסדר שבו מעריכים את תוצאות האופרטורים. אופרטורים בעלי קדימות גבוהה יותר יוערכו ראשונים.</p> + +<p style="direction: rtl;">דוגמא נפוצה:</p> + +<pre class="brush: js">3 + 4 * 5 // מחזיר 23 +</pre> + +<p style="direction: rtl;">לאופרטור הכפל ("*") יש קדימות גבוהה יותר מאשר לאופרטור החיבור ("<code>+</code>") ולכן יוערך ראשון.</p> + +<h2 id="אסוציטיביות" style="direction: rtl;">אסוציטיביות</h2> + +<p dir="rtl">אסוציטיביות קובעת את הסדר שבו מעריכים אופרטורים בעלי קדימות זהה. למשל, חשבו על הביטוי הבא:</p> + +<pre class="syntaxbox" dir="rtl">a OP b OP c +</pre> + +<p dir="rtl">אסוציטיביות שמאלית (משמאל לימין) פירושה שמעריכים (a OP b) OP c , ואסוציטיביות ימנית (מימין לשמאל) פירושה שמעריכים <code>a OP (b OP c)</code>. לאופרטורי השמה יש אסוציטיביות ימנית, אז אפשר לכתוב:</p> + +<pre class="brush: js" dir="rtl">a = b = 5; +</pre> + +<p dir="rtl">ולצפות ש-a ו-b יקבלו את הערך 5. זאת משום שאופרטור ההשמה מחזיר את הערך שהושם. תחילה, הערך 5 מושם ל-b. אחר כך הערך של b מושם ל-a.</p> + +<h2 dir="rtl" id="טבלה">טבלה</h2> + +<p dir="rtl">הטבלה הבאה ממויינת לפי קדימות מהגבוה (19) לנמוך (0).</p> + +<table class="fullwidth-table" dir="rtl" style="text-align: right;"> + <tbody> + <tr> + <th dir="ltr">אופרטור</th> + <th dir="ltr">אסוציטיביות</th> + <th dir="ltr">סוג האופרטור</th> + <th dir="ltr">קדימות</th> + </tr> + <tr> + <td dir="ltr"><code>( … )</code></td> + <td dir="ltr">n/a</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Grouping">Grouping</a></td> + <td dir="ltr">19</td> + </tr> + <tr> + <td dir="ltr"><code>… . …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Dot_notation">Member Access</a></td> + <td dir="ltr" rowspan="3">18</td> + </tr> + <tr> + <td dir="ltr"><code>… [ … ]</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors#Dot_notation">Computed Member Access</a></td> + </tr> + <tr> + <td dir="ltr"><code>new … ( … )</code></td> + <td dir="ltr">n/a</td> + <td dir="ltr"><a href="/en-US/docs/JavaScript/Reference/Operators/Special/new" title="JavaScript/Reference/Operators/Special_Operators/new_Operator">new</a> (עם רשימת ארכומנטים)</td> + </tr> + <tr> + <td dir="ltr"><code>… ( <var>… </var>)</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Guide/Functions" title="JavaScript/Reference/Operators/Special_Operators/function_call">Function Call</a></td> + <td dir="ltr" rowspan="2">17</td> + </tr> + <tr> + <td dir="ltr"><code>new …</code></td> + <td dir="ltr">ימנית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new" title="JavaScript/Reference/Operators/Special_Operators/new_Operator">new</a> (without argument list)</td> + </tr> + <tr> + <td dir="ltr"><code>… ++</code></td> + <td dir="ltr">n/a</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment" title="JavaScript/Reference/Operators/Arithmetic_Operators">Postfix Increment</a></td> + <td dir="ltr" rowspan="2">16</td> + </tr> + <tr> + <td dir="ltr"><code>… --</code></td> + <td dir="ltr">n/a</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement" title="JavaScript/Reference/Operators/Arithmetic_Operators">Postfix Decrement</a></td> + </tr> + <tr> + <td dir="ltr"><code>! …</code></td> + <td dir="ltr">ימנית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT" title="JavaScript/Reference/Operators/Logical_Operators">Logical NOT</a></td> + <td dir="ltr" rowspan="9">15</td> + </tr> + <tr> + <td dir="ltr"><code>~ …</code></td> + <td dir="ltr">ימנית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitwise NOT</a></td> + </tr> + <tr> + <td dir="ltr"><code>+ …</code></td> + <td dir="ltr">ימנית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus" title="JavaScript/Reference/Operators/Arithmetic_Operators">Unary Plus</a></td> + </tr> + <tr> + <td dir="ltr"><code>- …</code></td> + <td dir="ltr">ימנית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_negation" title="JavaScript/Reference/Operators/Arithmetic_Operators">Unary Negation</a></td> + </tr> + <tr> + <td dir="ltr"><code>++ …</code></td> + <td dir="ltr">ימנית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment" title="JavaScript/Reference/Operators/Arithmetic_Operators">Prefix Increment</a></td> + </tr> + <tr> + <td dir="ltr"><code>-- …</code></td> + <td dir="ltr">ימנית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement" title="JavaScript/Reference/Operators/Arithmetic_Operators">Prefix Decrement</a></td> + </tr> + <tr> + <td dir="ltr"><code>typeof …</code></td> + <td dir="ltr">ימנית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/typeof" title="JavaScript/Reference/Operators/Special_Operators/typeof_Operator">typeof</a></td> + </tr> + <tr> + <td dir="ltr"><code>void …</code></td> + <td dir="ltr">ימנית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/void" title="JavaScript/Reference/Operators/Special_Operators/void_Operator">void</a></td> + </tr> + <tr> + <td dir="ltr"><code>delete …</code></td> + <td dir="ltr">ימנית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/delete" title="JavaScript/Reference/Operators/Special_Operators/delete_Operator">delete</a></td> + </tr> + <tr> + <td dir="ltr"><code>… ** …</code></td> + <td dir="ltr">ימנית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation" title="JavaScript/Reference/Operators/Arithmetic_Operators">Exponentiation</a></td> + <td dir="ltr" rowspan="4">14</td> + </tr> + <tr> + <td dir="ltr"><code>… * …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Multiplication" title="JavaScript/Reference/Operators/Arithmetic_Operators">Multiplication</a></td> + </tr> + <tr> + <td dir="ltr"><code>… / …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Division" title="JavaScript/Reference/Operators/Arithmetic_Operators">Division</a></td> + </tr> + <tr> + <td dir="ltr"><code>… % …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder" title="JavaScript/Reference/Operators/Arithmetic_Operators">Remainder</a></td> + </tr> + <tr> + <td dir="ltr"><code>… + …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition" title="JavaScript/Reference/Operators/Arithmetic_Operators">Addition</a></td> + <td dir="ltr" rowspan="2">13</td> + </tr> + <tr> + <td dir="ltr"><code>… - …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Subtraction" title="JavaScript/Reference/Operators/Arithmetic_Operators">Subtraction</a></td> + </tr> + <tr> + <td dir="ltr"><code>… << …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitwise Left Shift</a></td> + <td dir="ltr" rowspan="3">12</td> + </tr> + <tr> + <td dir="ltr"><code>… >> …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitwise Right Shift</a></td> + </tr> + <tr> + <td dir="ltr"><code>… >>> …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitwise Unsigned Right Shift</a></td> + </tr> + <tr> + <td dir="ltr"><code>… < …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_operator" title="JavaScript/Reference/Operators/Comparison_Operators">Less Than</a></td> + <td dir="ltr" rowspan="6">11</td> + </tr> + <tr> + <td dir="ltr"><code>… <= …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than__or_equal_operator" title="JavaScript/Reference/Operators/Comparison_Operators">Less Than Or Equal</a></td> + </tr> + <tr> + <td dir="ltr"><code>… > …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_operator" title="JavaScript/Reference/Operators/Comparison_Operators">Greater Than</a></td> + </tr> + <tr> + <td dir="ltr"><code>… >= …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_or_equal_operator" title="JavaScript/Reference/Operators/Comparison_Operators">Greater Than Or Equal</a></td> + </tr> + <tr> + <td dir="ltr"><code>… in …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/in" title="JavaScript/Reference/Operators/Special_Operators/in_Operator">in</a></td> + </tr> + <tr> + <td dir="ltr"><code>… instanceof …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/instanceof" title="JavaScript/Reference/Operators/Special_Operators/instanceof_Operator">instanceof</a></td> + </tr> + <tr> + <td dir="ltr"><code>… == …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality" title="JavaScript/Reference/Operators/Comparison_Operators">Equality</a></td> + <td dir="ltr" rowspan="4">10</td> + </tr> + <tr> + <td dir="ltr"><code>… != …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Inequality" title="JavaScript/Reference/Operators/Comparison_Operators">Inequality</a></td> + </tr> + <tr> + <td dir="ltr"><code>… === …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity" title="JavaScript/Reference/Operators/Comparison_Operators">Strict Equality</a></td> + </tr> + <tr> + <td dir="ltr"><code>… !== …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Nonidentity" title="JavaScript/Reference/Operators/Comparison_Operators">Strict Inequality</a></td> + </tr> + <tr> + <td dir="ltr"><code>… & …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_AND" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitwise AND</a></td> + <td dir="ltr">9</td> + </tr> + <tr> + <td dir="ltr"><code>… ^ …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitwise XOR</a></td> + <td dir="ltr">8</td> + </tr> + <tr> + <td dir="ltr"><code>… | …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_OR" title="JavaScript/Reference/Operators/Bitwise_Operators">Bitwise OR</a></td> + <td dir="ltr">7</td> + </tr> + <tr> + <td dir="ltr"><code>… && …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_AND" title="JavaScript/Reference/Operators/Logical_Operators">Logical AND</a></td> + <td dir="ltr">6</td> + </tr> + <tr> + <td dir="ltr"><code>… || …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR" title="JavaScript/Reference/Operators/Logical_Operators">Logical OR</a></td> + <td dir="ltr">5</td> + </tr> + <tr> + <td dir="ltr"><code>… ? … : …</code></td> + <td dir="ltr">ימנית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator" title="JavaScript/Reference/Operators/Special_Operators/Conditional_Operator">Conditional</a></td> + <td dir="ltr">4</td> + </tr> + <tr> + <td dir="ltr"><code>… = …</code></td> + <td dir="ltr" rowspan="13">ימנית</td> + <td dir="ltr" rowspan="13"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators" title="JavaScript/Reference/Operators/Assignment_Operators">Assignment</a></td> + <td dir="ltr" rowspan="13">3</td> + </tr> + <tr> + <td dir="ltr"><code>… += …</code></td> + </tr> + <tr> + <td dir="ltr"><code>… -= …</code></td> + </tr> + <tr> + <td dir="ltr"><code>… **= …</code></td> + </tr> + <tr> + <td dir="ltr"><code>… *= …</code></td> + </tr> + <tr> + <td dir="ltr"><code>… /= …</code></td> + </tr> + <tr> + <td dir="ltr"><code>… %= …</code></td> + </tr> + <tr> + <td dir="ltr"><code>… <<= …</code></td> + </tr> + <tr> + <td dir="ltr"><code>… >>= …</code></td> + </tr> + <tr> + <td dir="ltr"><code>… >>>= …</code></td> + </tr> + <tr> + <td dir="ltr"><code>… &= …</code></td> + </tr> + <tr> + <td dir="ltr"><code>… ^= …</code></td> + </tr> + <tr> + <td dir="ltr"><code>… |= …</code></td> + </tr> + <tr> + <td dir="ltr"><code>yield …</code></td> + <td dir="ltr">ימנית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/yield" title="JavaScript/Reference/Operators/yield">yield</a></td> + <td dir="ltr">2</td> + </tr> + <tr> + <td dir="ltr"><code>...</code> …</td> + <td dir="ltr">n/a</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator" title="JavaScript/Reference/Operators/Spread_operator">Spread</a></td> + <td dir="ltr">1</td> + </tr> + <tr> + <td dir="ltr"><code>… , …</code></td> + <td dir="ltr">שמאלית</td> + <td dir="ltr"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator" title="JavaScript/Reference/Operators/Comma_Operator">Comma / Sequence</a></td> + <td dir="ltr">0</td> + </tr> + </tbody> +</table> diff --git a/files/he/web/javascript/reference/statements/const/index.html b/files/he/web/javascript/reference/statements/const/index.html new file mode 100644 index 0000000000..98de11967b --- /dev/null +++ b/files/he/web/javascript/reference/statements/const/index.html @@ -0,0 +1,133 @@ +--- +title: const +slug: Web/JavaScript/Reference/Statements/const +tags: + - const + - מה זה const + - משתנים +translation_of: Web/JavaScript/Reference/Statements/const +--- +<div>{{jsSidebar("Statements")}}</div> + +<div>מילת ההצהרה <strong><code>const</code></strong> משמשת להכזרה על משתנה קבוע שאין אפשרות לשנות את הערך שלו.<br> + </div> + +<div>{{EmbedInteractiveExample("pages/js/statement-const.html")}}</div> + + + +<h2 id="תחביר">תחביר</h2> + +<pre class="syntaxbox">const <em>name1 = <em>value1 [</em>, <em>name2</em> = <em>value2</em><em> [</em>, ... [</em>, <em>nameN</em> = <em>valueN]]]</em>;</pre> + +<dl> + <dt><code>nameN</code></dt> + <dd>שם המשתנה.</dd> + <dt><code>valueN</code></dt> + <dd>הערך של המשתנה.</dd> +</dl> + +<h2 id="תיאור">תיאור</h2> + +<p>בשפת ג'אווה סקריפט אנו משתמשים במשתנים על מנת להחזיק ערכים שונים.<br> + הצהרה על משתנה באמצעות <strong><code>const</code></strong> הופכת אותו לקבוע ולא ניתן לשנות את הערך שלו.<br> + הקצאת ערך למשתנה ללא הצהרה מראש הופכת אותו למשתנה גלובלי, אך בשונה מהצהרה באמצעות <strong><code>var</code></strong> הוא אינו כפוף לאובייקט האב <strong><code>window</code></strong>.<br> + חשוב לציין שהצהרה באמצעות const לא מבצעת <a href="/he/docs/">Hoisting</a>.</p> + +<h2 id="דוגמאות">דוגמאות</h2> + +<p>הדוגמה הבאה ממחישה כיצד מתנהגים משתנים קבועים.</p> + +<pre class="brush:js">// NOTE: Constants can be declared with uppercase or lowercase, but a common +// convention is to use all-uppercase letters. + +// define MY_FAV as a constant and give it the value 7 +const MY_FAV = 7; + +// this will throw an error - Uncaught TypeError: Assignment to constant variable. +MY_FAV = 20; + +// MY_FAV is 7 +console.log('my favorite number is: ' + MY_FAV); + +// trying to redeclare a constant throws an error - Uncaught SyntaxError: Identifier 'MY_FAV' has already been declared +const MY_FAV = 20; + +// the name MY_FAV is reserved for constant above, so this will fail too +var MY_FAV = 20; + +// this throws an error too +let MY_FAV = 20; + +// it's important to note the nature of block scoping +if (MY_FAV === 7) { + // this is fine and creates a block scoped MY_FAV variable + // (works equally well with let to declare a block scoped non const variable) + let MY_FAV = 20; + + // MY_FAV is now 20 + console.log('my favorite number is ' + MY_FAV); + + // this gets hoisted into the global context and throws an error + var MY_FAV = 20; +} + +// MY_FAV is still 7 +console.log('my favorite number is ' + MY_FAV); + +// throws an error - Uncaught SyntaxError: Missing initializer in const declaration +const FOO; + +// const also works on objects +const MY_OBJECT = {'key': 'value'}; + +// Attempting to overwrite the object throws an error - Uncaught TypeError: Assignment to constant variable. +MY_OBJECT = {'OTHER_KEY': 'value'}; + +// However, object keys are not protected, +// so the following statement is executed without problem +MY_OBJECT.key = 'otherValue'; // Use Object.freeze() to make object immutable + +// The same applies to arrays +const MY_ARRAY = []; +// It's possible to push items into the array +MY_ARRAY.push('A'); // ["A"] +// However, assigning a new array to the variable throws an error - Uncaught TypeError: Assignment to constant variable. +MY_ARRAY = ['B'];</pre> + +<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-let-and-const-declarations', 'Let and Const Declarations')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-let-and-const-declarations', 'Let and Const Declarations')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td>No changes.</td> + </tr> + </tbody> +</table> + +<h2 id="תאימות_דפדפן">תאימות דפדפן</h2> + + + +<p>{{Compat("javascript.statements.const")}}</p> + +<h2 id="ראה_גם">ראה גם</h2> + +<ul> + <li><a href="https://developer.mozilla.org/he/docs/Web/JavaScript/Reference/Statements/var"><code>var</code></a></li> + <li><a href="https://developer.mozilla.org/he/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a></li> +</ul> diff --git a/files/he/web/javascript/reference/statements/for...of/index.html b/files/he/web/javascript/reference/statements/for...of/index.html new file mode 100644 index 0000000000..86edb2f69e --- /dev/null +++ b/files/he/web/javascript/reference/statements/for...of/index.html @@ -0,0 +1,269 @@ +--- +title: for...of +slug: Web/JavaScript/Reference/Statements/for...of +translation_of: Web/JavaScript/Reference/Statements/for...of +--- +<div>{{jsSidebar("Statements")}}</div> + +<div> </div> + +<div>הצהרת <strong><code>for...of </code></strong>יוצרת לולאה ע"ג<code> </code><a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterable">iterable objects</a> (שכולל {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, {{jsxref("String")}}, {{jsxref("TypedArray")}}, <a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/arguments">arguments</a> object וכן הלאה..),</div> + +<div>invoking a custom iteration hook with statements to be executed for the value of each distinct property.</div> + +<h2 id="Syntax">Syntax</h2> + +<pre class="syntaxbox">for (<em>variable</em> of <em>iterable</em>) { + <em>statement +</em>} +</pre> + +<dl> + <dt><code>variable</code></dt> + <dd>בכל איטרציה, ערך ה property הנוכחי של <em>iterable </em>מוקצה ל <em>variable</em></dd> + <dt>iterable</dt> + <dd>אובייקט עם properties ברי איטרציה</dd> +</dl> + +<h3 id="לדוגמא"><span style="font-size: 14px; letter-spacing: normal;">לדוגמא:</span></h3> + +<h3 id="איטרציה_עג_jsxref(Array)">איטרציה ע"ג {{jsxref("Array")}}</h3> + +<pre class="brush:js">let iterable = [10, 20, 30]; + +for (let value of iterable) { + console.log(value); +} +// 10 +// 20 +// 30 +</pre> + +<p>אפשר להשתמש ג"כ ב <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a> </code>במקום <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/let">let</a> </code>באם אתה לא משנה את ערך המשתנה בתוך הבלוק.</p> + +<p> </p> + +<p>איטרציה ע"ג {{jsxref("String")}}</p> + +<pre class="brush:js">let iterable = "boo"; + +for (let value of iterable) { + console.log(value); +} +// "b" +// "o" +// "o" +</pre> + +<h3 id="Iterating_over_a_jsxref(TypedArray)">Iterating over a {{jsxref("TypedArray")}}</h3> + +<pre class="brush:js">let iterable = new Uint8Array([0x00, 0xff]); + +for (let value of iterable) { + console.log(value); +} +// 0 +// 255 +</pre> + +<h3 id="Iterating_over_a_jsxref(Map)">Iterating over a {{jsxref("Map")}}</h3> + +<pre class="brush:js">let iterable = new Map([["a", 1], ["b", 2], ["c", 3]]); + +for (let entry of iterable) { + console.log(entry); +} +// [a, 1] +// [b, 2] +// [c, 3] + +for (let [key, value] of iterable) { + console.log(value); +} +// 1 +// 2 +// 3 +</pre> + +<h3 id="Iterating_over_a_jsxref(Set)">Iterating over a {{jsxref("Set")}}</h3> + +<pre class="brush:js">let iterable = new Set([1, 1, 2, 2, 3, 3]); + +for (let value of iterable) { + console.log(value); +} +// 1 +// 2 +// 3 +</pre> + +<h3 id="Iterating_over_a_DOM_collection">Iterating over a DOM collection</h3> + +<p>Iterating over DOM collections like {{domxref("NodeList")}}: the following example adds a <code>read</code> class to paragraphs that are direct descendants of an article:</p> + +<pre class="brush:js">// Note: This will only work in platforms that have +// implemented NodeList.prototype[Symbol.iterator] +let articleParagraphs = document.querySelectorAll("article > p"); + +for (let paragraph of articleParagraphs) { + paragraph.classList.add("read"); +} +</pre> + +<h3 id="Iterating_over_generators">Iterating over generators</h3> + +<p>You can also iterate over <a href="/en-US/docs/Web/JavaScript/Reference/Statements/function*">generators</a>:</p> + +<pre class="brush:js">function* fibonacci() { // a generator function + let [prev, curr] = [1, 1]; + while (true) { + [prev, curr] = [curr, prev + curr]; + yield curr; + } +} + +for (let n of fibonacci()) { + console.log(n); + // truncate the sequence at 1000 + if (n >= 1000) { + break; + } +} +</pre> + +<h3 id="Iterating_over_other_iterable_objects">Iterating over other iterable objects</h3> + +<p>You can also iterate over an object that explicitly implements <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#iterable">iterable</a> protocol:</p> + +<pre class="brush:js">var iterable = { + [Symbol.iterator]() { + return { + i: 0, + next() { + if (this.i < 3) { + return { value: this.i++, done: false }; + } + return { value: undefined, done: true }; + } + }; + } +}; + +for (var value of iterable) { + console.log(value); +} +// 0 +// 1 +// 2 +</pre> + +<h3 id="Difference_between_for...of_and_for...in">Difference between <code>for...of</code> and <code>for...in</code></h3> + +<p>The <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in">for...in</a></code> loop will iterate over all enumerable properties of an object.</p> + +<p>The <code>for...of</code> syntax is specific to <strong>collections</strong>, rather than all objects. It will iterate in this manner over the elements of any collection that has a <code>[Symbol.iterator]</code> property.</p> + +<p>The following example shows the difference between a <code>for...of</code> loop and a <code>for...in</code> loop.</p> + +<pre class="brush:js">Object.prototype.objCustom = function () {}; +Array.prototype.arrCustom = function () {}; + +let iterable = [3, 5, 7]; +iterable.foo = "hello"; + +for (let i in iterable) { + console.log(i); // logs 0, 1, 2, "foo", "arrCustom", "objCustom" +} + +for (let i of iterable) { + console.log(i); // logs 3, 5, 7 +} +</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('ES6', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-for-in-and-for-of-statements', 'for...of statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Edge</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome(38)}} <a href="#Chrome_note_1">[1]</a><br> + {{CompatChrome(51)}} <a href="#Chrome_note_3">[3]</a></td> + <td>{{CompatGeckoDesktop("13")}} <a href="#Gecko_note_2">[2]</a></td> + <td>12</td> + <td>25</td> + <td>7.1</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>5.1</td> + <td>{{CompatChrome(38)}} [1]</td> + <td>{{CompatGeckoMobile("13")}} [2]</td> + <td>{{CompatNo}}</td> + <td>{{CompatUnknown}}</td> + <td>8</td> + </tr> + </tbody> +</table> +</div> + +<p><a name="Chrome_note_1">[1]</a> From Chrome 29 to Chrome 37 this feature was available behind a preference. In chrome://flags/#enable-javascript-harmony, activate the entry “Enable Experimental JavaScript”.</p> + +<p><a name="Gecko_note_2">[2]</a> Prior Firefox 51, using the <code>for...of</code> loop construct with the <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/const">const</a></code> keyword threw a {{jsxref("SyntaxError")}} ("missing = in const declaration"). This has been fixed ({{bug(1101653)}}).</p> + +<p><a name="Chrome_note_3">[3]</a> Support for iteration of objects was added in Chrome 51.</p> + +<h2 id="See_also">See also</h2> + +<ul> + <li>{{jsxref("Array.prototype.forEach()")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map/forEach">Map.prototype.forEach()</a></li> +</ul> diff --git a/files/he/web/javascript/reference/statements/for_each...in/index.html b/files/he/web/javascript/reference/statements/for_each...in/index.html new file mode 100644 index 0000000000..b45c6f5ab7 --- /dev/null +++ b/files/he/web/javascript/reference/statements/for_each...in/index.html @@ -0,0 +1,128 @@ +--- +title: for each...in +slug: Web/JavaScript/Reference/Statements/for_each...in +translation_of: Archive/Web/JavaScript/for_each...in +--- +<div>{{jsSidebar("Statements")}}</div> + +<div class="warning"> +<p style="direction: rtl;">טענת "<code>for each...in" </code>הוצאה משימוש בסטנדרט (ECMA-357 (<a href="/en-US/docs/Archive/Web/E4X" title="/en-US/docs/E4X">E4X</a>. התמיכה ב-E4X אמנם הוסרה, אך טענת ה"<code>for each...in" </code>לא תבוטל ולא תוסר מטעמי תאימות לגרסאות קודמות. עם זאת, מומלץ להשתמש בטענת "<a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of" title="/en-US/docs/JavaScript/Reference/Statements/for...of">for...of</a>" במקום. (ע"ע {{ bug("791343")}} ). </p> +</div> + +<p style="direction: rtl;">טענה מסוג:</p> + +<p style="direction: rtl;"><code><strong>for each...in</strong></code></p> + +<p style="direction: rtl;">("עבור כל... ב...")</p> + +<p style="direction: rtl;">חגה סביב כל הערכים של כל "פריטי הרכוש" (properties) של משתנה נתון. עבור כל אחד מפריטי הרכוש תבוצע טענה מוגדרת.</p> + +<h2 id="תחביר" style="direction: rtl;">תחביר</h2> + +<pre class="syntaxbox"><code>for each (<em>variable</em> in <em>object</em>) { + <em>statement</em> +}</code></pre> + +<dl> + <dt style="direction: rtl;"><code>variable</code></dt> + <dd style="direction: rtl;">המשתנה שיחוג סביב הערכים של פרטי הרכוש. ניתן (אך לא חובה) להצהיר על משתנה זה עם מילת המפתח var. המשתנה הזה הוא פנימי לפונקציה, ולא ללולאה עצמה.</dd> +</dl> + +<dl> + <dt style="direction: rtl;"><code>object</code></dt> + <dd style="direction: rtl;">האובייקט שסביב פריטי הרכוש שלו יש לחוג. </dd> +</dl> + +<dl> + <dt style="direction: rtl;"><code>statement</code></dt> + <dd style="direction: rtl;">טענה שיש לבצע עבור כל אחד מפריטי הרכוש. על מנת לבצע יותר מטענה אחת בתוך הלולאה, יש להשתמש בטענת בלוק (<code>{ ... }</code>) כדי לקבץ את הטענות הללו יחדיו.</dd> +</dl> + +<h2 id="תיאור" style="direction: rtl;">תיאור</h2> + +<p style="direction: rtl;"> </p> + +<p>Some built-in properties are not iterated over. These include all built-in methods of objects, e.g. <code>String</code>'s <code>indexf</code></p> + +<p>method. However, all user-defined properties are iterated over.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Using_for_each...in">Using <code>for each...in</code></h3> + +<p><strong>Warning:</strong> Never use a loop like this on arrays. Only use it on objects. See <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in"><code>for...in</code></a> for more details.</p> + +<p>The following snippet iterates over an object's properties, calculating their sum:</p> + +<pre class="brush:js">var sum = 0; +var obj = {prop1: 5, prop2: 13, prop3: 8}; + +for each (var item in obj) { + sum += item; +} + +console.log(sum); // logs "26", which is 5+13+8</pre> + +<h2 id="Specifications">Specifications</h2> + +<p>Not part of a current ECMA-262 specification. Implemented in JavaScript 1.6 and deprecated.</p> + +<h2 id="Browser_compatibility">Browser compatibility</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoDesktop("1.8")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Chrome for Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatGeckoMobile("1.0")}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + <td>{{CompatNo}}</td> + </tr> + </tbody> +</table> +</div> + +<h2 id="See_also">See also</h2> + +<ul> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...in" title="JavaScript/Reference/Statements/for...in">for...in</a></code> - a similar statement that iterates over the property <em>names</em>.</li> + <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of" title="/en-US/docs/JavaScript/Reference/Statements/for...of">for...of</a></code> - a similar statement that iterates over the property <em>values</em> but can only be used for iteratable types, so not for generic objects</li> + <li><code><a href="/en-US/docs/JavaScript/Reference/Statements/for" title="JavaScript/Reference/Statements/for">for</a></code></li> +</ul> diff --git a/files/he/web/javascript/reference/statements/function_star_/index.html b/files/he/web/javascript/reference/statements/function_star_/index.html new file mode 100644 index 0000000000..a72a927859 --- /dev/null +++ b/files/he/web/javascript/reference/statements/function_star_/index.html @@ -0,0 +1,212 @@ +--- +title: function* +slug: Web/JavaScript/Reference/Statements/function* +translation_of: Web/JavaScript/Reference/Statements/function* +--- +<div>{{jsSidebar("Statements")}}</div> + +<p> </p> + +<p>הצהרת <code><strong>function*</strong></code> (מילת <code>function</code> ולאחריה כוכבית) מגדירה <em>פונקצית גנרטור</em>, אשר מחזירה אובייקט {{jsxref("Global_Objects/Generator","Generator")}}.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-functionasterisk.html")}}</div> + + + +<div class="noinclude"> +<p>ניתן גם להגדיר פונקציות גנרטור על-ידי שימוש בבנאי {{jsxref("GeneratorFunction")}}, או בתחביר של ביטוי פונקציה.</p> +</div> + +<h2 id="תחביר">תחביר</h2> + +<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>שם הפונקציה.</dd> +</dl> + +<dl> + <dt><code>param</code></dt> + <dd>השם של פרמטר רשמי של הפונקציה.</dd> +</dl> + +<dl> + <dt><code>statements</code></dt> + <dd>הפקודות המרכיבות את גוף הפונקציה.</dd> +</dl> + +<h2 id="תיאור">תיאור</h2> + +<p>גנרטורים הינם פונקציות שניתן לצאת מהן ולאחר מכן להיכנס אליהן מחדש. ההקשר שלהם (קשירת המשתנים) יישמר לאורך הכניסות מחדש.<br> + <br> + גנרטורים ב- JavaScript -- במיוחד בשילוב עם Promises -- הינם כלי חזר מאוד לתכנות אסינכרוני, כיוון שהם מתווכים -- ואפילו מחסלים לחלוטין -- את הבעיות עם קריאות חוזרות, כגון <a href="http://callbackhell.com/">Callback Hell</a> ו- <a href="https://frontendmasters.com/courses/rethinking-async-js/callback-problems-inversion-of-control/">Inversion of Control</a>.<br> + תבנית זו הינה הבסיס לפונקציות <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function">async</a></code>.</p> + +<p>קריאה לפונקצית גנרטור לא מריצה את גוף הפונקציה מיידית; במקום זאת, מוחזר אובייקט <a href="/he/docs/Web/JavaScript/Reference/Iteration_protocols#iterator">איטרטור</a> לפונקציה. כאשר המתודה <code>()next</code> של האיטרטור נקראת, גוף הפונקציה רץ עד לביטוי ה-{{jsxref("Operators/yield", "yield")}} הראשון, אשר מציין את הערך שיוחזר לאיטרטור, או העברה לפונקציה יוצרת אחרת על-ידי שימוש {{jsxref("Operators/yield*", "*yield")}}. מתודת ה- <code>()next</code> מחזירה אובייקט עם שדה <code>value</code>, המכיל את הערך המיוצר ושדה <code>done</code> בכעל ערך בוליאני, המציין האם הגנרטור יצר את הערך האחרון. קריאה למתודת <code>()next</code> עם ארגומנט תמשיך את ריצת פונקציית הגנרטור, תוך החלפת ביטוי ה- <code>yield</code> בו הריצה הופסקה עם הארגומנט מתוך <code>()next</code>.</p> + +<p>פקודת <code>return</code> בתוך גנרטור, כאשר הוא רץ, תגרום לגנרטור לסיים (כלומר שדה ה- <code>done</code> המוחזר יהיה בעל <code>true</code>). אם ערך מוחזר, הוא יהיה בשדה <code>value</code> של האובייקט המוחזר על-ידי הגנרטור.<br> + בדומה לפקודת ה- <code>return</code>, שגיאה שתיזרק בתוך הגנרטור תביא לסיום הגנרטור -- אלא אם היא תיתפס בגוף הגנרטור.<br> + כאשר גנרטור מסתיים, קריאות נוספות ל- <code>()next</code> לא יגרמו לריצה כלשהי של קוד הגנרטור. הן רק יחזירו אובייקט בצורה זו: <code>{value: undefined, done: true}</code>.</p> + +<h2 id="דוגמאות">דוגמאות</h2> + +<h3 id="דוגמה_פשוטה">דוגמה פשוטה</h3> + +<pre class="brush: js">function* idMaker() { + var index = 0; + while (index < index+1) + yield index++; +} + +var gen = idMaker(); + +console.log(gen.next().value); // 0 +console.log(gen.next().value); // 1 +console.log(gen.next().value); // 2 +console.log(gen.next().value); // 3 +// ...</pre> + +<h3 id="דוגמה_עם_*yield">דוגמה עם *yield</h3> + +<pre class="brush: js">function* anotherGenerator(i) { + yield i + 1; + yield i + 2; + yield i + 3; +} + +function* generator(i) { + yield i; + yield* anotherGenerator(i); + yield i + 10; +} + +var gen = generator(10); + +console.log(gen.next().value); // 10 +console.log(gen.next().value); // 11 +console.log(gen.next().value); // 12 +console.log(gen.next().value); // 13 +console.log(gen.next().value); // 20 +</pre> + +<h3 id="העברת_ארגומנטים_לגנרטורים">העברת ארגומנטים לגנרטורים</h3> + +<pre class="brush: js">function* logGenerator() { + console.log(0); + console.log(1, yield); + console.log(2, yield); + console.log(3, yield); +} + +var gen = logGenerator(); + +// <span dir="rtl">הקריאה הראשונה ל- next מתבצעת מתחילת הפונקציה</span> +// <span dir="rtl">עד שהיא מגיעה לפקודת yield הראשונה</span> +gen.next(); // 0 +gen.next('pretzel'); // 1 pretzel +gen.next('california'); // 2 california +gen.next('mayonnaise'); // 3 mayonnaise +</pre> + +<h3 id="פקודת_return_בתוך_גנרטור">פקודת return בתוך גנרטור</h3> + +<pre class="brush: js">function* yieldAndReturn() { + yield "Y"; + return "R"; + yield "unreachable"; +} + +var gen = yieldAndReturn() +console.log(gen.next()); // { value: "Y", done: false } +console.log(gen.next()); // { value: "R", done: true } +console.log(gen.next()); // { value: undefined, done: true } +</pre> + +<h3 id="לא_ניתן_ליצור_אובייקט_גנרטור">לא ניתן ליצור אובייקט גנרטור</h3> + +<pre class="brush: js">function* f() {} +var obj = new f; // throws "TypeError: f is not a constructor +</pre> + +<h3 id="גנרטורים_המוגדרים_בתוך_ביטוי">גנרטורים המוגדרים בתוך ביטוי</h3> + +<pre class="brush: js">const foo = function* () { + yield 10; + yield 20; +}; + +const bar = foo(); +console.log(bar.next()); // {value: 10, done: false}</pre> + +<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-generator-function-definitions', 'function*')}}</td> + <td>{{Spec2('ES2015')}}</td> + <td>הגדרה ראשונית.</td> + </tr> + <tr> + <td>{{SpecName('ES2016', '#sec-generator-function-definitions', 'function*')}}</td> + <td>{{Spec2('ES2016')}}</td> + <td>שונה, כך תהיה מלכודת שבגנרטורים לא [[Construct]] ויזרקו שגיאה בשימוש עם <code>new</code>.</td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-generator-function-definitions', 'function*')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="תאימות_לדפדפנים">תאימות לדפדפנים</h2> + +<div> + + +<p>{{Compat("javascript.statements.generator_function")}}</p> +</div> + +<h2 id="הערות_ספציפיות_ל-_Firefox">הערות ספציפיות ל- Firefox</h2> + +<h4 id="גנרטורים_ואיטרטורים_ב-_Firefox_לפני_גרסה_26">גנרטורים ואיטרטורים ב- Firefox לפני גרסה 26</h4> + +<p>גרסאות Firefox ישנות יותר מממשות הגדרת גנרטורים ישנה יותר. בגרסה הקודמת גנרטורים הוגדרו על-ידי שימוש במילת <code>function</code> רגילה (ללא כוכבית), בין היתר. ראה <a href="/he/docs/Web/JavaScript/Reference/Statements/Legacy_generator_function">פונקציה יוצרת מסורתית </a>למידע נוסף.</p> + +<h4 id="אובייקט_IteratorResult_מוחזר_במקום_זריקת_שגיאה">אובייקט <code>IteratorResult</code> מוחזר במקום זריקת שגיאה</h4> + +<p>החל מ- Gecko 29 {{geckoRelease(29)}}, הפונקציה היוצרת המלאה כבר אינה זורקת {{jsxref("TypeError")}} "generator has already finished". במקום זאת, היא מחזירה אובייקט <code>IteratorResult</code> כדוגמת <code>{ value: undefined, done: true }</code> ({{bug(958951)}}).</p> + +<h2 id="ראה_גם">ראה גם</h2> + +<ul> + <li>{{jsxref("Operators/function*", "function* expression")}}</li> + <li>אובייקט {{jsxref("GeneratorFunction")}}</li> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">Iteration protocols</a></li> + <li>{{jsxref("Operators/yield", "yield")}}</li> + <li>{{jsxref("Operators/yield*", "*yield")}}</li> + <li>{{jsxref("Function")}} object</li> + <li>{{jsxref("Statements/function", "function declaration")}}</li> + <li>{{jsxref("Operators/function", "function expression")}}</li> + <li>{{jsxref("Functions_and_function_scope", "Functions and function scope")}}</li> + <li>Other web resources: + <ul> + <li><a href="http://facebook.github.io/regenerator/">Regenerator</a> an ES2015 generator compiler to ES5</li> + <li><a href="http://www.youtube.com/watch?v=qbKWsbJ76-s">Forbes Lindesay: Promises and Generators: control flow utopia -- JSConf EU 2013</a></li> + <li><a href="https://github.com/mozilla/task.js">Task.js</a></li> + <li><a href="https://github.com/getify/You-Dont-Know-JS/blob/master/async%20%26%20performance/ch4.md#iterating-generators-asynchronously">Iterating generators asynchronously</a></li> + </ul> + </li> +</ul> diff --git a/files/he/web/javascript/reference/statements/index.html b/files/he/web/javascript/reference/statements/index.html new file mode 100644 index 0000000000..2869ba1ce5 --- /dev/null +++ b/files/he/web/javascript/reference/statements/index.html @@ -0,0 +1,148 @@ +--- +title: Statements and declarations +slug: Web/JavaScript/Reference/Statements +tags: + - JavaScript + - NeedsTranslation + - Reference + - TopicStub + - statements +translation_of: Web/JavaScript/Reference/Statements +--- +<div dir="rtl">{{jsSidebar("Statements")}}</div> + +<div dir="rtl">יישומי ג'אווה סקריפט מורכבים ממשפטים בעלי תחביר מתאים (syntax).</div> + +<div dir="rtl">משפט אחד יכול להתפרס על גבי מספר שורות.</div> + +<div dir="rtl">מספר משפטים יכולים להופיע על גבי שורה אחת אם בין משפט למשפט מפריד הסמן ";".</div> + +<div dir="rtl">משפט הוא לא מילת מפתח אלא כמה מילות מפתח המאורגנות יחד.</div> + +<div dir="rtl"> </div> + +<h2 dir="rtl" id="משפטים_והצהרות_לפי_קטגוריה">משפטים והצהרות לפי קטגוריה</h2> + +<p dir="rtl"><em>לרשימה אלפבתית ראה סרגל בצד שמאל</em></p> + +<h3 dir="rtl" id="זרימת_תהליך">זרימת תהליך</h3> + +<dl> + <dt dir="rtl">{{jsxref("Statements/block", "Block")}}</dt> + <dd dir="rtl">משפט בלוק נועד לסידור של 0 או יותר משפטים יחד.<br> + בלוק תחום בין שני סוגריים מסולסלים.</dd> + <dt dir="rtl">{{jsxref("Statements/break", "break")}}</dt> + <dd dir="rtl">משפט break עוצר את הלולאה, משפט switch או משפט סיווג (label statement) ומעביר את ריצת התוכנה למשפט שמגיע אחרי המשפט שנעצר.</dd> + <dt dir="rtl">{{jsxref("Statements/continue", "continue")}}</dt> + <dd dir="rtl">משפט continue עוצר את האיטרציה הנוכחית\מסווגת של הלולאה הנוכחית וממשיך לאיטרציה הבאה בלולאה.</dd> + <dt dir="rtl">{{jsxref("Statements/Empty", "Empty")}}</dt> + <dd dir="rtl">משפט empty נועד לשימוש כמשפט ריק במקומות בהם התחביר של ג'אווה סקריפט מצפה למשפט.</dd> + <dt dir="rtl">{{jsxref("Statements/if...else", "if...else")}}</dt> + <dd dir="rtl">משפטי if else מריצים משפטים בהתאם לתנאים מסויימים. אם תנאי מסויים לא מתקיים, יכול לרוץ משפט אחר.</dd> + <dt dir="rtl">{{jsxref("Statements/switch", "switch")}}</dt> + <dd dir="rtl">משפט switch מכיל ביטוי מסויים שבהתאם לערך שלו נבחרת פסקת case והמשפטים שבה מורצים.</dd> + <dt dir="rtl">{{jsxref("Statements/throw", "throw")}}</dt> + <dd dir="rtl">משפט throw זורק שגיאה מותאמת אישית.</dd> + <dt dir="rtl">{{jsxref("Statements/try...catch", "try...catch")}}</dt> + <dd dir="rtl">משפט try/catch מנסה להריץ בלוק מסויים, ומגדיר תגובה במקרה שנזרקת שגיאה.</dd> +</dl> + +<h3 dir="rtl" id="הצהרות"> הצהרות</h3> + +<dl> + <dt dir="rtl">{{jsxref("Statements/var", "var")}}</dt> + <dd dir="rtl">המילה var מצהירה על משתנה חדש ומאפשרת לתת לו ערך ראשוני.</dd> + <dt dir="rtl">{{experimental_inline}} {{jsxref("Statements/let", "let")}}</dt> + <dd dir="rtl">המילה let מצהירה על משתנה חדש ומקומי לבלוק שבו הוצהר (בניגוד ל var שנמצא בתחום הגלובאלי (global scope), אפשר לתת ערך ראשוני בזמן ההצהרה.</dd> + <dt dir="rtl">{{experimental_inline}} {{jsxref("Statements/const", "const")}}</dt> + <dd dir="rtl">המילה const מצהירה על קבוע (constant) לקריאה בלבד.</dd> +</dl> + +<h3 dir="rtl" id="פונקציות_ומחלקות">פונקציות ומחלקות</h3> + +<dl> + <dt dir="rtl">{{jsxref("Statements/function", "function")}}</dt> + <dd dir="rtl">המילה function מצהירה על פונקציה עם הפרמטרים שצויינו.</dd> + <dt dir="rtl">{{experimental_inline}} {{jsxref("Statements/function*", "function*")}}</dt> + <dd dir="rtl">פונקציות מחוללות המאפשרות כתיבה פשוטה יותר של איטרטורים.</dd> + <dt dir="rtl">{{jsxref("Statements/return", "return")}}</dt> + <dd dir="rtl">המילה return מציינת את הערך שהפונקציה מחזירה.</dd> + <dt dir="rtl">{{experimental_inline}} {{jsxref("Statements/class", "class")}}</dt> + <dd dir="rtl">המילה class מגדירה מחלקה.</dd> +</dl> + +<h3 dir="rtl" id="Iterations">Iterations</h3> + +<dl> + <dt dir="rtl">{{jsxref("Statements/do...while", "do...while")}}</dt> + <dd dir="rtl">משפט do...while יוצר לולאה שמריצה משפט מסויים עד שהתנאי שבה הופך לשלילי. <br> + בהרצה הראשונה המשפט מורץ בלי קשר לערך התנאי ורק לאחר מכן נבדק לפני כל הרצה מחדש. </dd> + <dt dir="rtl">{{jsxref("Statements/for", "for")}}</dt> + <dd dir="rtl">משפט for יוצר לולאה שמורכבת משלושה ביטויים (אופציונאליים) התחומים בסוגריים ומופרדים ע"י סמן ";", שלאחריהם מורצים המשפטים שבתוך הלולאה.</dd> + <dt dir="rtl">{{deprecated_inline}} {{non-standard_inline()}} {{jsxref("Statements/for_each...in", "for each...in")}}</dt> + <dd dir="rtl">משפט for each...in עובר על כל הערכים של התכונות באובייקט מסויים ומריץ על כל אחת את המשפט שנמצא בלולאה.</dd> + <dt dir="rtl">{{jsxref("Statements/for...in", "for...in")}}</dt> + <dd dir="rtl">משפט for...in עובר על כל התכונות של אובייקט מסויים, בסדר שרירותי.<br> + על תכונה יכולים לרוץ משפטים.</dd> + <dt dir="rtl">{{experimental_inline}} {{jsxref("Statements/for...of", "for...of")}}</dt> + <dd dir="rtl">משפט for...of עובר על אובייקטים הנתנים לאיטרציה (מערכים, אובייקטים, איטרטורים ומחוללים) ויוצר איטרציה מותאמת לכל אחד מהאובייקטים שבה יכולים לרוץ משפטים מסויימים על הערך של כל תכונה באובייקט.</dd> + <dt dir="rtl">{{jsxref("Statements/while", "while")}}</dt> + <dd dir="rtl">משפט while יוצר לולאה שמריצה משפט מסויים כל עוד התנאי שבה חיובי. <br> + התנאי מורץ לפני כל הרצה.</dd> +</dl> + +<h3 dir="rtl" id="Others">Others</h3> + +<dl> + <dt dir="rtl">{{jsxref("Statements/debugger", "debugger")}}</dt> + <dd dir="rtl">Invokes any available debugging functionality. If no debugging functionality is available, this statement has no effect.</dd> + <dt dir="rtl">{{experimental_inline}} {{jsxref("Statements/export", "export")}}</dt> + <dd dir="rtl">Used to export functions to make them available for imports in external modules, another scripts.</dd> + <dt dir="rtl">{{experimental_inline}} {{jsxref("Statements/import", "import")}}</dt> + <dd dir="rtl">Used to import functions exported from an external module, another script.</dd> + <dt dir="rtl">{{jsxref("Statements/label", "label")}}</dt> + <dd dir="rtl">Provides a statement with an identifier that you can refer to using a <code>break</code> or <code>continue</code> statement.</dd> +</dl> + +<dl> + <dt dir="rtl">{{deprecated_inline}} {{jsxref("Statements/with", "with")}}</dt> + <dd dir="rtl">Extends the scope chain for a statement.</dd> +</dl> + +<h2 dir="rtl" id="Specifications">Specifications</h2> + +<table class="standard-table" dir="rtl"> + <tbody> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-ecmascript-language-statements-and-declarations', 'ECMAScript Language: Statements and Declarations')}}</td> + <td>{{Spec2('ES6')}}</td> + <td>New: function*, let, for...of, yield, class</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES3', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES3')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES1', '#sec-12', 'Statements')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 dir="rtl" id="See_also">See also</h2> + +<ul> + <li dir="rtl"><a href="/en-US/docs/Web/JavaScript/Reference/Operators">Operators</a></li> +</ul> diff --git a/files/he/web/javascript/reference/statements/return/index.html b/files/he/web/javascript/reference/statements/return/index.html new file mode 100644 index 0000000000..dea3cb868f --- /dev/null +++ b/files/he/web/javascript/reference/statements/return/index.html @@ -0,0 +1,151 @@ +--- +title: return +slug: Web/JavaScript/Reference/Statements/return +translation_of: Web/JavaScript/Reference/Statements/return +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>הצהרה באמצעות <strong><code>return</code></strong> מתבצעת בעת סיום הפונקציה, גורמת לעצירתה ומציינת ערך שיש להחזיר למבקש הפונקציה.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-return.html")}}</div> + + + +<h2 id="תחביר">תחביר</h2> + +<pre class="syntaxbox">return [[expression]]; </pre> + +<dl> + <dt><code>expression</code></dt> + <dd>הביטוי שערכו יוחזר. במידה והביטוי לא הוזכר, הערך <strong><code>undefined</code></strong> יוחזר במקומו.</dd> +</dl> + +<h2 id="תיאור">תיאור</h2> + +<p>השימוש בהצהרה <strong><code>return</code></strong> בגוף הפונקציה, יפסיק את תהליך הריצה שלה.<br> + לדוגמה, לפונקציה <code>()square</code> ארגומנט בשם x, כאשר x יהיה מספר הפונקציה תחזיר את הערך של הארגומנט כפול עצמו.</p> + +<pre class="brush: js">function square(x) { + return x * x; +} +var demo = square(3); +// demo will equal 9 +</pre> + +<p>במידה וארגומנט חסר, הערך שיוחזר יהיה <strong><code>undefined</code></strong>. <br> + הצהרות ה-<strong><code>return</code></strong> הבאות מפסיקות את הריצה של הפונקציה:</p> + +<pre class="brush: js">return; +return true; +return false; +return x; +return x + y / 3; +</pre> + +<h3 id="הוספת_נקודה_פסיק_באופן_אוטומטי">הוספת נקודה פסיק באופן אוטומטי</h3> + +<p>להצהרה באמצעות <strong><code>return</code></strong> מתווספת באופן אוטומטי נקודה פסיק (ASI).<br> + אין לקשר בין שורת ההצהרה של <strong><code>return</code></strong> לביטוי .</p> + +<pre class="brush: js">return +a + b; +</pre> + +<pre class="brush: js">return; +a + b; +</pre> + +<p>כדי להימנע ממצב של הוספת נקודה פסיק באופן אוטומטי, יש להוסיף סוגריים באופן הבא:</p> + +<pre class="brush: js">return ( + a + b +); +</pre> + +<h2 id="דוגמאות">דוגמאות</h2> + +<h3 id="עצירת_הפונקציה">עצירת הפונקציה</h3> + +<p>הפונקציה נעצרת מיד בעת הקריאה ל-<strong><code>return</code></strong>.</p> + +<pre class="brush: js">function counter() { + for (var count = 1; ; count++) { // infinite loop + console.log(count + 'A'); // until 5 + if (count === 5) { + return; + } + console.log(count + 'B'); // until 4 + } + console.log(count + 'C'); // never appears +} + +counter(); + +// Output: +// 1A +// 1B +// 2A +// 2B +// 3A +// 3B +// 4A +// 4B +// 5A +</pre> + +<h3 id="החזרת_פונקציה">החזרת פונקציה</h3> + +<p>ראו את המאמר הבא בנושא <a href="/en-US/docs/Web/JavaScript/Closures">Closures</a>.</p> + +<pre class="brush: js">function magic() { + return function calc(x) { return x * 42; }; +} + +var answer = magic(); +answer(1337); // 56154 +</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('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition.</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.9', 'Return statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-return-statement', 'Return statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-return-statement', 'Return statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="תאימות_דפדפן">תאימות דפדפן</h2> + + + +<p>{{Compat("javascript.statements.return")}}</p> + +<h2 id="ראו_גם">ראו גם</h2> + +<ul> + <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope" title="En/Core_JavaScript_1.5_Reference/Functions">Functions</a></li> + <li><a href="/en-US/docs/Web/JavaScript/Closures">Closures</a></li> +</ul> diff --git a/files/he/web/javascript/reference/statements/var/index.html b/files/he/web/javascript/reference/statements/var/index.html new file mode 100644 index 0000000000..64020dee3e --- /dev/null +++ b/files/he/web/javascript/reference/statements/var/index.html @@ -0,0 +1,171 @@ +--- +title: var +slug: Web/JavaScript/Reference/Statements/var +tags: + - hoisted + - הכרזה + - משתנה +translation_of: Web/JavaScript/Reference/Statements/var +--- +<div>{{jsSidebar("Statements")}}</div> + +<p>מילת ההצהרה <strong><code>var</code></strong> משמשת להכזרה על משתנה.</p> + +<div>{{EmbedInteractiveExample("pages/js/statement-var.html")}}</div> + + + +<h2 id="תחביר">תחביר</h2> + +<pre class="syntaxbox">var <em>varname1 [</em>= <em>value1] [</em>, <em>varname2 [</em>= <em>value2] </em><em>... [</em>, <em>varnameN [</em>= <em>valueN]]]</em>;</pre> + +<dl> + <dt><code>varnameN</code></dt> + <dd>שם המשתנה.</dd> +</dl> + +<dl> + <dt><code>valueN</code></dt> + <dd> הערך של המשתנה.</dd> +</dl> + +<h2 id="תיאור">תיאור</h2> + +<p>בשפת ג'אווה סקריפט אנו משתמשים במשתנים על מנת להחזיק ערכים שונים.<br> + הקצאת ערך למשתנה ללא הצהרה מראש הופכת אותו למשתנה כגלובלי.<br> + ניתן להשתמש במשתנה לפני שהוכרז, השימוש יעשה באמצעות Hoisting.</p> + +<p><strong>מהם ההבדלים בין משתנים מוצהרים לאלה שאינם?</strong><br> + 1. ראשית, משתנים מוצהרים יעשו רק את הפעולה שלשמה נוצרו, לעומת משתנים לא מוצהרים הנחשבים גלובלים.</p> + +<pre class="brush: js">function x() { + y = 1; // Throws a ReferenceError in strict mode + var z = 2; +} + +x(); + +console.log(y); // logs "1" +console.log(z); // Throws a ReferenceError: z is not defined outside x +</pre> + +<p>2. משתנים מוצהרים מוכרזים לפני ביצוע קוד כלשהו לעומת זאת משתנים לא מוצהרים אינם קיימים עד שהקוד שמכריז עליהם מתבצע.</p> + +<pre class="brush: js">console.log(a); // Throws a ReferenceError. +console.log('still going...'); // Never executes.</pre> + +<pre class="brush: js">var a; +console.log(a); // logs "undefined" or "" depending on browser. +console.log('still going...'); // logs "still going...".</pre> + +<p>בשל שני ההבדלים הללו, אי הכרזה על משתנים עשויה להוביל לשגיאות בלתי צפויות.<br> + לכן, מומלץ תמיד להכריז על משתנים, גם אם הם נמצאים בפונקציה.</p> + +<h3 id="var_hoisting">var hoisting</h3> + +<p>זוהי התנהגות ברירת המחדל של השפה, שתפקידה להעביר את כל ההצהרות לחלק העליון של הסקריפט או הפונקציה ולכן משמעות הדבר היא שניתן להשתמש במשתנה לפני שהוכרז.</p> + +<pre class="brush: js">bla = 2; +var bla; +// ... + +// is implicitly understood as: + +var bla; +bla = 2; +</pre> + +<p>מומלץ להצהיר על משתנים בחלקו העליון של הסקריפט או הפונקציה וכך יהיה ברור אילו משתנים שייכים לפונקציה באופן מקומי ואילו גלובלים.</p> + +<p>חשוב לזכור ששימוש ב-Hoisting ישפיע על הצהרת המשתנה אך לא על אתחול הערך:</p> + +<pre class="brush: js">function do_something() { + console.log(bar); // undefined + var bar = 111; + console.log(bar); // 111 +} + +// is implicitly understood as: +function do_something() { + var bar; + console.log(bar); // undefined + bar = 111; + console.log(bar); // 111 +} +</pre> + +<h2 id="דוגמאות">דוגמאות</h2> + +<h3 id="הכרזה_אחת_של_שני_משתנים">הכרזה אחת של שני משתנים</h3> + +<pre class="brush: js" dir="rtl">var a = 0, b = 0; +</pre> + +<h3 id="הקצאת_שני_משתנים_עם_ערך_מחרוזת_יחיד">הקצאת שני משתנים עם ערך מחרוזת יחיד</h3> + +<pre class="brush: js">var a = 'A'; +var b = a; + +// Equivalent to: + +var a, b = a = 'A'; +</pre> + +<h3 id="משתנה_מקומי_וגלובלי">משתנה מקומי וגלובלי</h3> + +<pre class="brush: js">var x = 0; + +function f() { + var x = y = 1; // x is declared locally. y is not! +} +f(); + +console.log(x, y); // Throws a ReferenceError in strict mode (y is not defined). 0, 1 otherwise. +// In non-strict mode: +// x is the global one as expected +// y leaked outside of the function, though!</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('ES1')}}</td> + <td>{{Spec2('ES1')}}</td> + <td>Initial definition. Implemented in JavaScript 1.0</td> + </tr> + <tr> + <td>{{SpecName('ES5.1', '#sec-12.2', 'var statement')}}</td> + <td>{{Spec2('ES5.1')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ES6', '#sec-variable-statement', 'variable statement')}}</td> + <td>{{Spec2('ES6')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-variable-statement', 'variable statement')}}</td> + <td>{{Spec2('ESDraft')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="תאימות_דפדפן">תאימות דפדפן</h2> + + + +<p>{{Compat("javascript.statements.var")}}</p> + +<h2 id="ראה_גם">ראה גם</h2> + +<ul> + <li><a href="https://developer.mozilla.org/he/docs/Web/JavaScript/Reference/Statements/let"><code>let</code></a></li> + <li><a href="https://developer.mozilla.org/he/docs/Web/JavaScript/Reference/Statements/const"><code>const</code></a></li> +</ul> |