יש שתי דרכים להגדיר את המאפיינים של אובייקט, לשנות אותם ולגשת אליהם: סימון נקודות וסימון סוגריים.
סימון עם נקודה
כפי שאפשר לראות בכמה מהדוגמאות הקודמות, סימון הנקודות משתמש בנקודה (.
) בין
לאובייקט ולמפתח המאפיין שאליו מתבצעת גישה:
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." }