تمثيل وتحسين بيانات JSON في Javascript وتلخيص كيفية تعامل JS مع JSON

هناك العديد من البيانات، أريد أن أقوم بتجميعها بناءً على الوقت ليعرضها واجهة المستخدم الأمامية

[
 {"date":"2017-12-22","start_time":"10:00:00","end_time":"10:00:00","status":"Performance Time"},
 {"date":"2017-12-22","start_time":"10:40:00","end_time":"10:40:00","status":"Performance Time"},
 {"date":"2017-12-23","start_time":"10:00:00","end_time":"10:00:00","status":"Performance Time"},
 {"date":"2017-12-23","start_time":"10:40:00","end_time":"10:40:00","status":"Performance Time"}
]

تحتاج إلى تحويل إلى النمط التالي

[
 {
 date: '2017-12-22',
 data: [
  {
  date: '2017-12-22',
  start_time: '10:00:00',
  end_time: '10:00:00',
  status: 'Performance Time'
  },
  {
  date: '2017-12-22',
  start_time: '10:40:00',
  end_time: '10:40:00',
  status: 'Performance Time'
  }
 ]
 },
 {
 date: '2017-12-23',
 data: [
  {
  date: '2017-12-23',
  start_time: '10:00:00',
  end_time: '10:00:00',
  status: 'Performance Time'
  },
  {
  date: '2017-12-23',
  start_time: '10:40:00',
  end_time: '10:40:00',
  status: 'Performance Time'
  }
 ]
 }
]

1.الطريقة الأصلية، هناك الكثير من الشبكات

var map = {},
 nList = []
 //استعراض اللوحة الأصلية
 for (var i = 0; i < arr.length; i++) {
 var item = arr[i]
 //إذا لم يكن map موجودًا، أضف في nList الجديدة
 if (!map[item.date]) {
  nList.push({
  date: item.date,
  data: [item]
  )
  map[item.date] = item
 } else {
  // مرور عبر nList
  for (var j = 0; j < nList.length; j++) {
  var nItem = nList[j],
  // إذا تم العثور على date المطلوب، فاضفه
  if (nItem.date == item.date) {
   nItem.data.push(item)
   // الخروج من الدورة
   break
  }
  }
 }
 }

سرعة التشغيل: مرور 1000 عنصر حوالي 3ms، يبدو غير لطيف، ولم يتم استخدام خصائص ES5، لذا قررت تحسينها بنفسي!

2. استخدام خصائص ES5

استبدال for بforEach وevery

let map = {},
 nList = []
 arr.forEach((item) => {
 if (!map[item.date]) {
  nList.push({
  date: item.date,
  data: [item]
  )
  map[item.date] = item
 } else {
  // لأن forEach لا يدعم break، لذا يتم استخدام every لتحقيق ذلك
  nList.every((nItem) => {
  if (nItem.date === item.date) {
   nItem.data.push(item)
   return false
  }
  return true
  )
 }
 )

تحسين الأداء بنسبة 50٪، حوالي 1.5ms!

3. ممارسات تحسين الأداء

بسبب أن تواريخ array الخاصة بي مرتبة بشكل ترتيب، وليس هناك تكرارات، يمكن النظر في إزالة الدوران الثاني

let map = {},
 nList = []
 // إعداد المفتاح الأولي إلى 0
 let _nkey = 0
 arr.forEach((item, index) => {
 if (index === 0) {
  nList.push({
  date: item.date,
  data: [item]
  )
 } else {
  let oItem = arr[index - 1]
  // إذا كانت date متطابقة مع السابقة، فتضيفها إلى الحالي، وإلا فتضيفها إلى nList
  if (item.date === oItem.date) {
  nList[_nkey]['data'].push(item)
  } else {
  nList.push({
   date: item.date,
   data: [item]
  )
  _nkey ++
  }
 }
 )

تحسين الكفاءة مرة أخرى بنسبة 50٪، حوالي 1ms!

النقطة: تلخيص JS لتحويل JSON

JSON (JavaScript Object Notation) هو شكل بيانات خفيف الوزن للتبادل، يستخدم نموذج نصي مستقل عن اللغة، وهو شكل مثالي للتبادل البياني. كما أن JSON هو شكل أصلي في JavaScript، مما يعني أنه لا يتطلب أي API أو مكتبة خاصة لمعالجة بيانات JSON في JavaScript.

　　　 هذا المقال يهدف إلى تلخيص المبادئ الأساسية لمعالجة JSON في JS.

　　　 في JSON، هناك نوعان من البنيات: العنصر والمجموعة.

　　　 1. يبدأ عنصر بـ “{” (المنكرة اليمنى) ويُنتهي بـ “}” (المنكرة اليمنى). يتبع كل “الاسم” بـ “:” (النقطة العبرية)；يُفصل ‘الاسم/القيمة’ بـ “,” (الcomma). يتم تضمين الاسم بين الأسلاك；“القيمة” إذا كانت نصية يجب أن تكون بين الأسلاك، أما إذا كانت عددية فإنها لا تحتاج إلى ذلك. على سبيل المثال:　

var o={"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"};

　　　 2. مجموعة هي مجموعة من القيم مرتبة. تبدأ مجموعة بـ “[” (المنكرة اليمنى) وتنتهي بـ “]” (المنكرة اليمنى). يتم فصل القيم بـ “,” (الcomma).

　　　 مثال:

  var jsonranklist=[{"xlid":"cxh","xldigitid":123456,"topscore":2000,"topplaytime":"2009-08-20"},{"xlid":"zd","xldigitid":123456,"topscore":1500,"topplaytime":"2009-11-20"}];

　　　 لإتاحة التعامل السهل مع بيانات JSON، يقدم JSON حزمة json.js، عنوان التحميل:http://www.json.org/json.js

　　　 في عملية نقل البيانات، يتم نقل JSON كنص، أي كSTRING، بينما يتم التعامل مع JSON كعنصر JSON، لذا فإن التحويل بين JSON النص وعنصر JSON أمر مهم. على سبيل المثال:

　　　 نص JSON:

  var str1 = '{ "name": "cxh", "sex": "man" }';

　　　 عنصر JSON:　　　

 var str2 = { "name": "cxh", "sex": "man" };

　　　 أولاً: تحويل النص JSON إلى عنصر JSON

　　　 لإستخدام str1 المذكورة أعلاه، يجب استخدام التحويل التالي إلى عنصر JSON:

　 // من JSON النص إلى عنصر JSON
var obj = eval('(' + str + ')');

أو　　

var obj = str.parseJSON(); // من JSON النص إلى عنصر JSON

　　　 أو　

  var obj = JSON.parse(str); // من JSON النص إلى عنصر JSON

　　　 ثم، يمكنك قراءته كما يلي:

  Alert(obj.name);
  Alert(obj.sex);

　　　 الإشارة الخاصة: إذا كان obj كائن JSON أصلي، فإن تحويله باستخدام دالة eval() (حتى لو كان تحويلًا متكررًا) سيظل كائن JSON، ولكن إذا تم تحويله باستخدام دالة parseJSON()، فإنه قد يسبب مشكلة (سيتم رمي استثناء لغة النص).

　　　 الجزء الثاني: يمكن استخدام toJSONString() أو العنصر الكامل JSON.stringify() لتحويل كائن JSON إلى سلسلة JSON.

　　　 مثال:　　　

var last=obj.toJSONString(); // تحويل كائن JSON إلى نص JSON

　　　 أو

  var last=JSON.stringify(obj); // تحويل كائن JSON إلى نص JSON
  alert(last);

　　　 الإشارة

　　　 بصرف النظر عن دالة eval() التي تأتي مدمجة في JavaScript، فإن العديد من المبادئ الأخرى تأتي من مكتبة json.js. قام إصدار JSON الجديد بتعديل API، حيث تم إدراج JSON.stringify() و JSON.parse() كجزء من الكائنات المدمجة في JavaScript، حيث أصبحت JSON.stringify() هي Object.toJSONString()، و JSON.parse() هي String.parseJSON(). إذا ظهر رسالة عدم العثور على دالة toJSONString() و parseJSON()، فإن ذلك يعني أن إصدار مكتبة JSON الخاصة بك قديم.

البيان: محتويات هذا المقال مأخوذة من الإنترنت، مملوكة للمساهمين، مقدم من مستخدمي الإنترنت بتحميلهم بأنفسهم، هذا الموقع لا يمتلك حقوق الملكية، لم يتم تعديل المحتوى بشكل يدوي، ولا يتحمل أي مسؤولية قانونية مرتبطة بذلك. إذا كنت قد وجدت محتوى يشتبه في انتهاك حقوق النسخ، فأنت مرحب بك في إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال # ب @) لتقديم الشكوى، و تقديم الدليل المتعلق، و في حالة إثبات الحقيقة، سيتم حذف المحتوى المزعوم بسرعة.