diff options
Diffstat (limited to 'files/ar/web/javascript/reference/operators')
4 files changed, 0 insertions, 1553 deletions
diff --git a/files/ar/web/javascript/reference/operators/destructuring_assignment/index.html b/files/ar/web/javascript/reference/operators/destructuring_assignment/index.html deleted file mode 100644 index d926351173..0000000000 --- a/files/ar/web/javascript/reference/operators/destructuring_assignment/index.html +++ /dev/null @@ -1,428 +0,0 @@ ---- -title: Destructuring assignment -slug: Web/JavaScript/Reference/Operators/Destructuring_assignment -translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment ---- -<div>{{jsSidebar("Operators")}}</div> - -<div dir="rtl"><strong>الإسناد بالتفكيك</strong> هو تعبير جافاسكربت يجعل من الممكن فك القيم من المصفوفات ( Arrays ) أو الخصائص من الكائنات ( Objects ) إلى متغيرات مميزة.</div> - -<div dir="rtl"></div> - -<div>{{EmbedInteractiveExample("pages/js/expressions-destructuringassignment.html", "taller")}}</div> - -<div class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</div> - -<h2 id="Syntax">Syntax</h2> - -<pre class="brush:js">let a, b, rest; -[a, b] = [10, 20]; -console.log(a); // 10 -console.log(b); // 20 - -[a, b, ...rest] = [10, 20, 30, 40, 50]; -console.log(a); // 10 -console.log(b); // 20 -console.log(rest); // [30, 40, 50] - -({ a, b } = { a: 10, b: 20 }); -console.log(a); // 10 -console.log(b); // 20 - - -// Stage 4(finished) proposal -({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}); -console.log(a); // 10 -console.log(b); // 20 -console.log(rest); // {c: 30, d: 40} -</pre> - -<h2 dir="rtl" id="التفاصيل">التفاصيل</h2> - -<p dir="rtl">توفر تعبيرات الكائن (Object) والمصفوفة (Array) طريقة سهلة لإنشاء حزم بيانات مخصصة.</p> - -<pre class="brush: js">const x = [1, 2, 3, 4, 5]; -</pre> - -<p dir="rtl" id="tw-target-text">يَستخدِم<strong> الإسناد بالتفكيك (destructuring assignment)</strong> بنية مماثلة، ولكن على الجانب الأيسر من المهمة لتحديد القيم التي يجب فكها من مصدر المتغير الأساسي.</p> - -<pre dir="rtl" id="tw-target-text">const x = [1, 2, 3, 4, 5]; -const [y, z] = x; -console.log(y); // 1 -console.log(z); // 2 -</pre> - -<p dir="rtl">تشبه هذه الإمكانية الميزات الموجودة بلغات مثل Perl و Python.</p> - -<p dir="rtl"></p> - -<h2 dir="rtl" id="تفكيك_المصفوفات">تفكيك المصفوفات</h2> - -<h3 dir="rtl" id="تعيين_المتغير_الأساسي">تعيين المتغير الأساسي</h3> - -<pre class="brush: js">const foo = ['one', 'two', 'three']; - -const [red, yellow, green] = foo; -console.log(red); // "one" -console.log(yellow); // "two" -console.log(green); // "three" -</pre> - -<h3 id="Assignment_separate_from_declaration">Assignment separate from declaration</h3> - -<p>A variable can be assigned its value via destructuring separate from the variable's declaration.</p> - -<pre class="brush:js">let a, b; - -[a, b] = [1, 2]; -console.log(a); // 1 -console.log(b); // 2 -</pre> - -<h3 id="Default_values">Default values</h3> - -<p>A variable can be assigned a default, in the case that the value unpacked from the array is <code>undefined</code>.</p> - -<pre class="brush: js">let a, b; - -[a=5, b=7] = [1]; -console.log(a); // 1 -console.log(b); // 7 -</pre> - -<h3 id="Swapping_variables">Swapping variables</h3> - -<p>Two variables values can be swapped in one destructuring expression.</p> - -<p>Without destructuring assignment, swapping two values requires a temporary variable (or, in some low-level languages, the <a class="external" href="https://en.wikipedia.org/wiki/XOR_swap_algorithm">XOR-swap trick</a>).</p> - -<pre class="brush:js">let a = 1; -let b = 3; - -[a, b] = [b, a]; -console.log(a); // 3 -console.log(b); // 1 - -const arr = [1,2,3]; -[arr[2], arr[1]] = [arr[1], arr[2]]; -console.log(arr); // [1,3,2] - -</pre> - -<h3 id="Parsing_an_array_returned_from_a_function">Parsing an array returned from a function</h3> - -<p>It's always been possible to return an array from a function. Destructuring can make working with an array return value more concise.</p> - -<p>In this example, <code>f()</code> returns the values <code>[1, 2]</code> as its output, which can be parsed in a single line with destructuring.</p> - -<pre class="brush:js">function f() { - return [1, 2]; -} - -let a, b; -[a, b] = f(); -console.log(a); // 1 -console.log(b); // 2 -</pre> - -<h3 id="Ignoring_some_returned_values">Ignoring some returned values</h3> - -<p>You can ignore return values that you're not interested in:</p> - -<pre class="brush:js">function f() { - return [1, 2, 3]; -} - -const [a, , b] = f(); -console.log(a); // 1 -console.log(b); // 3 - -const [c] = f(); -console.log(c); // 1 -</pre> - -<p>You can also ignore all returned values:</p> - -<pre class="brush:js">[,,] = f(); -</pre> - -<h3 id="Assigning_the_rest_of_an_array_to_a_variable">Assigning the rest of an array to a variable</h3> - -<p>When destructuring an array, you can unpack and assign the remaining part of it to a variable using the rest pattern:</p> - -<pre class="brush: js">const [a, ...b] = [1, 2, 3]; -console.log(a); // 1 -console.log(b); // [2, 3]</pre> - -<p>Be aware that a {{jsxref("SyntaxError")}} will be thrown if a trailing comma is used on the left-hand side with a rest element:</p> - -<pre class="brush: js example-bad">const [a, ...b,] = [1, 2, 3]; - -// SyntaxError: rest element may not have a trailing comma -// Always consider using rest operator as the last element -</pre> - -<h3 id="Unpacking_values_from_a_regular_expression_match">Unpacking values from a regular expression match</h3> - -<p>When the regular expression <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec"> exec()</a></code> method finds a match, it returns an array containing first the entire matched portion of the string and then the portions of the string that matched each parenthesized group in the regular expression. Destructuring assignment allows you to unpack the parts out of this array easily, ignoring the full match if it is not needed.</p> - -<pre class="brush:js">function parseProtocol(url) { - const parsedURL = /^(\w+)\:\/\/([^\/]+)\/(.*)$/.exec(url); - if (!parsedURL) { - return false; - } - console.log(parsedURL); // ["https://developer.mozilla.org/en-US/Web/JavaScript", "https", "developer.mozilla.org", "en-US/Web/JavaScript"] - - const [, protocol, fullhost, fullpath] = parsedURL; - return protocol; -} - -console.log(parseProtocol('https://developer.mozilla.org/en-US/Web/JavaScript')); // "https" -</pre> - -<h2 id="Object_destructuring">Object destructuring</h2> - -<h3 id="Basic_assignment">Basic assignment</h3> - -<pre class="brush: js">const user = { - id: 42, - is_verified: true -}; - -const {id, is_verified} = user; - -console.log(id); // 42 -console.log(is_verified); // true -</pre> - -<h3 id="Assignment_without_declaration">Assignment without declaration</h3> - -<p>A variable can be assigned its value with destructuring separate from its declaration.</p> - -<pre class="brush:js">let a, b; - -({a, b} = {a: 1, b: 2});</pre> - -<div class="note"> -<p><strong>Notes</strong>: The parentheses <code>( ... )</code> around the assignment statement are required when using object literal destructuring assignment without a declaration.</p> - -<p><code>{a, b} = {a: 1, b: 2}</code> is not valid stand-alone syntax, as the <code>{a, b}</code> on the left-hand side is considered a block and not an object literal.</p> - -<p>However, <code>({a, b} = {a: 1, b: 2})</code> is valid, as is <code>const {a, b} = {a: 1, b: 2}</code></p> - -<p>Your <code>( ... )</code> expression needs to be preceded by a semicolon or it may be used to execute a function on the previous line.</p> -</div> - -<h3 id="Assigning_to_new_variable_names">Assigning to new variable names</h3> - -<p>A property can be unpacked from an object and assigned to a variable with a different name than the object property.</p> - -<pre class="brush: js">const o = {p: 42, q: true}; -const {p: foo, q: bar} = o; - -console.log(foo); // 42 -console.log(bar); // true</pre> - -<p>Here, for example, <code>const {p: foo} = o</code> takes from the object <code>o</code> the property named <code>p</code> and assigns it to a local variable named <code>foo</code>.</p> - -<h3 id="Default_values_2">Default values</h3> - -<p>A variable can be assigned a default, in the case that the value unpacked from the object is <code>undefined</code>.</p> - -<pre class="brush: js">const {a = 10, b = 5} = {a: 3}; - -console.log(a); // 3 -console.log(b); // 5</pre> - -<h3 id="Assigning_to_new_variables_names_and_providing_default_values">Assigning to new variables names and providing default values</h3> - -<p>A property can be both 1) unpacked from an object and assigned to a variable with a different name and 2) assigned a default value in case the unpacked value is <code>undefined</code>.</p> - -<pre class="brush: js">const {a: aa = 10, b: bb = 5} = {a: 3}; - -console.log(aa); // 3 -console.log(bb); // 5 -</pre> - -<h3 id="Unpacking_fields_from_objects_passed_as_function_parameter">Unpacking fields from objects passed as function parameter</h3> - -<pre class="brush:js">const user = { - id: 42, - displayName: 'jdoe', - fullName: { - firstName: 'John', - lastName: 'Doe' - } -}; - -function userId({id}) { - return id; -} - -function whois({displayName, fullName: {firstName: name}}) { - return `${displayName} is ${name}`; -} - -console.log(userId(user)); // 42 -console.log(whois(user)); // "jdoe is John"</pre> - -<p>This unpacks the <code>id</code>, <code>displayName</code> and <code>firstName</code> from the user object and prints them.</p> - -<h3 id="Setting_a_function_parameters_default_value">Setting a function parameter's default value</h3> - -<pre class="brush: js">function drawChart({size = 'big', coords = {x: 0, y: 0}, radius = 25} = {}) { - console.log(size, coords, radius); - // do some chart drawing -} - -drawChart({ - coords: {x: 18, y: 30}, - radius: 30 -});</pre> - -<div class="note"> -<p>In the function signature for <strong><code>drawChart</code></strong> above, the destructured left-hand side is assigned to an empty object literal on the right-hand side: <code>{size = 'big', coords = {x: 0, y: 0}, radius = 25} = {}</code>. You could have also written the function without the right-hand side assignment. However, if you leave out the right-hand side assignment, the function will look for at least one argument to be supplied when invoked, whereas in its current form, you can simply call <code><strong>drawChart()</strong></code> without supplying any parameters. The current design is useful if you want to be able to call the function without supplying any parameters, the other can be useful when you want to ensure an object is passed to the function.</p> -</div> - -<h3 id="Nested_object_and_array_destructuring">Nested object and array destructuring</h3> - -<pre class="brush:js">const 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' -}; - -let { - title: englishTitle, // rename - translations: [ - { - title: localeTitle, // rename - }, - ], -} = 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">const 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 (const {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="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> - -<h3 id="Rest_in_Object_Destructuring">Rest in Object Destructuring</h3> - -<p>The <a class="external external-icon" href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a> proposal (stage 4) adds the <a href="/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">rest</a> syntax to destructuring. Rest properties collect the remaining own enumerable property keys that are not already picked off by the destructuring pattern.</p> - -<pre class="brush: js">let {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40} -a; // 10 -b; // 20 -rest; // { c: 30, d: 40 }</pre> - -<h3 id="Invalid_JavaScript_identifier_as_a_property_name">Invalid JavaScript identifier as a property name</h3> - -<p>Destructuring can be used with property names that are not valid JavaScript {{glossary("Identifier", "identifiers")}} by providing an alternative identifier that is valid.</p> - -<pre class="brush: js">const foo = { 'fizz-buzz': true }; -const { 'fizz-buzz': fizzBuzz } = foo; - -console.log(fizzBuzz); // "true" -</pre> - -<h3 id="Combined_Array_and_Object_Destructuring">Combined Array and Object Destructuring</h3> - -<p>Array and Object destructuring can be combined. Say you want the third element in the array <code>props</code> below, and then you want the <code>name</code> property in the object, you can do the following:</p> - -<pre class="brush: js">const props = [ - { id: 1, name: 'Fizz'}, - { id: 2, name: 'Buzz'}, - { id: 3, name: 'FizzBuzz'} -]; - -const [,, { name }] = props; - -console.log(name); // "FizzBuzz" -</pre> - -<h3 id="The_prototype_chain_is_looked_up_when_the_object_is_deconstructed">The prototype chain is looked up when the object is deconstructed </h3> - -<p>When deconstructing an object, if a property is not accessed in itself, it will continue to look up along the prototype chain.</p> - -<pre class="brush: js">let obj = {self: '123'}; -obj.__proto__.prot = '456'; -const {self, prot} = obj; -// self "123" -// prot "456"（Access to the prototype chain）</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-destructuring-assignment', 'Destructuring assignment')}}</td> - </tr> - </tbody> -</table> - -<h2 id="Browser_compatibility">Browser compatibility</h2> - -<div> - - -<p>{{Compat("javascript.operators.destructuring")}}</p> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_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/ar/web/javascript/reference/operators/index.html b/files/ar/web/javascript/reference/operators/index.html deleted file mode 100644 index a5dc098a4f..0000000000 --- a/files/ar/web/javascript/reference/operators/index.html +++ /dev/null @@ -1,302 +0,0 @@ ---- -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>{{jsxref("Operators/class", "class")}}</dt> - <dd>The <code>class</code> keyword defines a class expression.</dd> - <dt>{{jsxref("Operators/function*", "function*")}}</dt> - <dd>The <code>function*</code> keyword defines a generator function expression.</dd> - <dt>{{jsxref("Operators/yield", "yield")}}</dt> - <dd>Pause and resume a generator function.</dd> - <dt>{{jsxref("Operators/yield*", "yield*")}}</dt> - <dd>Delegate to another generator function or iterable object.</dd> - <dt>{{experimental_inline}} {{jsxref("Operators/async_function", "async function*")}}</dt> - <dd>The <code>async function</code> defines an async function expression.</dd> - <dt>{{experimental_inline}} {{jsxref("Operators/await", "await")}}</dt> - <dd>Pause and resume an async function and wait for the promise's resolution/rejection.</dd> - <dt>{{jsxref("Global_Objects/Array", "[]")}}</dt> - <dd>Array initializer/literal syntax.</dd> - <dt>{{jsxref("Operators/Object_initializer", "{}")}}</dt> - <dd>Object initializer/literal syntax.</dd> - <dt>{{jsxref("Global_Objects/RegExp", "/ab+c/i")}}</dt> - <dd>Regular expression literal syntax.</dd> - <dt>{{jsxref("Operators/Grouping", "( )")}}</dt> - <dd>Grouping operator.</dd> -</dl> - -<h3 id="Left-hand-side_expressions">Left-hand-side expressions</h3> - -<p>Left values are the destination of an assignment.</p> - -<dl> - <dt>{{jsxref("Operators/Property_accessors", "Property accessors", "", 1)}}</dt> - <dd>Member operators provide access to a property or method of an object<br> - (<code>object.property</code> and <code>object["property"]</code>).</dd> - <dt>{{jsxref("Operators/new", "new")}}</dt> - <dd>The <code>new</code> operator creates an instance of a constructor.</dd> - <dt><a href="/en-US/docs/Web/JavaScript/Reference/Operators/new.target">new.target</a></dt> - <dd>In constructors, <code>new.target</code> refers to the constructor that was invoked by {{jsxref("Operators/new", "new")}}.</dd> - <dt>{{jsxref("Operators/super", "super")}}</dt> - <dd>The <code>super</code> keyword calls the parent constructor.</dd> - <dt>{{jsxref("Operators/Spread_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>{{jsxref("Operators/Arithmetic_Operators", "**", "#Exponentiation")}}</dt> - <dd>Exponentiation operator.</dd> -</dl> - -<h3 id="Relational_operators">Relational operators</h3> - -<p>A comparison operator compares its operands and returns a <code>Boolean</code> value based on whether the comparison is true.</p> - -<dl> - <dt>{{jsxref("Operators/in", "in")}}</dt> - <dd>The <code>in</code> operator determines whether an object has a given property.</dd> - <dt>{{jsxref("Operators/instanceof", "instanceof")}}</dt> - <dd>The <code>instanceof</code> operator determines whether an object is an instance of another object.</dd> - <dt>{{jsxref("Operators/Comparison_Operators", "<", "#Less_than_operator")}}</dt> - <dd>Less than operator.</dd> - <dt>{{jsxref("Operators/Comparison_Operators", ">", "#Greater_than_operator")}}</dt> - <dd>Greater than operator.</dd> - <dt>{{jsxref("Operators/Comparison_Operators", "<=", "#Less_than_or_equal_operator")}}</dt> - <dd>Less than or equal operator.</dd> - <dt>{{jsxref("Operators/Comparison_Operators", ">=", "#Greater_than_or_equal_operator")}}</dt> - <dd>Greater than or equal operator.</dd> -</dl> - -<div class="note"> -<p><strong>Note: =></strong> is not an operator, but the notation for <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions">Arrow functions</a>.</p> -</div> - -<h3 id="Equality_operators">Equality operators</h3> - -<p>The result of evaluating an equality operator is always of type <code>Boolean</code> based on whether the comparison is true.</p> - -<dl> - <dt>{{jsxref("Operators/Comparison_Operators", "==", "#Equality")}}</dt> - <dd>Equality operator.</dd> - <dt>{{jsxref("Operators/Comparison_Operators", "!=", "#Inequality")}}</dt> - <dd>Inequality operator.</dd> - <dt>{{jsxref("Operators/Comparison_Operators", "===", "#Identity")}}</dt> - <dd>Identity operator.</dd> - <dt>{{jsxref("Operators/Comparison_Operators", "!==", "#Nonidentity")}}</dt> - <dd>Nonidentity operator.</dd> -</dl> - -<h3 id="Bitwise_shift_operators">Bitwise shift operators</h3> - -<p>Operations to shift all bits of the operand.</p> - -<dl> - <dt>{{jsxref("Operators/Bitwise_Operators", "<<", "#Left_shift")}}</dt> - <dd>Bitwise left shift operator.</dd> - <dt>{{jsxref("Operators/Bitwise_Operators", ">>", "#Right_shift")}}</dt> - <dd>Bitwise right shift operator.</dd> - <dt>{{jsxref("Operators/Bitwise_Operators", ">>>", "#Unsigned_right_shift")}}</dt> - <dd>Bitwise unsigned right shift operator.</dd> -</dl> - -<h3 id="Binary_bitwise_operators">Binary bitwise operators</h3> - -<p>Bitwise operators treat their operands as a set of 32 bits (zeros and ones) and return standard JavaScript numerical values.</p> - -<dl> - <dt>{{jsxref("Operators/Bitwise_Operators", "&", "#Bitwise_AND")}}</dt> - <dd>Bitwise AND.</dd> - <dt>{{jsxref("Operators/Bitwise_Operators", "|", "#Bitwise_OR")}}</dt> - <dd>Bitwise OR.</dd> - <dt>{{jsxref("Operators/Bitwise_Operators", "^", "#Bitwise_XOR")}}</dt> - <dd>Bitwise XOR.</dd> -</dl> - -<h3 id="Binary_logical_operators">Binary logical operators</h3> - -<p>Logical operators are typically used with boolean (logical) values, and when they are, they return a boolean value.</p> - -<dl> - <dt>{{jsxref("Operators/Logical_Operators", "&&", "#Logical_AND")}}</dt> - <dd>Logical AND.</dd> - <dt>{{jsxref("Operators/Logical_Operators", "||", "#Logical_OR")}}</dt> - <dd>Logical OR.</dd> -</dl> - -<h3 id="Conditional_(ternary)_operator">Conditional (ternary) operator</h3> - -<dl> - <dt>{{jsxref("Operators/Conditional_Operator", "(condition ? ifTrue : ifFalse)")}}</dt> - <dd> - <p>The conditional operator returns one of two values based on the logical value of the condition.</p> - </dd> -</dl> - -<h3 id="Assignment_operators">Assignment operators</h3> - -<p>An assignment operator assigns a value to its left operand based on the value of its right operand.</p> - -<dl> - <dt>{{jsxref("Operators/Assignment_Operators", "=", "#Assignment")}}</dt> - <dd>Assignment operator.</dd> - <dt>{{jsxref("Operators/Assignment_Operators", "*=", "#Multiplication_assignment")}}</dt> - <dd>Multiplication assignment.</dd> - <dt>{{jsxref("Operators/Assignment_Operators", "/=", "#Division_assignment")}}</dt> - <dd>Division assignment.</dd> - <dt>{{jsxref("Operators/Assignment_Operators", "%=", "#Remainder_assignment")}}</dt> - <dd>Remainder assignment.</dd> - <dt>{{jsxref("Operators/Assignment_Operators", "+=", "#Addition_assignment")}}</dt> - <dd>Addition assignment.</dd> - <dt>{{jsxref("Operators/Assignment_Operators", "-=", "#Subtraction_assignment")}}</dt> - <dd>Subtraction assignment</dd> - <dt>{{jsxref("Operators/Assignment_Operators", "<<=", "#Left_shift_assignment")}}</dt> - <dd>Left shift assignment.</dd> - <dt>{{jsxref("Operators/Assignment_Operators", ">>=", "#Right_shift_assignment")}}</dt> - <dd>Right shift assignment.</dd> - <dt>{{jsxref("Operators/Assignment_Operators", ">>>=", "#Unsigned_right_shift_assignment")}}</dt> - <dd>Unsigned right shift assignment.</dd> - <dt>{{jsxref("Operators/Assignment_Operators", "&=", "#Bitwise_AND_assignment")}}</dt> - <dd>Bitwise AND assignment.</dd> - <dt>{{jsxref("Operators/Assignment_Operators", "^=", "#Bitwise_XOR_assignment")}}</dt> - <dd>Bitwise XOR assignment.</dd> - <dt>{{jsxref("Operators/Assignment_Operators", "|=", "#Bitwise_OR_assignment")}}</dt> - <dd>Bitwise OR assignment.</dd> - <dt>{{jsxref("Operators/Destructuring_assignment", "[a, b] = [1, 2]")}}<br> - {{jsxref("Operators/Destructuring_assignment", "{a, b} = {a:1, b:2}")}}</dt> - <dd> - <p>Destructuring assignment allows you to assign the properties of an array or object to variables using syntax that looks similar to array or object literals.</p> - </dd> -</dl> - -<h3 id="Comma_operator">Comma operator</h3> - -<dl> - <dt>{{jsxref("Operators/Comma_Operator", ",")}}</dt> - <dd>The comma operator allows multiple expressions to be evaluated in a single statement and returns the result of the last expression.</dd> -</dl> - -<h3 id="Non-standard_features">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> - <dt>{{non-standard_inline}} {{jsxref("Operators/Array_comprehensions", "[for (x of y) x]")}}</dt> - <dd>Array comprehensions.</dd> - <dt>{{non-standard_inline}} {{jsxref("Operators/Generator_comprehensions", "(for (x of y) y)")}}</dt> - <dd>Generator comprehensions.</dd> -</dl> - -<h2 id="Specifications">Specifications</h2> - -<table class="standard-table"> - <tbody> - <tr> - <th scope="col">Specification</th> - <th scope="col">Status</th> - <th scope="col">Comment</th> - </tr> - <tr> - <td>{{SpecName('ES1', '#sec-11', 'Expressions')}}</td> - <td>{{Spec2('ES1')}}</td> - <td>Initial definition</td> - </tr> - <tr> - <td>{{SpecName('ES5.1', '#sec-11', 'Expressions')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td> </td> - </tr> - <tr> - <td>{{SpecName('ES6', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> - <td>{{Spec2('ES6')}}</td> - <td>New: Spread operator, destructuring assignment, <code>super</code> keyword.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-ecmascript-language-expressions', 'ECMAScript Language: Expressions')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </td> - </tr> - </tbody> -</table> - -<h2 id="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/ar/web/javascript/reference/operators/object_initializer/index.html b/files/ar/web/javascript/reference/operators/object_initializer/index.html deleted file mode 100644 index b6df949722..0000000000 --- a/files/ar/web/javascript/reference/operators/object_initializer/index.html +++ /dev/null @@ -1,403 +0,0 @@ ---- -title: Object initializer تهيئة الكائن -slug: Web/JavaScript/Reference/Operators/Object_initializer -translation_of: Web/JavaScript/Reference/Operators/Object_initializer ---- -<div>{{JsSidebar("Operators")}}</div> - -<p> </p> - -<div style="font-size: 15; font-family: 'tahoma';"> -<p dir="rtl">يمكن تهيئة الكائنات باستخدام <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>()</code></a><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object"><code>new Object</code></a><code> او <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">()</a><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/create">Object.create</a></code> او باستخدام مهيئ الكائن (<code>Object initializer</code>). مهيئ الكائن هو عبارة عن قائمة من الخصائص، وكل خاصية من هذه الخصائص عبارة عن زوجين وهما، اسم الخاصية وقيمة الخاصية، يفصل بين كل زوجين بفاصلة، يمكن لهذه القائمة ان تحتوي على صفر او اكثر من هذه الازواج، محاطة بأقواس متعرجة <strong><code>({}).</code></strong></p> - -<h2 dir="rtl" id="Syntax">Syntax</h2> - -<pre class="brush: js">var o = {}; -var o = {a: 'foo', b: 42, c: {}}; - -var a = 'foo', b = 42, c = {}; -var o = {a: a, b: b, c: c}; - -var o = { - property: function ([parameters]) {}, - get property() {}, - set property(value) {} -}; -</pre> - -<h3 id="New_notations_in_ECMAScript_2015">New notations in ECMAScript 2015</h3> - -<p dir="rtl">يرجى الاطلاع على جدول التوافق اسفل الصفحة. هذه التعليمات البرمجية ستؤدي إلى أخطاء syntax errors، في البيئات الغير الداعمة.</p> - -<pre class="brush: js">// Shorthand property names (ES2015) -var a = 'foo', b = 42, c = {}; -var o = {a, b, c}; - -// Shorthand method names (ES2015) -var o = { - property([parameters]) {}, - get property() {}, - set property(value) {} -}; - -// Computed property names (ES2015) -var prop = 'foo'; -var o = { - [prop]: 'hey', - ['b' + 'ar']: 'there' -};</pre> - -<h2 dir="rtl" id="الوصف">الوصف</h2> - -<p dir="rtl">مهيئ الكائن هو تعبير عن كيفية وصف وتهيئة الكائن {{jsxref("Object")}}. تتكون الكائنات من الخصائص، والتي يتم استخدامها لوصف الكائن. قيمة خاصية الكائن يمكن أن تحتوي على أنواع البيانات الأولية {{Glossary("primitive")}} كما يمكنها ايضا ان تحتوي على كائنات اخرى.</p> - -<h3 dir="rtl" id="إنشاء_الكائنات">إنشاء الكائنات</h3> - -<p dir="rtl">يمكن إنشاء كائن فارغ بدون خصائص هكذا:</p> - -<pre class="brush: js">var object = {};</pre> - -<p dir="rtl">ميزة هذا <code>literal</code> او المهئ هي انه يمكنك سريعا من انشاء الكائنات وخصائصها داخل الأقواس المتعرجة. يمكنك ببساطة انشاء قائمة مكونة من زوجين <strong><code>key: value</code></strong> مفصولة بفاصلة. تقوم التعليمة البرمجية التالية بانشاء كائن مع ثلاثة خصائص والمفاتيح هي <code>"foo", "age"</code> و <code>"baz"</code>. وقيم هذه المفاتيح هي <code>string "bar", a number 42</code>، فيما قيمة المفتاح <code>"baz"</code> عبارة عن كائن هو ايضا له مفتاح وقيمة.</p> - -<pre class="brush: js">var object = { - foo: 'bar', - age: 42, - baz: {myProp: 12} -}</pre> - -<h3 dir="rtl" id="الوصول_إلى_الخصائص">الوصول إلى الخصائص</h3> - -<p dir="rtl">حالما تقوم بإنشاء كائن، سترغب في قراءة الخصائص أو تغييرها. يمكن الوصول إلى خصائص الكائن باستخدام نقطة التدوين او عن طريق الاقواس المربعة. راجع <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">property accessors</a> لمزيد من المعلومات.</p> - -<pre class="brush: js">object.foo; // "bar" -object['age']; // 42 - -object.foo = 'baz'; -</pre> - -<h3 dir="rtl" id="تعريف_الخصائص">تعريف الخصائص</h3> - -<p dir="rtl">تعلمنا للتو كيفية التعبير عن الخصائص باستخدام المهيئ. تجدر الإشارة الى انه في كثير من الأحيان، سترغب في تمرير متغيرات الى الكائن. يمكنك تمريها على هذا النحو:</p> - -<pre class="brush: js">var a = 'foo', - b = 42, - c = {}; - -var o = { - a: a, - b: b, - c: c -};</pre> - -<p dir="rtl">ECMAScript 2015، جاءت بطريقة مختصرة لتحقيق نفس الغرض:</p> - -<pre class="brush: js">var a = 'foo', - b = 42, - c = {}; - -// Shorthand property names (ES2015) -var o = {a, b, c}; - -// In other words, -console.log((o.a === {a}.a)); // true -</pre> - -<h4 dir="rtl" id="أسماء_الخصائص_المكررة">أسماء الخصائص المكررة</h4> - -<p dir="rtl">عند استخدام الخصائص باسماء مكررة، سوف تقوم الخاصية الثانية بالكتابة فوق الأولى.</p> - -<pre class="brush: js">var a = {x: 1, x: 2}; -console.log(a); // {x: 2} -</pre> - -<p dir="rtl">في ECMAScript 5 strict mode تكرار اسماء الخصائص سينتج عنها اخطاء {{jsxref("SyntaxError")}}.</p> - -<pre class="brush: js">function haveES2015DuplicatePropertySemantics() { - 'use strict'; - try { - ({prop: 1, prop: 2}); - - // No error thrown, duplicate property names allowed in strict mode - return true; - } catch(e) { - // Error thrown, duplicates prohibited in strict mode - return false; - } -}</pre> - -<h3 dir="rtl" id="تعريف_الوظائف">تعريف الوظائف</h3> - -<p dir="rtl">خاصية الكائن يمكن أن تشير أيضا إلى الوظائف <a href="/en-US/docs/Web/JavaScript/Reference/Functions">function</a> او <a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> او <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a>.</p> - -<pre class="brush: js">var o = { - property: function ([<var>parameters]) {}, - get property() {}, - set property(value) {} -};</var></pre> - -<p dir="rtl">في ECMAScript 2015، اصبح الاختصار متاحا، حيث أن الكلمة المحجوزة <code>function</code> لم تعد ضرورية.</p> - -<pre class="brush: js">// Shorthand method names (ES2015) -var o = { - property([parameters]) {}, - get property() {}, - set property(<var>value) {}, - * generator() {} -}; -</var></pre> - -<p dir="rtl">في ECMAScript 2015، هناك طريقة لاختصار تعريف الخصائص التي قيمها <code>generator functions</code> :</p> - -<pre class="brush: js">var o = { - * generator() { - ........... - } -};</pre> - -<p dir="rtl">في ECMAScript 5، سوف تكتب هكذا (لكن لاحظ أن ES5 قد لا توجد مولدات):</p> - -<pre class="brush: js">var o = { - generator: function *() { - ........... - } -};</pre> - -<p dir="rtl">لمزيد من المعلومات والأمثلة حول الوظائف، راجع <a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">method definitions</a>.</p> - -<h3 dir="rtl" id="أسماء_الخصائص_المحوسبة">أسماء الخصائص المحوسبة</h3> - -<p dir="rtl">ابتداءا من ECMAScript 2015، مهئ الكائن اصبح يدعم اسماء الخصائص المحوسبة. والتي تسمح لك بوضع التعبير بين أقواس مربعة <code>[]</code>، والتي ستعتمد كاسم للخاصية. وهي متسقة مع الاقواس المربعة التي تستخدم للوصول الى الخصائص، <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">property accessor</a> والتي قد تستخدم بالفعل لقراءة وتعيين الخصائص. الآن يمكنك استخدام نفس التعبير المستخدم في <code>object literals</code>، هكذا:</p> - -<pre class="brush: js">// Computed property names (ES2015) -var i = 0; -var a = { - ['foo' + ++i]: i, - ['foo' + ++i]: i, - ['foo' + ++i]: i -}; - -console.log(a.foo1); // 1 -console.log(a.foo2); // 2 -console.log(a.foo3); // 3 - -var param = 'size'; -var config = { - [param]: 12, - ['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4 -}; - -console.log(config); // {size: 12, mobileSize: 4}</pre> - -<h3 id="Prototype_mutation">Prototype mutation</h3> - -<p dir="rtl">الخاصية المعرفة على هذا الشكل <strong><code>proto__: value__ او proto__": value__</code></strong><strong><code>" </code></strong>لا تقوم بإنشاء خاصية جديدة باسم <code>__proto__</code>. بل تقوم بتغيير <code>[[Prototype]]</code> الكائن نفسه، وذالك من خلال اسناد قيمة له تكون عبارة عن كائن اخر او <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/null"><code>null</code></a>. (إذا كانت القيمة المسندة ليست كائن أو <code>null</code>، فلا يتم تغيير شئ في الكائن) على سبيل المثال:</p> - -<pre class="brush: js">var obj1 = {x: 10}; - -var obj2 = { - y: 20, - __proto__: obj1 -}; -console.log( obj2.x ); // log: 10 </pre> - -<p dir="rtl">تبين التعليمة البرمجية التالية، بعض التحققات من بعض انواع التغييرات:</p> - -<pre class="brush: js">var obj1 = {}; -assert(Object.getPrototypeOf(obj1) === Object.prototype); // true - -var obj2 = {__proto__: null}; -assert(Object.getPrototypeOf(obj2) === null); // true - -var protoObj = {}; -var obj3 = {'__proto__': protoObj}; -assert(Object.getPrototypeOf(obj3) === protoObj); // true - -var obj4 = {__proto__: 'not an object or null'}; -assert(Object.getPrototypeOf(obj4) === Object.prototype); // true -assert(!obj4.hasOwnProperty('__proto__')); // true -</pre> - -<p dir="rtl">لا يسمح بتغيير ال <code>prototype</code> الا مرة واحدة في <code>object</code> <code>literal،</code> واكثر من تغيير في ال <code>prototype</code> سيؤدي الى syntax error.</p> - -<p dir="rtl">الخواص التي لا تستخدم النقطتين <code>(:)</code> تصبح خواص عادية وتتصرف كاي اسم اخر، وليس لها علاقة بتغيير ال <code>prototype</code>:</p> - -<pre class="brush: js">var __proto__ = 'variable'; - -var obj1 = {__proto__}; -assert(Object.getPrototypeOf(obj1) === Object.prototype); -assert(obj1.hasOwnProperty('__proto__')); -assert(obj1.__proto__ === 'variable'); - -var obj2 = {__proto__() { return 'hello'; }}; -assert(obj2.__proto__() === 'hello'); - -var obj3 = {['__prot' + 'o__']: 17}; -assert(obj3.__proto__ === 17); -</pre> - -<h2 id="Object_literal_notation_vs_JSON">Object literal notation vs JSON</h2> - -<p dir="rtl">ال <strong><code>object</code> <code>literal</code> <code>notation</code></strong> ليس هو نفسه <strong>J</strong>ava<strong>S</strong>cript <strong>O</strong>bject <strong>N</strong>otation (<a href="/en-US/docs/Glossary/JSON">JSON</a>). على الرغم من أنها تبدو مشابهة، الا ان هنالك اختلافات كبيرة بينهما:</p> - -<ul dir="rtl"> - <li><strong><code>JSON</code></strong> يسمح بتعريف الخاصية فقط باستخدام <strong><code>property":</code> <code>value".</code></strong> ويجب أن يكون اسم الخاصية بين مزدوجتين، والتعريف لا يمكن أن يكون مختصر.</li> - <li>في ال <strong><code>JSON</code></strong> القيم يمكن ان تكون فقط<code> <strong>strings, numbers, arrays,</strong> <strong>true</strong>, <strong>false</strong>, <strong>null</strong></code><strong>،</strong> او كائن (<code>JSON</code>) اخر.</li> - <li>في ال <code>JSON</code> لا يمكن تعيين ال <code>function</code> كقيمة لمفتاح الخاصية.</li> - <li>الكائنات مثل {{jsxref("Date")}} سوف تصبح سلسلة نصية بعد {{jsxref("()JSON.parse")}}.</li> - <li>{{jsxref("()JSON.parse")}} سوف يرفض اسماء الخصائص المحوسبة، وسينتج عن ذالك اخطاء.</li> -</ul> -</div> - -<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-11.1.5', 'Object Initializer')}}</td> - <td>{{Spec2('ES5.1')}}</td> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">getter</a> and <a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">setter</a> added.</td> - </tr> - <tr> - <td>{{SpecName('ES2015', '#sec-object-initializer', 'Object Initializer')}}</td> - <td>{{Spec2('ES2015')}}</td> - <td>Shorthand method/property names and computed property names added.</td> - </tr> - <tr> - <td>{{SpecName('ESDraft', '#sec-object-initializer', 'Object Initializer')}}</td> - <td>{{Spec2('ESDraft')}}</td> - <td> </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>Edge</th> - <th>Firefox (Gecko)</th> - <th>Internet Explorer</th> - <th>Opera</th> - <th>Safari</th> - </tr> - <tr> - <td>Basic support</td> - <td>{{CompatChrome(1.0)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("1.0")}}</td> - <td>1</td> - <td>1</td> - <td>1</td> - </tr> - <tr> - <td>Computed property names</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("34")}}</td> - <td>{{CompatNo}}</td> - <td>34</td> - <td>7.1</td> - </tr> - <tr> - <td>Shorthand property names</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("33")}}</td> - <td>{{CompatNo}}</td> - <td>34</td> - <td>9</td> - </tr> - <tr> - <td>Shorthand method names</td> - <td>{{CompatChrome(42.0)}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoDesktop("34")}}</td> - <td>{{CompatNo}}</td> - <td>34</td> - <td>9</td> - </tr> - </tbody> -</table> -</div> - -<div id="compat-mobile"> -<table class="compat-table"> - <tbody> - <tr> - <th>Feature</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>Basic support</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("1.0")}}</td> - <td>1</td> - <td>1</td> - <td>1</td> - <td>{{CompatChrome(1.0)}}</td> - </tr> - <tr> - <td>Computed property names</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("34")}}</td> - <td>{{CompatNo}}</td> - <td>34</td> - <td>7.1</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>Shorthand property names</td> - <td>{{CompatNo}}</td> - <td>{{CompatVersionUnknown}}</td> - <td>{{CompatGeckoMobile("33")}}</td> - <td>{{CompatNo}}</td> - <td>34</td> - <td>9</td> - <td>{{CompatNo}}</td> - </tr> - <tr> - <td>Shorthand method names</td> - <td>{{CompatNo}}</td> - <td>{{CompatChrome(42.0)}}</td> - <td>{{CompatGeckoMobile("34")}}</td> - <td>{{CompatNo}}</td> - <td>34</td> - <td>9</td> - <td>{{CompatChrome(42.0)}}</td> - </tr> - </tbody> -</table> -</div> - -<h2 id="See_also">See also</h2> - -<ul> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors">Property accessors</a></li> - <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/get">get</a></code> / <code><a href="/en-US/docs/Web/JavaScript/Reference/Functions/set">set</a></code></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions">Method definitions</a></li> - <li><a href="/en-US/docs/Web/JavaScript/Reference/Lexical_grammar">Lexical grammar</a></li> -</ul> diff --git a/files/ar/web/javascript/reference/operators/operator_precedence/index.html b/files/ar/web/javascript/reference/operators/operator_precedence/index.html deleted file mode 100644 index 8b71a69143..0000000000 --- a/files/ar/web/javascript/reference/operators/operator_precedence/index.html +++ /dev/null @@ -1,420 +0,0 @@ ---- -title: أسبقية العوامل -slug: Web/JavaScript/Reference/Operators/Operator_Precedence -tags: - - أسبقية العوامل - - جافا سكربت - - عوامل رياضية -translation_of: Web/JavaScript/Reference/Operators/Operator_Precedence ---- -<div>{{jsSidebar("Operators")}}</div> - -<p dir="rtl"><strong>أسبقية العوامل</strong> تحدد الطريقة التي يتم بها تعامل كل من العوامل مع بعضها. العوامل ذات الأسبقية العليا تسبق العوامل ذات الأسبقية المنخفضة.</p> - -<div>{{EmbedInteractiveExample("pages/js/expressions-operatorprecedence.html")}}</div> - - - -<h2 dir="rtl" id="الترابطات"><strong>الترابطات </strong></h2> - -<p dir="rtl">تحدد الترابطات الطريقة التي يتم بها تحليل العوامل التي لها نفس الأسبقية. على سبيل المثال، لنقل أن:</p> - -<pre class="syntaxbox">a OP b OP c -</pre> - -<p dir="rtl">تعني كلمة رابط - يسار (من اليسار إلى اليمين) أنها تتم معالجتها كـ <code>a OP b) OP c</code>) ، بينما تعني رابط - يمين (من اليمين إلى اليسار) أنها تُفسَّر على أنها (a OP (b OP c. عوامل التعيين هي رابط-يمين، حيث يمكنك كتابة:</p> - -<pre class="brush: js">a = b = 5; -</pre> - -<p dir="rtl">مع النتيجة المتوقعة أن تحصل a و b على القيمة 5. وذلك لأن عامل التعيين يُرجع القيمة التي تم تعيينها. أولاً، يتم تعيين b على 5. ثم يتم تعيين a أيضًا على 5 ، قيمة الإرجاع b = 5 ، ويعرف أيضًا باسم المعامل الأيمن للتعيين.</p> - -<h2 dir="rtl" id="أمثلة">أمثلة:</h2> - -<pre><code>3 > 2 && 2 > 1 -// returns true تعيد لنا صح - -3 > 2 > 1 -// returns false because 3 > 2 is true, and true > 1 is false تعيد خطأ لأن 3>2 هي صحيحة، وصح > 1 هو خطأ -// Adding parentheses makes things clear: (3 > 2) > 1 إضافة الأقواس تجعل كل شيء واضح: (3>2) 1</code></pre> - -<h2 dir="rtl" id="الجدول">الجدول</h2> - -<p dir="rtl">الجدول التالي مرتب من (20) الأعلى أسبقية إلى الأقل وهو (1).</p> - -<table class="fullwidth-table"> - <tbody> - <tr> - <th>Precedence</th> - <th>Operator type</th> - <th>Associativity</th> - <th>Individual operators</th> - </tr> - <tr> - <td>21</td> - <td>{{jsxref("Operators/Grouping", "Grouping", "", 1)}} تجميع</td> - <td>n/a</td> - <td><code>( … )</code></td> - </tr> - <tr> - <td colspan="1" rowspan="5">20</td> - <td>{{jsxref("Operators/Property_Accessors", "Member Access", "#Dot_notation", 1)}} الوصول الى عنصر</td> - <td> - <p>left-to-right</p> - - <p>من اليسار الى اليمين</p> - </td> - <td><code>… . …</code></td> - </tr> - <tr> - <td>{{jsxref("Operators/Property_Accessors", "Computed Member Access","#Bracket_notation", 1)}} الوصول لعنصر محسوب</td> - <td> - <p>left-to-right</p> - - <p>من اليسار الى اليمين</p> - </td> - <td><code>… [ … ]</code></td> - </tr> - <tr> - <td>{{jsxref("Operators/new","new")}} (with argument list) جديد مع (قائمة معاملات)</td> - <td>n/a</td> - <td><code>new … ( … )</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/JavaScript/Guide/Functions">Function Call</a> استدعاء دالة</td> - <td> - <p>left-to-right</p> - - <p>من اليسار الى اليمين</p> - </td> - <td><code>… ( <var>… </var>)</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Optional_chaining">Optional chaining</a> تسلسل اختياري</td> - <td> - <p>left-to-right</p> - - <p>من اليسار الى اليمين</p> - </td> - <td><code>?.</code></td> - </tr> - <tr> - <td rowspan="1">19</td> - <td>{{jsxref("Operators/new","new")}} (without argument list) جديد .. بدون قائمة معاملات</td> - <td> - <p>right-to-left</p> - - <p>من اليمين الى اليسار</p> - </td> - <td><code>new …</code></td> - </tr> - <tr> - <td rowspan="2">18</td> - <td>{{jsxref("Operators/Arithmetic_Operators","Postfix Increment","#Increment", 1)}} إضافة بعد إعادة النتيجة </td> - <td colspan="1" rowspan="2">n/a</td> - <td><code>… ++</code></td> - </tr> - <tr> - <td>{{jsxref("Operators/Arithmetic_Operators","Postfix Decrement","#Decrement", 1)}} طرح بعد إعادة النتيجة</td> - <td><code>… --</code></td> - </tr> - <tr> - <td colspan="1" rowspan="10">17</td> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_NOT">Logical NOT</a> نفي منطقي</td> - <td colspan="1" rowspan="10"> - <p>right-to-left</p> - - <p>من اليمين الى اليسار</p> - </td> - <td><code>! …</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_NOT">Bitwise NOT</a> نفي بالبت</td> - <td><code>~ …</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_plus">Unary Plus</a> + أحادي</td> - <td><code>+ …</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Unary_negation">Unary Negation</a> - أحادي</td> - <td><code>- …</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Increment">Prefix Increment</a> إضافة قبل إعادة النتيجة</td> - <td><code>++ …</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Decrement">Prefix Decrement</a> طرح قبل إعادة النتيجة</td> - <td><code>-- …</code></td> - </tr> - <tr> - <td>{{jsxref("Operators/typeof", "typeof")}} نوع ال</td> - <td><code>typeof …</code></td> - </tr> - <tr> - <td>{{jsxref("Operators/void", "void")}} مجموعة خالية</td> - <td><code>void …</code></td> - </tr> - <tr> - <td>{{jsxref("Operators/delete", "delete")}} حذف</td> - <td><code>delete …</code></td> - </tr> - <tr> - <td>{{jsxref("Operators/await", "await")}} انتظار</td> - <td><code>await …</code></td> - </tr> - <tr> - <td>16</td> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Exponentiation">Exponentiation</a> أُس (الرفع الى قوة)</td> - <td> - <p>right-to-left</p> - - <p>من اليمين الى اليسار</p> - </td> - <td><code>… ** …</code></td> - </tr> - <tr> - <td rowspan="3">15</td> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Multiplication">Multiplication</a> الضرب</td> - <td colspan="1" rowspan="3"> - <p>left-to-right</p> - - <p>من اليسار الى اليمين</p> - </td> - <td><code>… * …</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Division">Division</a> القسمة</td> - <td><code>… / …</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Remainder">Remainder</a> الباقي</td> - <td><code>… % …</code></td> - </tr> - <tr> - <td rowspan="2">14</td> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Addition">Addition</a> الجمع</td> - <td colspan="1" rowspan="2"> - <p>left-to-right</p> - - <p>من اليسار الى اليمين</p> - </td> - <td><code>… + …</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Arithmetic_Operators#Subtraction">Subtraction</a> الطرح</td> - <td><code>… - …</code></td> - </tr> - <tr> - <td rowspan="3">13</td> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Bitwise Left Shift</a> إزاحة لليسار بالبت</td> - <td colspan="1" rowspan="3"> - <p>left-to-right</p> - - <p>من اليسار الى اليمين</p> - </td> - <td><code>… << …</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Bitwise Right Shift</a> إزاحة لليمين بالبت</td> - <td><code>… >> …</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators">Bitwise Unsigned Right Shift</a></td> - <td><code>… >>> …</code></td> - </tr> - <tr> - <td rowspan="6">12</td> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than_operator">Less Than</a> أصغر من</td> - <td colspan="1" rowspan="6"> - <p>left-to-right</p> - - <p>من اليسار الى اليمين</p> - </td> - <td><code>… < …</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Less_than__or_equal_operator">Less Than Or Equal</a> أصغر من أو يساوي</td> - <td><code>… <= …</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_operator">Greater Than</a> أكبر من</td> - <td><code>… > …</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Greater_than_or_equal_operator">Greater Than Or Equal</a> أكبر من أو يساوي</td> - <td><code>… >= …</code></td> - </tr> - <tr> - <td>{{jsxref("Operators/in", "in")}} في</td> - <td><code>… in …</code></td> - </tr> - <tr> - <td>{{jsxref("Operators/instanceof", "instanceof")}} مشتق من </td> - <td><code>… instanceof …</code></td> - </tr> - <tr> - <td rowspan="4">11</td> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Equality">Equality</a> يساوي</td> - <td colspan="1" rowspan="4"> - <p>left-to-right</p> - - <p>من اليسار الى اليمين</p> - </td> - <td><code>… == …</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Inequality">Inequality</a> لا يساوي</td> - <td><code>… != …</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Identity">Strict Equality</a> مساواة قطعية</td> - <td><code>… === …</code></td> - </tr> - <tr> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comparison_Operators#Nonidentity">Strict Inequality</a> لا يساوي قطعيا</td> - <td><code>… !== …</code></td> - </tr> - <tr> - <td>10</td> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_AND">Bitwise AND</a> و بالبت</td> - <td> - <p>left-to-right</p> - - <p>من اليسار الى اليمين</p> - </td> - <td><code>… & …</code></td> - </tr> - <tr> - <td>9</td> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_XOR">Bitwise XOR</a> </td> - <td> - <p>left-to-right</p> - - <p>من اليسار الى اليمين</p> - </td> - <td><code>… ^ …</code></td> - </tr> - <tr> - <td>8</td> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_Operators#Bitwise_OR">Bitwise OR</a> أو بالبت</td> - <td> - <p>left-to-right</p> - - <p>من اليسار الى اليمين</p> - </td> - <td><code>… | …</code></td> - </tr> - <tr> - <td>7</td> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator">Nullish coalescing operator</a></td> - <td> - <p>left-to-right</p> - - <p>من اليسار الى اليمين</p> - </td> - <td><code>… ?? …</code></td> - </tr> - <tr> - <td>6</td> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_AND">Logical AND</a> و المنطقية</td> - <td> - <p>left-to-right</p> - - <p>من اليسار الى اليمين</p> - </td> - <td><code>… && …</code></td> - </tr> - <tr> - <td>5</td> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Logical_Operators#Logical_OR">Logical OR</a> أو المنطقية</td> - <td> - <p>left-to-right</p> - - <p>من اليسار الى اليمين</p> - </td> - <td><code>… || …</code></td> - </tr> - <tr> - <td>4</td> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator">Conditional</a> الشرطية</td> - <td> - <p>right-to-left</p> - - <p>من اليمين الى اليسار</p> - </td> - <td><code>… ? … : …</code></td> - </tr> - <tr> - <td rowspan="13">3</td> - <td rowspan="13"><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Assignment</a> التعيين</td> - <td rowspan="13"> - <p>right-to-left</p> - - <p>من اليمين الى اليسار</p> - </td> - <td><code>… = …</code></td> - </tr> - <tr> - <td><code>… += …</code></td> - </tr> - <tr> - <td><code>… -= …</code></td> - </tr> - <tr> - <td><code>… **= …</code></td> - </tr> - <tr> - <td><code>… *= …</code></td> - </tr> - <tr> - <td><code>… /= …</code></td> - </tr> - <tr> - <td><code>… %= …</code></td> - </tr> - <tr> - <td><code>… <<= …</code></td> - </tr> - <tr> - <td><code>… >>= …</code></td> - </tr> - <tr> - <td><code>… >>>= …</code></td> - </tr> - <tr> - <td><code>… &= …</code></td> - </tr> - <tr> - <td><code>… ^= …</code></td> - </tr> - <tr> - <td><code>… |= …</code></td> - </tr> - <tr> - <td rowspan="2">2</td> - <td>{{jsxref("Operators/yield", "yield")}}</td> - <td colspan="1" rowspan="2"> - <p>right-to-left</p> - - <p>من اليمين الى اليسار</p> - </td> - <td><code>yield …</code></td> - </tr> - <tr> - <td>{{jsxref("Operators/yield*", "yield*")}}</td> - <td><code>yield* …</code></td> - </tr> - <tr> - <td>1</td> - <td><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Comma_Operator">Comma / Sequence</a> فاصلة / تسلسل</td> - <td> - <p>left-to-right</p> - - <p>من اليسار الى اليمين</p> - </td> - <td><code>… , …</code></td> - </tr> - </tbody> -</table> |