יש שתי דרכים להגדיר את המאפיינים של אובייקט, לשנות אותם ולגשת אליהם: סימון נקודות וסימון סוגריים.
סימון נקודות
כפי שאפשר לראות בכמה מהדוגמאות הקודמות, סימון הנקודות משתמש בנקודה (.
) בין
לאובייקט ולמפתח המאפיין שאליו מתבצעת גישה:
const myObj = {
"myProp": "String value."
};
myObj.myProp;
> "String value."
אפשר להשתמש בסימון הנקודות כדי לגשת לנכסים, לשנות אותם או ליצור אותם חדשים באמצעות אופרטורים של הקצאות:
const myObj = {};
myObj.myProp = "String value.";
myObj;
> Object { myProp: "String value." }
שרשור של מפתחות מאפיינים באמצעות סימון נקודות מאפשר לגשת לתכונות של אובייקטים שהם בעצמם מאפיינים של אובייקט:
const myObj = {
"myProp": {
"childProp" : true
}
};
myObj.myProp.childProp;
> true;
עם זאת, שימוש בתחביר הזה במקרים שבהם מפתח שצוין בשרשרת לא יכול להיות
מוגדרות עלולות לגרום לשגיאות. בדוגמה הבאה, myMissingProp
אינו
של האובייקט myObj
, לכן בניסיון לגשת אל myObj.myMissingProp
התוצאה תהיה undefined
. המערכת תנסה לגשת לנכס ב-undefined
, כאילו זה
הוא היה אובייקט, וגורם לשגיאה:
const myObj = {
"myProp": {
"childProp" : true
}
};
> myObj.myMissingProp
> undefined
myObj.myMissingProp.childProp;
> Uncaught TypeError: myObj.myMissingProp is undefined
כדי לטפל בבעיה, הוספנו ל-ES2020 'אופרטור שרשרת אופציונלי' (?.
)
כדי לגשת בבטחה למאפיינים בתוך אובייקטים.
const myObj = {
"myProp": {
"childProp" : true
}
};
myObj.myMissingProp?.childProp;
> undefined
מפתחות שהגישה אליהם מתבצעת באמצעות סימון נקודות לא מוקפים במירכאות כמו מחרוזת מילוליים. כלומר אפשר להשתמש בסימון הנקודות כדי לגשת רק למפתחות נכסים מזהים חוקיים:
const myObj = {
"1": true,
"key with spaces": true
};
myObj.1;
> Uncaught SyntaxError: unexpected token: numeric literal
myObj.key with spaces;
> Uncaught SyntaxError: unexpected token: keyword 'with'
לכן מומלץ לפעול לפי כללי מזהה. כשמציינים מפתחות מאפיינים, כשהדבר אפשרי. אם הדבר לא אפשרי עבור באמצעות תחביר חלופי של סימון סוגריים, אפשר להגדיר ולגשת מפתחות אובייקטים מבוססי מחרוזות שלא עומדים בכללי המזהים.
סימון סוגריים
סימון הסוגריים משתמש בקבוצה של סוגריים ([]
) שמכילים ערך שמחושב
מחרוזת (או סמל) שמייצגת את
מפתח מאפיין.
const myObj = {
"myProp": "String value."
};
myObj["myProp"];
> "String value."
התחביר הזה הרבה יותר פחות מתירני, למרות שהוא מתירני מספיק
להיות מבלבל, כי הערך בסוגריים מרובעים מוערך כליטרל מחרוזת.
ללא קשר לסוג הנתונים. לדוגמה, הערך הבוליאני false
ערך המספר 10
משמש לגישה למאפיינים שמשויכים למחרוזת
מקשים מילוליים "false"
ו-"10"
:
const myObj = {
"false": 25,
"10" : true,
"key with spaces": true
};
myObj[false];
> 25
myObj[10];
> true
myObj["key with spaces"];
> true
העוצמה של התחביר הזה היא בגמישות שלו, שמאפשרת להשתמש ב מחרוזות שנוצרות באופן דינמי כדי לגשת למאפיינים. הדוגמה הבאה משתמשת מספר אקראי כדי לבחור אחד משלושת המאפיינים של אובייקט:
const colors = {
"color1" : "red",
"color2" : "blue",
"color3" : "green"
};
const randomNumber = Math.ceil( Math.random() * 3 );
colors[ "color" + randomNumber ];
> "blue"
בדומה לסימון הנקודות, ניתן להשתמש בסימון הסוגריים גם כדי לגשת וגם ליצור חדש באמצעות אופרטורים של הקצאות:
const myObj = {};
myObj[ "myProp" ] = "String value.";
myObj;
> Object { myProp: "String value." }