دليل مبتدئ لمقارنة البيانات في JavaScript

يعد العمل مع البيانات والأوقات مهمة مشتركة في تطوير البرمجيات. في JavaScript ، لديك تكامل متكامل Date كائن ، ولكن يمكن أن يكون مرهقًا بعض الشيء وله مراوغاته. هناك مكتبات من مقدمي الخدمات الثالثة مثل date-fns لمعالجة وتنسيق البيانات في جافا سكريبت. ومع ذلك ، يمكن تنفيذ المهمة الأساسية لمقارنة بيانات اثنين بسرعة باستخدام الأساليب المتكاملة ، كما ستتعلم في هذه المقالة. يبدأون من الأساسيات ويغيرون مكتبة من مقدمي الخدمات الثالثة. date-fnsلمقارنة التاريخ في JavaScript. ضرب!

جدول المحتويات #

مقدمة #

JavaScript لديه Date الكائن الذي يعد وقتًا واحدًا في تنسيق معتمد على النظام الأساسي. يتم تحقيق ذلك من خلال تصوير كائن التاريخ برقم مع ميلي ثانية منذ 1 يناير 1970.

تقدم JavaScript عدة خيارات لمقارنة البيانات:

• المقارنة المباشرة: يمكنك المقارنة مباشرة Date الكائنات التي تستخدم مشغلي المقارنة مثل >حاضر <حاضر >=حاضر <=ولكن هذه الطريقة يمكن أن تكون غير موثوقة في بعض الحالات.

• احصل على الوقت () الطريقة: ال getTime() أعادت الطريقة عدد المللي ثانية منذ عصر UNIX (ثواني مرت منذ 00:00 UTC في 1 يناير 1970) ، مما يعني أنها موثوقة لمقارنة البيانات.

• استخدم المكتبات: مكتبات مقدمي الخدمات الثالثة مثل date-fns توفير وظائف مريحة لمقارنة البيانات ، بما في ذلك isBeforeحاضر isAfterحاضر isEqualحاضر compareAscالخ. مكتبات JavaScript الشهيرة الأخرى هي لحظة. وفقا لاتجاهات NPM date-fns هو الأكثر شعبية مع أكثر من 23 مليون تنزيل في الأسبوع وقت كتابة هذا المنشور المدونة.

في هذا الدليل ، تقوم بدراسة أمثلة على جميع الطرق المذكورة أعلاه. يمكنك أيضًا معرفة أفضل الممارسات لمقارنة البيانات في JavaScript.

متطلبات #

من أجل اتباع أمثلة الرمز المحدد في هذه المقالة ، تحتاج إلى ما يلي:

• Node.js 22: يستخدم الرمز في هذا البرنامج التعليمي أحدث وظائف JavaScript/Node.js. لذلك ، يُنصح بتثبيت أحدث إصدار على جهاز الكمبيوتر الخاص بك.
• محرر رمز: كل محرر رمز تشعر بالراحة معه. لقد استخدمت VS Code لهذا البرنامج التعليمي. يمكنك استخدام أي محرر حددته.
• المعرفة العامة لجافا سكريبت: يتطلب هذا البرنامج التعليمي فهمًا أساسيًا لكيفية عمل JavaScript.

من المفيد أيضًا الحصول على ما يلي:

• NPM أو الغزل: هناك حاجة إلى مدير حزمة العقدة إذا كنت ترغب في التثبيت date-fns.
• git و github: يجب أن تعرف كيفية استنساخ التغييرات الخاصة بك إلى مستودع GIT على Github أو خدمة مماثلة ، والالتزام بها واضغط عليها في مستودع GIT.

لنبدأ!

قارن كائنات بيانات JavaScript # مباشرة

يمكنك القيام بكائنات بيانات JavaScript مباشرة مع عوامل المقارنة مثل المقارنة <حاضر >حاضر >=حاضر <=و ===. هذه هي أبسط وأسهل طريقة لمقارنة البيانات.

ومع ذلك ، يمكن أن يؤدي استخدام هؤلاء المشغلين إلى نتائج غير متوقعة في سيناريوهات معينة Date تعمل الكائنات داخليًا ، على سبيل المثال عند النظر في المناطق الزمنية. سترى هذا في المثال التالي:

const date1 = new Date('2024-11-01');
const date2 = new Date('2024-10-01');
const date3 = new Date('2024-11-02');
console.log(`date1: ${date1}`);
console.log(`date2: ${date2}`);
console.log(`date3: ${date3}`);
const date1Iso = date1.toISOString();
const date2Iso = date2.toISOString();
const date3Iso = date3.toISOString();

console.log(`================== Comparison results ==================`);
const comparisonTable = [
['date1 < date2', `${date1Iso} < ${date2Iso}`, date1 < date2],
['date1 > date2', `${date1Iso} > ${date2Iso}`, date1 > date2],
['date1 <= date2', `${date1Iso} <= ${date2Iso}`, date1 <= date2],
['date1 >= date2', `${date1Iso} >= ${date2Iso}`, date1 >= date2],
['date1 === date2', `${date1Iso} === ${date2Iso}`, date1 === date2],
['date1 < date3', `${date1Iso} < ${date3Iso}`, date1 < date3],
['date1 > date3', `${date1Iso} > ${date3Iso}`, date1 > date3],
['date2 === date2', `${date2Iso} > ${date2Iso}`, date2 === date2],
]
console.table(comparisonTable);

إذا قمت بتشغيل البرنامج النصي أعلاه node index.js يتم عرض الطبعة التالية:

المشكلة التي يمكن أن تحدث هنا هي عند إنشاء التاريخ new Date() ويتم إنشاء موعد آخر مع new Date() بعد ثانيتين ، لا تتطابق هاتان البيانات. ستكون المناطق الزمنية أيضًا بمثابة اعتبار إضافي لمقارنة كائنات التاريخ.

لمقارنة موثوقة ، استخدم دائمًا في المناقش.
القسم التالي.

قارن البيانات باستخدام طريقة GetTime #

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

ال getTime() إجراء:

• يعيد عدد المللي ثانية التي مرت منذ عصر UNIX (1 يناير 1970 ، 00:00:00 بالتوقيت العالمي).
• يقدم تمثيلًا عدديًا ثابتًا لتاريخ مناسب للمقارنة المباشرة.
• أيضا مع getTime لاحظ مشكلة المنطقة الزمنية ، الساعة 5 صباحًا في لندن في الساعة 4 مساءً.

يوضح المثال التالي كيف يمكنك مقارنة البيانات getTime() طريقة القيام بذلك
أكثر موثوقية:

const date1 = new Date('2024-11-01');
const date2 = new Date('2024-10-01');
const date3 = new Date('2024-11-02');
console.log(`date1: ${date1}`);
console.log(`date2: ${date2}`);
console.log(`date3: ${date3}`);
const date1Epoch = date1.getTime();
const date2Epoch = date2.getTime();
const date3Epoch = date3.getTime();

console.log(`================== Comparison results ==================`);
const comparisonTable = [
['date1 < date2', `${date1Epoch} < ${date2Epoch}`, date1Epoch < date2Epoch],
['date1 > date2', `${date1Epoch} > ${date2Epoch}`, date1Epoch > date2Epoch],
['date1 >= date2', `${date1Epoch} >= ${date2Epoch}`, date1Epoch >= date2Epoch],
['date1 === date2', `${date1Epoch} === ${date2Epoch}`, date1Epoch === date2Epoch],
['date1 < date3', `${date1Epoch} < ${date3Epoch}`, date1Epoch < date3Epoch],
['date1 > date3', `${date1Epoch} > ${date3Epoch}`, date1Epoch > date3Epoch],
['date2 === date2', `${date2Epoch} > ${date2Epoch}`, date2Epoch === date2Epoch],
]
console.table(comparisonTable);

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

فيما يلي إصدار البرنامج النصي الذي كتب في ملفات الملفات -gittime.txt:

هنا ، أيضًا ، لا تقارن وقت تاريخ “البيانات” ، مما يعني 2024-11-01 3:00:00 بعد 2024-11-01 2:58:58النظر في هذه الحقيقة. فكر أيضًا في الاختلافات في المنطقة الزمنية.

في القسم التالي ، سوف تتعلم المزيد عن مكتبة JavaScript شائعة جدًا مع الاسم
date-fns وكيفية استخدامها لمقارنة البيانات بسهولة.

مقارنة البيانات مع تاريخ fns #

هناك العديد من مكتبات NPM الخارجية التي يمكنها العمل مع البيانات في JavaScript مثل FRES ، لحظة. واحدة من أكثر المكتبات شعبية للتلاعب بالتاريخ والوقت هي تاريخ التنزيل إلى NPM أكثر من 23 مليون مرة في الأسبوع.

في هذا القسم ستتعلم كيفية استخدامه بسهولة date-fns مقارنة البيانات في جافا سكريبت. قبل الذهاب إلى الأمثلة ، تأكد من تثبيته في مشروعك. إذا كان مشروعك هو مشروع NPM وكان لديك ملف package.json ، قم بتنفيذ الأمر التالي لتثبيته:

npm install date-fns 

في وقت كتابة هذا المنشور المدونة ، date-fns مع الإصدار 4.1.0. في القسم التالي ، ستتعلم كيفية الاستخدام compareAsc خارج date-fns مقارنة البيانات.

قارن البيانات مع المقارنات #

ال compareAsc تعمل في date-fns قارن بين بيانات اثنين وأرجع رقمًا يشير إلى ترتيبه النسبي. ستعود:

• -1 إذا كان التاريخ الأول قبل التاريخ الثاني.
• 0 إذا كانت البيانات هي نفسها.
• 1 إذا كان التاريخ الأول بعد التاريخ الثاني.

يوضح المثال التالي كيفية استخدامه compareAsc لمقارنة البيانات في JavaScript:

import { compareAsc } from 'date-fns';
const date1 = new Date('2024-11-01T00:00:00');
const date2 = new Date('2024-11-01T00:00:02');
const date3 = new Date(2024, 14, 2);
console.log(`date1: ${date1}`);
console.log(`date2: ${date2}`);
console.log(`date3: ${date3}`);
const date1Iso = date1.toISOString();
const date2Iso = date2.toISOString();
const date3Iso = date3.toISOString();

console.log(`================== Comparison results ==================`);
const comparisonTable = [
['compareAsc date1 and date2', `${date1Iso} and ${date2Iso}`, compareAsc(date1, date2)],
['compareAsc date2 and date1', `${date2Iso} and ${date1Iso}`, compareAsc(date2, date1)],
['compareAsc date2 and date2', `${date2Iso} and ${date1Iso}`, compareAsc(date2, date2)],
['compareAsc date1 and date3', `${date1Iso} and ${date3Iso}`, compareAsc(date1, date3)],
['compareAsc date3 and date1', `${date3Iso} and ${date1Iso}`, compareAsc(date3, date1)],
['compareAsc date2 and date3', `${date2Iso} and ${date3Iso}`, compareAsc(date2, date3)],
];
console.table(comparisonTable);
console.log(`================== Sorting dates ASC ==================`);
console.log([date1, date2, date3].sort(compareAsc));

دعونا نحلل الرمز أعلاه. أولاً ، استيراد وظيفة المقارنة مع FNS التاريخ مع واردات ESM. ثم تهيئة ثلاثة كائنات التاريخ Date1 و Date2 و Date3. ثم قم بإجراء مقارنة مختلفة بين البيانات الثلاثة وأيضًا فرز البيانات الثلاث بترتيب تصاعدي. إذا قمت بتشغيل البرنامج النصي أعلاه ، فإن الإخراج يشبه ما يلي:

هناك وظائف أخرى مفيدة مثل isBeforeحاضر isAfter و isEqual يمكنك التحقق من ذلك في تاريخ مستندات FNS. في الجزء التالي ، سوف تتعلم المزيد عن الوظائف الأخرى مثل هذه.

وظائف تاريخ مفيدة أخرى #

date-fns هي مكتبة JavaScript قوية ومتعددة الاستخدامات للمعالجة وتنسيق البيانات والأوقات. لقد رأيت للتو بعض الوظائف date-fns في المثال أعلاه ، بعض أكثر فائدة date-fns الوظائف كما يلي:

• format: لتشكيل التاريخ وفقًا لمخطط المنطقة المطلوب.
• addDaysحاضر addMonthsحاضر addYears: إضافة أيام وشهور وسنوات إلى موعد.
• subDaysحاضر subMonthsحاضر subYears: تشديد أيام وشهور وسنوات من موعد.
• isTodayحاضر isYesterdayحاضر isTomorrow: للتحقق مما إذا كان التاريخ اليوم ، أمس أو غدًا.
• الفرق في المللي ثانية: هل وظيفة أخرى مفيدة يمكن مقارنة البيانات في JavaScript.

هذه بعض الوظائف المفيدة الأخرى العديدة date-fns لديك ، يمكنك أن تجد واحدة
القائمة الكاملة في وثائق تاريخ FNS. استخدم وظيفة البحث لتحقيق أفضل ما في الأمر.

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

دبلوم #

في هذا البرنامج التعليمي ، واجهت ثلاث طرق مختلفة لمقارنة البيانات في JavaScript. أولاً ، استخدمت مقارنة مباشرة ، ثم تعلمت كيفية مقارنة البيانات بشكل موثوق مع كائن تاريخ JavaScript getTime() إجراء. بعد كل شيء ، تعلموا كيفية استخدامه date-fns مكتبة لمقارنة البيانات مع مقارنة أسهل. آمل أن يكون ذلك قد ساعدك على فهم المزيد عنها javascript compare dates وأنهم تعلموا شيئًا مفيدًا منه.

ترميز سعيد ومقارنة البيانات في JS!