fix: converted single to triple backticks10 (#36237)
This commit is contained in:
@ -12,37 +12,41 @@ localeTitle: تعليقات
|
||||
|
||||
الطريقة الأولى هي `//` التعليق ؛ كل النص التالي `//` على نفس السطر في تعليق. فمثلا:
|
||||
|
||||
`function hello() {
|
||||
// This is a one line JavaScript comment
|
||||
console.log("Hello world!");
|
||||
}
|
||||
hello();
|
||||
`
|
||||
```javascript
|
||||
function hello() {
|
||||
// This is a one line JavaScript comment
|
||||
console.log("Hello world!");
|
||||
}
|
||||
hello();
|
||||
```
|
||||
|
||||
والطريقة الثانية هي `/* */` comment ، التي يمكن استخدامها للتعليقات ذات السطر الواحد والمتعددة الخطوط. فمثلا:
|
||||
|
||||
`function hello() {
|
||||
/* This is a one line JavaScript comment */
|
||||
console.log("Hello world!");
|
||||
}
|
||||
hello();
|
||||
`
|
||||
```javascript
|
||||
function hello() {
|
||||
/* This is a one line JavaScript comment */
|
||||
console.log("Hello world!");
|
||||
}
|
||||
hello();
|
||||
```
|
||||
|
||||
`function hello() {
|
||||
/* This comment spans multiple lines. Notice
|
||||
that we don't need to end the comment until we're done. */
|
||||
console.log("Hello world!");
|
||||
}
|
||||
hello();
|
||||
`
|
||||
```javascript
|
||||
function hello() {
|
||||
/* This comment spans multiple lines. Notice
|
||||
that we don't need to end the comment until we're done. */
|
||||
console.log("Hello world!");
|
||||
}
|
||||
hello();
|
||||
```
|
||||
|
||||
يمكنك أيضًا منع تنفيذ شفرة جافا سكريبت فقط عند استخدام خطوط الرمز مثل هذا:
|
||||
|
||||
`function hello() {
|
||||
/*console.log("Hello world!");*/
|
||||
}
|
||||
hello();
|
||||
`
|
||||
```javascript
|
||||
function hello() {
|
||||
/*console.log("Hello world!");*/
|
||||
}
|
||||
hello();
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
@ -59,22 +63,24 @@ localeTitle: تعليقات
|
||||
|
||||
كما أن التعليقات مفيدة جدًا لاختبار الشفرة حيث يمكنك منع تشغيل سطر / فقرة رمز معين
|
||||
|
||||
`function hello() {
|
||||
// The statement below is not going to get executed
|
||||
// console.log('hi')
|
||||
}
|
||||
hello();
|
||||
`
|
||||
```javascript
|
||||
function hello() {
|
||||
// The statement below is not going to get executed
|
||||
// console.log('hi')
|
||||
}
|
||||
hello();
|
||||
```
|
||||
|
||||
`function hello() {
|
||||
// The statements below are not going to get executed
|
||||
/*
|
||||
console.log('hi');
|
||||
console.log('code-test');
|
||||
*/
|
||||
}
|
||||
hello();
|
||||
`
|
||||
```
|
||||
function hello() {
|
||||
// The statements below are not going to get executed
|
||||
/*
|
||||
console.log('hi');
|
||||
console.log('code-test');
|
||||
*/
|
||||
}
|
||||
hello();
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -10,21 +10,22 @@ localeTitle: نموذج التزامن وحلقة الحدث
|
||||
|
||||
لنأخذ مثال الكود لفهم مكدس المكالمات
|
||||
|
||||
`function multiply(x,y) {
|
||||
return x * y;
|
||||
}
|
||||
|
||||
function squared(n) {
|
||||
return multiply(n,n)
|
||||
}
|
||||
|
||||
function printSquare(n) {
|
||||
return squared(n)
|
||||
}
|
||||
|
||||
let numberSquared = printSquare(5);
|
||||
console.log(numberSquared);
|
||||
`
|
||||
```javascript
|
||||
function multiply(x,y) {
|
||||
return x * y;
|
||||
}
|
||||
|
||||
function squared(n) {
|
||||
return multiply(n,n)
|
||||
}
|
||||
|
||||
function printSquare(n) {
|
||||
return squared(n)
|
||||
}
|
||||
|
||||
let numberSquared = printSquare(5);
|
||||
console.log(numberSquared);
|
||||
```
|
||||
|
||||
أولاً عند تنفيذ التعليمات البرمجية وقت التشغيل خلال كل تعريفات الدالة ولكن عندما يصل إلى السطر حيث يتم استدعاء الدالة الأولى **printSquare (5)** فإنه سيتم دفع هذه الوظيفة إلى مكدس الاستدعاءات. بعد ذلك ، ستنفذ هذه الوظيفة وستواجه ، قبل إعادتها ، دالة أخرى **مربعة (n)** بحيث ستعلق العملية الحالية وتدفع هذه الوظيفة إلى أعلى الوظيفة الحالية. ينفذ الدالة في هذه الحالة الدالة التربيعية وأخيرًا يواجه دالة أخرى **مضاعفة (n، n)** ومن ثم فإنه يعلق عمليات التنفيذ الحالية ويدفع هذه الوظيفة إلى مكدس الاستدعاءات. ينفذ ضرب ويعود مع قيمة مضروب. وأخيرًا ، ترجع الدالة التربيعية وتنبثق من الحزمة ثم ينتقل نفس الشيء مع printSquare. يتم تخصيص القيمة التربيعية النهائية للمتغير numberSquared. نحن نواجه مرة أخرى استدعاء دالة في هذه الحالة هو عبارة console.log () بحيث يدفع وقت التشغيل هذا إلى المكدس الذي ينفذها وبالتالي طباعة الرقم التربيعي على وحدة التحكم. وتجدر الإشارة إلى أن الوظيفة الأولى التي يتم دفعها إلى الكدسة قبل تشغيل أي من التعليمات البرمجية المذكورة أعلاه هي الوظيفة الرئيسية التي يُشار إليها في وقت التشغيل بأنها "وظيفة مجهولة".
|
||||
|
||||
@ -44,14 +45,15 @@ localeTitle: نموذج التزامن وحلقة الحدث
|
||||
|
||||
دعونا نفهم هذا مع مثال الكود
|
||||
|
||||
`console.log('hi');
|
||||
|
||||
setTimeout(function() {
|
||||
console.log('freecodeCamp')
|
||||
},5000);
|
||||
|
||||
console.log('JS')
|
||||
`
|
||||
```javascript
|
||||
console.log('hi');
|
||||
|
||||
setTimeout(function() {
|
||||
console.log('freecodeCamp')
|
||||
},5000);
|
||||
|
||||
console.log('JS')
|
||||
```
|
||||
|
||||
عندما ينفّذ السطر الأول ، يكون الأمر console.log () وهو عبارة عن استدعاء للوظيفة ، مما يعني أن هذه الوظيفة يتم دفعها إلى مكدس الاستدعاءات حيث تقوم بتنفيذ الطباعة "hi" إلى وحدة التحكم وأخيراً يتم إرجاعها ويتم إفراغها من المكدس. ثم عندما يذهب وقت التشغيل لتنفيذ setTimeout () فإنه يعرف أن هذا هو API على شبكة الإنترنت ، وبالتالي فإنه يعطيها إلى المتصفح للتعامل مع تنفيذ ذلك. يبدأ المتصفح في تشغيل جهاز ضبط الوقت ثم ينبثق وقت تشغيل JS في وضع setTimeout () خارج الحزمة. يواجه استدعاء آخر console.log () ومن ثم فإنه يدفع هذا في مكدس الاستدعاءات يتم تسجيل الرسالة 'JS' في وحدة التحكم ومن ثم يتم إرجاعها ومن ثم يتم إفراغ الأخير console.log () إيقاف المكدس. الآن مكدس الاستدعاءات فارغ. في الوقت نفسه بينما كان كل هذا يحدث على انتهاء جهاز ضبط الوقت الذي يكون عند مرور 5 ثوان ، ينتقل المتصفح ويدفع وظيفة رد الاتصال إلى قائمة انتظار رد الاتصال. بعد ذلك ، تقوم حلقة الحدث بالتحقق مما إذا كانت مكدس الاستدعاءات مجاني أم لا. نظرًا لأنه مجاني ، فإنه يأخذ وظيفة رد الاتصال ويدفعه مرة أخرى إلى مكدس الاستدعاءات الذي ينفذ الشفرة بداخله. مرة أخرى داخل التعليمات البرمجية هناك استدعاء console.log () بحيث تنتقل هذه الوظيفة إلى الجزء العلوي من المكدس الذي يسجل "freecodecamp" في وحدة التحكم وأخيراً يتم إرجاعه يعني أنه يحصل poppped إيقاف المكدس وأخيراً ينفجر رد الاتصال من المكدس وإننا انتهينا.
|
||||
|
||||
|
@ -8,26 +8,30 @@ localeTitle: مشغلون شرطيون شرطيون
|
||||
|
||||
المشغل الثلاثي هو طريقة مدمجة لكتابة if-else داخل تعبير.
|
||||
|
||||
`const thing = (condition) ? <if true> : <if false>;
|
||||
`
|
||||
```js
|
||||
const thing = (condition) ? <if true> : <if false>;
|
||||
```
|
||||
|
||||
على سبيل المثال
|
||||
|
||||
`const cappedInput = input > 50 ? 50 : input // this will cap the input at 50
|
||||
`
|
||||
```js
|
||||
const cappedInput = input > 50 ? 50 : input // this will cap the input at 50
|
||||
```
|
||||
|
||||
### آخر إذا
|
||||
|
||||
يمكنك أيضًا تشغيل مشغلات ثلاثية ، وبهذه الطريقة سيكون لديك سلوك آخر في حالة ما عدا ذلك
|
||||
|
||||
`<first condition> ? <value if first true>
|
||||
: <second condition> ? <value if second is true>
|
||||
: <fallback value>
|
||||
`
|
||||
```js
|
||||
<first condition> ? <value if first true>
|
||||
: <second condition> ? <value if second is true>
|
||||
: <fallback value>
|
||||
```
|
||||
|
||||
> **نصيحة للمحترفين** : كما ترى ، يمكنك تقسيم المشغل الثلاثي على عدة أسطر على سبيل المثال
|
||||
|
||||
`const wealth = housesOwned > 3 ? "rich"
|
||||
: housesOwned > 1 ? "nothing to complain"
|
||||
: "poor"
|
||||
`
|
||||
```
|
||||
const wealth = housesOwned > 3 ? "rich"
|
||||
: housesOwned > 1 ? "nothing to complain"
|
||||
: "poor"
|
||||
```
|
@ -8,62 +8,66 @@ localeTitle: خطأ في التعامل ومحاولة رمي الصيد
|
||||
|
||||
#### `try...catch`
|
||||
|
||||
`try {
|
||||
throw new Error('my error');
|
||||
}
|
||||
catch (e) {
|
||||
console.error(e.message);
|
||||
}
|
||||
|
||||
// Output:
|
||||
// my error
|
||||
`
|
||||
```javascript
|
||||
try {
|
||||
throw new Error('my error');
|
||||
}
|
||||
catch (e) {
|
||||
console.error(e.message);
|
||||
}
|
||||
|
||||
// Output:
|
||||
// my error
|
||||
```
|
||||
|
||||
#### `try...finally` :
|
||||
|
||||
`try {
|
||||
throw new Error('my error');
|
||||
}
|
||||
finally {
|
||||
console.error('finally');
|
||||
}
|
||||
|
||||
// Output:
|
||||
// finally
|
||||
`
|
||||
```javascript
|
||||
try {
|
||||
throw new Error('my error');
|
||||
}
|
||||
finally {
|
||||
console.error('finally');
|
||||
}
|
||||
|
||||
// Output:
|
||||
// finally
|
||||
```
|
||||
|
||||
_ملاحظة:_ عندما لا `catch` الخطأ ، فإنه في الواقع لا "يصطاد" ، حتى لو تم تنفيذ الحظر `finally` . وهذا يعني أن الخطأ سيستمر في كتلة `try` العليا (أو الكتلة الرئيسية).
|
||||
|
||||
#### `try...catch...finally` :
|
||||
|
||||
`try {
|
||||
throw new Error('my error');
|
||||
}
|
||||
catch (e) {
|
||||
console.error(e.message);
|
||||
}
|
||||
finally {
|
||||
console.error('finally');
|
||||
}
|
||||
|
||||
// Output:
|
||||
// my error
|
||||
// finally
|
||||
`
|
||||
```javascript
|
||||
try {
|
||||
throw new Error('my error');
|
||||
}
|
||||
catch (e) {
|
||||
console.error(e.message);
|
||||
}
|
||||
finally {
|
||||
console.error('finally');
|
||||
}
|
||||
|
||||
// Output:
|
||||
// my error
|
||||
// finally
|
||||
```
|
||||
|
||||
الاستخدام النموذجي:
|
||||
|
||||
`try {
|
||||
openFile(file);
|
||||
readFile(file)
|
||||
}
|
||||
catch (e) {
|
||||
console.error(e.message);
|
||||
}
|
||||
finally {
|
||||
closeFile(file);
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
try {
|
||||
openFile(file);
|
||||
readFile(file)
|
||||
}
|
||||
catch (e) {
|
||||
console.error(e.message);
|
||||
}
|
||||
finally {
|
||||
closeFile(file);
|
||||
}
|
||||
```
|
||||
|
||||
#### `try...catch` متداخلة `try...catch`
|
||||
|
||||
@ -72,75 +76,80 @@ _ملاحظة:_ عندما لا `catch` الخطأ ، فإنه في الواقع
|
||||
* اعتبر عبارة `try-catch` داخل كتلة `try` .
|
||||
* رمي الخطأ صعودا.
|
||||
|
||||
`try {
|
||||
try {
|
||||
throw new Error('my error');
|
||||
}
|
||||
catch (e) {
|
||||
console.error('inner', e.message);
|
||||
throw e;
|
||||
}
|
||||
finally {
|
||||
console.log('finally');
|
||||
}
|
||||
}
|
||||
catch (e) {
|
||||
console.error('outer', e.message);
|
||||
}
|
||||
|
||||
// Output:
|
||||
// inner my error
|
||||
// finally
|
||||
// outer my error
|
||||
`
|
||||
```javascript
|
||||
try {
|
||||
try {
|
||||
throw new Error('my error');
|
||||
}
|
||||
catch (e) {
|
||||
console.error('inner', e.message);
|
||||
throw e;
|
||||
}
|
||||
finally {
|
||||
console.log('finally');
|
||||
}
|
||||
}
|
||||
catch (e) {
|
||||
console.error('outer', e.message);
|
||||
}
|
||||
|
||||
// Output:
|
||||
// inner my error
|
||||
// finally
|
||||
// outer my error
|
||||
```
|
||||
|
||||
#### أنواع الخطأ
|
||||
|
||||
##### خطأ مرجعي
|
||||
|
||||
`var x;
|
||||
try {
|
||||
x = y + 1; // y cannot be referenced (used)
|
||||
}
|
||||
catch(err) {
|
||||
console.log(err.name, err.message);
|
||||
}
|
||||
// ReferenceError y is not defined
|
||||
`
|
||||
```javascript
|
||||
var x;
|
||||
try {
|
||||
x = y + 1; // y cannot be referenced (used)
|
||||
}
|
||||
catch(err) {
|
||||
console.log(err.name, err.message);
|
||||
}
|
||||
// ReferenceError y is not defined
|
||||
```
|
||||
|
||||
##### خطأ في بناء الجملة
|
||||
|
||||
`try {
|
||||
eval("alert('Hello)"); // Missing ' will produce an error
|
||||
}
|
||||
catch(err) {
|
||||
console.log(err.name,err.message);
|
||||
}
|
||||
// SyntaxError Invalid or unexpected token
|
||||
`
|
||||
```javascript
|
||||
try {
|
||||
eval("alert('Hello)"); // Missing ' will produce an error
|
||||
}
|
||||
catch(err) {
|
||||
console.log(err.name,err.message);
|
||||
}
|
||||
// SyntaxError Invalid or unexpected token
|
||||
```
|
||||
|
||||
##### خطأ مطبعي
|
||||
|
||||
`var num = 1;
|
||||
try {
|
||||
num.toUpperCase(); // You cannot convert a number to upper case
|
||||
}
|
||||
catch(err) {
|
||||
console.log(err.name, err.message);
|
||||
}
|
||||
// TypeError num.toUpperCase is not a function
|
||||
`
|
||||
```javascript
|
||||
var num = 1;
|
||||
try {
|
||||
num.toUpperCase(); // You cannot convert a number to upper case
|
||||
}
|
||||
catch(err) {
|
||||
console.log(err.name, err.message);
|
||||
}
|
||||
// TypeError num.toUpperCase is not a function
|
||||
```
|
||||
|
||||
##### خطأ URI
|
||||
|
||||
`try {
|
||||
decodeURI("%%%"); // You cannot URI decode these percent signs
|
||||
}
|
||||
catch(err) {
|
||||
console.log(err.name, err.message);
|
||||
}
|
||||
// URIError URI malformed
|
||||
`
|
||||
```javascript
|
||||
try {
|
||||
decodeURI("%%%"); // You cannot URI decode these percent signs
|
||||
}
|
||||
catch(err) {
|
||||
console.log(err.name, err.message);
|
||||
}
|
||||
// URIError URI malformed
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -43,15 +43,16 @@ localeTitle: وظائف السهم
|
||||
|
||||
ميزة لا تصدق من وظيفة الأسهم هو أنه لا يمكنك إعادة وظيفة السهم. سوف يطلق عليه دائما مع السياق الذي تم تعريفه فيه. مجرد استخدام وظيفة عادية.
|
||||
|
||||
`// Old Syntax
|
||||
axios.get(url).then(function(response) {
|
||||
this.data = response.data;
|
||||
}).bind(this);
|
||||
|
||||
// New Syntax
|
||||
axios.get(url).then(response => {
|
||||
this.data = response.data;
|
||||
});
|
||||
`
|
||||
```javascript
|
||||
// Old Syntax
|
||||
axios.get(url).then(function(response) {
|
||||
this.data = response.data;
|
||||
}).bind(this);
|
||||
|
||||
// New Syntax
|
||||
axios.get(url).then(response => {
|
||||
this.data = response.data;
|
||||
});
|
||||
```
|
||||
|
||||
لا أعتقد أنني بحاجة إلى تقديم تفسير لهذا. انها بسيطة.
|
@ -20,8 +20,9 @@ localeTitle: المعلمات الافتراضية
|
||||
|
||||
فكر في مثال آخر:
|
||||
|
||||
`Func(20, 50); // 20 + 50 = 70
|
||||
`
|
||||
```
|
||||
Func(20, 50); // 20 + 50 = 70
|
||||
```
|
||||
|
||||
في المثال أعلاه ، تأخذ الدالة معلمتين وتستبدل المعلمة الثانية المعلمة الافتراضية.
|
||||
|
||||
@ -39,7 +40,8 @@ localeTitle: المعلمات الافتراضية
|
||||
|
||||
لكن،
|
||||
|
||||
`NotWorkingFunction(20, 30); // 50;
|
||||
`
|
||||
```
|
||||
NotWorkingFunction(20, 30); // 50;
|
||||
```
|
||||
|
||||
يعمل بشكل جيد.
|
@ -10,49 +10,55 @@ localeTitle: مهمة التدمير
|
||||
|
||||
**ES5 Destructuring**
|
||||
|
||||
`var fullName = ["John", "Smith"];
|
||||
var firstName = fullName[0];
|
||||
var lastName = fullName[1];
|
||||
|
||||
console.log(firstName, lastName); // John Smith
|
||||
`
|
||||
```js
|
||||
var fullName = ["John", "Smith"];
|
||||
var firstName = fullName[0];
|
||||
var lastName = fullName[1];
|
||||
|
||||
console.log(firstName, lastName); // John Smith
|
||||
```
|
||||
|
||||
**ES6 Destructuring**
|
||||
|
||||
`const fullName = ["John", "Smith"];
|
||||
const [firstName, lastName] = fullName;
|
||||
|
||||
console.log(firstName, lastName); // John Smith
|
||||
`
|
||||
```js
|
||||
const fullName = ["John", "Smith"];
|
||||
const [firstName, lastName] = fullName;
|
||||
|
||||
console.log(firstName, lastName); // John Smith
|
||||
```
|
||||
|
||||
توضح الأمثلة المذكورة أعلاه فائدة استخدام تعيين Destructuring ES6.
|
||||
|
||||
يمكنك أيضًا استخدام Destructuring على الكائنات باستخدام بناء جملة مشابه
|
||||
|
||||
`const fullName = { first: "John", last: "Smith"};
|
||||
const {first, last} = fullName;
|
||||
|
||||
console.log(first, last); // John Smith
|
||||
`
|
||||
```js
|
||||
const fullName = { first: "John", last: "Smith"};
|
||||
const {first, last} = fullName;
|
||||
|
||||
console.log(first, last); // John Smith
|
||||
```
|
||||
|
||||
يختلف تعيين Destructuring Object (كائن Destructuring) عن بعض الشيء لأن الكائن يجب أن يكون له خصائص بالأسماء التي تقوم بتعيينها. لذلك ، لن يعمل الرمز أدناه على النحو المنشود.
|
||||
|
||||
`const fullName = { first: "John", last: "Smith"};
|
||||
const {firstName, lastName} = fullName;
|
||||
|
||||
console.log(firstName, lastName); // undefined undefined
|
||||
`
|
||||
```js
|
||||
const fullName = { first: "John", last: "Smith"};
|
||||
const {firstName, lastName} = fullName;
|
||||
|
||||
console.log(firstName, lastName); // undefined undefined
|
||||
```
|
||||
|
||||
لا يزال بإمكانك تحقيق النتيجة المرجوة باستخدام بناء الجملة التالي.
|
||||
|
||||
`const obj = {propertyName: value}
|
||||
{propertyName: desiredVariableName} = obj
|
||||
`
|
||||
```js
|
||||
const obj = {propertyName: value}
|
||||
{propertyName: desiredVariableName} = obj
|
||||
```
|
||||
|
||||
مثالنا السابق سوف يعاد كتابته على النحو التالي:
|
||||
|
||||
`const fullName = { first: "John", last: "Smith"};
|
||||
const {first: firstName, last: lastName} = fullName;
|
||||
|
||||
console.log(firstName, lastName); // John Smith
|
||||
`
|
||||
```js
|
||||
const fullName = { first: "John", last: "Smith"};
|
||||
const {first: firstName, last: lastName} = fullName;
|
||||
|
||||
console.log(firstName, lastName); // John Smith
|
||||
```
|
@ -12,18 +12,19 @@ localeTitle: ES6
|
||||
|
||||
> مثال ES5:
|
||||
|
||||
`var User = function () {
|
||||
function User(name) {
|
||||
this._name = name;
|
||||
}
|
||||
|
||||
User.prototype.getName = function getName(x) {
|
||||
return 'Mr./Mrs. ' + this._name;
|
||||
};
|
||||
|
||||
return User;
|
||||
}();
|
||||
`
|
||||
```javascript
|
||||
var User = function () {
|
||||
function User(name) {
|
||||
this._name = name;
|
||||
}
|
||||
|
||||
User.prototype.getName = function getName(x) {
|
||||
return 'Mr./Mrs. ' + this._name;
|
||||
};
|
||||
|
||||
return User;
|
||||
}();
|
||||
```
|
||||
|
||||
> مثال ES6:
|
||||
|
||||
|
@ -33,19 +33,21 @@ localeTitle: واسمحوا Const
|
||||
|
||||
يتم استخدام Const لتعيين قيمة ثابتة للمتغير. ولا يمكن تغيير القيمة. انها ثابتة.
|
||||
|
||||
`const a = 50;
|
||||
a = 60; // shows error. You cannot change the value of const.
|
||||
const b = "Constant variable";
|
||||
b = "Assigning new value"; // shows error.
|
||||
`
|
||||
```
|
||||
const a = 50;
|
||||
a = 60; // shows error. You cannot change the value of const.
|
||||
const b = "Constant variable";
|
||||
b = "Assigning new value"; // shows error.
|
||||
```
|
||||
|
||||
فكر في مثال آخر.
|
||||
|
||||
`const LANGUAGES = ['Js', 'Ruby', 'Python', 'Go'];
|
||||
LANGUAGES = "Javascript"; // shows error.
|
||||
LANGUAGES.push('Java'); // Works fine.
|
||||
console.log(LANGUAGES); // ['Js', 'Ruby', 'Python', 'Go', 'Java']
|
||||
`
|
||||
```
|
||||
const LANGUAGES = ['Js', 'Ruby', 'Python', 'Go'];
|
||||
LANGUAGES = "Javascript"; // shows error.
|
||||
LANGUAGES.push('Java'); // Works fine.
|
||||
console.log(LANGUAGES); // ['Js', 'Ruby', 'Python', 'Go', 'Java']
|
||||
```
|
||||
|
||||
قد يكون هذا مربكًا قليلاً.
|
||||
|
||||
|
@ -10,55 +10,60 @@ localeTitle: القيم الفارسية
|
||||
|
||||
من الممكن التحقق من وجود قيمة كاذبة في متغير مع شرط بسيط:
|
||||
|
||||
`if (!variable) {
|
||||
// When the variable has a falsy value the condition is true.
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
if (!variable) {
|
||||
// When the variable has a falsy value the condition is true.
|
||||
}
|
||||
```
|
||||
|
||||
## أمثلة عامة
|
||||
|
||||
`var string = ""; // <-- falsy
|
||||
|
||||
var filledString = "some string in here"; // <-- truthy
|
||||
|
||||
var zero = 0; // <-- falsy
|
||||
|
||||
var numberGreaterThanZero // <-- truthy
|
||||
|
||||
var emptyArray = []; // <-- truthy, we'll explore more about this next
|
||||
|
||||
var emptyObject = {}; // <-- truthy
|
||||
`
|
||||
```javascript
|
||||
var string = ""; // <-- falsy
|
||||
|
||||
var filledString = "some string in here"; // <-- truthy
|
||||
|
||||
var zero = 0; // <-- falsy
|
||||
|
||||
var numberGreaterThanZero // <-- truthy
|
||||
|
||||
var emptyArray = []; // <-- truthy, we'll explore more about this next
|
||||
|
||||
var emptyObject = {}; // <-- truthy
|
||||
```
|
||||
|
||||
## المرح مع المصفوفات
|
||||
|
||||
`if ([] == false) // <-- truthy, will run code in if-block
|
||||
|
||||
if ([]) // <-- truthy, will also run code in if-block
|
||||
|
||||
if ([] == true) // <-- falsy, will NOT run code in if-block
|
||||
|
||||
if (![]) // <-- falsy, will also NOT run code in if-block
|
||||
`
|
||||
```javascript
|
||||
if ([] == false) // <-- truthy, will run code in if-block
|
||||
|
||||
if ([]) // <-- truthy, will also run code in if-block
|
||||
|
||||
if ([] == true) // <-- falsy, will NOT run code in if-block
|
||||
|
||||
if (![]) // <-- falsy, will also NOT run code in if-block
|
||||
```
|
||||
|
||||
## مذكرة قانونية
|
||||
|
||||
كن على دراية بنوع البيانات عند تقييم قيمة في سياق منطقي. إذا كان من المفترض أن يكون نوع البيانات من القيمة _رقمًا_ ، فيمكن أن يؤدي الإفراط الصادق / الخاطئ إلى نتيجة غير متوقعة:
|
||||
|
||||
`const match = { teamA: 0, teamB: 1 }
|
||||
if (match.teamA)
|
||||
// The following won't run due to the falsy evaluation
|
||||
console.log('Team A: ' + match.teamA);
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
const match = { teamA: 0, teamB: 1 }
|
||||
if (match.teamA)
|
||||
// The following won't run due to the falsy evaluation
|
||||
console.log('Team A: ' + match.teamA);
|
||||
}
|
||||
```
|
||||
|
||||
بديل لحالة الاستخدام أعلاه هو تقييم القيمة باستخدام `typeof` :
|
||||
|
||||
`const match = { teamA: 0, teamB: 1 }
|
||||
if (typeof match.teamA === 'number')
|
||||
console.log('Team A: ' + match.teamA);
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
const match = { teamA: 0, teamB: 1 }
|
||||
if (typeof match.teamA === 'number')
|
||||
console.log('Team A: ' + match.teamA);
|
||||
}
|
||||
```
|
||||
|
||||
## معلومات اكثر
|
||||
|
||||
|
@ -8,20 +8,21 @@ localeTitle: استدعاء وظيفة
|
||||
|
||||
يجب أن تكون الوظائف في النطاق عندما يتم استدعاؤها. نطاق الوظيفة هو الوظيفة التي يتم الإعلان عنها ، أو البرنامج بالكامل إذا تم الإعلان عنه في المستوى الأعلى.
|
||||
|
||||
`function myFunction(a, b) {
|
||||
return a * b;
|
||||
}
|
||||
myFunction(10, 2); // Function invocation, will return 20
|
||||
|
||||
//optional parameters (es6 only)
|
||||
//allow to set optional parameters
|
||||
|
||||
function myFunction(a, b = 10) {
|
||||
return a * b;
|
||||
}
|
||||
myFunction(1); // Function invocation, will return 10
|
||||
myFunction(1,5); // Function invocation, will return 5
|
||||
`
|
||||
```javascript
|
||||
function myFunction(a, b) {
|
||||
return a * b;
|
||||
}
|
||||
myFunction(10, 2); // Function invocation, will return 20
|
||||
|
||||
//optional parameters (es6 only)
|
||||
//allow to set optional parameters
|
||||
|
||||
function myFunction(a, b = 10) {
|
||||
return a * b;
|
||||
}
|
||||
myFunction(1); // Function invocation, will return 10
|
||||
myFunction(1,5); // Function invocation, will return 5
|
||||
```
|
||||
|
||||
في مثال التعليمة البرمجية ، يكون a و b هما معلمات الدالة التي تحتوي على القيمتين 10 و 2 ، وهما الوسيطات المستخدمة في استدعاء الدالة.
|
||||
|
||||
@ -31,15 +32,16 @@ localeTitle: استدعاء وظيفة
|
||||
|
||||
المثال التالي يقوم بإنشاء كائن ( `myObject` ) ، مع خاصيتين ( `firstName` و `lastName` ) ، وطريقة ( `fullName` ):
|
||||
|
||||
`var myObject = {
|
||||
firstName:"John",
|
||||
lastName: "Doe",
|
||||
fullName: function () {
|
||||
return this.firstName + " " + this.lastName;
|
||||
}
|
||||
}
|
||||
myObject.fullName(); // Function invoked as a method, will return "John Doe"
|
||||
`
|
||||
```javascript
|
||||
var myObject = {
|
||||
firstName:"John",
|
||||
lastName: "Doe",
|
||||
fullName: function () {
|
||||
return this.firstName + " " + this.lastName;
|
||||
}
|
||||
}
|
||||
myObject.fullName(); // Function invoked as a method, will return "John Doe"
|
||||
```
|
||||
|
||||
### وظائف السهم
|
||||
|
||||
|
@ -8,13 +8,14 @@ localeTitle: كائن عالمي
|
||||
|
||||
فمثلا:
|
||||
|
||||
`// global scope
|
||||
var foo = "bar";
|
||||
|
||||
console.log(global.foo); // bar (in a Node environment)
|
||||
console.log(window.foo); // bar (in a browser window)
|
||||
console.log(this.foo); // bar (if strict mode is disabled)
|
||||
`
|
||||
```javascript
|
||||
// global scope
|
||||
var foo = "bar";
|
||||
|
||||
console.log(global.foo); // bar (in a Node environment)
|
||||
console.log(window.foo); // bar (in a browser window)
|
||||
console.log(this.foo); // bar (if strict mode is disabled)
|
||||
```
|
||||
|
||||
من المهم هنا التمييز بين النطاقات المحلية إلى الدوال والنطاق العالمي: فالعنصر العام يحتوي فقط على المتغيرات التي تم الإعلان عنها على النطاق العالمي ، وليس النطاقات المحلية للوظائف.
|
||||
|
||||
|
@ -4,34 +4,36 @@ localeTitle: المتغيرات العالمية
|
||||
---
|
||||
يتم تعريف المتغيرات العالمية خارج وظيفة لسهولة الوصول في جميع أنحاء البرنامج، في حين يتم تخزين المتغيرات المحلية داخل دالة باستخدام `var` للاستخدام فقط في تلك الوظيفة في [نطاق](https://developer.mozilla.org/en-US/docs/Glossary/Scope) . إذا قمت بتعريف متغير بدون استخدام `var` ، حتى لو كان داخل دالة ، فسيظل ينظر إليه على أنه عالمي:
|
||||
|
||||
`var x = 5; //global
|
||||
function someThing(y) {
|
||||
var z = x + y;
|
||||
console.log(z);
|
||||
}
|
||||
|
||||
function someThing(y) {
|
||||
x = 5; //still global!
|
||||
var z = x + y;
|
||||
console.log(z);
|
||||
}
|
||||
|
||||
|
||||
function someThing(y) {
|
||||
var x = 5; //local
|
||||
var z = x + y;
|
||||
console.log(z);
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
var x = 5; //global
|
||||
function someThing(y) {
|
||||
var z = x + y;
|
||||
console.log(z);
|
||||
}
|
||||
|
||||
function someThing(y) {
|
||||
x = 5; //still global!
|
||||
var z = x + y;
|
||||
console.log(z);
|
||||
}
|
||||
|
||||
|
||||
function someThing(y) {
|
||||
var x = 5; //local
|
||||
var z = x + y;
|
||||
console.log(z);
|
||||
}
|
||||
```
|
||||
|
||||
المتغير الشامل هو أيضًا كائن في النطاق الحالي ، مثل نافذة المتصفح:
|
||||
|
||||
`var dog = “Fluffy”;
|
||||
console.log(dog); //Fluffy;
|
||||
|
||||
var dog = “Fluffy”;
|
||||
console.log(window.dog); //Fluffy
|
||||
`
|
||||
```javascript
|
||||
var dog = “Fluffy”;
|
||||
console.log(dog); //Fluffy;
|
||||
|
||||
var dog = “Fluffy”;
|
||||
console.log(window.dog); //Fluffy
|
||||
```
|
||||
|
||||
إنها أفضل الممارسات لتقليل المتغيرات العالمية. نظرًا لأنه يمكن الوصول إلى المتغير في أي مكان في البرنامج ، فقد يتسبب ذلك في حدوث سلوك غريب.
|
||||
|
||||
|
@ -8,31 +8,33 @@ localeTitle: وظائف من الدرجة العليا
|
||||
|
||||
عندما تستخدم `Array.map` ، فإنك تقدم دالة كوسيطة واحدة فقط ، والتي ينطبق عليها كل عنصر موجود في الصفيف.
|
||||
|
||||
`var arr = [ 1, 2, 3 ];
|
||||
|
||||
var arrDoubled = arr.map(function(num) {
|
||||
return num * 2;
|
||||
});
|
||||
|
||||
console.log(arrDoubled); // [ 2, 4, 6 ]
|
||||
`
|
||||
```javascript
|
||||
var arr = [ 1, 2, 3 ];
|
||||
|
||||
var arrDoubled = arr.map(function(num) {
|
||||
return num * 2;
|
||||
});
|
||||
|
||||
console.log(arrDoubled); // [ 2, 4, 6 ]
|
||||
```
|
||||
|
||||
يمكن لوظائف الترتيب الأعلى أيضًا إرجاع وظيفة. على سبيل المثال ، يمكنك إنشاء دالة تسمى `multiplyBy` تأخذ رقمًا وتقوم بإرجاع وظيفة تضاعف رقمًا آخر تقدمه من خلال الرقم الأول المقدم. يمكنك استخدام هذا الأسلوب لإنشاء وظيفة `multiplyByTwo` لتمريرها إلى `Array.map` . سيعطيك هذا النتيجة نفسها التي رأيتها أعلاه.
|
||||
|
||||
`function multiplyBy(num1) {
|
||||
return function(num2) {
|
||||
return num1 * num2;
|
||||
}
|
||||
}
|
||||
|
||||
var multiplyByTwo = multiplyBy(2);
|
||||
|
||||
var arr = [ 1, 2, 3 ];
|
||||
|
||||
var arrDoubled = arr.map(multiplyByTwo);
|
||||
|
||||
console.log(arrDoubled); // [ 2, 4, 6 ]
|
||||
`
|
||||
```javascript
|
||||
function multiplyBy(num1) {
|
||||
return function(num2) {
|
||||
return num1 * num2;
|
||||
}
|
||||
}
|
||||
|
||||
var multiplyByTwo = multiplyBy(2);
|
||||
|
||||
var arr = [ 1, 2, 3 ];
|
||||
|
||||
var arrDoubled = arr.map(multiplyByTwo);
|
||||
|
||||
console.log(arrDoubled); // [ 2, 4, 6 ]
|
||||
```
|
||||
|
||||
راجع دليل [الإغلاق](https://guide.freecodecamp.org/javascript/closures) للحصول على مزيد من المعلومات حول كيفية `multiplyByTwo` `num1` للإشارة إلى `num1` في المثال أعلاه.
|
||||
|
||||
|
@ -8,24 +8,26 @@ localeTitle: HTML DOM getElementById الطريقة
|
||||
|
||||
**محتوى HTML:**
|
||||
|
||||
`
|
||||
<div id="demo"></div>
|
||||
`
|
||||
```html
|
||||
<div id="demo"></div>
|
||||
```
|
||||
|
||||
**محتوى جافا سكريبت:**
|
||||
|
||||
`document.getElementById("demo"); // Returns the element with id "demo"
|
||||
`
|
||||
```javascript
|
||||
document.getElementById("demo"); // Returns the element with id "demo"
|
||||
```
|
||||
|
||||
إذا كان لديك أكثر من عنصر واحد له نفس قيمة `id` (ممارسة سيئة!) ، فسوف يعرض `getElementById` العنصر الأول الذي تم العثور عليه:
|
||||
|
||||
`
|
||||
<div id="demo">First</div>
|
||||
<div id="demo">Second</div>
|
||||
`
|
||||
```html
|
||||
<div id="demo">First</div>
|
||||
<div id="demo">Second</div>
|
||||
```
|
||||
|
||||
`document.getElementById("demo"); // Returns the element with id "demo" containing 'First'
|
||||
`
|
||||
```javascript
|
||||
document.getElementById("demo"); // Returns the element with id "demo" containing 'First'
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -8,33 +8,35 @@ localeTitle: خاصية HTML Dom Innerhtml
|
||||
|
||||
**_الحصول على عنصر المحتوى_**
|
||||
|
||||
`
|
||||
<div id="demo">
|
||||
<p>Demo</p>
|
||||
</div>
|
||||
`
|
||||
```html
|
||||
<div id="demo">
|
||||
<p>Demo</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
`var element = document.getElementById("demo");
|
||||
console.log(element.innerHTML) //logs <p>Demo</p>
|
||||
`
|
||||
```javascript
|
||||
var element = document.getElementById("demo");
|
||||
console.log(element.innerHTML) //logs <p>Demo</p>
|
||||
```
|
||||
|
||||
**_محتوى مجموعة العنصر_**
|
||||
|
||||
`
|
||||
<div id="demo"></div>
|
||||
`
|
||||
```html
|
||||
<div id="demo"></div>
|
||||
```
|
||||
|
||||
`var element = document.getElementById("demo");
|
||||
element.innerHTML = "<div>Demo</div>";
|
||||
`
|
||||
```javascript
|
||||
var element = document.getElementById("demo");
|
||||
element.innerHTML = "<div>Demo</div>";
|
||||
```
|
||||
|
||||
سوف يكون مثل HTML الآن
|
||||
|
||||
`
|
||||
<div id="demo">
|
||||
<div>Demo</div>
|
||||
</div>
|
||||
`
|
||||
```html
|
||||
<div id="demo">
|
||||
<div>Demo</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
**_اعتبارات أمنية_**
|
||||
|
||||
@ -44,10 +46,11 @@ localeTitle: خاصية HTML Dom Innerhtml
|
||||
|
||||
سيؤدي تعيين قيمة " `<script>alert();</script>` " إلى تشغيل وظيفة "alert ()" في Javascript:
|
||||
|
||||
`var element = document.getElementById("demo");
|
||||
|
||||
element.innerHTML = "<script>alert();</script>";
|
||||
`
|
||||
```javascript
|
||||
var element = document.getElementById("demo");
|
||||
|
||||
element.innerHTML = "<script>alert();</script>";
|
||||
```
|
||||
|
||||
يسمى هذا النوع من الهجوم [Scripting عبر الموقع أو XSS باختصار](https://en.wikipedia.org/wiki/Cross-site_scripting) .
|
||||
|
||||
|
@ -6,28 +6,30 @@ localeTitle: HTML DOM querySelector ()
|
||||
|
||||
**محتوى HTML:**
|
||||
|
||||
`
|
||||
<div id="id-example"></div>
|
||||
<div class="class-example"></div>
|
||||
<a>element-example</a>
|
||||
`
|
||||
```html
|
||||
<div id="id-example"></div>
|
||||
<div class="class-example"></div>
|
||||
<a>element-example</a>
|
||||
```
|
||||
|
||||
**محتوى جافا سكريبت:**
|
||||
|
||||
`document.querySelector("#id-example"); // Returns the element with id "id-example"
|
||||
document.querySelector(".class-example"); // Returns the element with class "class-example"
|
||||
document.querySelector("a"); // Returns the "a" element
|
||||
`
|
||||
```javascript
|
||||
document.querySelector("#id-example"); // Returns the element with id "id-example"
|
||||
document.querySelector(".class-example"); // Returns the element with class "class-example"
|
||||
document.querySelector("a"); // Returns the "a" element
|
||||
```
|
||||
|
||||
ملاحظة `querySelector()` إرجاع عنصر المطابقة الأول ، لإرجاع كافة التطابقات ، استخدم أسلوب querySelectorAll () بدلاً من ذلك.
|
||||
|
||||
`
|
||||
<div id="example">First</div>
|
||||
<div id="example">Second</div>
|
||||
`
|
||||
```html
|
||||
<div id="example">First</div>
|
||||
<div id="example">Second</div>
|
||||
```
|
||||
|
||||
`document.querySelector("#example"); // Returns only the element containing 'First'
|
||||
`
|
||||
```javascript
|
||||
document.querySelector("#example"); // Returns only the element containing 'First'
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -12,17 +12,17 @@ localeTitle: HTML دوم
|
||||
|
||||
كل عنصر في DOM يسمى أيضًا عقدة.
|
||||
|
||||
`
|
||||
<html>
|
||||
<head>
|
||||
<title> My title </title>
|
||||
</head>
|
||||
<body>
|
||||
<a href="#">My Link</a>
|
||||
<h1> My header </h1>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
```html
|
||||
<html>
|
||||
<head>
|
||||
<title> My title </title>
|
||||
</head>
|
||||
<body>
|
||||
<a href="#">My Link</a>
|
||||
<h1> My header </h1>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
يكون DOM الخاص بـ HTML أعلاه على النحو التالي:
|
||||
|
||||
|
@ -8,35 +8,38 @@ localeTitle: If-Else Statement
|
||||
|
||||
**ملاحظة:** العبارة `else` اختيارية.
|
||||
|
||||
`if (condition)
|
||||
/* do something */
|
||||
else
|
||||
/* do something else */
|
||||
`
|
||||
```javascript
|
||||
if (condition)
|
||||
/* do something */
|
||||
else
|
||||
/* do something else */
|
||||
```
|
||||
|
||||
يمكن أن تكون متسلسلة متعددة `if...else` بيانات أخرى لإنشاء شرط `else if` . هذا يحدد شرط جديد لاختبار ويمكن تكرار لاختبار شروط متعددة ، والتحقق حتى يتم تقديم بيان صحيح لتنفيذ.
|
||||
|
||||
`if (condition1)
|
||||
/* do something */
|
||||
else if (condition2)
|
||||
/* do something else */
|
||||
else if (condition3)
|
||||
/* do something else */
|
||||
else
|
||||
/* final statement */
|
||||
`
|
||||
```javascript
|
||||
if (condition1)
|
||||
/* do something */
|
||||
else if (condition2)
|
||||
/* do something else */
|
||||
else if (condition3)
|
||||
/* do something else */
|
||||
else
|
||||
/* final statement */
|
||||
```
|
||||
|
||||
**ملاحظة:** إذا كنت ترغب في تنفيذ البيان أكثر من واحد في `if` ، `else` أو `else if` مطلوبة جزئيا، الأقواس المجعدة حول البيانات:
|
||||
|
||||
`if (condition) {
|
||||
/* do */
|
||||
/* something */
|
||||
/* with multiple statements */
|
||||
} else {
|
||||
/* do something */
|
||||
/* else */
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
if (condition) {
|
||||
/* do */
|
||||
/* something */
|
||||
/* with multiple statements */
|
||||
} else {
|
||||
/* do something */
|
||||
/* else */
|
||||
}
|
||||
```
|
||||
|
||||
[وصلة MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if…else) | [رابط MSDN](https://msdn.microsoft.com/en-us/library/85yyde5c.aspx)
|
||||
|
||||
@ -54,14 +57,15 @@ localeTitle: If-Else Statement
|
||||
|
||||
**استخدام** `else if` :
|
||||
|
||||
`if (x < 10)
|
||||
return "Small number";
|
||||
else if (x < 50)
|
||||
return "Medium number";
|
||||
else if (x < 100)
|
||||
return "Large number";
|
||||
else {
|
||||
flag = 1;
|
||||
return "Invalid number";
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
if (x < 10)
|
||||
return "Small number";
|
||||
else if (x < 50)
|
||||
return "Medium number";
|
||||
else if (x < 100)
|
||||
return "Large number";
|
||||
else {
|
||||
flag = 1;
|
||||
return "Invalid number";
|
||||
}
|
||||
```
|
@ -34,11 +34,12 @@ localeTitle: تعبيرات الوظائف المستحثة على الفور (I
|
||||
|
||||
**مثال سيء** :
|
||||
|
||||
`var x = 2 //no semicolon, will throw error
|
||||
(function(y){
|
||||
return x;
|
||||
})(x); //Uncaught TypeError: 2 is not a function
|
||||
`
|
||||
```javascript
|
||||
var x = 2 //no semicolon, will throw error
|
||||
(function(y){
|
||||
return x;
|
||||
})(x); //Uncaught TypeError: 2 is not a function
|
||||
```
|
||||
|
||||
## لماذا استخدام تعبيرات الاستدلال على الفور؟
|
||||
|
||||
|
@ -16,13 +16,15 @@ localeTitle: طريقة تحديث الموقع
|
||||
|
||||
* `True` يعيد تحميل الصفحة من الخادم (على سبيل المثال لا يخزن البيانات المخزنة مؤقتًا بواسطة المتصفح):
|
||||
|
||||
`window.location.reload(true);
|
||||
`
|
||||
```
|
||||
window.location.reload(true);
|
||||
```
|
||||
|
||||
* `False` بإعادة تحميل الصفحة باستخدام إصدار الصفحة المخزنة مؤقتًا بواسطة المستعرض.
|
||||
|
||||
`window.location.reload(false);
|
||||
`
|
||||
```
|
||||
window.location.reload(false);
|
||||
```
|
||||
|
||||
`False` هي المعلمة الافتراضية ، لذلك إذا تركت فارغة ، فإن `object.reload()` يعيد تحميل الصفحة باستخدام بيانات broswer المخبأة ، أي أنه مماثل لاستخدام الطريقة كـ `object.reload(false)` .
|
||||
|
||||
@ -30,29 +32,33 @@ localeTitle: طريقة تحديث الموقع
|
||||
|
||||
* إرفاق `Location.reload()` بعلامة زر HTML ، كما يلي:
|
||||
|
||||
`<input type="button" value="Refresh Button" onClick="window.location.reload()">
|
||||
`
|
||||
```
|
||||
<input type="button" value="Refresh Button" onClick="window.location.reload()">
|
||||
```
|
||||
|
||||
* تعيين حدث عند النقر على الزر باستخدام الوظيفة التي تستخدم الطريقة ، حيث يبدو الزر مشابهاً
|
||||
|
||||
`<button type="button" onClick="reloadThePage()">Refresh!</button>
|
||||
`
|
||||
```
|
||||
<button type="button" onClick="reloadThePage()">Refresh!</button>
|
||||
```
|
||||
|
||||
`<script>
|
||||
function reloadThePage(){
|
||||
window.location.reload();
|
||||
}
|
||||
</script>
|
||||
`
|
||||
```
|
||||
<script>
|
||||
function reloadThePage(){
|
||||
window.location.reload();
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### مثال:
|
||||
|
||||
`// Reload the current resources from the server
|
||||
window.location.reload(true);
|
||||
|
||||
// Reload the current resources from the browser's cache
|
||||
window.location.reload();
|
||||
`
|
||||
```javascript
|
||||
// Reload the current resources from the server
|
||||
window.location.reload(true);
|
||||
|
||||
// Reload the current resources from the browser's cache
|
||||
window.location.reload();
|
||||
```
|
||||
|
||||
سيؤدي هذا إلى إعادة تحميل الصفحة على عنوان URL الحالي من الخادم.
|
||||
|
||||
|
@ -12,14 +12,15 @@ localeTitle: العوامل المنطقية
|
||||
|
||||
عند تضمين قيم منطقية فقط (سواء كانت `true` أو `false` ) ، فإنها ترجع true فقط إذا كان كلا التعبيرين صحيحين. إذا كان تعبير واحد أو كلاهما غير صحيح ، فستظهر العبارة بالكامل false.
|
||||
|
||||
`true && true //returns the second value, true
|
||||
true && false //returns the second value, false
|
||||
false && false //returns the first value, false
|
||||
123 && 'abc' // returns the second value, 'abc'
|
||||
'abc' && null //returns the second value, null
|
||||
undefined && 'abc' //returns the first value, undefined
|
||||
0 && false //returns the first value, 0
|
||||
`
|
||||
```js
|
||||
true && true //returns the second value, true
|
||||
true && false //returns the second value, false
|
||||
false && false //returns the first value, false
|
||||
123 && 'abc' // returns the second value, 'abc'
|
||||
'abc' && null //returns the second value, null
|
||||
undefined && 'abc' //returns the first value, undefined
|
||||
0 && false //returns the first value, 0
|
||||
```
|
||||
|
||||
#### منطقية أو (||
|
||||
|
||||
@ -27,14 +28,15 @@ localeTitle: العوامل المنطقية
|
||||
|
||||
عند تضمين قيم منطقية فقط (سواء كانت `true` أو `false` ) ، فإنها ترجع true إذا كان التعبير صحيحًا. يمكن أن يكون كلا التعبيرين صحيحًا ، لكن هناك حاجة إلى تعبير واحد فقط للحصول على النتيجة الحقيقية.
|
||||
|
||||
`true || true //returns the first value, true
|
||||
true || false //returns the first value, true
|
||||
false || false //returns the second value, false
|
||||
123 || 'abc' // returns the first value, 123
|
||||
'abc' || null //returns the first value, 'abc'
|
||||
undefined || 'abc' //returns the second value, 'abc'
|
||||
0 || false //returns the second value, false
|
||||
`
|
||||
```js
|
||||
true || true //returns the first value, true
|
||||
true || false //returns the first value, true
|
||||
false || false //returns the second value, false
|
||||
123 || 'abc' // returns the first value, 123
|
||||
'abc' || null //returns the first value, 'abc'
|
||||
undefined || 'abc' //returns the second value, 'abc'
|
||||
0 || false //returns the second value, false
|
||||
```
|
||||
|
||||
#### تقييم دائرة قصر
|
||||
|
||||
@ -55,33 +57,35 @@ localeTitle: العوامل المنطقية
|
||||
1. تحويل التعبير إلى منطقي.
|
||||
2. إرجاع معكوس القيمة المنطقية التي تم الحصول عليها في الخطوة الأخيرة.
|
||||
|
||||
`var spam = 'rinki'; //spam may be equal to any non empty string
|
||||
var booSpam = !spam;
|
||||
/*returns false
|
||||
since when a non-empty string when converted to boolean returns true
|
||||
inverse of which is evaluated to false.
|
||||
*/
|
||||
|
||||
var spam2 = ''; //spam2 here is equal to empty string
|
||||
var booSpam2 = !spam2;
|
||||
/*returns true
|
||||
since when a empty string when converted to boolean returns false
|
||||
inverse of which is evaluated to true.
|
||||
*/
|
||||
`
|
||||
```js
|
||||
var spam = 'rinki'; //spam may be equal to any non empty string
|
||||
var booSpam = !spam;
|
||||
/*returns false
|
||||
since when a non-empty string when converted to boolean returns true
|
||||
inverse of which is evaluated to false.
|
||||
*/
|
||||
|
||||
var spam2 = ''; //spam2 here is equal to empty string
|
||||
var booSpam2 = !spam2;
|
||||
/*returns true
|
||||
since when a empty string when converted to boolean returns false
|
||||
inverse of which is evaluated to true.
|
||||
*/
|
||||
```
|
||||
|
||||
#### نصائح:
|
||||
|
||||
كلا المشغلين المنطقيين سيعودون قيمة آخر تعبير تم تقييمه. فمثلا:
|
||||
|
||||
`"cat" && "dog" //returns "dog"
|
||||
"cat" && false //returns false
|
||||
0 && "cat" //returns 0 (which is a falsy value)
|
||||
|
||||
"cat" || "dog" //returns "cat"
|
||||
"cat" || false //returns "cat"
|
||||
0 || "cat" //returns "cat"
|
||||
`
|
||||
```js
|
||||
"cat" && "dog" //returns "dog"
|
||||
"cat" && false //returns false
|
||||
0 && "cat" //returns 0 (which is a falsy value)
|
||||
|
||||
"cat" || "dog" //returns "cat"
|
||||
"cat" || false //returns "cat"
|
||||
0 || "cat" //returns "cat"
|
||||
```
|
||||
|
||||
لاحظ أن where `&&` تُرجع القيمة الأولى ، `||` يعيد القيمة الثانية والعكس صحيح.
|
||||
|
||||
|
@ -4,10 +4,11 @@ localeTitle: لحلقة
|
||||
---
|
||||
### بناء الجملة
|
||||
|
||||
`for ([initialization]); [condition]; [final-expression]) {
|
||||
// statement
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
for ([initialization]); [condition]; [final-expression]) {
|
||||
// statement
|
||||
}
|
||||
```
|
||||
|
||||
جافا سكريبت `for` بيان يتكون من ثلاث عبارات وبيان:
|
||||
|
||||
@ -46,36 +47,38 @@ localeTitle: لحلقة
|
||||
|
||||
تكرار عبر الأعداد الصحيحة من 0-8
|
||||
|
||||
`for (var i = 0; i < 9; i++) {
|
||||
console.log(i);
|
||||
}
|
||||
|
||||
output:
|
||||
0
|
||||
1
|
||||
2
|
||||
3
|
||||
4
|
||||
5
|
||||
6
|
||||
7
|
||||
8
|
||||
`
|
||||
```javascript
|
||||
for (var i = 0; i < 9; i++) {
|
||||
console.log(i);
|
||||
}
|
||||
|
||||
output:
|
||||
0
|
||||
1
|
||||
2
|
||||
3
|
||||
4
|
||||
5
|
||||
6
|
||||
7
|
||||
8
|
||||
```
|
||||
|
||||
الخروج من حلقة قبل تعبير الشرط غير صحيح
|
||||
|
||||
`for (var elephant = 1; elephant < 10; elephant+=2) {
|
||||
if (elephant === 7) {
|
||||
break;
|
||||
}
|
||||
console.info('elephant is ' + elephant);
|
||||
}
|
||||
|
||||
output:
|
||||
elephant is 1
|
||||
elephant is 3
|
||||
elephant is 5
|
||||
`
|
||||
```javascript
|
||||
for (var elephant = 1; elephant < 10; elephant+=2) {
|
||||
if (elephant === 7) {
|
||||
break;
|
||||
}
|
||||
console.info('elephant is ' + elephant);
|
||||
}
|
||||
|
||||
output:
|
||||
elephant is 1
|
||||
elephant is 3
|
||||
elephant is 5
|
||||
```
|
||||
|
||||
### موارد آخرى
|
||||
|
||||
|
@ -11,14 +11,16 @@ localeTitle: التعامل مع كائنات جافا سكريبت
|
||||
|
||||
إضافة خصائص إلى كائنات باستخدام تدرج قوس:
|
||||
|
||||
`myObject['myProperty'] = "myValue";
|
||||
`
|
||||
```javascript
|
||||
myObject['myProperty'] = "myValue";
|
||||
```
|
||||
|
||||
باستخدام تدرج القوس ، يمكننا استخدام المتغيرات كأسماء للممتلكات:
|
||||
|
||||
`var dynamicProperty = "myProperty";
|
||||
myObject[dynamicProperty] = "myValue";
|
||||
`
|
||||
```javascript
|
||||
var dynamicProperty = "myProperty";
|
||||
myObject[dynamicProperty] = "myValue";
|
||||
```
|
||||
|
||||
يمكننا أيضًا حذفها كما يلي:
|
||||
|
||||
|
@ -22,38 +22,41 @@ _يتذكر موقع الويب اللغة التي حددتها في زيارت
|
||||
|
||||
**ضع في اعتبارك أن ملف تعريف الارتباط الذي تم تعيينه بواسطة نطاق معين لا يمكن قراءته إلا من خلال ذلك النطاق والنطاقات الفرعية فقط.**
|
||||
|
||||
`// Using vanilla javascript
|
||||
document.cookie = 'userLanguage=french; expires=Sun, 2 Dec 2017 23:56:11 UTC; path=/';
|
||||
|
||||
//Using JS cookie library
|
||||
Cookies.set('userLanguage', 'french', { expires: 7, path: '/' });
|
||||
`
|
||||
```javascript
|
||||
// Using vanilla javascript
|
||||
document.cookie = 'userLanguage=french; expires=Sun, 2 Dec 2017 23:56:11 UTC; path=/';
|
||||
|
||||
//Using JS cookie library
|
||||
Cookies.set('userLanguage', 'french', { expires: 7, path: '/' });
|
||||
```
|
||||
|
||||
_تنتهي صلاحية ملف تعريف الارتباط في 7 أيام_
|
||||
|
||||
### احصل على ملفات تعريف الارتباط
|
||||
|
||||
`// Using vanilla javascript
|
||||
console.log(document.cookie)
|
||||
|
||||
// => "_ga=GA1.2.1266762736.1473341790; userLanguage=french"
|
||||
|
||||
// Using JS cookie library
|
||||
Cookies.get('userLanguage');
|
||||
|
||||
// => "french"
|
||||
`
|
||||
```javascript
|
||||
// Using vanilla javascript
|
||||
console.log(document.cookie)
|
||||
|
||||
// => "_ga=GA1.2.1266762736.1473341790; userLanguage=french"
|
||||
|
||||
// Using JS cookie library
|
||||
Cookies.get('userLanguage');
|
||||
|
||||
// => "french"
|
||||
```
|
||||
|
||||
### حذف ملف تعريف الارتباط
|
||||
|
||||
لحذف ملف تعريف ارتباط ، يتم تعيين تاريخ انتهاء الصلاحية إلى شيء ما في الماضي.
|
||||
|
||||
`// Using vanilla javascript
|
||||
document.cookie = 'userLanguage; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/';
|
||||
|
||||
//Using JS cookie library
|
||||
Cookies.remove('userLanguage');
|
||||
`
|
||||
```javascript
|
||||
// Using vanilla javascript
|
||||
document.cookie = 'userLanguage; expires=Thu, 01 Jan 1970 00:00:01 GMT; path=/';
|
||||
|
||||
//Using JS cookie library
|
||||
Cookies.remove('userLanguage');
|
||||
```
|
||||
|
||||
_إذا وجدت نفسك تتعامل مع ملفات تعريف الارتباط كثيرًا في مشروعك ، فالرجاء استخدام مكتبة مثل [JS Cookie](https://github.com/js-cookie/js-cookie) وحفظ وقتًا كبيرًا من الوقت._
|
||||
|
||||
|
@ -10,30 +10,34 @@ localeTitle: أعداد
|
||||
|
||||
وأعرب عدد الحرفية عموما `base-10` حرفية عشري.
|
||||
|
||||
`var foo = 47;
|
||||
var bar = 47.9;
|
||||
`
|
||||
```javascript
|
||||
var foo = 47;
|
||||
var bar = 47.9;
|
||||
```
|
||||
|
||||
الجزء الرئيسي من القيمة العشرية ، إذا كان `0` ، هو اختياري:
|
||||
|
||||
`var same = 0.47;
|
||||
var stillSame = .47;
|
||||
`
|
||||
```javascript
|
||||
var same = 0.47;
|
||||
var stillSame = .47;
|
||||
```
|
||||
|
||||
وبالمثل ، فإن الجزء زائدة (الجزئي) من قيمة عشرية بعد `.` ، إذا كان `0` ، هو اختياري:
|
||||
|
||||
`var a = 47.0;
|
||||
var b = 47.;
|
||||
`
|
||||
```javascript
|
||||
var a = 47.0;
|
||||
var b = 47.;
|
||||
```
|
||||
|
||||
بشكل افتراضي ، سيتم إخراج معظم الأرقام في شكل `base-10` decimals ، مع إزالة الكسر `0` ثانية. وبالتالي:
|
||||
|
||||
`var foo = 47.300;
|
||||
var bar = 47.0;
|
||||
|
||||
foo; // 47.3
|
||||
bar; // 47
|
||||
`
|
||||
```javascript
|
||||
var foo = 47.300;
|
||||
var bar = 47.0;
|
||||
|
||||
foo; // 47.3
|
||||
bar; // 47
|
||||
```
|
||||
|
||||
يمكن كتابة `numbers` كبيرة جدًا أو صغيرة جدًا على النحو التالي:
|
||||
|
||||
@ -43,20 +47,22 @@ localeTitle: أعداد
|
||||
|
||||
يمكن استخدام طريقة `toExponential` لتحويل `number` إلى `exponential notation` .
|
||||
|
||||
`var foo = 47e8;
|
||||
foo; // 4700000000
|
||||
foo.toExponential() //"47e8"
|
||||
`
|
||||
```javascript
|
||||
var foo = 47e8;
|
||||
foo; // 4700000000
|
||||
foo.toExponential() //"47e8"
|
||||
```
|
||||
|
||||
لدى الأرقام الوصول إلى الأساليب المضمنة في `Number.prototype` .
|
||||
|
||||
فمثلا: `toFixed()` طريقة `toFixed()` رقمًا مع عدد محدد من الأرقام إلى يمين `toFixed()` العشرية.
|
||||
|
||||
`var foo = 47.69;
|
||||
foo.toFixed(0); // "48"
|
||||
foo.toFixed(1); // "47.7"
|
||||
foo.toFixed(2); // "47.69"
|
||||
`
|
||||
```javascript
|
||||
var foo = 47.69;
|
||||
foo.toFixed(0); // "48"
|
||||
foo.toFixed(1); // "47.7"
|
||||
foo.toFixed(2); // "47.69"
|
||||
```
|
||||
|
||||
> اكتب `Number.prototype` في متصفحك `Number.prototype` الطرق الأخرى المتاحة بنفسك.
|
||||
|
||||
|
@ -2,24 +2,25 @@
|
||||
title: Functional
|
||||
localeTitle: وظيفي
|
||||
---
|
||||
`var fun = function(a, b) {
|
||||
var funInstance = {};
|
||||
funInstance.a = a;
|
||||
funInstance.b = b;
|
||||
funInstance.method1 = function() {
|
||||
// method code here
|
||||
}
|
||||
funInstance.method2 = function() {
|
||||
// method code here
|
||||
}
|
||||
funInstance.method3 = function() {
|
||||
// method code here
|
||||
}
|
||||
return funInstance;
|
||||
}
|
||||
var myFun = fun(1, 2);
|
||||
myFun.method1();
|
||||
`
|
||||
```javascript
|
||||
var fun = function(a, b) {
|
||||
var funInstance = {};
|
||||
funInstance.a = a;
|
||||
funInstance.b = b;
|
||||
funInstance.method1 = function() {
|
||||
// method code here
|
||||
}
|
||||
funInstance.method2 = function() {
|
||||
// method code here
|
||||
}
|
||||
funInstance.method3 = function() {
|
||||
// method code here
|
||||
}
|
||||
return funInstance;
|
||||
}
|
||||
var myFun = fun(1, 2);
|
||||
myFun.method1();
|
||||
```
|
||||
|
||||
## كيف يمكنني التعرف عليه؟
|
||||
|
||||
@ -37,31 +38,32 @@ localeTitle: وظيفي
|
||||
|
||||
## العنوان: وظيفية المشتركة
|
||||
|
||||
`var fun = function(a, b) {
|
||||
var funInstance = {};
|
||||
funInstance.a = a;
|
||||
funInstance.b = b;
|
||||
extend(funInstance, funMethods);
|
||||
return funInstance;
|
||||
}
|
||||
var extend = function(to, from) {
|
||||
for (var key in from) {
|
||||
to[key] = from[key];
|
||||
}
|
||||
}
|
||||
var funMethods = {};
|
||||
funMethods.method1 = function() {
|
||||
// method code here
|
||||
}
|
||||
funMethods.method2 = function() {
|
||||
// method code here
|
||||
}
|
||||
funMethods.method3 = function() {
|
||||
// method code here
|
||||
}
|
||||
var myFun = fun(1, 2);
|
||||
myFun.method1();
|
||||
`
|
||||
```javascript
|
||||
var fun = function(a, b) {
|
||||
var funInstance = {};
|
||||
funInstance.a = a;
|
||||
funInstance.b = b;
|
||||
extend(funInstance, funMethods);
|
||||
return funInstance;
|
||||
}
|
||||
var extend = function(to, from) {
|
||||
for (var key in from) {
|
||||
to[key] = from[key];
|
||||
}
|
||||
}
|
||||
var funMethods = {};
|
||||
funMethods.method1 = function() {
|
||||
// method code here
|
||||
}
|
||||
funMethods.method2 = function() {
|
||||
// method code here
|
||||
}
|
||||
funMethods.method3 = function() {
|
||||
// method code here
|
||||
}
|
||||
var myFun = fun(1, 2);
|
||||
myFun.method1();
|
||||
```
|
||||
|
||||
## كيف يمكنني التعرف عليه؟
|
||||
|
||||
@ -79,25 +81,26 @@ localeTitle: وظيفي
|
||||
|
||||
## العنوان: Prototypal
|
||||
|
||||
`var fun = function(a, b) {
|
||||
var funInstance = Object.create(funMethods);
|
||||
funInstance.a = a;
|
||||
funInstance.b = b;
|
||||
return funInstance;
|
||||
}
|
||||
var funMethods = {};
|
||||
funMethods.method1 = function() {
|
||||
// method code here
|
||||
}
|
||||
funMethods.method2 = function() {
|
||||
// method code here
|
||||
}
|
||||
funMethods.method3 = function() {
|
||||
// method code here
|
||||
}
|
||||
var myFun = fun(1, 2);
|
||||
myFun.method1();
|
||||
`
|
||||
```javascript
|
||||
var fun = function(a, b) {
|
||||
var funInstance = Object.create(funMethods);
|
||||
funInstance.a = a;
|
||||
funInstance.b = b;
|
||||
return funInstance;
|
||||
}
|
||||
var funMethods = {};
|
||||
funMethods.method1 = function() {
|
||||
// method code here
|
||||
}
|
||||
funMethods.method2 = function() {
|
||||
// method code here
|
||||
}
|
||||
funMethods.method3 = function() {
|
||||
// method code here
|
||||
}
|
||||
var myFun = fun(1, 2);
|
||||
myFun.method1();
|
||||
```
|
||||
|
||||
## كيف يمكنني التعرف عليه؟
|
||||
|
||||
@ -115,24 +118,25 @@ localeTitle: وظيفي
|
||||
|
||||
## العنوان: Pseudoclassical
|
||||
|
||||
`var Fun = function(a, b) {
|
||||
// this = Object.create(Fun.prototype);
|
||||
this.a = a;
|
||||
this.b = b;
|
||||
// return this;
|
||||
}
|
||||
Fun.prototype.method1 = function() {
|
||||
// method code here
|
||||
}
|
||||
Fun.prototype.method2 = function() {
|
||||
// method code here
|
||||
}
|
||||
Fun.prototype.method3 = function() {
|
||||
// method code here
|
||||
}
|
||||
var myFun = new Fun(1, 2);
|
||||
myFun.method1();
|
||||
`
|
||||
```javascript
|
||||
var Fun = function(a, b) {
|
||||
// this = Object.create(Fun.prototype);
|
||||
this.a = a;
|
||||
this.b = b;
|
||||
// return this;
|
||||
}
|
||||
Fun.prototype.method1 = function() {
|
||||
// method code here
|
||||
}
|
||||
Fun.prototype.method2 = function() {
|
||||
// method code here
|
||||
}
|
||||
Fun.prototype.method3 = function() {
|
||||
// method code here
|
||||
}
|
||||
var myFun = new Fun(1, 2);
|
||||
myFun.method1();
|
||||
```
|
||||
|
||||
## كيف يمكنني التعرف عليه؟
|
||||
|
||||
|
@ -10,56 +10,62 @@ localeTitle: Instantization كائن
|
||||
|
||||
يمكنك إنشاء كائن بخصائص محددة مسبقًا مثل:
|
||||
|
||||
`let myObject = {
|
||||
name: "Dave",
|
||||
age: 33
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
let myObject = {
|
||||
name: "Dave",
|
||||
age: 33
|
||||
}
|
||||
```
|
||||
|
||||
### خلق كائن فارغ
|
||||
|
||||
يؤدي هذا إلى إنشاء كائن فارغ داخل متغير myObject الخاص بنا:
|
||||
|
||||
`let myObject = new Object();
|
||||
`
|
||||
```javascript
|
||||
let myObject = new Object();
|
||||
```
|
||||
|
||||
عندما ترغب في إضافة خصائص إلى الكائن الخاص بك ، يمكنك ببساطة استخدام إما تدوين نقطي أو تدوين قوس مع اسم الخاصية الذي تختاره:
|
||||
|
||||
`myObject.name = "Johnny Mnemonic"
|
||||
myObject["age"] = 55
|
||||
`
|
||||
```javascript
|
||||
myObject.name = "Johnny Mnemonic"
|
||||
myObject["age"] = 55
|
||||
```
|
||||
|
||||
### باستخدام وظيفة منشئ
|
||||
|
||||
يمكنك تعريف دالة منشئ يمكنك استخدامها لإنشاء الكائنات الخاصة بك:
|
||||
|
||||
`function Kitten(name, cute, color) {
|
||||
this.name = name,
|
||||
this.cute = cute,
|
||||
this.color = color
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
function Kitten(name, cute, color) {
|
||||
this.name = name,
|
||||
this.cute = cute,
|
||||
this.color = color
|
||||
}
|
||||
```
|
||||
|
||||
يمكنك تعريف متغير يحتوي على إنشاء مثيل لهذا الكائن عن طريق استدعاء دالة منشئ:
|
||||
|
||||
`let myKitten = new Kitten("Nibbles", true, "white")
|
||||
`
|
||||
```javascript
|
||||
let myKitten = new Kitten("Nibbles", true, "white")
|
||||
```
|
||||
|
||||
### Object.create ()
|
||||
|
||||
يتيح لك الأسلوب Object.create () (المحدد أولاً في ECMAScript 5.1) إنشاء كائنات. يسمح لك باختيار كائن النموذج الأصلي للكائن الجديد دون الحاجة إلى تعريف دالة منشئ مسبقًا.
|
||||
|
||||
`// Our pre-defined object
|
||||
let kitten = {
|
||||
name: "Fluff",
|
||||
cute: true,
|
||||
color: "gray"
|
||||
}
|
||||
// Create a new object using Object.create(). kitten is used as the prototype
|
||||
let newKitten = Object.create(kitten)
|
||||
|
||||
console.log(newKitten.name) // Will output "Fluff"
|
||||
`
|
||||
```javascript
|
||||
// Our pre-defined object
|
||||
let kitten = {
|
||||
name: "Fluff",
|
||||
cute: true,
|
||||
color: "gray"
|
||||
}
|
||||
// Create a new object using Object.create(). kitten is used as the prototype
|
||||
let newKitten = Object.create(kitten)
|
||||
|
||||
console.log(newKitten.name) // Will output "Fluff"
|
||||
```
|
||||
|
||||
#### معلومات اكثر
|
||||
|
||||
|
@ -8,14 +8,15 @@ localeTitle: حدث Onclick
|
||||
|
||||
### مثال
|
||||
|
||||
`<button onclick="myFunction()">Click me</button>
|
||||
|
||||
<script>
|
||||
function myFunction() {
|
||||
alert('Button was clicked!');
|
||||
}
|
||||
</script>
|
||||
`
|
||||
```javascript
|
||||
<button onclick="myFunction()">Click me</button>
|
||||
|
||||
<script>
|
||||
function myFunction() {
|
||||
alert('Button was clicked!');
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
في المثال البسيط أعلاه ، عندما ينقر المستخدم على الزر ، سيرى تنبيهًا في المتصفح يعرض `Button was clicked!` .
|
||||
|
||||
@ -45,15 +46,16 @@ localeTitle: حدث Onclick
|
||||
|
||||
ولكن إذا كان لنا أن نعلق `onclick` على وصلات (HTML هو `a` علامة) قد نرغب منع الإجراء الافتراضي إلى حدوث:
|
||||
|
||||
`<a href="https://guide.freecodecamp.org" onclick="myAlert()">Guides</a>
|
||||
|
||||
<script>
|
||||
function myAlert(event) {
|
||||
event.preventDefault();
|
||||
alert("Link was clicked but page was not open");
|
||||
}
|
||||
</script>
|
||||
`
|
||||
```javascript
|
||||
<a href="https://guide.freecodecamp.org" onclick="myAlert()">Guides</a>
|
||||
|
||||
<script>
|
||||
function myAlert(event) {
|
||||
event.preventDefault();
|
||||
alert("Link was clicked but page was not open");
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
في المثال أعلاه يمكننا منع السلوك الافتراضي `a` عنصر (وصلة فتح) باستخدام `event.preventDefault()` داخل لدينا `onclick` ظيفة رد.
|
||||
|
||||
|
@ -8,14 +8,15 @@ localeTitle: حدث Onload
|
||||
|
||||
### مثال:
|
||||
|
||||
`<body onload="myFunction()">
|
||||
|
||||
<script>
|
||||
function myFunction() {
|
||||
alert('Page finished loading');
|
||||
}
|
||||
</script>
|
||||
`
|
||||
```javascript
|
||||
<body onload="myFunction()">
|
||||
|
||||
<script>
|
||||
function myFunction() {
|
||||
alert('Page finished loading');
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
في المثال أعلاه ، بمجرد تحميل صفحة الويب ، سيتم استدعاء وظيفة `myFunction` ، مما يعرض تنبيه `Page finished loading` المنتهي إلى المستخدم.
|
||||
|
||||
|
@ -10,24 +10,26 @@ localeTitle: انتاج |
|
||||
|
||||
إنها الطريقة الأكثر شيوعًا واستخدامًا لإخراج البيانات. من الشائع أن يتم إدخال زوجين من هذه العبارات بين العبارات لتوضيح كيفية تدفق البيانات ومعالجتها. أيضا ، يمكنك استخدام `debugger` أو نقاط التوقف في devtools أن تفعل الشيء نفسه دون تلويث التعليمات البرمجية الخاصة بك.
|
||||
|
||||
`var numbers = [ 1, 2, 3, 4, 5, 6, 7];
|
||||
numbers.forEach(function(number){
|
||||
console.log(number + ' is divisible by 2', number%2 == 0);
|
||||
});
|
||||
`
|
||||
```javascript
|
||||
var numbers = [ 1, 2, 3, 4, 5, 6, 7];
|
||||
numbers.forEach(function(number){
|
||||
console.log(number + ' is divisible by 2', number%2 == 0);
|
||||
});
|
||||
```
|
||||
|
||||
#### `console.warn`
|
||||
|
||||
كما خمنت بالاسم ، يُستخدم هذا لعرض التحذيرات ، ويميزها اللون الأصفر النموذجي عن الخطأ الأحمر & `console.log` .
|
||||
|
||||
`function isAdult(age){
|
||||
if(Number(age) < 18){
|
||||
console.warn('You are not an adult');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
function isAdult(age){
|
||||
if(Number(age) < 18){
|
||||
console.warn('You are not an adult');
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
```
|
||||
|
||||
#### `console.error`
|
||||
|
||||
@ -39,55 +41,56 @@ localeTitle: انتاج |
|
||||
|
||||
_حاول تشغيل التعليمة البرمجية أدناه في وحدة التحكم الخاصة بك_
|
||||
|
||||
`var data = {
|
||||
"colors": [
|
||||
{
|
||||
"color": "black",
|
||||
"category": "hue",
|
||||
"type": "primary",
|
||||
"rgba": [255,255,255,1],
|
||||
"hex": "#000"
|
||||
},
|
||||
{
|
||||
"color": "white",
|
||||
"category": "value",
|
||||
"rgba": [0,0,0,1],
|
||||
"hex": "#FFF"
|
||||
},
|
||||
{
|
||||
"color": "red",
|
||||
"category": "hue",
|
||||
"type": "primary",
|
||||
"rgba": [255,0,0,1],
|
||||
"hex": "#FF0"
|
||||
},
|
||||
{
|
||||
"color": "blue",
|
||||
"category": "hue",
|
||||
"type": "primary",
|
||||
"rgba": [0,0,255,1],
|
||||
"hex": "#00F"
|
||||
},
|
||||
{
|
||||
"color": "yellow",
|
||||
"category": "hue",
|
||||
"type": "primary",
|
||||
"rgba": [255,255,0,1],
|
||||
"hex": "#FF0"
|
||||
},
|
||||
{
|
||||
"color": "green",
|
||||
"category": "hue",
|
||||
"type": "secondary",
|
||||
"rgba": [0,255,0,1],
|
||||
"hex": "#0F0"
|
||||
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
console.table(data.colors);
|
||||
`
|
||||
```javascript
|
||||
var data = {
|
||||
"colors": [
|
||||
{
|
||||
"color": "black",
|
||||
"category": "hue",
|
||||
"type": "primary",
|
||||
"rgba": [255,255,255,1],
|
||||
"hex": "#000"
|
||||
},
|
||||
{
|
||||
"color": "white",
|
||||
"category": "value",
|
||||
"rgba": [0,0,0,1],
|
||||
"hex": "#FFF"
|
||||
},
|
||||
{
|
||||
"color": "red",
|
||||
"category": "hue",
|
||||
"type": "primary",
|
||||
"rgba": [255,0,0,1],
|
||||
"hex": "#FF0"
|
||||
},
|
||||
{
|
||||
"color": "blue",
|
||||
"category": "hue",
|
||||
"type": "primary",
|
||||
"rgba": [0,0,255,1],
|
||||
"hex": "#00F"
|
||||
},
|
||||
{
|
||||
"color": "yellow",
|
||||
"category": "hue",
|
||||
"type": "primary",
|
||||
"rgba": [255,255,0,1],
|
||||
"hex": "#FF0"
|
||||
},
|
||||
{
|
||||
"color": "green",
|
||||
"category": "hue",
|
||||
"type": "secondary",
|
||||
"rgba": [0,255,0,1],
|
||||
"hex": "#0F0"
|
||||
|
||||
},
|
||||
]
|
||||
}
|
||||
|
||||
console.table(data.colors);
|
||||
```
|
||||
|
||||
يمكنك أيضًا التحكم في نوع المخرجات الذي تريد رؤيته في وحدة التحكم.
|
||||
|
||||
|
@ -26,13 +26,14 @@ localeTitle: مربعات منبثقة
|
||||
|
||||
### مثال:
|
||||
|
||||
`var result = window.confirm('Are you sure?');
|
||||
if (result === true) {
|
||||
window.alert('Okay, if you're sure.');
|
||||
} else {
|
||||
window.alert('You seem uncertain.');
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
var result = window.confirm('Are you sure?');
|
||||
if (result === true) {
|
||||
window.alert('Okay, if you're sure.');
|
||||
} else {
|
||||
window.alert('You seem uncertain.');
|
||||
}
|
||||
```
|
||||
|
||||

|
||||
|
||||
@ -50,13 +51,15 @@ localeTitle: مربعات منبثقة
|
||||
|
||||
إذا كنت غير راضٍ عن النوافذ المنبثقة JavaScript الافتراضية ، يمكنك استبدالها في مكتبات UI المختلفة. على سبيل المثال ، يوفر SweetAlert بديلاً لطيفًا لوحدات JavaScript القياسية. يمكنك تضمينها في HTML الخاص بك عبر CDN (شبكة توصيل المحتوى) والبدء في استخدامها.
|
||||
|
||||
`<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
|
||||
`
|
||||
```HTML
|
||||
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
|
||||
```
|
||||
|
||||
الصيغة على النحو التالي: `swal(title, subtitle, messageType)`
|
||||
|
||||
`swal("Oops!", "Something went wrong on the page!", "error");
|
||||
`
|
||||
```javascript
|
||||
swal("Oops!", "Something went wrong on the page!", "error");
|
||||
```
|
||||
|
||||
سيعمل الكود أعلاه على إنتاج النافذة المنبثقة التالية:  SweetAlert ليست بأي حال المعادل الوحيد للوحدات القياسية ، ولكنها نظيفة وسهلة التنفيذ.
|
||||
|
||||
|
@ -6,17 +6,18 @@ localeTitle: وعود
|
||||
|
||||
جافا سكريبت واحد مترابطة ، مما يعني أنه لا يمكن تشغيل نصين من النص البرمجي في نفس الوقت ؛ لديهم لتشغيل واحد تلو الآخر. الوعد هو كائن يمثل الانتهاء النهائي (أو الفشل) لعملية غير متزامنة ، والقيمة الناتجة عنها.
|
||||
|
||||
`var promise = new Promise(function(resolve, reject) {
|
||||
// do thing, then…
|
||||
|
||||
if (/* everything worked */) {
|
||||
resolve("See, it worked!");
|
||||
}
|
||||
else {
|
||||
reject(Error("It broke"));
|
||||
}
|
||||
});
|
||||
`
|
||||
```javascript
|
||||
var promise = new Promise(function(resolve, reject) {
|
||||
// do thing, then…
|
||||
|
||||
if (/* everything worked */) {
|
||||
resolve("See, it worked!");
|
||||
}
|
||||
else {
|
||||
reject(Error("It broke"));
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## الوعد موجود في واحدة من هذه الحالات
|
||||
|
||||
@ -30,19 +31,20 @@ localeTitle: وعود
|
||||
|
||||
لاتخاذ العديد من المكالمات غير المتزامنة ومزامنتها واحدة تلو الأخرى ، يمكنك استخدام تسلسل الوعد. يسمح هذا باستخدام قيمة من الوعد الأول في عمليات الاسترجاع اللاحقة لاحقًا.
|
||||
|
||||
`Promise.resolve('some')
|
||||
.then(function(string) { // <-- This will happen after the above Promise resolves (returning the value 'some')
|
||||
return new Promise(function(resolve, reject) {
|
||||
setTimeout(function() {
|
||||
string += 'thing';
|
||||
resolve(string);
|
||||
}, 1);
|
||||
});
|
||||
})
|
||||
.then(function(string) { // <-- This will happen after the above .then's new Promise resolves
|
||||
console.log(string); // <-- Logs 'something' to the console
|
||||
});
|
||||
`
|
||||
```javascript
|
||||
Promise.resolve('some')
|
||||
.then(function(string) { // <-- This will happen after the above Promise resolves (returning the value 'some')
|
||||
return new Promise(function(resolve, reject) {
|
||||
setTimeout(function() {
|
||||
string += 'thing';
|
||||
resolve(string);
|
||||
}, 1);
|
||||
});
|
||||
})
|
||||
.then(function(string) { // <-- This will happen after the above .then's new Promise resolves
|
||||
console.log(string); // <-- Logs 'something' to the console
|
||||
});
|
||||
```
|
||||
|
||||
## Promise API
|
||||
|
||||
@ -113,37 +115,40 @@ localeTitle: وعود
|
||||
|
||||
في الإصدارات الحديثة ، قدمت JavaScript المزيد من الطرق للتعامل مع Promises. أحد هذه الطرق هو مولد الدالة. مولدات الدالة هي دالات "يمكن إيقافها". عند استخدامها مع Promises ، يمكن للمولدات أن تجعل عملية القراءة أكثر سهولة وأن تظهر "متزامنة".
|
||||
|
||||
`const myFirstGenerator = function* () {
|
||||
const one = yield 1;
|
||||
const two = yield 2;
|
||||
const three = yield 3;
|
||||
|
||||
return 'Finished!';
|
||||
}
|
||||
|
||||
const gen = myFirstGenerator();
|
||||
`
|
||||
```javascript
|
||||
const myFirstGenerator = function* () {
|
||||
const one = yield 1;
|
||||
const two = yield 2;
|
||||
const three = yield 3;
|
||||
|
||||
return 'Finished!';
|
||||
}
|
||||
|
||||
const gen = myFirstGenerator();
|
||||
```
|
||||
|
||||
ها هو أول مولد لدينا ، والذي يمكنك رؤيته بواسطة بناء الجملة `function*` . و `gen` متغير أعلنا لن يتم تشغيل `myFirstGenerator` ، ولكن بدلا من ذلك سوف "هذه المولدات جاهزة للاستخدام".
|
||||
|
||||
`console.log(gen.next());
|
||||
// Returns { value: 1, done: false }
|
||||
`
|
||||
```javascript
|
||||
console.log(gen.next());
|
||||
// Returns { value: 1, done: false }
|
||||
```
|
||||
|
||||
عندما نقوم بتشغيل `gen.next()` فإنه سوف `gen.next()` . وبما أن هذه هي المرة الأولى التي نطلق عليها `gen.next()` ، فسوف يتم تشغيل `yield 1` `gen.next()` مؤقتًا حتى نسميه `gen.next()` مرة أخرى. عندما `yield 1` يسمى، فإنه سيعود لنا `value` التي أسفرت عن وجود أو عدم ومولد `done` .
|
||||
|
||||
`console.log(gen.next());
|
||||
// Returns { value: 2, done: false }
|
||||
|
||||
console.log(gen.next());
|
||||
// Returns { value: 3, done: false }
|
||||
|
||||
console.log(gen.next());
|
||||
// Returns { value: 'Finished!', done: true }
|
||||
|
||||
console.log(gen.next());
|
||||
// Will throw an error
|
||||
`
|
||||
```javascript
|
||||
console.log(gen.next());
|
||||
// Returns { value: 2, done: false }
|
||||
|
||||
console.log(gen.next());
|
||||
// Returns { value: 3, done: false }
|
||||
|
||||
console.log(gen.next());
|
||||
// Returns { value: 'Finished!', done: true }
|
||||
|
||||
console.log(gen.next());
|
||||
// Will throw an error
|
||||
```
|
||||
|
||||
بينما نستمر في استدعاء `gen.next()` ، سيستمر الأمر في `yield` التالي `gen.next()` المؤقت في كل مرة. وبمجرد عدم وجود مزيد من `yield` المتبقي ، فستستمر في تشغيل بقية المولد ، والتي في هذه الحالة تعود ببساطة `'Finished!'` . إذا اتصلت بـ `gen.next()` مرة أخرى ، فسوف ترمي خطأ عندما ينتهي المولد.
|
||||
|
||||
@ -153,15 +158,16 @@ localeTitle: وعود
|
||||
|
||||
ترجع طريقة Promise.all (iterable) وعدًا واحدًا يحل عندما يتم حل جميع الوعود في الوسيطة المتقابلة أو عندما لا تحتوي الوسيطة القابلة للتكرار على أي وعود. إنها ترفض سبب الوعد الأول الذي يرفض.
|
||||
|
||||
`var promise1 = Promise.resolve(catSource);
|
||||
var promise2 = Promise.resolve(dogSource);
|
||||
var promise3 = Promise.resolve(cowSource);
|
||||
|
||||
Promise.all([promise1, promise2, promise3]).then(function(values) {
|
||||
console.log(values);
|
||||
});
|
||||
// expected output: Array ["catData", "dogData", "cowData"]
|
||||
`
|
||||
```javascript
|
||||
var promise1 = Promise.resolve(catSource);
|
||||
var promise2 = Promise.resolve(dogSource);
|
||||
var promise3 = Promise.resolve(cowSource);
|
||||
|
||||
Promise.all([promise1, promise2, promise3]).then(function(values) {
|
||||
console.log(values);
|
||||
});
|
||||
// expected output: Array ["catData", "dogData", "cowData"]
|
||||
```
|
||||
|
||||
### معلومات اكثر
|
||||
|
||||
|
@ -10,24 +10,26 @@ localeTitle: نماذج
|
||||
|
||||
من أجل الوضوح ، دعنا نفحص المثال التالي:
|
||||
|
||||
`function Point2D(x, y) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
function Point2D(x, y) {
|
||||
this.x = x;
|
||||
this.y = y;
|
||||
}
|
||||
```
|
||||
|
||||
كما `Point2D` وظيفة `Point2D` ، سيتم إنشاء خاصية افتراضية تسمى `prototype` (لاحظ أنه ، في JavaScript ، وظيفة هي أيضا كائن). الخاصية `prototype` هي كائن يحتوي على خاصية `constructor` `Point2D` الدالة `Point2D.prototype.constructor = Point2D` : `Point2D.prototype.constructor = Point2D` . وعندما تستدعي `Point2D` رئيسية `new` ، `Point2D` _الكائنات المنشأة حديثًا جميع الخصائص من_ `Point2D.prototype` . للتحقق من ذلك ، يمكنك إضافة طريقة باسم `move` إلى `Point2D.prototype` كما يلي:
|
||||
|
||||
`Point2D.prototype.move = function(dx, dy) {
|
||||
this.x += dx;
|
||||
this.y += dy;
|
||||
}
|
||||
|
||||
var p1 = new Point2D(1, 2);
|
||||
p1.move(3, 4);
|
||||
console.log(p1.x); // 4
|
||||
console.log(p1.y); // 6
|
||||
`
|
||||
```javascript
|
||||
Point2D.prototype.move = function(dx, dy) {
|
||||
this.x += dx;
|
||||
this.y += dy;
|
||||
}
|
||||
|
||||
var p1 = new Point2D(1, 2);
|
||||
p1.move(3, 4);
|
||||
console.log(p1.x); // 4
|
||||
console.log(p1.y); // 6
|
||||
```
|
||||
|
||||
يسمى `Point2D.prototype` **كائن prototype** أو **prototype** من كائن `p1` وعن أي كائن آخر تم إنشاؤه باستخدام بناء جملة `new Point2D(...)` . يمكنك إضافة المزيد من الخصائص إلى كائن `Point2D.prototype` كما تريد. النمط المشترك هو إعلان الطرق إلى `Point2D.prototype` وسيتم الإعلان عن خصائص أخرى في وظيفة منشئ.
|
||||
|
||||
@ -43,18 +45,19 @@ localeTitle: نماذج
|
||||
|
||||
آلية سلسلة النموذج بسيطة: عند الوصول إلى خاصية `p` على كائن `obj` ، سيقوم محرك JavaScript بالبحث في هذه الخاصية داخل كائن `obj` . إذا فشل المحرك في البحث ، فإنه يستمر في البحث في نموذج كائن `obj` وهكذا حتى يصل إلى `Object.prototype` . إذا انتهى البحث ، ولم يتم العثور على أي شيء ، فإن النتيجة ستكون `undefined` . فمثلا:
|
||||
|
||||
`var obj1 = {
|
||||
a: 1,
|
||||
b: 2
|
||||
};
|
||||
|
||||
var obj2 = Object.create(obj1);
|
||||
obj2.a = 2;
|
||||
|
||||
console.log(obj2.a); // 2
|
||||
console.log(obj2.b); // 2
|
||||
console.log(obj2.c); // undefined
|
||||
`
|
||||
```javascript
|
||||
var obj1 = {
|
||||
a: 1,
|
||||
b: 2
|
||||
};
|
||||
|
||||
var obj2 = Object.create(obj1);
|
||||
obj2.a = 2;
|
||||
|
||||
console.log(obj2.a); // 2
|
||||
console.log(obj2.b); // 2
|
||||
console.log(obj2.c); // undefined
|
||||
```
|
||||
|
||||
في المقتطف أعلاه ، `var obj2 = Object.create(obj1)` إلى إنشاء كائن `obj2` باستخدام كائن `obj1` prototype. بمعنى آخر ، يصبح `obj1` هو النموذج الأولي لـ `obj2` بدلاً من `Object.prototype` افتراضيًا. كما ترى ، ليست `b` خاصية خاصة بـ `obj2` ، فلا يزال بإمكانك الوصول إليها عبر سلسلة النموذج الأولي. ومع ذلك ، بالنسبة إلى الخاصية `c` ، تحصل على قيمة `undefined` لأنه لا يمكن العثور عليها في `obj1` و `Object.prototype` .
|
||||
|
||||
@ -62,37 +65,39 @@ localeTitle: نماذج
|
||||
|
||||
في ES2016 ، أصبحنا الآن نستخدم الكلمة الرئيسية `Class` وكذلك الأساليب المذكورة أعلاه للتلاعب في `prototype` . تروق `Class` جافا سكريبت للمطورين من خلفيات OOP ، ولكنها في الأساس تقوم بنفس الشيء على النحو الوارد أعلاه.
|
||||
|
||||
`class Rectangle {
|
||||
constructor(height, width) {
|
||||
this.height = height
|
||||
this.width = width
|
||||
}
|
||||
|
||||
get area() {
|
||||
return this.calcArea()
|
||||
}
|
||||
|
||||
calcArea() {
|
||||
return this.height * this.width
|
||||
}
|
||||
}
|
||||
|
||||
const square = new Rectangle(10, 10)
|
||||
|
||||
console.log(square.area) // 100
|
||||
`
|
||||
```javascript
|
||||
class Rectangle {
|
||||
constructor(height, width) {
|
||||
this.height = height
|
||||
this.width = width
|
||||
}
|
||||
|
||||
get area() {
|
||||
return this.calcArea()
|
||||
}
|
||||
|
||||
calcArea() {
|
||||
return this.height * this.width
|
||||
}
|
||||
}
|
||||
|
||||
const square = new Rectangle(10, 10)
|
||||
|
||||
console.log(square.area) // 100
|
||||
```
|
||||
|
||||
هذا هو أساسا نفس:
|
||||
|
||||
`function Rectangle(height, width) {
|
||||
this.height = height
|
||||
this.width = width
|
||||
}
|
||||
|
||||
Rectangle.prototype.calcArea = function calcArea() {
|
||||
return this.height * this.width
|
||||
}
|
||||
`
|
||||
```javascript
|
||||
function Rectangle(height, width) {
|
||||
this.height = height
|
||||
this.width = width
|
||||
}
|
||||
|
||||
Rectangle.prototype.calcArea = function calcArea() {
|
||||
return this.height * this.width
|
||||
}
|
||||
```
|
||||
|
||||
و `getter` و `setter` الأساليب في الطبقات ربط خاصية كائن إلى وظيفة التي سيتم استدعاؤها عند بدا أن الممتلكات تصل. إنه مجرد سكر نحوي للمساعدة في تسهيل _البحث عن_ الخصائص أو _ضبطها_ .
|
||||
|
||||
|
@ -10,15 +10,16 @@ localeTitle: طريقة عشوائية
|
||||
|
||||
سيقوم الأسلوب `Math.random()` بإرجاع رقم عشري (عشري) أكبر من أو يساوي 0 وأقل من (ولكن لا يساوي مطلقًا) 1. وبعبارة أخرى `0 <= x < 1` . فمثلا:
|
||||
|
||||
`console.log(Math.random());
|
||||
// 0.7069207248635578
|
||||
|
||||
console.log(Math.random());
|
||||
// 0.765046694794209
|
||||
|
||||
console.log(Math.random());
|
||||
// 0.14069121642698246
|
||||
`
|
||||
```JavaScript
|
||||
console.log(Math.random());
|
||||
// 0.7069207248635578
|
||||
|
||||
console.log(Math.random());
|
||||
// 0.765046694794209
|
||||
|
||||
console.log(Math.random());
|
||||
// 0.14069121642698246
|
||||
```
|
||||
|
||||
(وبالطبع ، ستكون الأرقام التي يتم إرجاعها مختلفة في كل مرة. سيتم افتراض ذلك لكافة الأمثلة التالية - ستحدث نتائج مختلفة لكل تمريرة.)
|
||||
|
||||
@ -30,24 +31,26 @@ localeTitle: طريقة عشوائية
|
||||
|
||||
على سبيل المثال ، إذا كنت تريد رقم نقطة عائم عشوائيًا بين 0 و 10 ، فيمكنك استخدام:
|
||||
|
||||
`var x = Math.random()*10;
|
||||
|
||||
console.log(x);
|
||||
// 4.133793901445541
|
||||
`
|
||||
```JavaScript
|
||||
var x = Math.random()*10;
|
||||
|
||||
console.log(x);
|
||||
// 4.133793901445541
|
||||
```
|
||||
|
||||
### توليد رقم نقطة عائمة عشوائية داخل نطاق
|
||||
|
||||
إذا كنت تحتاج إلى رقم نقطة عائمة عشوائي يتراوح بين رقمين محددين ، فيمكنك فعل شيء كالتالي:
|
||||
|
||||
`var min = 83.1;
|
||||
var max = 193.36;
|
||||
|
||||
var x = Math.random()*(max - min)+min;
|
||||
|
||||
console.log(x);
|
||||
// 126.94014012699063
|
||||
`
|
||||
```JavaScript
|
||||
var min = 83.1;
|
||||
var max = 193.36;
|
||||
|
||||
var x = Math.random()*(max - min)+min;
|
||||
|
||||
console.log(x);
|
||||
// 126.94014012699063
|
||||
```
|
||||
|
||||
### توليد عدد صحيح عشوائي بين 0 و max
|
||||
|
||||
@ -55,11 +58,12 @@ localeTitle: طريقة عشوائية
|
||||
|
||||
على سبيل المثال ، إذا كنت تريد التحديد عشوائياً من مصفوفة من 10 عناصر ، فستحتاج إلى رقم عشوائي بين 0 و 9 ضمناً (تذكر أن المصفوفات صفر فهرستها).
|
||||
|
||||
`var x = Math.floor(Math.random()*10);
|
||||
|
||||
console.log(x);
|
||||
// 7
|
||||
`
|
||||
```JavaScript
|
||||
var x = Math.floor(Math.random()*10);
|
||||
|
||||
console.log(x);
|
||||
// 7
|
||||
```
|
||||
|
||||
(تذكر أن `Math.random()` لن ترجع بالضبط 1 ، لذلك لن يتمكن `Math.random()*10` العودة تمامًا 10. وهذا يعني أنه بعد التقريب إلى الأسفل ، ستكون النتيجة دائمًا 9 أو أقل.)
|
||||
|
||||
@ -67,32 +71,35 @@ localeTitle: طريقة عشوائية
|
||||
|
||||
إذا كنت بحاجة إلى رقم عشوائي مع الحد الأدنى لعدد 1 (على سبيل المثال ، اختيار يوم عشوائي في يناير) ، يمكنك استخدام أسلوب `Math.ceil()` .
|
||||
|
||||
`var x = Math.ceil(Math.random()*31);
|
||||
|
||||
console.log(x);
|
||||
// 23
|
||||
`
|
||||
```JavaScript
|
||||
var x = Math.ceil(Math.random()*31);
|
||||
|
||||
console.log(x);
|
||||
// 23
|
||||
```
|
||||
|
||||
طريقة أخرى كانت لاستخدام الوظيفة السابقة (باستخدام `Math.floor()` ) وإضافة 1 إليها:
|
||||
|
||||
`var x = Math.floor(Math.random()*31)+1;
|
||||
|
||||
console.log(x);
|
||||
// 17
|
||||
`
|
||||
```JavaScript
|
||||
var x = Math.floor(Math.random()*31)+1;
|
||||
|
||||
console.log(x);
|
||||
// 17
|
||||
```
|
||||
|
||||
### توليد عدد صحيح عشوائي داخل نطاق
|
||||
|
||||
وأخيرًا ، تحتاج في بعض الأحيان إلى عدد صحيح عشوائي بين رقمين محددين. على سبيل المثال ، إذا كنت تحاول اختيار تذاكر يانصيب وكنت تعرف أرقام أقل وأكبر رقم:
|
||||
|
||||
`var min = 1718;
|
||||
var max = 3429;
|
||||
|
||||
var x = Math.floor(Math.random()*(max-min+1)+min);
|
||||
|
||||
console.log(x);
|
||||
//2509
|
||||
`
|
||||
```JavaScript
|
||||
var min = 1718;
|
||||
var max = 3429;
|
||||
|
||||
var x = Math.floor(Math.random()*(max-min+1)+min);
|
||||
|
||||
console.log(x);
|
||||
//2509
|
||||
```
|
||||
|
||||
### ما مدى عشوائية Math.random ()؟
|
||||
|
||||
|
@ -40,9 +40,10 @@ localeTitle: مرجع التعبيرات العادية
|
||||
|
||||
التعبير العادي هو نوع من الكائنات. يمكن بناؤها إما مع منشئ RegExp أو مكتوبة كقيمة حرفية من خلال إحاطة نمط في مائلة (/) حرفا.
|
||||
|
||||
`var re1 = new RegExp (" abc ") ;
|
||||
var re2 = / abc /;
|
||||
`
|
||||
```
|
||||
var re1 = new RegExp (" abc ") ;
|
||||
var re2 = / abc /;
|
||||
```
|
||||
|
||||
تمثل كل من كائنات التعبير العادية نفس النمط: حرف متبوعًا بـ ab متبوعًا بـ c.
|
||||
|
||||
@ -52,28 +53,31 @@ localeTitle: مرجع التعبيرات العادية
|
||||
|
||||
### اختبار للمباريات
|
||||
|
||||
`console . log (/ abc /. test (" abcde ") );
|
||||
// → true
|
||||
console . log (/ abc /. test (" abxde ") );
|
||||
// → false
|
||||
`
|
||||
```
|
||||
console . log (/ abc /. test (" abcde ") );
|
||||
// → true
|
||||
console . log (/ abc /. test (" abxde ") );
|
||||
// → false
|
||||
```
|
||||
|
||||
### مطابقة مجموعة من الشخصيات
|
||||
|
||||
`console . log (/[0123456789]/. test (" in 1992") );
|
||||
// → true
|
||||
console . log (/[0 -9]/. test (" in 1992") );
|
||||
// → true
|
||||
`
|
||||
```
|
||||
console . log (/[0123456789]/. test (" in 1992") );
|
||||
// → true
|
||||
console . log (/[0 -9]/. test (" in 1992") );
|
||||
// → true
|
||||
```
|
||||
|
||||
### أنماط الاختيار
|
||||
|
||||
`var animalCount = /\ b \ d + ( pig | cow | chicken )s ?\ b /;
|
||||
console . log ( animalCount . test ("15 pigs ") );
|
||||
// → true
|
||||
console . log ( animalCount . test ("15 pigchickens ") );
|
||||
// → false
|
||||
`
|
||||
```
|
||||
var animalCount = /\ b \ d + ( pig | cow | chicken )s ?\ b /;
|
||||
console . log ( animalCount . test ("15 pigs ") );
|
||||
// → true
|
||||
console . log ( animalCount . test ("15 pigchickens ") );
|
||||
// → false
|
||||
```
|
||||
|
||||
#### أساليب
|
||||
|
||||
@ -83,11 +87,12 @@ localeTitle: مرجع التعبيرات العادية
|
||||
|
||||
يمكن أن تكون الوسيطة الأولى أيضًا تعبيرًا عاديًا ، وفي هذه الحالة يتم استبدال المطابقة الأولى للتعبير العادي. عند إضافة خيار ag (للعامة) إلى التعبير العادي ، سيتم استبدال كل التطابقات في السلسلة ، وليس فقط الأول.
|
||||
|
||||
`console . log (" Borobudur ". replace (/[ ou ]/ , "a ") );
|
||||
// → Barobudur
|
||||
console . log (" Borobudur ". replace (/[ ou ]/g , "a ") );
|
||||
// → Barabadar
|
||||
`
|
||||
```
|
||||
console . log (" Borobudur ". replace (/[ ou ]/ , "a ") );
|
||||
// → Barobudur
|
||||
console . log (" Borobudur ". replace (/[ ou ]/g , "a ") );
|
||||
// → Barabadar
|
||||
```
|
||||
|
||||
### معلومات اكثر:
|
||||
|
||||
|
@ -10,21 +10,23 @@ localeTitle: معايير الراحة
|
||||
|
||||
### بناء الجملة
|
||||
|
||||
`function myFunc(...args) {
|
||||
console.log(args);
|
||||
}
|
||||
|
||||
myFunc( 1, 2, 3, 4, 5); // [1,2,3,4,5]
|
||||
`
|
||||
```js
|
||||
function myFunc(...args) {
|
||||
console.log(args);
|
||||
}
|
||||
|
||||
myFunc( 1, 2, 3, 4, 5); // [1,2,3,4,5]
|
||||
```
|
||||
|
||||
يمكنك بادئة معلمة آخر دالة باستخدام `...` عندما تريد عمل شيء ما مع المعلمات الأولية ثم معالجة جميع المعلمات المتبقية بشكل مختلف.
|
||||
|
||||
`function convertCurrency(rate, fee, ...amounts) {
|
||||
return amounts.map(amount => (amount * rate) + fee);
|
||||
}
|
||||
|
||||
convertCurrency(0.89, 2.5, 100, 250, 75, 150, 300); // [ 91.5, 225, 69.25, 136, 269.5 ]
|
||||
`
|
||||
```js
|
||||
function convertCurrency(rate, fee, ...amounts) {
|
||||
return amounts.map(amount => (amount * rate) + fee);
|
||||
}
|
||||
|
||||
convertCurrency(0.89, 2.5, 100, 250, 75, 150, 300); // [ 91.5, 225, 69.25, 136, 269.5 ]
|
||||
```
|
||||
|
||||
يتيح لك `...` جمع ما تبقى من الوسيطات ، إن وجدت ، في مصفوفة.
|
||||
|
||||
|
@ -16,20 +16,21 @@ localeTitle: بيان العودة
|
||||
|
||||
عدم إرجاع أي شيء على سطر جديد بدون استخدام الأقواس. هذا هو quirk JavaScript وستكون النتيجة غير محددة. حاول دائمًا استخدام الأقواس عند إرجاع شيء ما على أسطر متعددة.
|
||||
|
||||
`function foo() {
|
||||
return
|
||||
1;
|
||||
}
|
||||
|
||||
function boo() {
|
||||
return (
|
||||
1
|
||||
);
|
||||
}
|
||||
|
||||
foo(); --> undefined
|
||||
boo(); --> 1
|
||||
`
|
||||
```javascript
|
||||
function foo() {
|
||||
return
|
||||
1;
|
||||
}
|
||||
|
||||
function boo() {
|
||||
return (
|
||||
1
|
||||
);
|
||||
}
|
||||
|
||||
foo(); --> undefined
|
||||
boo(); --> 1
|
||||
```
|
||||
|
||||
## أمثلة
|
||||
|
||||
|
@ -8,10 +8,11 @@ localeTitle: منقوطة
|
||||
|
||||
هناك حالة واحدة فقط حيث يفشل ASI: عندما يبدأ سطر مع قوس فتح `(` . لتجنب هذا يسبب أخطاء ، عندما يبدأ سطر مع قوس فتح ، يمكنك وضع فاصلة منقوطة في بداية السطر الذي يحتوي على قوس فتح :
|
||||
|
||||
`;(function() {
|
||||
console.log('Hi!')
|
||||
})
|
||||
`
|
||||
```js
|
||||
;(function() {
|
||||
console.log('Hi!')
|
||||
})
|
||||
```
|
||||
|
||||
لاحظ أن هذا مطلوب فقط إذا كنت لا تستخدم الفواصل المنقوطة.
|
||||
|
||||
|
@ -37,14 +37,15 @@ localeTitle: خلق سينجلتون في جافا سكريبت
|
||||
|
||||
الآن لتنفيذ أو استخدام المفرد الخاص بك. في المتصفح بعد حفظ هذا الملف js وتحميله.
|
||||
|
||||
`console.log(singletonFn.getDataCounter()); //0 as bydefault it will be 0.
|
||||
|
||||
singletonFn.setDataCounter(20);
|
||||
|
||||
console.log(singletonFn.getDataCounter()); //20 as we assigned.
|
||||
|
||||
console.log(fishNames); //will Print array with "SimpleFish".
|
||||
`
|
||||
```
|
||||
console.log(singletonFn.getDataCounter()); //0 as bydefault it will be 0.
|
||||
|
||||
singletonFn.setDataCounter(20);
|
||||
|
||||
console.log(singletonFn.getDataCounter()); //20 as we assigned.
|
||||
|
||||
console.log(fishNames); //will Print array with "SimpleFish".
|
||||
```
|
||||
|
||||
الآن مع هذه المعرفة يمكنك تحديد الثوابت ، التعدادات أو أي شيء يحتاج إلى استخدام متعددة في مشروع مكتوب هنا. أو شيء من هذا القبيل التكوينات.
|
||||
|
||||
|
@ -10,13 +10,15 @@ localeTitle: بناء الجملة
|
||||
|
||||
لمكالمات الوظائف:
|
||||
|
||||
`myFunction(...iterableObj);
|
||||
`
|
||||
```
|
||||
myFunction(...iterableObj);
|
||||
```
|
||||
|
||||
بالنسبة للمعايير الحرفية أو الأوتار:
|
||||
|
||||
`[...iterableObj, '4', 'five', 6];
|
||||
`
|
||||
```
|
||||
[...iterableObj, '4', 'five', 6];
|
||||
```
|
||||
|
||||
### أمثلة
|
||||
|
||||
@ -26,61 +28,66 @@ localeTitle: بناء الجملة
|
||||
|
||||
من الشائع استخدام `Function.prototype.apply` في الحالات التي تريد فيها استخدام عناصر مصفوفة كوسيطة للدالة.
|
||||
|
||||
`function myFunction(x, y, z) { }
|
||||
var args = [0, 1, 2];
|
||||
myFunction.apply(null, args);
|
||||
`
|
||||
```
|
||||
function myFunction(x, y, z) { }
|
||||
var args = [0, 1, 2];
|
||||
myFunction.apply(null, args);
|
||||
```
|
||||
|
||||
مع صيغة الانتشار يمكن كتابة ما سبق على النحو التالي:
|
||||
|
||||
`function myFunction(x, y, z) { }
|
||||
var args = [0, 1, 2];
|
||||
myFunction(...args);
|
||||
`
|
||||
```
|
||||
function myFunction(x, y, z) { }
|
||||
var args = [0, 1, 2];
|
||||
myFunction(...args);
|
||||
```
|
||||
|
||||
يمكن لأي وسيطة في قائمة الوسيطة استخدام صيغة الانتشار ويمكن استخدامها عدة مرات.
|
||||
|
||||
`function myFunction(v, w, x, y, z) { }
|
||||
var args = [0, 1];
|
||||
myFunction(-1, ...args, 2, ...[3]);
|
||||
`
|
||||
```
|
||||
function myFunction(v, w, x, y, z) { }
|
||||
var args = [0, 1];
|
||||
myFunction(-1, ...args, 2, ...[3]);
|
||||
```
|
||||
|
||||
### تقديم طلب جديد
|
||||
|
||||
عند استدعاء منشئ مع `new` ، فإنه من غير الممكن استخدامها **مباشرة** مجموعة و `apply` ( `apply` يفعل `[[Call]]` وليس `[[Construct]]` ). ومع ذلك ، يمكن استخدام مصفوفة بسهولة مع شكر جديد لنشر الجملة:
|
||||
|
||||
`var dateFields = [1970, 0, 1]; // 1 Jan 1970
|
||||
var d = new Date(...dateFields);
|
||||
`
|
||||
```
|
||||
var dateFields = [1970, 0, 1]; // 1 Jan 1970
|
||||
var d = new Date(...dateFields);
|
||||
```
|
||||
|
||||
لاستخدام جديدة مع مجموعة من المعلمات دون بناء جملة الانتشار ، يجب عليك القيام بذلك **بشكل غير مباشر من** خلال التطبيق الجزئي:
|
||||
|
||||
`function applyAndNew(constructor, args) {
|
||||
function partial () {
|
||||
return constructor.apply(this, args);
|
||||
};
|
||||
if (typeof constructor.prototype === "object") {
|
||||
partial.prototype = Object.create(constructor.prototype);
|
||||
}
|
||||
return partial;
|
||||
}
|
||||
|
||||
|
||||
function myConstructor () {
|
||||
console.log("arguments.length: " + arguments.length);
|
||||
console.log(arguments);
|
||||
this.prop1="val1";
|
||||
this.prop2="val2";
|
||||
};
|
||||
|
||||
var myArguments = ["hi", "how", "are", "you", "mr", null];
|
||||
var myConstructorWithArguments = applyAndNew(myConstructor, myArguments);
|
||||
|
||||
console.log(new myConstructorWithArguments);
|
||||
// (internal log of myConstructor): arguments.length: 6
|
||||
// (internal log of myConstructor): ["hi", "how", "are", "you", "mr", null]
|
||||
// (log of "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"}
|
||||
`
|
||||
```
|
||||
function applyAndNew(constructor, args) {
|
||||
function partial () {
|
||||
return constructor.apply(this, args);
|
||||
};
|
||||
if (typeof constructor.prototype === "object") {
|
||||
partial.prototype = Object.create(constructor.prototype);
|
||||
}
|
||||
return partial;
|
||||
}
|
||||
|
||||
|
||||
function myConstructor () {
|
||||
console.log("arguments.length: " + arguments.length);
|
||||
console.log(arguments);
|
||||
this.prop1="val1";
|
||||
this.prop2="val2";
|
||||
};
|
||||
|
||||
var myArguments = ["hi", "how", "are", "you", "mr", null];
|
||||
var myConstructorWithArguments = applyAndNew(myConstructor, myArguments);
|
||||
|
||||
console.log(new myConstructorWithArguments);
|
||||
// (internal log of myConstructor): arguments.length: 6
|
||||
// (internal log of myConstructor): ["hi", "how", "are", "you", "mr", null]
|
||||
// (log of "new myConstructorWithArguments"): {prop1: "val1", prop2: "val2"}
|
||||
```
|
||||
|
||||
### انتشر في الحرفيين مجموعة
|
||||
|
||||
@ -88,59 +95,66 @@ localeTitle: بناء الجملة
|
||||
|
||||
بدون صيغة الانتشار ، لإنشاء مصفوفة جديدة باستخدام مصفوفة موجودة كجزء واحد منها ، لم يعد بناء الجملة الحرفية الحرفية كافياً ويجب استخدام الكود الحتمي بدلاً من ذلك باستخدام توليفة من الدفع ، لصق ، كونتاكت ، إلخ. يصبح أكثر مقتضبة:
|
||||
|
||||
`var parts = ['shoulders', 'knees'];
|
||||
var lyrics = ['head', ...parts, 'and', 'toes'];
|
||||
// ["head", "shoulders", "knees", "and", "toes"]
|
||||
`
|
||||
```
|
||||
var parts = ['shoulders', 'knees'];
|
||||
var lyrics = ['head', ...parts, 'and', 'toes'];
|
||||
// ["head", "shoulders", "knees", "and", "toes"]
|
||||
```
|
||||
|
||||
تماما مثل انتشار لقوائم الحجج ، `...` يمكن استخدامها في أي مكان في الصفيف الحرفية ويمكن استخدامه عدة مرات.
|
||||
|
||||
### انسخ صفيف
|
||||
|
||||
`var arr = [1, 2, 3];
|
||||
var arr2 = [...arr]; // like arr.slice()
|
||||
arr2.push(4);
|
||||
|
||||
// arr2 becomes [1, 2, 3, 4]
|
||||
// arr remains unaffected
|
||||
`
|
||||
```
|
||||
var arr = [1, 2, 3];
|
||||
var arr2 = [...arr]; // like arr.slice()
|
||||
arr2.push(4);
|
||||
|
||||
// arr2 becomes [1, 2, 3, 4]
|
||||
// arr remains unaffected
|
||||
```
|
||||
|
||||
> **ﻣﻼﺣظﺔ** : ﺗرﺗﻔﻊ ﺑﻧود اﻟﻣﺟﺎﻣﻊ ﺑﺷﮐل ﻓﻌﺎل إﻟﯽ ﻣﺳﺗوى واﺣد أﺛﻧﺎء ﻧﺳﺦ ﻣﺻﻔوﻓﺔ. لذلك ، قد يكون غير مناسب لنسخ صفائف متعددة الأبعاد كما يظهر المثال التالي (هو نفسه مع Object.assign () وبناء الجملة spread).
|
||||
|
||||
`var a = [[1], [2], [3]];
|
||||
var b = [...a];
|
||||
b.shift().shift(); // 1
|
||||
// Now array a is affected as well: [[], [2], [3]]
|
||||
`
|
||||
```
|
||||
var a = [[1], [2], [3]];
|
||||
var b = [...a];
|
||||
b.shift().shift(); // 1
|
||||
// Now array a is affected as well: [[], [2], [3]]
|
||||
```
|
||||
|
||||
### طريقة أفضل لسلسل صفائف
|
||||
|
||||
`Array.concat` غالباً لسَلسَلة صفيف إلى نهاية صفيف موجود. بدون صيغة الانتشار يتم ذلك على النحو التالي:
|
||||
|
||||
`var arr1 = [0, 1, 2];
|
||||
var arr2 = [3, 4, 5];
|
||||
// Append all items from arr2 onto arr1
|
||||
arr1 = arr1.concat(arr2);
|
||||
`
|
||||
```
|
||||
var arr1 = [0, 1, 2];
|
||||
var arr2 = [3, 4, 5];
|
||||
// Append all items from arr2 onto arr1
|
||||
arr1 = arr1.concat(arr2);
|
||||
```
|
||||
|
||||
مع صيغة الانتشار يصبح هذا:
|
||||
|
||||
`var arr1 = [0, 1, 2];
|
||||
var arr2 = [3, 4, 5];
|
||||
arr1 = [...arr1, ...arr2];
|
||||
`
|
||||
```
|
||||
var arr1 = [0, 1, 2];
|
||||
var arr2 = [3, 4, 5];
|
||||
arr1 = [...arr1, ...arr2];
|
||||
```
|
||||
|
||||
غالباً ما يتم استخدام `Array.unshift` لإدراج صفيف من القيم في بداية صفيف موجود. بدون صيغة الانتشار يتم ذلك على النحو التالي:
|
||||
|
||||
`var arr1 = [0, 1, 2];
|
||||
var arr2 = [3, 4, 5];
|
||||
// Prepend all items from arr2 onto arr1
|
||||
Array.prototype.unshift.apply(arr1, arr2) // arr1 is now [3, 4, 5, 0, 1, 2]
|
||||
`
|
||||
```
|
||||
var arr1 = [0, 1, 2];
|
||||
var arr2 = [3, 4, 5];
|
||||
// Prepend all items from arr2 onto arr1
|
||||
Array.prototype.unshift.apply(arr1, arr2) // arr1 is now [3, 4, 5, 0, 1, 2]
|
||||
```
|
||||
|
||||
مع صيغة الانتشار يصبح هذا:
|
||||
|
||||
`var arr1 = [0, 1, 2];
|
||||
var arr2 = [3, 4, 5];
|
||||
arr1 = [...arr2, ...arr1]; // arr1 is now [3, 4, 5, 0, 1, 2]
|
||||
`
|
||||
```
|
||||
var arr1 = [0, 1, 2];
|
||||
var arr2 = [3, 4, 5];
|
||||
arr1 = [...arr2, ...arr1]; // arr1 is now [3, 4, 5, 0, 1, 2]
|
||||
```
|
@ -10,34 +10,37 @@ localeTitle: Dray
|
||||
|
||||
### الواجب الأساسي المتغير
|
||||
|
||||
`var names = ['neel', 'meet', 'darshan'];
|
||||
var [nameOne, nameTwo, nameThree] = names;
|
||||
console.log(nameOne); // "neel"
|
||||
console.log(nameTwo); // "meet"
|
||||
console.log(nameThree); // "darshan"
|
||||
`
|
||||
```
|
||||
var names = ['neel', 'meet', 'darshan'];
|
||||
var [nameOne, nameTwo, nameThree] = names;
|
||||
console.log(nameOne); // "neel"
|
||||
console.log(nameTwo); // "meet"
|
||||
console.log(nameThree); // "darshan"
|
||||
```
|
||||
|
||||
### مهمة منفصلة عن الإعلان
|
||||
|
||||
يمكن تعيين متغير قيمته من خلال التدمير المنفصل عن تعريف المتغير.
|
||||
|
||||
`var a, b;
|
||||
|
||||
[a, b] = [1, 2];
|
||||
console.log(a); // 1
|
||||
console.log(b); // 2
|
||||
`
|
||||
```
|
||||
var a, b;
|
||||
|
||||
[a, b] = [1, 2];
|
||||
console.log(a); // 1
|
||||
console.log(b); // 2
|
||||
```
|
||||
|
||||
### قيم افتراضية
|
||||
|
||||
يمكن تعيين متغير افتراضي ، في حالة أن القيمة unpacked من الصفيف غير `undefined` .
|
||||
|
||||
`var a, b;
|
||||
|
||||
[a=5, b=7] = [1];
|
||||
console.log(a); // 1
|
||||
console.log(b); // 7
|
||||
`
|
||||
```
|
||||
var a, b;
|
||||
|
||||
[a=5, b=7] = [1];
|
||||
console.log(a); // 1
|
||||
console.log(b); // 7
|
||||
```
|
||||
|
||||
### تحليل مجموعة من عاد من وظيفة
|
||||
|
||||
@ -45,47 +48,52 @@ localeTitle: Dray
|
||||
|
||||
في هذا المثال ، تقوم `getNames()` بارجاع القيم `['neel', 'meet']` `getNames()` لها ، والتي يمكن تحليلها في سطر واحد مع destructuring.
|
||||
|
||||
`function getNames() {
|
||||
return ['neel', 'meet'];
|
||||
}
|
||||
|
||||
var neel, meet;
|
||||
[nameOne, nameTwo] = getNames();
|
||||
console.log(nameOne); // neel
|
||||
console.log(nameTwo); // meet
|
||||
`
|
||||
```
|
||||
function getNames() {
|
||||
return ['neel', 'meet'];
|
||||
}
|
||||
|
||||
var neel, meet;
|
||||
[nameOne, nameTwo] = getNames();
|
||||
console.log(nameOne); // neel
|
||||
console.log(nameTwo); // meet
|
||||
```
|
||||
|
||||
### تجاهل بعض القيم التي تم إرجاعها
|
||||
|
||||
يمكنك تجاهل قيم الإرجاع التي لا تهتم بها:
|
||||
|
||||
`function getNames() {
|
||||
return ['neel', 'meet', 'darshan'];
|
||||
}
|
||||
|
||||
var [nameOne, , nameThree] = getNames();
|
||||
console.log(nameOne); // neel
|
||||
console.log(nameThree); // darshan
|
||||
`
|
||||
```
|
||||
function getNames() {
|
||||
return ['neel', 'meet', 'darshan'];
|
||||
}
|
||||
|
||||
var [nameOne, , nameThree] = getNames();
|
||||
console.log(nameOne); // neel
|
||||
console.log(nameThree); // darshan
|
||||
```
|
||||
|
||||
يمكنك أيضًا تجاهل جميع القيم التي تم إرجاعها:
|
||||
|
||||
`[,,] = getNames();
|
||||
`
|
||||
```
|
||||
[,,] = getNames();
|
||||
```
|
||||
|
||||
### تعيين بقية صفيف إلى متغير
|
||||
|
||||
عند تدمير صفيف ، يمكنك فك وتعيين الجزء المتبقي منه إلى متغير باستخدام نمط الباقي:
|
||||
|
||||
`var [a, ...b] = [1, 2, 3];
|
||||
console.log(a); // 1
|
||||
console.log(b); // [2, 3]
|
||||
`
|
||||
```
|
||||
var [a, ...b] = [1, 2, 3];
|
||||
console.log(a); // 1
|
||||
console.log(b); // [2, 3]
|
||||
```
|
||||
|
||||
لاحظ أنه سيتم طرح `SyntaxError` إذا تم استخدام فاصلة زائدة على الجانب الأيسر مع عنصر راحة:
|
||||
|
||||
`var [a, ...b,] = [1, 2, 3];
|
||||
// SyntaxError: rest element may not have a trailing comma
|
||||
`
|
||||
```
|
||||
var [a, ...b,] = [1, 2, 3];
|
||||
// SyntaxError: rest element may not have a trailing comma
|
||||
```
|
||||
|
||||
انظر أيضا: **صفيف Destructuring** | [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring)
|
@ -8,16 +8,18 @@ localeTitle: طول صفيف
|
||||
|
||||
يمكن إرجاع خاصية `length` صفيف مثل هكذا.
|
||||
|
||||
`let desserts = ["Cake", "Pie", "Brownies"];
|
||||
console.log(desserts.length); // 3
|
||||
`
|
||||
```js
|
||||
let desserts = ["Cake", "Pie", "Brownies"];
|
||||
console.log(desserts.length); // 3
|
||||
```
|
||||
|
||||
يمكن استخدام عامل التعيين ، بالتزامن مع خاصية `length` ، لضبط عدد العناصر في صفيف مثل ذلك.
|
||||
|
||||
`let cars = ["Saab", "BMW", "Volvo"];
|
||||
cars.length = 2;
|
||||
console.log(cars.length); // 2
|
||||
`
|
||||
```js
|
||||
let cars = ["Saab", "BMW", "Volvo"];
|
||||
cars.length = 2;
|
||||
console.log(cars.length); // 2
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -8,17 +8,19 @@ localeTitle: مصفوفة من
|
||||
|
||||
بناء الجملة:
|
||||
|
||||
`Array.of(element0[, element1[, ...[, elementN]]])
|
||||
`
|
||||
```javascript
|
||||
Array.of(element0[, element1[, ...[, elementN]]])
|
||||
```
|
||||
|
||||
## مثال
|
||||
|
||||
`Array.of(7); // [7] - creates an array with a single element
|
||||
Array.of(1, 2, 3); // [1, 2, 3]
|
||||
|
||||
Array(7); // [ , , , , , , ] - creates an empty array with a length property of 7
|
||||
Array(1, 2, 3); // [1, 2, 3]
|
||||
`
|
||||
```javascript
|
||||
Array.of(7); // [7] - creates an array with a single element
|
||||
Array.of(1, 2, 3); // [1, 2, 3]
|
||||
|
||||
Array(7); // [ , , , , , , ] - creates an empty array with a length property of 7
|
||||
Array(1, 2, 3); // [1, 2, 3]
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -10,32 +10,35 @@ localeTitle: Array.prototype.concat
|
||||
|
||||
### بناء الجملة
|
||||
|
||||
`const newArray = array.concat(value1, value2, value3...);
|
||||
`
|
||||
```javascript
|
||||
const newArray = array.concat(value1, value2, value3...);
|
||||
```
|
||||
|
||||
### أمثلة
|
||||
|
||||
#### تسلسل صفيفتين
|
||||
|
||||
`var cold = ['Blue', 'Green', 'Purple'];
|
||||
var warm = ['Red', 'Orange', 'Yellow'];
|
||||
|
||||
var result = cold.concat(warm);
|
||||
|
||||
console.log(result);
|
||||
// results in ['Blue', 'Green', 'Purple', 'Red', 'Orange', 'Yellow'];
|
||||
`
|
||||
```javascript
|
||||
var cold = ['Blue', 'Green', 'Purple'];
|
||||
var warm = ['Red', 'Orange', 'Yellow'];
|
||||
|
||||
var result = cold.concat(warm);
|
||||
|
||||
console.log(result);
|
||||
// results in ['Blue', 'Green', 'Purple', 'Red', 'Orange', 'Yellow'];
|
||||
```
|
||||
|
||||
#### قيمة متسلسلة إلى صفيف
|
||||
|
||||
`const odd = [1, 3, 5, 7, 9];
|
||||
const even = [0, 2, 4, 6, 8];
|
||||
|
||||
const oddAndEvenAndTen = odd.concat(even, 10);
|
||||
|
||||
console.log(oddAndEvenAndTen);
|
||||
// results in [1, 3, 5, 7, 9, 0, 2, 4, 6, 8, 10];
|
||||
`
|
||||
```javascript
|
||||
const odd = [1, 3, 5, 7, 9];
|
||||
const even = [0, 2, 4, 6, 8];
|
||||
|
||||
const oddAndEvenAndTen = odd.concat(even, 10);
|
||||
|
||||
console.log(oddAndEvenAndTen);
|
||||
// results in [1, 3, 5, 7, 9, 0, 2, 4, 6, 8, 10];
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -10,12 +10,13 @@ localeTitle: Array.prototype.fill
|
||||
|
||||
\`\` \`جافا سكريبت arr.fill (القيمة) arr.fill (القيمة ، البدء) arr.fill (القيمة ، البداية ، النهاية)
|
||||
|
||||
`The fill method takes up to three arguments value, start and end. The start and end arguments are optional with default values of 0 and the length of the this object.
|
||||
|
||||
The fill method is a mutable method, it will change this object itself, and return it, not just return a copy of it.
|
||||
|
||||
## Examples
|
||||
`
|
||||
```
|
||||
The fill method takes up to three arguments value, start and end. The start and end arguments are optional with default values of 0 and the length of the this object.
|
||||
|
||||
The fill method is a mutable method, it will change this object itself, and return it, not just return a copy of it.
|
||||
|
||||
## Examples
|
||||
```
|
||||
|
||||
جافا سكريبت \[1 ، 2 ، 3\] .Fill (4) ؛ // \[4، 4، 4\] \[1 ، 2 ، 3\] .Fill (4 ، 1) ؛ // \[1 ، 4 ، 4\]
|
||||
|
||||
|
@ -12,25 +12,26 @@ localeTitle: Array.prototype.filter
|
||||
|
||||
في هذه الحالة ، نريد الحصول على جميع الطلاب الذين تزيد درجاتهم عن 90 أو تساويها.
|
||||
|
||||
`var students = [
|
||||
{ name: 'Quincy', grade: 96 },
|
||||
{ name: 'Jason', grade: 84 },
|
||||
{ name: 'Alexis', grade: 100 },
|
||||
{ name: 'Sam', grade: 65 },
|
||||
{ name: 'Katie', grade: 90 }
|
||||
];
|
||||
//Define an array to push student objects to.
|
||||
var studentsGrades = []
|
||||
for (var i = 0; i < students.length; i++) {
|
||||
//Check if grade is greater than 90
|
||||
if (students[i].grade >= 90) {
|
||||
//Add a student to the studentsGrades array.
|
||||
studentsGrades.push(students[i])
|
||||
}
|
||||
}
|
||||
|
||||
return studentsGrades; // [ { name: 'Quincy', grade: 96 }, { name: 'Alexis', grade: 100 }, { name: 'Katie', grade: 90 } ]
|
||||
`
|
||||
```javascript
|
||||
var students = [
|
||||
{ name: 'Quincy', grade: 96 },
|
||||
{ name: 'Jason', grade: 84 },
|
||||
{ name: 'Alexis', grade: 100 },
|
||||
{ name: 'Sam', grade: 65 },
|
||||
{ name: 'Katie', grade: 90 }
|
||||
];
|
||||
//Define an array to push student objects to.
|
||||
var studentsGrades = []
|
||||
for (var i = 0; i < students.length; i++) {
|
||||
//Check if grade is greater than 90
|
||||
if (students[i].grade >= 90) {
|
||||
//Add a student to the studentsGrades array.
|
||||
studentsGrades.push(students[i])
|
||||
}
|
||||
}
|
||||
|
||||
return studentsGrades; // [ { name: 'Quincy', grade: 96 }, { name: 'Alexis', grade: 100 }, { name: 'Katie', grade: 90 } ]
|
||||
```
|
||||
|
||||
هذه الحلقة تعمل ، لكنها طويلة جدًا. كما يمكن أن تصبح مملة للكتابة عن الحلقات مرارًا وتكرارًا للعديد من المصفوفات التي تحتاج إلى تكرارها.
|
||||
|
||||
@ -38,35 +39,37 @@ localeTitle: Array.prototype.filter
|
||||
|
||||
في ما يلي نفس المثال باستخدام الفلتر:
|
||||
|
||||
`var students = [
|
||||
{ name: 'Quincy', grade: 96 },
|
||||
{ name: 'Jason', grade: 84 },
|
||||
{ name: 'Alexis', grade: 100 },
|
||||
{ name: 'Sam', grade: 65 },
|
||||
{ name: 'Katie', grade: 90 }
|
||||
];
|
||||
|
||||
var studentGrades = students.filter(function (student) {
|
||||
//This tests if student.grade is greater than or equal to 90. It returns the "student" object if this conditional is met.
|
||||
return student.grade >= 90;
|
||||
});
|
||||
|
||||
return studentGrades; // [ { name: 'Quincy', grade: 96 }, { name: 'Alexis', grade: 100 }, { name: 'Katie', grade: 90 } ]
|
||||
`
|
||||
```javascript
|
||||
var students = [
|
||||
{ name: 'Quincy', grade: 96 },
|
||||
{ name: 'Jason', grade: 84 },
|
||||
{ name: 'Alexis', grade: 100 },
|
||||
{ name: 'Sam', grade: 65 },
|
||||
{ name: 'Katie', grade: 90 }
|
||||
];
|
||||
|
||||
var studentGrades = students.filter(function (student) {
|
||||
//This tests if student.grade is greater than or equal to 90. It returns the "student" object if this conditional is met.
|
||||
return student.grade >= 90;
|
||||
});
|
||||
|
||||
return studentGrades; // [ { name: 'Quincy', grade: 96 }, { name: 'Alexis', grade: 100 }, { name: 'Katie', grade: 90 } ]
|
||||
```
|
||||
|
||||
طريقة التصفية أسرع بكثير للكتابة والنظافة للقراءة بينما لا تزال تحقق نفس الشيء. باستخدام تركيب ES6 ، يمكننا حتى تكرار تكرار حلقة 6-line مع الفلتر:
|
||||
|
||||
`var students = [
|
||||
{ name: 'Quincy', grade: 96 },
|
||||
{ name: 'Jason', grade: 84 },
|
||||
{ name: 'Alexis', grade: 100 },
|
||||
{ name: 'Sam', grade: 65 },
|
||||
{ name: 'Katie', grade: 90 }
|
||||
];
|
||||
|
||||
var studentGrades = students.filter(student => student.grade >= 90);
|
||||
return studentGrades; // [ { name: 'Quincy', grade: 96 }, { name: 'Alexis', grade: 100 }, { name: 'Katie', grade: 90 } ]
|
||||
`
|
||||
```javascript
|
||||
var students = [
|
||||
{ name: 'Quincy', grade: 96 },
|
||||
{ name: 'Jason', grade: 84 },
|
||||
{ name: 'Alexis', grade: 100 },
|
||||
{ name: 'Sam', grade: 65 },
|
||||
{ name: 'Katie', grade: 90 }
|
||||
];
|
||||
|
||||
var studentGrades = students.filter(student => student.grade >= 90);
|
||||
return studentGrades; // [ { name: 'Quincy', grade: 96 }, { name: 'Alexis', grade: 100 }, { name: 'Katie', grade: 90 } ]
|
||||
```
|
||||
|
||||
الفلتر مفيد جدًا وخيارًا رائعًا للصفحات لتصفية المصفوفات مقابل العبارات الشرطية.
|
||||
|
||||
|
@ -8,8 +8,9 @@ localeTitle: Array.prototype.find
|
||||
|
||||
بناء الجملة:
|
||||
|
||||
`arr.find(callback[, thisArg])
|
||||
`
|
||||
```
|
||||
arr.find(callback[, thisArg])
|
||||
```
|
||||
|
||||
##### المعلمات
|
||||
|
||||
@ -34,35 +35,37 @@ localeTitle: Array.prototype.find
|
||||
|
||||
سيجد هذا المثال العنصر المناظر في الصفيف ويعيد الكائن منه.
|
||||
|
||||
`let items = [
|
||||
{name: 'books', quantity: 2},
|
||||
{name: 'movies', quantity: 1},
|
||||
{name: 'games', quantity: 5}
|
||||
];
|
||||
|
||||
function findMovies(item) {
|
||||
return item.name === 'movies';
|
||||
}
|
||||
|
||||
console.log(items.find(findMovies));
|
||||
|
||||
// Output
|
||||
// { name: 'movies', quantity: 1 }
|
||||
`
|
||||
```javascript
|
||||
let items = [
|
||||
{name: 'books', quantity: 2},
|
||||
{name: 'movies', quantity: 1},
|
||||
{name: 'games', quantity: 5}
|
||||
];
|
||||
|
||||
function findMovies(item) {
|
||||
return item.name === 'movies';
|
||||
}
|
||||
|
||||
console.log(items.find(findMovies));
|
||||
|
||||
// Output
|
||||
// { name: 'movies', quantity: 1 }
|
||||
```
|
||||
|
||||
يوضح المثال التالي إخراج كل معلمة اختيارية إلى وظيفة رد الاتصال. سيؤدي ذلك إلى `undefined` نظرًا لأن أيًا من العناصر لن يعود صحيحًا من وظيفة رد الاتصال.
|
||||
|
||||
`function showInfo(element, index, array) {
|
||||
console.log('element = ' + element + ', index = ' + index + ', array = ' + array);
|
||||
return false;
|
||||
}
|
||||
|
||||
console.log('return = ' + [4, 6, 8, 12].find(showInfo));
|
||||
|
||||
// Output
|
||||
// element = 4, index = 0, array = 4,6,8,12
|
||||
// element = 6, index = 1, array = 4,6,8,12
|
||||
// element = 8, index = 2, array = 4,6,8,12
|
||||
// element = 12, index = 3, array = 4,6,8,12
|
||||
// return = undefined
|
||||
`
|
||||
```javascript
|
||||
function showInfo(element, index, array) {
|
||||
console.log('element = ' + element + ', index = ' + index + ', array = ' + array);
|
||||
return false;
|
||||
}
|
||||
|
||||
console.log('return = ' + [4, 6, 8, 12].find(showInfo));
|
||||
|
||||
// Output
|
||||
// element = 4, index = 0, array = 4,6,8,12
|
||||
// element = 6, index = 1, array = 4,6,8,12
|
||||
// element = 8, index = 2, array = 4,6,8,12
|
||||
// element = 12, index = 3, array = 4,6,8,12
|
||||
// return = undefined
|
||||
```
|
@ -10,8 +10,9 @@ localeTitle: Array.prototype.findIndex
|
||||
|
||||
بناء الجملة:
|
||||
|
||||
`arr.findIndex(callback[, thisArg])
|
||||
`
|
||||
```
|
||||
arr.findIndex(callback[, thisArg])
|
||||
```
|
||||
|
||||
##### المعلمات
|
||||
|
||||
@ -36,35 +37,37 @@ localeTitle: Array.prototype.findIndex
|
||||
|
||||
سيجد هذا المثال العنصر المناظر في المصفوفة ويعيد الفهرس منه.
|
||||
|
||||
`let items = [
|
||||
{name: 'books', quantity: 2},
|
||||
{name: 'movies', quantity: 1},
|
||||
{name: 'games', quantity: 5}
|
||||
];
|
||||
|
||||
function findMovies(item) {
|
||||
return item.name === 'movies';
|
||||
}
|
||||
|
||||
console.log(items.findIndex(findMovies));
|
||||
|
||||
// Index of 2nd element in the Array is returned,
|
||||
// so this will result in '1'
|
||||
`
|
||||
```javascript
|
||||
let items = [
|
||||
{name: 'books', quantity: 2},
|
||||
{name: 'movies', quantity: 1},
|
||||
{name: 'games', quantity: 5}
|
||||
];
|
||||
|
||||
function findMovies(item) {
|
||||
return item.name === 'movies';
|
||||
}
|
||||
|
||||
console.log(items.findIndex(findMovies));
|
||||
|
||||
// Index of 2nd element in the Array is returned,
|
||||
// so this will result in '1'
|
||||
```
|
||||
|
||||
يوضح المثال التالي إخراج كل معلمة اختيارية إلى وظيفة رد الاتصال. هذا سيعود `-1` لأن أي من العناصر سيعود true من وظيفة رد الاتصال.
|
||||
|
||||
`function showInfo(element, index, array) {
|
||||
console.log('element = ' + element + ', index = ' + index + ', array = ' + array);
|
||||
return false;
|
||||
}
|
||||
|
||||
console.log('return = ' + [4, 6, 8, 12].findIndex(showInfo));
|
||||
|
||||
// Output
|
||||
// element = 4, index = 0, array = 4,6,8,12
|
||||
// element = 6, index = 1, array = 4,6,8,12
|
||||
// element = 8, index = 2, array = 4,6,8,12
|
||||
// element = 12, index = 3, array = 4,6,8,12
|
||||
// return = -1
|
||||
`
|
||||
```javascript
|
||||
function showInfo(element, index, array) {
|
||||
console.log('element = ' + element + ', index = ' + index + ', array = ' + array);
|
||||
return false;
|
||||
}
|
||||
|
||||
console.log('return = ' + [4, 6, 8, 12].findIndex(showInfo));
|
||||
|
||||
// Output
|
||||
// element = 4, index = 0, array = 4,6,8,12
|
||||
// element = 6, index = 1, array = 4,6,8,12
|
||||
// element = 8, index = 2, array = 4,6,8,12
|
||||
// element = 12, index = 3, array = 4,6,8,12
|
||||
// return = -1
|
||||
```
|
@ -6,16 +6,17 @@ localeTitle: Array.prototype.forEach
|
||||
|
||||
يتم استخدام أسلوب الصفيف 'forEach' للتكرار خلال كل عنصر في صفيف. يتم استدعاء الأسلوب على كائن الصفيف ويتم تمرير دالة تسمى على كل عنصر في الصفيف.
|
||||
|
||||
`var arr = [1, 2, 3, 4, 5];
|
||||
|
||||
arr.forEach(number => console.log(number * 2));
|
||||
|
||||
// 2
|
||||
// 4
|
||||
// 6
|
||||
// 8
|
||||
// 10
|
||||
`
|
||||
```javascript
|
||||
var arr = [1, 2, 3, 4, 5];
|
||||
|
||||
arr.forEach(number => console.log(number * 2));
|
||||
|
||||
// 2
|
||||
// 4
|
||||
// 6
|
||||
// 8
|
||||
// 10
|
||||
```
|
||||
|
||||
يمكن أن تأخذ وظيفة رد الاتصال أيضًا معلمة ثانية للفهرس في حال كنت بحاجة إلى الرجوع إلى فهرس العنصر الحالي في الصفيف.
|
||||
|
||||
|
@ -13,10 +13,11 @@ localeTitle: Array.prototype.includes
|
||||
|
||||
### مثال
|
||||
|
||||
`const a = [1, 2, 3];
|
||||
a.includes(2); // true
|
||||
a.includes(4); // false
|
||||
`
|
||||
```js
|
||||
const a = [1, 2, 3];
|
||||
a.includes(2); // true
|
||||
a.includes(4); // false
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -24,16 +24,17 @@ localeTitle: Array.prototype.indexOf
|
||||
|
||||
## أمثلة
|
||||
|
||||
`var array = [1, 2, 4, 1, 7]
|
||||
|
||||
array.indexOf(1); // 0
|
||||
array.indexOf(7); // 4
|
||||
array.indexOf(6); // -1
|
||||
array.indexOf('1'); // -1
|
||||
array.indexOf('hello'); // -1
|
||||
array.indexOf(1, 2); // 3
|
||||
array.indexOf(1, -3); // 3
|
||||
`
|
||||
```javascript
|
||||
var array = [1, 2, 4, 1, 7]
|
||||
|
||||
array.indexOf(1); // 0
|
||||
array.indexOf(7); // 4
|
||||
array.indexOf(6); // -1
|
||||
array.indexOf('1'); // -1
|
||||
array.indexOf('hello'); // -1
|
||||
array.indexOf(1, 2); // 3
|
||||
array.indexOf(1, -3); // 3
|
||||
```
|
||||
|
||||
### معلومات اكثر:
|
||||
|
||||
|
@ -10,18 +10,20 @@ localeTitle: Array.prototype.map
|
||||
|
||||
**ES5**
|
||||
|
||||
`var arr = [1, 2, 3, 4];
|
||||
var newArray = arr.map(function(element) { return element * 2});
|
||||
console.log(newArray); // [2, 4, 6, 8]
|
||||
`
|
||||
```js
|
||||
var arr = [1, 2, 3, 4];
|
||||
var newArray = arr.map(function(element) { return element * 2});
|
||||
console.log(newArray); // [2, 4, 6, 8]
|
||||
```
|
||||
|
||||
**ES6**
|
||||
|
||||
`const arr = [1, 2, 3, 4];
|
||||
const newArray = arr.map(element => element * 2);
|
||||
console.log(newArray);
|
||||
//[2, 4, 6, 8]
|
||||
`
|
||||
```js
|
||||
const arr = [1, 2, 3, 4];
|
||||
const newArray = arr.map(element => element * 2);
|
||||
console.log(newArray);
|
||||
//[2, 4, 6, 8]
|
||||
```
|
||||
|
||||
**معلومات اكثر**
|
||||
|
||||
|
@ -23,12 +23,13 @@ localeTitle: Array.prototype.pop
|
||||
|
||||
## أمثلة
|
||||
|
||||
`let array = [1, 2, 3, 4];
|
||||
array.pop(); // removes 4
|
||||
console.log(array); // [1, 2, 3]
|
||||
|
||||
[].pop() // undefined
|
||||
`
|
||||
```js
|
||||
let array = [1, 2, 3, 4];
|
||||
array.pop(); // removes 4
|
||||
console.log(array); // [1, 2, 3]
|
||||
|
||||
[].pop() // undefined
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -6,8 +6,9 @@ localeTitle: Array.prototype.push
|
||||
|
||||
### بناء الجملة
|
||||
|
||||
`arr.push([element1[, ...[, elementN]]])
|
||||
`
|
||||
```javascript
|
||||
arr.push([element1[, ...[, elementN]]])
|
||||
```
|
||||
|
||||
### المعلمات
|
||||
|
||||
@ -25,23 +26,26 @@ localeTitle: Array.prototype.push
|
||||
|
||||
## مثال:
|
||||
|
||||
`var myStarkFamily = ['John', 'Robb', 'Sansa', 'Bran'];
|
||||
`
|
||||
```javascript
|
||||
var myStarkFamily = ['John', 'Robb', 'Sansa', 'Bran'];
|
||||
```
|
||||
|
||||
افترض أن لديك مجموعة من أطفال House Stark من Game of Thrones. ومع ذلك ، فإن أحد الأعضاء ، **آريا** ، مفقود. معرفة الرمز أعلاه ، يمكنك إضافتها بتعيين `'Arya'` إلى الصفيف في الفهرس بعد الفهرس الأخير مثل:
|
||||
|
||||
`myStarkFamily[4] = 'Arya';
|
||||
`
|
||||
```javascript
|
||||
myStarkFamily[4] = 'Arya';
|
||||
```
|
||||
|
||||
المشكلة مع هذا الحل هو أنه لا يمكن معالجة الحالات العامة. إذا كنت لا تعرف مسبقا ما طول الصفيف ، لا يمكنك إضافة عناصر جديدة بهذه الطريقة. هذا هو ما `push()` ل. لا نحتاج إلى معرفة طول المصفوفة. نحن نضيف فقط عنصرنا في نهاية الصفيف.
|
||||
|
||||
`myStarkFamily.push('Arya');
|
||||
console.log(myStarkFamily); // ['John', 'Robb', 'Sansa', 'Bran', 'Arya']
|
||||
|
||||
var newLength = myStarkFamily.push('Rickon'); // oops! forgot Rickon
|
||||
console.log(newLength); // 6
|
||||
console.log(myStarkFamily); // ['John', 'Robb', 'Sansa', 'Bran', 'Arya', 'Rickon']
|
||||
`
|
||||
```javascript
|
||||
myStarkFamily.push('Arya');
|
||||
console.log(myStarkFamily); // ['John', 'Robb', 'Sansa', 'Bran', 'Arya']
|
||||
|
||||
var newLength = myStarkFamily.push('Rickon'); // oops! forgot Rickon
|
||||
console.log(newLength); // 6
|
||||
console.log(myStarkFamily); // ['John', 'Robb', 'Sansa', 'Bran', 'Arya', 'Rickon']
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -41,19 +41,20 @@ localeTitle: Array.prototype.reduce
|
||||
|
||||
قم بتحويل صفيف من السلاسل إلى كائن واحد يُظهر عدد المرات التي تظهر فيها كل سلسلة في الصفيف. لاحظ هذه المكالمة لتقليل التمريرات إلى كائن فارغ `{}` كمعلمة `initialValue` . سيتم استخدام هذا كقيمة أولية للمجمع (الوسيطة الأولى) التي تم تمريرها إلى وظيفة رد الاتصال.
|
||||
|
||||
`var pets = ['dog', 'chicken', 'cat', 'dog', 'chicken', 'chicken', 'rabbit'];
|
||||
|
||||
var petCounts = pets.reduce(function(obj, pet){
|
||||
if (!obj[pet]) {
|
||||
obj[pet] = 1;
|
||||
} else {
|
||||
obj[pet]++;
|
||||
}
|
||||
return obj;
|
||||
}, {});
|
||||
|
||||
console.log(petCounts);
|
||||
`
|
||||
```js
|
||||
var pets = ['dog', 'chicken', 'cat', 'dog', 'chicken', 'chicken', 'rabbit'];
|
||||
|
||||
var petCounts = pets.reduce(function(obj, pet){
|
||||
if (!obj[pet]) {
|
||||
obj[pet] = 1;
|
||||
} else {
|
||||
obj[pet]++;
|
||||
}
|
||||
return obj;
|
||||
}, {});
|
||||
|
||||
console.log(petCounts);
|
||||
```
|
||||
|
||||
انتاج: `js { dog: 2, chicken: 3, cat: 1, rabbit: 1 }`
|
||||
|
||||
|
@ -10,19 +10,20 @@ localeTitle: Array.prototype.sort
|
||||
|
||||
مؤشر | الطابع --- | --- 33 |! 34 | " 35 | # 36 | $ 37 |٪
|
||||
|
||||
`var myArray = ['#', '!'];
|
||||
var sortedArray = myArray.sort(); // ['!', '#'] because in the ASCII table "!" is before "#"
|
||||
|
||||
myArray = ['a', 'c', 'b'];
|
||||
console.log(myArray.sort()); // ['a', 'b', 'c']
|
||||
console.log(myArray) // ['a', 'b', 'c']
|
||||
|
||||
myArray = ['b', 'a', 'aa'];
|
||||
console.log(myArray.sort()); // ['a', 'aa', 'b']
|
||||
|
||||
myArray = [1, 2, 13, 23];
|
||||
console.log(myArray.sort()); // [1, 13, 2, 23] numbers are treated like strings!
|
||||
`
|
||||
```js
|
||||
var myArray = ['#', '!'];
|
||||
var sortedArray = myArray.sort(); // ['!', '#'] because in the ASCII table "!" is before "#"
|
||||
|
||||
myArray = ['a', 'c', 'b'];
|
||||
console.log(myArray.sort()); // ['a', 'b', 'c']
|
||||
console.log(myArray) // ['a', 'b', 'c']
|
||||
|
||||
myArray = ['b', 'a', 'aa'];
|
||||
console.log(myArray.sort()); // ['a', 'aa', 'b']
|
||||
|
||||
myArray = [1, 2, 13, 23];
|
||||
console.log(myArray.sort()); // [1, 13, 2, 23] numbers are treated like strings!
|
||||
```
|
||||
|
||||
# الاستخدام المتقدم
|
||||
|
||||
@ -30,19 +31,20 @@ localeTitle: Array.prototype.sort
|
||||
|
||||
### فمثلا
|
||||
|
||||
`function compare(a, b){
|
||||
if (a < b){return -1;}
|
||||
if (a > b){return 1;}
|
||||
if (a === b){return 0;}
|
||||
}
|
||||
|
||||
var myArray = [1, 2, 23, 13];
|
||||
console.log(myArray.sort()); // [ 1, 13, 2, 23 ]
|
||||
console.log(myArray.sort(compare)); // [ 1, 2, 13, 23 ]
|
||||
|
||||
myArray = [3, 4, 1, 2];
|
||||
sortedArray = myArray.sort(function(a, b){.....}); // it depends from the compareFunction
|
||||
`
|
||||
```js
|
||||
function compare(a, b){
|
||||
if (a < b){return -1;}
|
||||
if (a > b){return 1;}
|
||||
if (a === b){return 0;}
|
||||
}
|
||||
|
||||
var myArray = [1, 2, 23, 13];
|
||||
console.log(myArray.sort()); // [ 1, 13, 2, 23 ]
|
||||
console.log(myArray.sort(compare)); // [ 1, 2, 13, 23 ]
|
||||
|
||||
myArray = [3, 4, 1, 2];
|
||||
sortedArray = myArray.sort(function(a, b){.....}); // it depends from the compareFunction
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -14,26 +14,29 @@ localeTitle: Array.prototype.splice
|
||||
|
||||
إذا تم تضمين معلمة واحدة فقط ، فسيقوم `splice(start)` بإزالة كل عناصر الصفيف من `start` إلى نهاية الصفيف.
|
||||
|
||||
`let exampleArray = ['first', 'second', 'third', 'fourth'];
|
||||
exampleArray.splice(2);
|
||||
// exampleArray is now ['first', 'second'];
|
||||
`
|
||||
```js
|
||||
let exampleArray = ['first', 'second', 'third', 'fourth'];
|
||||
exampleArray.splice(2);
|
||||
// exampleArray is now ['first', 'second'];
|
||||
```
|
||||
|
||||
إذا كانت `start` سلبية ، فسيتم حسابها إلى الخلف من نهاية الصفيف.
|
||||
|
||||
`let exampleArray = ['first', 'second', 'third', 'fourth'];
|
||||
exampleArray.splice(-1);
|
||||
// exampleArray is now ['first', 'second', 'third'];
|
||||
`
|
||||
```js
|
||||
let exampleArray = ['first', 'second', 'third', 'fourth'];
|
||||
exampleArray.splice(-1);
|
||||
// exampleArray is now ['first', 'second', 'third'];
|
||||
```
|
||||
|
||||
#### لصق (ابدأ ، deleteCount)
|
||||
|
||||
إذا تم تضمين معلمة ثانية `splice(start, deleteCount)` فسيؤدي `splice(start, deleteCount)` إلى إزالة عناصر `deleteCount` من الصفيف ، بدءًا من `start` .
|
||||
|
||||
`let exampleArray = ['first', 'second', 'third', 'fourth'];
|
||||
exampleArray.splice(1, 2);
|
||||
// exampleArray is now ['first', 'fourth'];
|
||||
`
|
||||
```js
|
||||
let exampleArray = ['first', 'second', 'third', 'fourth'];
|
||||
exampleArray.splice(1, 2);
|
||||
// exampleArray is now ['first', 'fourth'];
|
||||
```
|
||||
|
||||
#### لصق (ابدأ ، deleteCount ، newElement1 ، newElement2 ، ...)
|
||||
|
||||
@ -41,27 +44,30 @@ localeTitle: Array.prototype.splice
|
||||
|
||||
يمكن إضافة العناصر دون إزالة أي عناصر بتمرير `0` كمعامل ثان.
|
||||
|
||||
`let exampleArray = ['first', 'second', 'third', 'fourth'];
|
||||
exampleArray.splice(1, 0, 'new 1', 'new 2');
|
||||
// exampleArray is now ['first', 'new 1', 'new 2', 'second', 'third', 'fourth']
|
||||
`
|
||||
```js
|
||||
let exampleArray = ['first', 'second', 'third', 'fourth'];
|
||||
exampleArray.splice(1, 0, 'new 1', 'new 2');
|
||||
// exampleArray is now ['first', 'new 1', 'new 2', 'second', 'third', 'fourth']
|
||||
```
|
||||
|
||||
يمكن أيضا استبدال العناصر.
|
||||
|
||||
`let exampleArray = ['first', 'second', 'third', 'fourth'];
|
||||
exampleArray.splice(1, 2, 'new second', 'new third');
|
||||
// exampleArray is now ['first', 'new second', 'new third', 'fourth']
|
||||
`
|
||||
```js
|
||||
let exampleArray = ['first', 'second', 'third', 'fourth'];
|
||||
exampleArray.splice(1, 2, 'new second', 'new third');
|
||||
// exampleArray is now ['first', 'new second', 'new third', 'fourth']
|
||||
```
|
||||
|
||||
### قيمة الإرجاع
|
||||
|
||||
بالإضافة إلى تغيير الصفيف الذي يتم استدعاؤه ، يقوم `splice()` أيضًا بإرجاع صفيف يحتوي على القيم التي تمت إزالتها. هذه طريقة لقطع صفيف إلى صفيفين مختلفين.
|
||||
|
||||
`let exampleArray = ['first', 'second', 'third', 'fourth'];
|
||||
let newArray = exampleArray.splice(1, 2);
|
||||
// exampleArray is now ['first', 'fourth']
|
||||
// newArray is ['second', 'third']
|
||||
`
|
||||
```js
|
||||
let exampleArray = ['first', 'second', 'third', 'fourth'];
|
||||
let newArray = exampleArray.splice(1, 2);
|
||||
// exampleArray is now ['first', 'fourth']
|
||||
// newArray is ['second', 'third']
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -8,8 +8,9 @@ localeTitle: Array.prototype.toLocaleString
|
||||
|
||||
##### بناء الجملة:
|
||||
|
||||
`arr.toLocaleString();
|
||||
`
|
||||
```
|
||||
arr.toLocaleString();
|
||||
```
|
||||
|
||||
##### المعلمات
|
||||
|
||||
@ -22,25 +23,27 @@ localeTitle: Array.prototype.toLocaleString
|
||||
|
||||
## أمثلة
|
||||
|
||||
`var number = 12345;
|
||||
var date = new Date();
|
||||
var myArray = [number, date, 'foo'];
|
||||
var myString = myArray.toLocaleString();
|
||||
|
||||
console.log(myString);
|
||||
// OUTPUT '12345,10/25/2017, 4:20:02 PM,foo'
|
||||
`
|
||||
```javascript
|
||||
var number = 12345;
|
||||
var date = new Date();
|
||||
var myArray = [number, date, 'foo'];
|
||||
var myString = myArray.toLocaleString();
|
||||
|
||||
console.log(myString);
|
||||
// OUTPUT '12345,10/25/2017, 4:20:02 PM,foo'
|
||||
```
|
||||
|
||||
يمكن عرض مخرجات مختلفة بناء على اللغة ومعرف المنطقة (اللغة).
|
||||
|
||||
`var number = 54321;
|
||||
var date = new Date();
|
||||
var myArray = [number, date, 'foo'];
|
||||
var myJPString = myArray.toLocaleString('ja-JP');
|
||||
|
||||
console.log(myJPString);
|
||||
// OUTPUT '54321,10/26/2017, 5:20:02 PM,foo'
|
||||
`
|
||||
```javascript
|
||||
var number = 54321;
|
||||
var date = new Date();
|
||||
var myArray = [number, date, 'foo'];
|
||||
var myJPString = myArray.toLocaleString('ja-JP');
|
||||
|
||||
console.log(myJPString);
|
||||
// OUTPUT '54321,10/26/2017, 5:20:02 PM,foo'
|
||||
```
|
||||
|
||||
### معلومات اكثر:
|
||||
|
||||
|
@ -8,8 +8,9 @@ localeTitle: Array.prototype.values
|
||||
|
||||
### بناء الجملة
|
||||
|
||||
`arr.values()
|
||||
`
|
||||
```javascript
|
||||
arr.values()
|
||||
```
|
||||
|
||||
### عائدات
|
||||
|
||||
@ -17,19 +18,20 @@ localeTitle: Array.prototype.values
|
||||
|
||||
### مثال
|
||||
|
||||
`let friends = ["Rachel", "Monica", "Chandler", "Phoebe", "Joey", "Ross"]
|
||||
|
||||
for (let friend of friends) {
|
||||
console.log(friend)
|
||||
}
|
||||
|
||||
// Rachel
|
||||
// Monica
|
||||
// Chandler
|
||||
// Phoebe
|
||||
// Joey
|
||||
// Ross
|
||||
`
|
||||
```javascript
|
||||
let friends = ["Rachel", "Monica", "Chandler", "Phoebe", "Joey", "Ross"]
|
||||
|
||||
for (let friend of friends) {
|
||||
console.log(friend)
|
||||
}
|
||||
|
||||
// Rachel
|
||||
// Monica
|
||||
// Chandler
|
||||
// Phoebe
|
||||
// Joey
|
||||
// Ross
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -8,14 +8,16 @@ localeTitle: التاريخ الآن
|
||||
|
||||
### بناء الجملة
|
||||
|
||||
`var timeInMs = Date.now();
|
||||
`
|
||||
```js
|
||||
var timeInMs = Date.now();
|
||||
```
|
||||
|
||||
### مثال
|
||||
|
||||
`Date.now();
|
||||
// 1508783660969
|
||||
`
|
||||
```js
|
||||
Date.now();
|
||||
// 1508783660969
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -8,16 +8,18 @@ localeTitle: Date.prototype.getDate
|
||||
|
||||
### بناء الجملة
|
||||
|
||||
`dateObject.getDate()
|
||||
`
|
||||
```js
|
||||
dateObject.getDate()
|
||||
```
|
||||
|
||||
### مثال
|
||||
|
||||
`var Xmas95 = new Date('December 25, 1995 23:15:30');
|
||||
var day = Xmas95.getDate();
|
||||
|
||||
console.log(day); // 25
|
||||
`
|
||||
```js
|
||||
var Xmas95 = new Date('December 25, 1995 23:15:30');
|
||||
var day = Xmas95.getDate();
|
||||
|
||||
console.log(day); // 25
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -8,16 +8,18 @@ localeTitle: Date.prototype.getFullYear
|
||||
|
||||
### بناء الجملة
|
||||
|
||||
`dateObj.getFullYear()
|
||||
`
|
||||
```javascript
|
||||
dateObj.getFullYear()
|
||||
```
|
||||
|
||||
### مثال
|
||||
|
||||
`var date = new Date();
|
||||
// creates a new Date() object with current date and time.
|
||||
date.getFullYear()
|
||||
// 2018
|
||||
`
|
||||
```javascript
|
||||
var date = new Date();
|
||||
// creates a new Date() object with current date and time.
|
||||
date.getFullYear()
|
||||
// 2018
|
||||
```
|
||||
|
||||
#### معلومات اكثر:
|
||||
|
||||
|
@ -6,14 +6,15 @@ localeTitle: طول الوظيفة
|
||||
|
||||
تحمل الخاصية `length` في كائن الدالة عدد الوسيطات المتوقع بواسطة الدالة عند استدعاء.
|
||||
|
||||
`function noArgs() { }
|
||||
|
||||
function oneArg(a) { }
|
||||
|
||||
console.log(noArgs.length); // 0
|
||||
|
||||
console.log(oneArg.length); // 1
|
||||
`
|
||||
```javascript
|
||||
function noArgs() { }
|
||||
|
||||
function oneArg(a) { }
|
||||
|
||||
console.log(noArgs.length); // 0
|
||||
|
||||
console.log(oneArg.length); // 1
|
||||
```
|
||||
|
||||
### ES2015 التركيب
|
||||
|
||||
@ -21,17 +22,18 @@ ES2015 ، أو ES6 كما يطلق عليه عادة ، قدم المعلمات
|
||||
|
||||
إذا تم استخدام عامل التشغيل المتبقي أو المعلمات الافتراضية في تعريف الدالة ، فإن خاصية `length` ستشمل فقط عدد الوسيطات قبل عامل تشغيل باقي أو معلمة افتراضية.
|
||||
|
||||
`function withRest(...args) { }
|
||||
|
||||
function withArgsAndRest(a, b, ...args) { }
|
||||
|
||||
function withDefaults(a, b = 'I am the default') { }
|
||||
|
||||
console.log(withRest.length); // 0
|
||||
|
||||
console.log(withArgsAndRest.length); // 2
|
||||
|
||||
console.log(withDefaults.length); // 1
|
||||
`
|
||||
```javascript
|
||||
function withRest(...args) { }
|
||||
|
||||
function withArgsAndRest(a, b, ...args) { }
|
||||
|
||||
function withDefaults(a, b = 'I am the default') { }
|
||||
|
||||
console.log(withRest.length); // 0
|
||||
|
||||
console.log(withArgsAndRest.length); // 2
|
||||
|
||||
console.log(withDefaults.length); // 1
|
||||
```
|
||||
|
||||
يمكن العثور على مزيد من المعلومات حول `Function.length` على [مستندات MDN الخاصة بـ Mozilla](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/length) .
|
@ -12,29 +12,31 @@ localeTitle: Function.prototype.bind
|
||||
|
||||
يتم تكليفك بكتابة الكود لتحديث عدد الحضور عند وصولهم إلى المؤتمر. يمكنك إنشاء صفحة ويب بسيطة تحتوي على زر ، عند النقر فوق ذلك ، بزيادة `numOfAttendees` خاصية على كائن الاستجواب. يمكنك استخدام jQuery لإضافة معالج النقر إلى الزر الخاص بك ، ولكن بعد النقر فوق الزر ، لم يتغير كائن الإيداع. قد تبدو شفرتك شيئًا كهذا.
|
||||
|
||||
`var nodevember = {
|
||||
numOfAttendees: 0,
|
||||
incrementNumOfAttendees: function() {
|
||||
this.numOfAttendees++;
|
||||
}
|
||||
// other properties
|
||||
};
|
||||
|
||||
$('.add-attendee-btn').on('click', nodevember.incrementNumOfAttendees);
|
||||
`
|
||||
```javascript
|
||||
var nodevember = {
|
||||
numOfAttendees: 0,
|
||||
incrementNumOfAttendees: function() {
|
||||
this.numOfAttendees++;
|
||||
}
|
||||
// other properties
|
||||
};
|
||||
|
||||
$('.add-attendee-btn').on('click', nodevember.incrementNumOfAttendees);
|
||||
```
|
||||
|
||||
هذه مشكلة شائعة عند العمل مع jQuery و JavaScript. عند النقر فوق زر `this` الكلمة في الطريقة التي تم تمريرها إلى ومسج `on` طريقة يرجع زر وليس الكائن المؤتمر. يمكنك ربط `this` السياق الخاص بك بالطريقة لحل المشكلة.
|
||||
|
||||
`var nodevember = {
|
||||
numOfAttendees: 0,
|
||||
incrementNumOfAttendees: function() {
|
||||
this.numOfAttendees++;
|
||||
}
|
||||
// other properties
|
||||
};
|
||||
|
||||
$('.add-attendee-btn').on('click', nodevember.incrementNumOfAttendees.bind(nodevember));
|
||||
`
|
||||
```javascript
|
||||
var nodevember = {
|
||||
numOfAttendees: 0,
|
||||
incrementNumOfAttendees: function() {
|
||||
this.numOfAttendees++;
|
||||
}
|
||||
// other properties
|
||||
};
|
||||
|
||||
$('.add-attendee-btn').on('click', nodevember.incrementNumOfAttendees.bind(nodevember));
|
||||
```
|
||||
|
||||
الآن عند النقر فوق الزر يشير `this` إلى كائن `nodevember` .
|
||||
|
||||
@ -42,14 +44,15 @@ localeTitle: Function.prototype.bind
|
||||
|
||||
كل وسيطة تم تمريرها `bind` بعد الأول سوف تسبق أية وسائط يتم تمريرها عند استدعاء الوظيفة. هذا يسمح لك بتطبيق الحجج مسبقًا على إحدى الوظائف. في المثال أدناه ، تأخذ `combineStrings` معًا. `bind` ثم يتم استخدامها لإنشاء دالة التي توفر دائما "كول" كسلسلة الأولى.
|
||||
|
||||
`function combineStrings(str1, str2) {
|
||||
return str1 + " " + str2
|
||||
}
|
||||
|
||||
var makeCool = combineStrings.bind(null, "Cool");
|
||||
|
||||
makeCool("trick"); // "Cool trick"
|
||||
`
|
||||
```javascript
|
||||
function combineStrings(str1, str2) {
|
||||
return str1 + " " + str2
|
||||
}
|
||||
|
||||
var makeCool = combineStrings.bind(null, "Cool");
|
||||
|
||||
makeCool("trick"); // "Cool trick"
|
||||
```
|
||||
|
||||
يحتوي الدليل على [هذا المرجع](https://guide.freecodecamp.org/javascript/this-reference) على مزيد من المعلومات حول كيفية تغيير ما تشير إليه `this` الكلمة الرئيسية.
|
||||
|
||||
|
@ -33,20 +33,21 @@ localeTitle: JSON تحليل
|
||||
|
||||
هنا مثال مع `reviver` :
|
||||
|
||||
`var data = '{"value": 5}';
|
||||
|
||||
var result = JSON.parse(data, function(key, value) {
|
||||
if (typeof value === 'number') {
|
||||
return value * 10;
|
||||
}
|
||||
return value;
|
||||
});
|
||||
|
||||
// Original Data
|
||||
console.log("Original Data:", data); // This will print Original Data: {"value": 5}
|
||||
// Result after parsing
|
||||
console.log("Parsed Result: ", result); // This will print Parsed Result: { value: 50 }
|
||||
`
|
||||
```javascript
|
||||
var data = '{"value": 5}';
|
||||
|
||||
var result = JSON.parse(data, function(key, value) {
|
||||
if (typeof value === 'number') {
|
||||
return value * 10;
|
||||
}
|
||||
return value;
|
||||
});
|
||||
|
||||
// Original Data
|
||||
console.log("Original Data:", data); // This will print Original Data: {"value": 5}
|
||||
// Result after parsing
|
||||
console.log("Parsed Result: ", result); // This will print Parsed Result: { value: 50 }
|
||||
```
|
||||
|
||||
في المثال أعلاه ، يتم مضاعفة جميع القيم [الرقمية في](https://repl.it/Mwfp/0) `10` - [Repl.it Demo](https://repl.it/Mwfp/0)
|
||||
|
||||
|
@ -21,8 +21,9 @@ localeTitle: JSON البناء
|
||||
|
||||
يتكون زوج الاسم / القيمة من اسم حقل (في علامات اقتباس مزدوجة) ، متبوعًا بنقطتين ، متبوعًا بقيمة:
|
||||
|
||||
`"handle":"moghya"
|
||||
`
|
||||
```
|
||||
"handle":"moghya"
|
||||
```
|
||||
|
||||
* تتطلب أسماء JSON علامات اقتباس مزدوجة.
|
||||
|
||||
@ -34,13 +35,15 @@ localeTitle: JSON البناء
|
||||
|
||||
* JSON
|
||||
|
||||
`"handle":"moghya"
|
||||
`
|
||||
```
|
||||
"handle":"moghya"
|
||||
```
|
||||
|
||||
* جافا سكريبت
|
||||
|
||||
`handle:"moghya"
|
||||
`
|
||||
```
|
||||
handle:"moghya"
|
||||
```
|
||||
|
||||
### قيم JSON
|
||||
|
||||
@ -65,47 +68,51 @@ localeTitle: JSON البناء
|
||||
|
||||
باستخدام JavaScript ، يمكنك إنشاء كائن وتعيين البيانات إليه ، على النحو التالي:
|
||||
|
||||
`var person = {
|
||||
"name":"Shubham",
|
||||
"age":21,
|
||||
"handle":"moghya",
|
||||
"website":"http://moghya.me/"
|
||||
};
|
||||
`
|
||||
```
|
||||
var person = {
|
||||
"name":"Shubham",
|
||||
"age":21,
|
||||
"handle":"moghya",
|
||||
"website":"http://moghya.me/"
|
||||
};
|
||||
```
|
||||
|
||||
يمكنك الوصول إلى كائن JavaScript مثل هذا:
|
||||
|
||||
`//returns moghya
|
||||
person.handle;
|
||||
`
|
||||
```
|
||||
//returns moghya
|
||||
person.handle;
|
||||
```
|
||||
|
||||
يمكن أيضًا الوصول إليه على النحو التالي:
|
||||
|
||||
`//returns http://moghya.me/
|
||||
person["website"];
|
||||
`
|
||||
```
|
||||
//returns http://moghya.me/
|
||||
person["website"];
|
||||
```
|
||||
|
||||
### المصفوفات في JSON
|
||||
|
||||
`var team = {
|
||||
"name":"novatoscript",
|
||||
"members" :
|
||||
[
|
||||
{
|
||||
"name":"Shubham Sawant",
|
||||
"age":21,
|
||||
"handle":"moghya",
|
||||
"website":"http://moghya.me",
|
||||
},
|
||||
{
|
||||
"name":"Saurabh Banore",
|
||||
"age":21,
|
||||
"handle":"banoresaurabh",
|
||||
"website":"http://banoresaurabh.me/",
|
||||
}
|
||||
]
|
||||
}
|
||||
`
|
||||
```
|
||||
var team = {
|
||||
"name":"novatoscript",
|
||||
"members" :
|
||||
[
|
||||
{
|
||||
"name":"Shubham Sawant",
|
||||
"age":21,
|
||||
"handle":"moghya",
|
||||
"website":"http://moghya.me",
|
||||
},
|
||||
{
|
||||
"name":"Saurabh Banore",
|
||||
"age":21,
|
||||
"handle":"banoresaurabh",
|
||||
"website":"http://banoresaurabh.me/",
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### مثال
|
||||
|
||||
|
@ -8,8 +8,9 @@ localeTitle: خريطة
|
||||
|
||||
## بناء الجملة
|
||||
|
||||
`new Map([iterable])
|
||||
`
|
||||
```javascript
|
||||
new Map([iterable])
|
||||
```
|
||||
|
||||
## المعلمات
|
||||
|
||||
@ -17,15 +18,16 @@ localeTitle: خريطة
|
||||
|
||||
## مثال
|
||||
|
||||
`// basic usage
|
||||
const myMap = new Map();
|
||||
myMap.set('foo',1);
|
||||
myMap.set('bar',2);
|
||||
myMap.set('baz',3);
|
||||
|
||||
myMap.get('foo'); // returns 1
|
||||
myMap.get('baz'); // returns 3
|
||||
myMap.get('hihi'); // return undefined
|
||||
|
||||
myMap.size(); // 3
|
||||
`
|
||||
```javascript
|
||||
// basic usage
|
||||
const myMap = new Map();
|
||||
myMap.set('foo',1);
|
||||
myMap.set('bar',2);
|
||||
myMap.set('baz',3);
|
||||
|
||||
myMap.get('foo'); // returns 1
|
||||
myMap.get('baz'); // returns 3
|
||||
myMap.get('hihi'); // return undefined
|
||||
|
||||
myMap.size(); // 3
|
||||
```
|
@ -8,22 +8,24 @@ localeTitle: Map.prototype.clear
|
||||
|
||||
## بناء الجملة
|
||||
|
||||
`myMap.clear();
|
||||
`
|
||||
```javascript
|
||||
myMap.clear();
|
||||
```
|
||||
|
||||
## مثال
|
||||
|
||||
`const myMap = new Map();
|
||||
myMap.set('foo',1);
|
||||
myMap.set('bar',2);
|
||||
myMap.set('baz',3);
|
||||
|
||||
|
||||
myMap.size(); // 3
|
||||
myMap.has('foo'); // true;
|
||||
|
||||
myMap.clear();
|
||||
|
||||
myMap.size(); // 0
|
||||
myMap.has('foo'); // false
|
||||
`
|
||||
```javascript
|
||||
const myMap = new Map();
|
||||
myMap.set('foo',1);
|
||||
myMap.set('bar',2);
|
||||
myMap.set('baz',3);
|
||||
|
||||
|
||||
myMap.size(); // 3
|
||||
myMap.has('foo'); // true;
|
||||
|
||||
myMap.clear();
|
||||
|
||||
myMap.size(); // 0
|
||||
myMap.has('foo'); // false
|
||||
```
|
@ -8,8 +8,9 @@ localeTitle: Map.prototype.delete
|
||||
|
||||
## بناء الجملة
|
||||
|
||||
`myMap.delete(key);
|
||||
`
|
||||
```javascript
|
||||
myMap.delete(key);
|
||||
```
|
||||
|
||||
## المعلمات
|
||||
|
||||
@ -17,17 +18,18 @@ localeTitle: Map.prototype.delete
|
||||
|
||||
## مثال
|
||||
|
||||
`const myMap = new Map();
|
||||
myMap.set('foo',1);
|
||||
myMap.set('bar',2);
|
||||
myMap.set('baz',3);
|
||||
|
||||
|
||||
myMap.size(); // 3
|
||||
myMap.has('foo'); // true;
|
||||
|
||||
myMap.delete('foo'); // Returns true. Successfully removed.
|
||||
|
||||
myMap.size(); // 2
|
||||
myMap.has('foo'); // Returns false. The "foo" element is no longer present.
|
||||
`
|
||||
```javascript
|
||||
const myMap = new Map();
|
||||
myMap.set('foo',1);
|
||||
myMap.set('bar',2);
|
||||
myMap.set('baz',3);
|
||||
|
||||
|
||||
myMap.size(); // 3
|
||||
myMap.has('foo'); // true;
|
||||
|
||||
myMap.delete('foo'); // Returns true. Successfully removed.
|
||||
|
||||
myMap.size(); // 2
|
||||
myMap.has('foo'); // Returns false. The "foo" element is no longer present.
|
||||
```
|
@ -8,20 +8,22 @@ localeTitle: Map.prototype.entries
|
||||
|
||||
## بناء الجملة
|
||||
|
||||
`myMap.entries()
|
||||
`
|
||||
```javascript
|
||||
myMap.entries()
|
||||
```
|
||||
|
||||
## مثال
|
||||
|
||||
`const myMap = new Map();
|
||||
myMap.set('foo',1);
|
||||
myMap.set('bar',2);
|
||||
myMap.set('baz',3);
|
||||
|
||||
|
||||
var iterator = myMap.entries();
|
||||
|
||||
console.log(iterator.next().value); // ['foo', 1]
|
||||
console.log(iterator.next().value); // ['bar', 2]
|
||||
console.log(iterator.next().value); // ['baz', 3]
|
||||
`
|
||||
```javascript
|
||||
const myMap = new Map();
|
||||
myMap.set('foo',1);
|
||||
myMap.set('bar',2);
|
||||
myMap.set('baz',3);
|
||||
|
||||
|
||||
var iterator = myMap.entries();
|
||||
|
||||
console.log(iterator.next().value); // ['foo', 1]
|
||||
console.log(iterator.next().value); // ['bar', 2]
|
||||
console.log(iterator.next().value); // ['baz', 3]
|
||||
```
|
@ -8,8 +8,9 @@ localeTitle: Map.prototype.forEach
|
||||
|
||||
## بناء الجملة
|
||||
|
||||
`myMap.forEach(callback, thisArg)
|
||||
`
|
||||
```javascript
|
||||
myMap.forEach(callback, thisArg)
|
||||
```
|
||||
|
||||
## المعلمات
|
||||
|
||||
|
@ -8,8 +8,9 @@ localeTitle: Map.prototype.get
|
||||
|
||||
## بناء الجملة
|
||||
|
||||
`myMap.get(key);
|
||||
`
|
||||
```javascript
|
||||
myMap.get(key);
|
||||
```
|
||||
|
||||
## المعلمات
|
||||
|
||||
@ -17,12 +18,13 @@ localeTitle: Map.prototype.get
|
||||
|
||||
## مثال
|
||||
|
||||
`const myMap = new Map();
|
||||
myMap.set('foo',1);
|
||||
myMap.set('bar',2);
|
||||
myMap.set('baz',3);
|
||||
|
||||
myMap.get('foo'); // returns 1
|
||||
myMap.get('baz'); // returns 3
|
||||
myMap.get('hihi'); // return undefined
|
||||
`
|
||||
```javascript
|
||||
const myMap = new Map();
|
||||
myMap.set('foo',1);
|
||||
myMap.set('bar',2);
|
||||
myMap.set('baz',3);
|
||||
|
||||
myMap.get('foo'); // returns 1
|
||||
myMap.get('baz'); // returns 3
|
||||
myMap.get('hihi'); // return undefined
|
||||
```
|
@ -8,20 +8,22 @@ localeTitle: Map.prototype.keys
|
||||
|
||||
## بناء الجملة
|
||||
|
||||
`myMap.keys()
|
||||
`
|
||||
```javascript
|
||||
myMap.keys()
|
||||
```
|
||||
|
||||
## مثال
|
||||
|
||||
`const myMap = new Map();
|
||||
myMap.set('foo',1);
|
||||
myMap.set('bar',2);
|
||||
myMap.set('baz',3);
|
||||
|
||||
|
||||
const iterator = myMap.keys();
|
||||
|
||||
console.log(iterator.next().value); // 'foo'
|
||||
console.log(iterator.next().value); // 'bar'
|
||||
console.log(iterator.next().value); // 'baz'
|
||||
`
|
||||
```javascript
|
||||
const myMap = new Map();
|
||||
myMap.set('foo',1);
|
||||
myMap.set('bar',2);
|
||||
myMap.set('baz',3);
|
||||
|
||||
|
||||
const iterator = myMap.keys();
|
||||
|
||||
console.log(iterator.next().value); // 'foo'
|
||||
console.log(iterator.next().value); // 'bar'
|
||||
console.log(iterator.next().value); // 'baz'
|
||||
```
|
@ -8,8 +8,9 @@ localeTitle: Map.prototype.set
|
||||
|
||||
## بناء الجملة
|
||||
|
||||
`myMap.set(key, value);
|
||||
`
|
||||
```javascript
|
||||
myMap.set(key, value);
|
||||
```
|
||||
|
||||
## المعلمات
|
||||
|
||||
@ -17,15 +18,16 @@ localeTitle: Map.prototype.set
|
||||
|
||||
## مثال
|
||||
|
||||
`const myMap = new Map();
|
||||
|
||||
// sets new elements
|
||||
myMap.set('foo',1);
|
||||
myMap.set('bar',2);
|
||||
myMap.set('baz',3);
|
||||
|
||||
// Updates an element
|
||||
myMap.set('foo', 100);
|
||||
|
||||
myMap.get('foo'); // returns 100
|
||||
`
|
||||
```javascript
|
||||
const myMap = new Map();
|
||||
|
||||
// sets new elements
|
||||
myMap.set('foo',1);
|
||||
myMap.set('bar',2);
|
||||
myMap.set('baz',3);
|
||||
|
||||
// Updates an element
|
||||
myMap.set('foo', 100);
|
||||
|
||||
myMap.get('foo'); // returns 100
|
||||
```
|
Reference in New Issue
Block a user