شاء

@serverSerrverlesskiy

الأشياء مثل خزانة لتخزين ونقل أنواع أخرى من البيانات. تم تصميم JavaScript حول نموذج بسيط. يعتمد المفهوم على أشياء بسيطة. الكائن عبارة عن مجموعة من الخصائص ، وتتكون كل خاصية من اسم (مفتاح) وقيمة مرتبطة بهذا الاسم. يمكن أن تكون قيمة الخاصية دالة ، والتي يمكن تسميتها طريقة لكائن ، أو أي نوع آخر.

Object

في هذه المقالة ، سنغطي أهم الخصائص الأساسية لكائنات JavaScript ، وإنشاء الخصائص وتعديلها وتعدادها.

الكائن في JavaScript عبارة عن مصفوفة ارتباطية بسيطة أو ، بعبارة أخرى ، "تجزئة". يخزن أي مفتاح: مطابقات القيمة وله عدة طرق قياسية.

الكائنات في JavaScript ، مثل الكائنات في الحياة الواقعية (شخص, حافلة ، مبنى ، إلخ) لها عدة أسماء (مفتاح) المعلمات (العمر والاسم ولون الشعر والحالة) بقيم محددة (15, John, black, 'true') :

let obj = {
  age: 15,
  name: 'John',
  color: 'black',
  student: true
}

طريقة الكائن في JavaScript هي ببساطة دالة تضاف إلى مصفوفة ترابطية.

محرر مباشر

function learnJavaScript() {
  let obj = {
    // properties: values
    age: 15,
    name: 'John',
    // method: function
    say: () => 'Hello!'
  }
  return obj.say()
}

function learnJavaScript() {
  let obj = {
    // properties: values
    age: 15,
    name: 'John',
    // method: function
    say: () => 'Hello!'
  }
  return obj.say()
}

النتيجة

خلق الكائن

Object

في الكمبيوتر ️ يمكننا تمثيلobject كخزانة بخصائص الأسماء(access keys) وقعت عليه. داخل الخزانة أدراج - البيانات (معلومات محددة) وحتى الأشياء الأصغر ، قياسا على الأشياء. من السهل العثور على أو حذف أو إضافة (كتابة) قيمة جديدة إليها بواسطة "المفتاح".

obj01

هذان خياران 2️⃣ للإنشاء كائن فارغ:

// equivalent records
let obj = {}
let person = new Object()

نادرًا ما يتم استخدام الخيار الثاني في الممارسة.

obj00

الخلق المتقدم

Extended

يمكن تحديد الخصائص مباشرة عند إنشاء كائن ، من خلال قائمة الأقواس المربعة مثل {..., key: value, ...} وإنشاء كائنات معقدة:

محرر مباشر

function learnJavaScript() {
  const obj = {
    age: 15,
    name: 'John',
    color: 'black',
    passport: {
      serial: 5721,
      number: 258963,
      date: '27.10.2015'
    },
    student: true
  }

  return obj.passport.date
}

function learnJavaScript() {
  const obj = {
    age: 15,
    name: 'John',
    color: 'black',
    passport: {
      serial: 5721,
      number: 258963,
      date: '27.10.2015'
    },
    student: true
  }

  return obj.passport.date
}

النتيجة

المخلوق يحتوي الكائن على خمس خصائص ذات قيم محددة ، أحدها بيانات جواز السفر ، وهو كائن مدمج. لاحظ كيف يتم استدعاء الخصائص أو الأساليب البعيدة للكائن. حاول إعادة رقم جواز سفرك.

إضافة الخصائص

Adding

هنالك اثنان 2️⃣ بناء الجملة لإضافة خصائص إلى كائن. 1️⃣ الأول فترة ، والثاني أقواس مربعة:

// equivalent records
obj.age = 15
obj['age'] = 15

محرر مباشر

function learnJavaScript() {
  let obj = {
    name: 'John'
  }

  obj.age = 15

  return obj.age
}

function learnJavaScript() {
  let obj = {
    name: 'John'
  }

  obj.age = 15

  return obj.age
}

النتيجة

تستخدم الأقواس المربعة بشكل أساسي عندما يكون ملف properties' name is in aمتغير` :

let nameProp = 'age'
obj[nameProp] = 15

هنا ، من خلال المتغير nameProp، قمنا بتعيين اسم العقار"age", وهو المفتاح في المصفوفة الترابطية التي تحتوي على value 15.

محرر مباشر

function learnJavaScript() {
  let obj = {
    name: 'John'
  }

  let nameProp = 'age'
  obj[nameProp] = 15

  return obj.age
}

function learnJavaScript() {
  let obj = {
    name: 'John'
  }

  let nameProp = 'age'
  obj[nameProp] = 15

  return obj.age
}

النتيجة

الوصول إلى الخصائص

Door

يتم الوصول إلى العقار عن طريق الوصول إليه :

محرر مباشر

function learnJavaScript() {
  let obj = {} // object is empty
  obj.age = 17 // equivalent to obj ['age'] = 17 or immediately obj = {age: 17}

  let result1 = obj.age // Option 1
  let result2 = obj['age'] // Option 2

  return result1 + 'or' + result2
}

function learnJavaScript() {
  let obj = {} // object is empty
  obj.age = 17 // equivalent to obj ['age'] = 17 or immediately obj = {age: 17}

  let result1 = obj.age // Option 1
  let result2 = obj['age'] // Option 2

  return result1 + 'or' + result2
}

النتيجة

إذا لم يكن للكائن مثل هذه الخاصية ، تكون النتيجة undefined.تحقق من ذلك في وحدة تحكم المتصفح الخاص بك.

let obj = {}
obj.nokey

nokey

لن يكون هناك أي خطأ عند الوصول إلى عقار غير موجود ، القيمة الخاصة undefined سيعود ببساطة. إذا لم يكن هناك return الكلمة الأساسية داخل الوظيفة ، ثم undefined ستعود القيمة أيضًا - عدم وجود شيء ما.

إزالة الخصائص

Delete

يحذف ➖ عامل تشغيل الخاصية delete. حاول إزالة رقم جواز السفر من المثال السابق:

قم بإنشاء الكائن من المثال السابق في وحدة التحكم.

const obj = {
  age: 15,
  name: 'John',
  color: 'black',
  passport: {
    serial: 5721,
    number: 258963,
    date: '27.10.2015'
  },
  student: true
}

الآن قم بإزالة الملف المتداخل passport موضوع

delete obj.passport

الآن إذا أشرت إليها ، فستكون النتيجةundefined

obj.passport

delete obj

طرق الكائن

Description

كما هو الحال مع اللغات الأخرى , كائنات جافا سكريبت لها methods.

على سبيل المثال ، لنقم بإنشاء ملف sport الكائن على الفور مع run طريقة:

محرر مباشر

function learnJavaScript() {
  let sport = {
    run: n => 'John' + 'ran' + n + 'meters!'
  }

  return sport.run(300)
}

function learnJavaScript() {
  let sport = {
    run: n => 'John' + 'ran' + n + 'meters!'
  }

  return sport.run(300)
}

النتيجة

مضيفا طريقة

Add

تعد إضافة طريقة إلى كائن موجود أمرًا بسيطًا ، فقم بتعيين الوظيفة ⚙️ function (n) {...} الى sport.run منشأه.

محرر مباشر

function learnJavaScript() {
  let sport = {}

  sport.run = n => 'The athlete ran' + n + 'meters and it was' + 'Nikita'

  return sport.run(350)
}

function learnJavaScript() {
  let sport = {}

  sport.run = n => 'The athlete ran' + n + 'meters and it was' + 'Nikita'

  return sport.run(350)
}

النتيجة

هذا لا يتعلق بالفئات ، والتشكيل ، وما شابه. بسيط - يمكنك إضافة طريقة جديدة أو حذف طريقة موجودة إلى أي كائن في أي وقت.

التكرار من خلال خصائص الكائن

enumeration

للتكرار على جميع خصائص الكائن ، يوجد نوع خاص من for .. in يستخدم البناء:

for(let key in obj) {
   // key - property name
   // obj [key] - property value
  ...
}

For example :

محرر مباشر

function learnJavaScript() {
  let result = ''

  const obj = {
    age: 15,
    b: 'true',
    color: 'red'
  }

  for (let key in obj) {
    result += key + ':' + obj[key] + ' '
  }

  return result
}

function learnJavaScript() {
  let result = ''

  const obj = {
    age: 15,
    b: 'true',
    color: 'red'
  }

  for (let key in obj) {
    result += key + ':' + obj[key] + ' '
  }

  return result
}