كائنات عرض جافا سكريبت
كيفية عرض كائنات JavaScript؟
سيؤدي عرض كائن JavaScript إلى إخراج [كائن كائن] .
مثال
const person = {
name: "John",
age: 30,
city: "New York"
};
document.getElementById("demo").innerHTML = person;
بعض الحلول الشائعة لعرض كائنات JavaScript هي:
- عرض خصائص الكائن بالاسم
- عرض خصائص الكائن في حلقة
- عرض الكائن باستخدام Object.values ()
- عرض الكائن باستخدام JSON.stringify ()
عرض خصائص الكائن
يمكن عرض خصائص الكائن كسلسلة:
مثال
const person = {
name: "John",
age: 30,
city: "New York"
};
document.getElementById("demo").innerHTML =
person.name + "," + person.age + "," + person.city;
عرض الكائن في حلقة
يمكن جمع خصائص الكائن في حلقة:
مثال
const person = {
name: "John",
age: 30,
city: "New York"
};
let txt = "";
for (let x in person) {
txt += person[x] + " ";
};
document.getElementById("demo").innerHTML = txt;
يجب عليك استخدام الشخص [x] في الحلقة.
لن يعمل person.x (لأن x متغير).
باستخدام Object.values ()
يمكن تحويل أي كائن JavaScript إلى مصفوفة باستخدام Object.values():
const person = {
name: "John",
age: 30,
city: "New York"
};
const myArray = Object.values(person);
myArray هي الآن مصفوفة JavaScript جاهزة للعرض:
مثال
const person = {
name: "John",
age: 30,
city: "New York"
};
const myArray = Object.values(person);
document.getElementById("demo").innerHTML = myArray;
Object.values() مدعوم في جميع المتصفحات الرئيسية منذ عام 2016.
| 54 (2016) | 14 (2016) | 47 (2016) | 10 (2016) | 41 (2016) |
باستخدام JSON.stringify ()
يمكن تحويل أي كائن JavaScript (تحويله إلى سلسلة) باستخدام وظيفة JavaScript
JSON.stringify():
const person = {
name: "John",
age: 30,
city: "New York"
};
let myString = JSON.stringify(person);
myString هي الآن سلسلة JavaScript جاهزة للعرض:
مثال
const person = {
name: "John",
age: 30,
city: "New York"
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
ستكون النتيجة سلسلة تتبع ترميز JSON:
{"الاسم": "جون"، "العمر": 50، "المدينة": "نيويورك"}
JSON.stringify() مضمن في JavaScript ومدعوم في جميع المتصفحات الرئيسية.
Stringify التواريخ
JSON.stringify يحول التواريخ إلى سلاسل:
مثال
const person = {
name: "John",
today: new Date()
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Stringify وظائف
JSON.stringify لن يقوم بتشديد الوظائف:
مثال
const person = {
name: "John",
age: function () {return 30;}
};
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
يمكن "إصلاح" هذا إذا قمت بتحويل الوظائف إلى سلاسل قبل التشديد.
مثال
const person = {
name: "John",
age: function () {return 30;}
};
person.age = person.age.toString();
let myString = JSON.stringify(person);
document.getElementById("demo").innerHTML = myString;
Stringify Arrays
من الممكن أيضًا ترميز مصفوفات JavaScript:
مثال
const arr = ["John", "Peter", "Sally", "Jane"];
let myString = JSON.stringify(arr);
document.getElementById("demo").innerHTML = myString;
ستكون النتيجة سلسلة تتبع ترميز JSON:
["جون" ، "بيتر" ، "سالي" ، "جين"]