أحدث البرامج التعليمية وتطوير الشبكة
×

JS البرنامج التعليمي

JS الصفحة الرئيسية JS المقدمة JS ألى أين JS الناتج JS بناء الجملة JS البيانات JS تعليقات JS المتغيرات JS مشغلي JS علم الحساب JS مهمة JS أنواع البيانات JS وظائف JS الأجسام JS نطاق JS أحداث JS سلاسل JS طرق سلسلة JS أرقام JS طرق عدد JS الرياضيات JS التمور JS تاريخ تنسيقات JS تاريخ طرق JS المصفوفات JS طرق مجموعة JS القيم المنطقية JS مقارنات JS الظروف JS تحول JS حلقة غيرمنتهية For JS حلقة بينما JS استراحة JS نوع التحويل JS التعبير العادي JS أخطاء JS التصحيح JS الرفع JS الوضع الصارم JS دليل الاناقة JS أفضل الممارسات JS الأخطاء JS أداء JS الكلمات المحجوزة JS JSON

JS أشكال

أشكال التحقق من صحة API أشكال

JS موضوع

تعريفات الكائن خصائص الكائن طرق كائن نماذج الكائن

JS وظائف

تعاريف وظيفة وظيفة المعلمات وظيفة الاحتجاج الإغلاق وظيفة

JS HTML DOM

DOM مقدمة DOM أساليب DOM وثيقة DOM عناصر DOM HTML DOM CSS DOM الرسوم المتحركة DOM أحداث DOM EventListener DOM ملاحة DOM العقد DOM Nodelist

JS المتصفح BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS أمثلة

JS أمثلة JS HTML DOM JS HTML إدخال JS HTML الأجسام JS HTML أحداث JS المتصفح JS اختبار قصير JS ملخص

JS المراجع

JavaScript الأجسام HTML DOM الأجسام


 

JavaScript المصفوفات


تستخدم صفائف جافا سكريبت لتخزين قيم متعددة في متغير واحد.


عرض صفائف

في هذا البرنامج التعليمي سوف نستخدم البرنامج النصي لعرض صفائف داخل <p> عنصر مع id="demo" :

مثال

<p id="demo"></p>

<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>

السطر الأول (في النص) بإنشاء مجموعة يدعى السيارات.

السطر الثاني "يجد" عنصر مع id="demo" ، و "displays" مجموعة في "innerHTML" منه؛


انها محاولة لنفسك

إنشاء مجموعة، وتعيين قيم على أنه:

مثال

var cars = ["Saab", "Volvo", "BMW"];
انها محاولة لنفسك »

المسافات وفواصل السطور ليست مهمة. إعلان يمكن أن تمتد لعدة أسطر:

مثال

var cars = [
    "Saab",
    "Volvo",
    "BMW"
];
انها محاولة لنفسك »

لم يضع فاصلة بعد العنصر الأخير (مثل "BMW" ،).
لا يتسق تأثير عبر المتصفحات.


ما هو صفيف؟

المصفوفة هي متغير خاص، والتي يمكن أن تعقد أكثر من قيمة واحدة في وقت واحد.

إذا كان لديك قائمة من العناصر (قائمة بأسماء السيارات، على سبيل المثال)، وتخزين السيارات في المتغيرات واحدة يمكن أن تبدو مثل هذا:

var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";

ومع ذلك، ما إذا كنت ترغب في حلقة من خلال السيارات والعثور على وظيفة معينة؟ وماذا لو كان لديك لا 3 سيارات، ولكن 300؟

الحل هو صفيف!

مجموعة يمكن أن تعقد العديد من القيم تحت اسم واحد، ويمكنك الوصول إلى القيم من خلال الإشارة إلى رقم فهرس.


إنشاء صفيف

باستخدام مجموعة الحرفي هو أسهل طريقة لإنشاء صفيف جافا سكريبت.

بناء الجملة:

var array-name = [ item1 , item2 , ...];      

مثال:

var cars = ["Saab", "Volvo", "BMW"];

باستخدام الجديدة جافا سكريبت كلمة

المثال التالي أيضا بإنشاء صفيف، ويعين القيم إلى ما يلي:

مثال

var cars = new Array("Saab", "Volvo", "BMW");
انها محاولة لنفسك »

المثالين أعلاه تفعل بالضبط نفس الشيء. ليست هناك حاجة لاستخدام new Array() .
لالبساطة، والقراءة وسرعة التنفيذ، استخدم واحد الأول (مجموعة الأسلوب الحرفي).


الوصول إلى عناصر من صفيف

عليك الرجوع إلى عنصر صفيف بالإشارة إلىرقم الفهرس.

هذا البيان يصل قيمة العنصر الأول في السيارات:

var name = cars[0];

هذا البيان بتعديل العنصر الأول في السيارات:

cars[0] = "Opel";

[0] هو العنصر الأول في صفيف. [1] هي ثاني. أدلة المصفوفة تبدأ 0.


هل يمكن أن يكون كائنات مختلفة في صفيف واحد

يمكن المتغيرات جافا سكريبت تكون الكائنات. المصفوفات هي أنواع خاصة من الكائنات.

وبسبب هذا، هل يمكن أن يكون المتغيرات من أنواع مختلفة في نفس صفيف.

هل يمكن أن يكون الكائنات في صفيف. هل يمكن أن يكون وظائف في صفيف. هل يمكن أن يكون صفائف في صفيف:

myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;

المصفوفات هي كائنات

المصفوفات هي نوع خاص من الأشياء. و typeof المشغل في جافا سكريبت يعود "object" للصفائف.

ولكن، وأفضل وصف صفائف جافا سكريبت كما المصفوفات.

صفائف استخدام numbers للوصول بها "elements" . في هذا المثال، person[0] يعود John :

مجموعة:

var person = ["John", "Doe", 46];
انها محاولة لنفسك »

كائنات استخدام أسماء للوصول لها "أعضاء". في هذا المثال، person.firstName يعود John :

موضوع:

var person = {firstName:"John", lastName:"Doe", age:46};
انها محاولة لنفسك »

خصائص مجموعة وطرق

القوة الحقيقية للصفائف جافا سكريبت هي مدمجة في خصائص مجموعة والطرق:

أمثلة

var x = cars.length;         // The length property returns the number of elements in cars
var y = cars.sort();         // The sort() method sort cars in alphabetical order

وتغطي وسائل مصفوفة في الفصل القادم.


طول الملكية

على length ممتلكات مجموعة ترجع طول مجموعة (عدد عناصر مجموعة).

مثال

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // the length of fruits is 4
انها محاولة لنفسك »

الخاصية طول هي دائما واحدة أكثر من أعلى مؤشر مجموعة.


إضافة عناصر صفيف

أسهل طريقة لإضافة عنصر جديد إلى مجموعة يستخدم طريقة الدفع:

مثال

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.push("Lemon");                // adds a new element (Lemon) to fruits
انها محاولة لنفسك »

يمكن أيضا إضافة عنصر جديد إلى مجموعة باستخدام length الملكية:

مثال

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[fruits.length] = "Lemon";     // adds a new element (Lemon) to fruits
انها محاولة لنفسك »

تحذير !

إضافة عناصر مع مؤشرات عالية يمكن أن تخلق غير محددة "holes" في صفيف:

مثال

var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits[10] = "Lemon";                // adds a new element (Lemon) to fruits
انها محاولة لنفسك »

حلقات عناصر صفيف

أفضل طريقة لحلقة من خلال مجموعة، يستخدم "for" حلقة:

مثال

var fruits, text, fLen, i;

fruits = ["Banana", "Orange", "Apple", "Mango"];
fLen = fruits.length;
text = "<ul>";
for (i = 0; i < fLen; i++) {
    text += "<li>" + fruits[i] + "</li>";
}
انها محاولة لنفسك »

صفائف النقابي

العديد من لغات البرمجة تدعم المصفوفات مع الفهارس اسمه.

وتسمى المصفوفات مع الفهارس اسمه المصفوفات الترابطية (أو التجزئة).

جافا سكريبت لا يدعم المصفوفات مع الفهارس اسمه.

في جافا سكريبت، صفائف دائما استخدام مؤشرات مرقمة.

مثال

var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
var x = person.length;         // person.length will return 3
var y = person[0];             // person[0] will return "John"
انها محاولة لنفسك »

تحذير !!
إذا كنت تستخدم مؤشر اسمه، وجافا سكريبت إعادة تعريف مجموعة إلى كائن القياسية.
بعد ذلك، فإن جميع الطرق مجموعة وخصائص تعطي نتائج غير صحيحة.

مثال:

var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
var x = person.length;         // person.length will return 0
var y = person[0];             // person[0] will return undefined
انها محاولة لنفسك »

الفرق بين المصفوفات والأجسام

في جافا سكريبت، صفائف استخدام مؤشرات مرقمة.

في جافا سكريبت، واستخدام الكائنات المسماة الفهارس.

المصفوفات هي نوع خاص من الأشياء، مع فهارس المرقمة.


عند استخدام المصفوفات. متى تستخدم كائنات.

  • جافا سكريبت لا يدعم صفائف النقابي.
  • يجب عليك استخدام الكائنات عندما تريد أسماء العناصر لتكون السلاسل (نص).
  • يجب عليك استخدام المصفوفات عندما تريد أسماء العناصر أن تكون الأرقام.

تجنب new Array()

ليست هناك حاجة لاستخدام المدمج في مجموعة منشئ جافا سكريبت new Array() .

استخدام [] بدلا من ذلك.

هذه بيانين مختلفة على حد سواء إنشاء مجموعة فارغة جديدة باسم نقاط:

var points = new Array();         // Bad
var points = [];                  // Good 

هذه بيانين مختلفة على حد سواء تخلق مجموعة جديدة تحتوي على 6 أرقام:

var points = new Array(40, 100, 1, 5, 25, 10)  // Bad
var points = [40, 100, 1, 5, 25, 10];          // Good
انها محاولة لنفسك »

في new الكلمة يعقد فقط رمز. كما يمكن أن تنتج بعض نتائج غير متوقعة:

var points = new Array(40, 100);  // Creates an array with two elements (40 and 100)

ماذا لو كان يمكنني إزالة أحد العناصر؟

var points = new Array(40);       // Creates an array with 40 undefined elements !!!!!
انها محاولة لنفسك »

كيفية التعرف على صفيف

سؤال شيوعا هو: كيف أعرف إذا كان المتغير هو مصفوفة؟

والمشكلة هي أن المشغل جافا سكريبت typeof بإرجاع "وجوه":

var fruits = ["Banana", "Orange", "Apple", "Mango"];

typeof fruits;             // returns object
انها محاولة لنفسك »

كائن عوائد مشغل تشير typeof لمجموعة جافا سكريبت هو كائن.

الحل 1:

لحل هذه المشكلة ECMAScript 5 يحدد طريقة جديدة Array.isArray() :

Array.isArray(fruits);     // returns true
انها محاولة لنفسك »

المشكلة مع هذا الحل هو أن ECMAScript 5 غير معتمد في المتصفحات القديمة.

الحل 2:

لحل هذه المشكلة، يمكنك إنشاء الخاصة بك isArray() وظيفة:

function isArray(x) {
    return x.constructor.toString().indexOf("Array") > -1;
}
انها محاولة لنفسك »

وظيفة فوق دائما ترجع الحقيقية إذا كانت الوسيطة عبارة عن صفيف.

أو بتعبير أدق: فإنها ترجع صحيح إذا كان النموذج كائن يحتوي على كلمة "صفيف".

حل 3:

و instanceof يعود تشغيل صحيح إذا تم إنشاء كائن منشئ معينة:

var fruits = ["Banana", "Orange", "Apple", "Mango"];

fruits instanceof Array     // returns true
انها محاولة لنفسك »

اختبر نفسك مع تمارين!

التمرين 1 » التمرين 2» التمرين 3 » التمرين 4» التمرين 5 »