Site Logo
כניסה

JavaScript Objects

המילה אובייקט יכולה להיות קצת מבלבלת בהקשר של JavaScript מאחר ואובייקט ב JavaScript הוא בסך הכל אוסף של מפתחות וערכים, מה שמכונה בשפות אחרות Hash או Dictionary או Associative Array.
בפרק זה נלמד כיצד להגדיר אובייקטים ולבצע עליהם פעולות פשוטות, ונסיים בסקירה זריזה של ספריית JavaScript בשם underscore המאפשרת ביצוע פעולות מורכבות על אובייקטים ומערכים.

תוכן עניינים

  1. הגדרת אובייקט
  2. גישה לפי מפתח
  3. הספריה Underscore

1. הגדרת אובייקט

אובייקט מוגדר באמצעות סוגריים מסולסלים בתוכם נכתוב את המפתחות והערכים של האובייקט מופרדים בסימן נקודותיים. המפתחות הם בסך הכל מחרוזות והערכים יכולים להיות מכל סוג, כולל ערכים מסוגים שונים באותו האובייקט. הנה כמה דוגמאות:


var email = {
  bob: 'bob@gmail.com',
  jane: 'jane@walla.co.il',
  bill: 'crazypen@yahoo.com'
};

var details = {
  name: 'Peter Parker',
  alias: 'Spider-Man',
  appeared_in: 1962,
  friends: ['Superman', 'Batman']
};

 

2. גישה לפי מפתח

אנו שולפים ערך מאובייקט לפי מפתח באמצעות פעולת סוגריים מרובעים (בדומה לשליפה ממערך) או באמצעות סימן הנקודה. אותה הפעולה מאפשרת גם הוספת ערכים חדשים לאובייקט ושינוי ערכים קיימים. הנה כמה פעולות גישה ושינוי על האובייקטים שהוגדרו למעלה:


// print out bob's email
console.log(email['bob']);

// same as:
console.log(email.bob);

// change an email address
email.jane = 'jane@yahoo.com';

// add a new email
email.barbara = 'barbara@gmail.com';

גישה באמצעות סוגריים מרובעים מאפשרת גישה לא ישירה, מאחר ובסוגריים המרובעים ניתן לרשום כל ביטוי JavaScript והמפתח שניגש אליו יהיה תוצאת הביטוי. כך למשל תוכלו לגשת למפתח שאת שמו יש לכם בתוך משתנה:


var name = 'bob';
email[name] = name + '@gmail.com';

הפקודה delete מאפשרת מחיקת מפתח מאובייקט למשל באופן הבא:


delete email.jane;

 

3. הספריה Underscore

הספריה underscore.js כוללת אוסף מאוד נרחב של פונקציות לביצוע פעולות על מערכים ואובייקטים. אציג כאן חלק מפעולות אלו, ובכל מקרה אני ממליץ לעבור על הרשימה המלאה בתיעוד הספריה כאן:
http://underscorejs.org/

כדי להשתמש בפונקציות מתוך הספריה עלינו להוסיף את קובץ ה JavaScript של הספריה לתוכנית שלנו. אפשר להוריד את הקובץ ולטעון אותו כמו שאתם טוענים את קבצי ה js שלכם (רק זכרו לטעון את הספריה לפני טעינת הסקריפטים שמשתמשים בה), או לטעון את הקובץ ישירות משרת CDN.
הנה דוגמא לקובץ HTML שטוען את הספריה משרת CDN ולאחריה קובץ main.js מהשרת המקומי:


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>

<!-- library files -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.7.0/underscore-min.js"></script>

<!-- page code -->
<script src="main.js"></script>
</body>
</html>

עכשיו שראינו כיצד לשלב את קוד הספריה בתוכנית שלנו נעבור לראות מספר פונקציות של underscore שיעזרו לנו בעבודה עם אובייקטים:


var email = {
  bob: 'bob@gmail.com',
  jane: 'jane@walla.co.il',
  bill: 'crazypen@yahoo.com'
};

// get all keys from an object
// keys is: ['bob', 'jane', 'bill']
var keys = _.keys(email);

// bob_and_jane is now a new object with only:
// { bob: 'bob@gmail.com', 
//   jane: 'jane@walla.co.il' }
var bob_and_jane = _.pick(email, 'bob', 'jane');

// true - object has key bob
_.has(email, 'bob');

// false - object doesn't have key foo
_.has(email, 'foo');

מעבר ליכולות העבודה עם אובייקטים, הספריה underscore כוללת גם פוקנציות רבות לעבודה עם מערכים, פונקציות ושאר פונקציות עזר.

פקודות שראינו במדריך:

// define an object
var me = {
    name: 'ynon',
    web: 'tocode.co.il'
};

// add a new key/value pair
me.likes = 'stuff';

// change an existing value
me.likes = ['reading', 'sleeping'];

// delete a key/value pair
delete me.likes;

// get all the keys
var keys = Object.keys(me);

// iterate key/value pairs:
for (var i=0; i<keys.length; i++) {
    var k = keys[i];
    var v = me[k];
    
    console.log('me[' + k + '] = ' + v);
}

// Merging objects with Object.assign
var data = {
  color: 'blue',
  border: '10px solid black',  
};

var defaults = {
  display: 'block', 
  border: '20px solid yellow',
};

var res = Object.assign({}, defaults, data);

console.log(res);