ES6 كائن التحسين الحرفي: تبسيط عمليات كائن JavaScript

الخصائص الحرفية للكائن المحسّن الذي تم تقديمه بواسطة ES6 تبسيط معالجة الكائنات بشكل كبير في JavaScript ، والتي تنعكس بشكل أساسي في أسماء السمات المختصرة ، وأسماء الطرق المختصرة ، وأسماء السمات المحسوبة.

أسماء السمات المختصرة تجعل تعريفات السمات أكثر إيجازًا ؛ أسماء الطرق المختصرة تبسيط بناء بناء الجملة ؛ بينما تسمح أسماء السمات المحسوبة بإنشاء أسماء السمات الديناميكية بناءً على قيم متغيرة.

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

تجدر الإشارة إلى أن حرفيات الكائنات المحسّنة غير متوافقة مع جميع المتصفحات القديمة ، ولكن يمكنك استخدام مترجم مثل Babel لتحويل رمز ES6 إلى رمز ES5 لحل مشكلات التوافق.

يستكشف هذه المقالة إمكانيات حرفيات كائن JavaScript ، وخاصة التحسينات التي ألقاها تحديثات ECMAScript الأخيرة. يعد إنشاء كائنات JavaScript باستخدام التدوين الحرفي قويًا جدًا. ميزات جديدة تم تقديمها في ES2015 (ES6) تجعل معالجة الكائنات أكثر ملاءمة في جميع المتصفحات الحديثة (باستثناء IE) و Node.js. في بعض اللغات ، إذا كان يجب إعلان الفصل قبل إنشاء كائن ، فإنه يزيد من تكلفة وقت التطوير وقوة المعالجة. وفي JavaScript ، يمكن إنشاء الكائنات بسهولة ديناميكيًا. على سبيل المثال:

// ES5 兼容代码
var myObject = {
  prop1: 'hello',
  prop2: 'world',
  output: function() {
    console.log(this.prop1   ' '   this.prop2);
  }
};

myObject.output(); // hello world

في كثير من الحالات ، يتم استخدام الكائنات لمرة واحدة ، مثل إعدادات التكوين ، وتعريفات الوحدة ، ومعلمات الطريقة ، وقيم إرجاع الوظيفة ، إلخ.

تهيئة الكائن من المتغير

عادة ما يتم إنشاء سمات الكائنات بواسطة المتغيرات بنفس الاسم. على سبيل المثال:

// ES5 代码
var a = 1, b = 2, c = 3;
var obj = {
  a: a,
  b: b,
  c: c
};

// obj.a = 1, obj.b = 2, obj.c = 3

لا يلزم التكرار في ES6!

// ES6 代码
const a = 1, b = 2, c = 3;
const obj = { a, b, c };

// obj.a = 1, obj.b = 2, obj.c = 3

هذا مفيد عند إرجاع الكائنات باستخدام نمط الوحدة النمطية الكشف (مساحات أسماء فعالة للرمز لتجنب تسمية تعارضات). على سبيل المثال:

// ES6 代码
const lib = (() => {
  function sum(a, b) { return a   b; }
  function mult(a, b) { return a * b; }
  return { sum, mult };
})();

console.log(lib.sum(2, 3));  // 5
console.log(lib.mult(2, 3)); // 6

ربما رأيت استخدامات مماثلة في وحدة ES6:

// lib.js
function sum(a, b) { return a   b; }
function mult(a, b) { return a * b; }
export { sum, mult };

تعريف الكائن تعريف Abbreviation

طرق الكائن في ES5 تتطلب إعلانات الوظيفة. على سبيل المثال:

// ES5 代码
var lib = {
  sum: function(a, b) { return a   b; },
  mult: function(a, b) { return a * b; }
};

console.log(lib.sum(2, 3));  // 5
console.log(lib.mult(2, 3)); // 6

لم يعد مطلوبًا في ES6 ، يمكن استخدام بناء جملة الاختصار التالي:

// ES6 代码
const lib = {
  sum(a, b) { return a   b; },
  mult(a, b) { return a * b; }
};

console.log(lib.sum(2, 3));  // 5
console.log(lib.mult(2, 3)); // 6

وظيفة سهم ES6 => لا يمكن استخدام بناء الجملة هنا لأن الطريقة تتطلب اسمًا. وهذا هو ، إذا قمت بتسمية كل طريقة مباشرة (على غرار ES5) ، يمكنك استخدام وظيفة السهم. على سبيل المثال:

// ES6 代码
const lib = {
  sum: (a, b) => a   b,
  mult: (a, b) => a * b
};

console.log(lib.sum(2, 3));  // 5
console.log(lib.mult(2, 3)); // 6

مفتاح السمة الديناميكية

في ES5 ، لا يمكن استخدام المتغيرات كأسماء رئيسية ، على الرغم من أنه يمكن إضافتها بعد إنشاء الكائن . على سبيل المثال:

// ES5 代码
var key1 = 'one';
var obj = { two: 2, three: 3 };
obj[key1] = 1;

// obj.one = 1, obj.two = 2, obj.three = 3

يمكن أن يعين ES6 مفاتيح الكائن ديناميكيًا عن طريق وضع التعبيرات في [ قوسين مربع ] . على سبيل المثال:

// ES6 代码
const key1 = 'one';
const obj = { [key1]: 1, two: 2, three: 3 };

// obj.one = 1, obj.two = 2, obj.three = 3

يمكن استخدام أي تعبير لإنشاء مفتاح. على سبيل المثال:

// ES6 代码
const i = 1;
const obj = { ['i'   i]: i };
console.log(obj.i1); // 1

يمكن استخدام المفاتيح الديناميكية للطرق والخصائص. على سبيل المثال:

// ES6 代码
const i = 2;
const obj = { ['mult'   i]: x => x * i };
console.log(obj.mult2(5)); // 10

ما إذا كان ينبغي إنشاء الخصائص والأساليب الديناميكية هو سؤال آخر. قد يكون من الصعب قراءة الكود ، من الأفضل إنشاء مصنع أو فئة كائن.

(سيتم تلخيص المحتوى التالي لفترة وجيزة بسبب قيود المساحة ، وسيتم الاحتفاظ بالنقاط الأساسية)

تفكيك (احصل على المتغيرات من خصائص الكائن)

تفكيك ES6 يبسط عملية استخراج قيم السمات من الكائنات إلى المتغيرات.

معلمات الوظيفة الافتراضية

تجمع المعلمات الافتراضية الافتراضية ES6 وتفكيكها لتبسيط معالجة معلمات الوظيفة ، خاصة عند معالجة المعلمات الاختيارية.

ES2018 (ES9) سمة REST/SERPHING

ملخص: es6 لا تغير الحرفيين الكائنات المحسّنة الطريقة الأساسية التي تعمل بها JavaScript ، لكنها توفر الجهد لكتابة الكود ويجعل الكود أكثر وضوحًا وأكثر إيجازًا.

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