קורס Front-End Web Development שיעור תרגול מערכים ואובייקטים

דיונים מקורסים
#1
זה נושא דיון מלווה לערך המקורי ב- https://www.tocode.co.il/bundles/html5-web-development/lessons/arrays-objects-lab
#2

function sum(a,b){
return a+b;
}

function sumArg(){
let res=arguments.reduce(sum);
return res;
}

console.log(sumArg(2,3,4));

מדוע זה לא עובד?

#3

הי,

בשביל להדביק כאן קוד מה שצריך זה לכתוב בשורה חדשה סימן גרש הפוך (Back tick) שלוש פעמים ברצף, אחרי זה הקוד ואחרי זה שוב שלוש פעמים גרש הפוך כלומר משהו כזה רק בלי הנקודה בתחילת השורה:

. ```
. code goes here
. ```

ואז הקוד נראה מסודר וצבוע.

הקוד שהדבקת יראה כך:

function sum(a,b){
  return a+b;
}

function sumArg(){
  let res=arguments.reduce(sum);
  return res;
}

console.log(sumArg(2,3,4));

הבעיה כאן שהמשתנה arguments הוא לא באמת מערך ולכן אין לו את הפונקציה reduce. בגירסאות חדשות של JavaScript הסיפור הזה נפתר באמצעות אפשרות לקבל מספר ארגומנטים ולשמור אותם אוטומטית למערך. יש על זה שיעור כאן:
https://www.tocode.co.il/bundles/es6/lessons/parameters

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

function sumArg(){
  const argumentsArray = Array.prototype.slice.call(arguments, 0);
  let res=argumentsArray.reduce(sum);
  return res;
}

console.log(sumArg(2,3,4));

גירסא מודרנית יותר של אותו טריק היא הפונקציה Array.from:

function sumArg(){
  const argumentsArray = Array.from(arguments)
  let res=argumentsArray.reduce(sum);
  return res;
}

console.log(sumArg(2,3,4));
#4 
function args(...arr){
 function sum(a,b){
   return a+b;
 }
 let res=arr.reduce(sum);
 return res;
}
console.log(args(1,2,3,4,5,35));

טוב לגבי העברת פרמטרים בסרטון זה היה מובן וכתבתי את הפתרון לפי זה,
אבל לא הבנתי ממש את הגירסה של ES5
ואת הגירסה השנייה הבנתי בכך שהמחלקה ARRAY יוצר מאותו מערך ARGUMENTS(שהבנתי ממך שהוא לא ממש מערך שפונקציות מערך אמתיות כמו שהראת FILTER,REDUCE,MAP עובדות עליו) של הפרמטרים מערך “אמיתי” שלו לתוך RES

#5

לגבי ES5-

הפונקציה Array.from היא ממש אחלה - כמו שכתבת היא לוקחת משהו שהוא לא מערך והופכת אותו למערך אמיתי. הבעיה שפונקציה זו היא חדשה ב ES6.

הפונקציה Array.prototype.slice של ES5 היא המקבילה הישנה יותר. היא גם מקבלת פרמטר ומעתיקה ממנו אלמנטים ומחזירה מערך. הפרמטרים שלה זה איזה אלמנטים להעתיק. הבעיה היחידה איתה שהיא מקבלת את הפרמטר בתור ערך this של הפונקציה ולא כהעברת פרמטרים רגילה, ובגלל זה הכתיב שנראה מסורבל.

בהמשך הקורס תלמד על העברת פרמטרים בשיטה זו (עם call ו apply) ועל המשמעות של this ואז אני מקוה שדברים יהיו יותר ברורים - ואם לא אז שאל שוב וארחיב.

#6

תרגיל 2, למה לא עובד? אני מקבלת שגיאה שהפונקציה
unique
לא קיימת

function exer2(…arguments)
{
console.log((Array.from(arguments)).unique());
}

#7

לפי מה שהבנתי הפונקציה unique היא לא חלק ממחלקת Array בjavascript
ואם זה פונקציה מספרייה כלשהי אז היא צריכה להיות כלולה בדף שלך…
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype
דף שמסביר על הפונקציות השונות של המחלקה Array

#8

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

function find_duplicate_in_array(arra1) {
        var object = {};
        var result = [];

        arra1.forEach(function (item) {
          if(!object[item])
              object[item] = 0;
            object[item] += 1;
        })

        for (var prop in object) {
           if(object[prop] >= 2) {
               result.push(prop);
           }
        }

        return result;

    }

    console.log(find_duplicate_in_array([1, 2, -2, 4, 5, 4, 7, 8, 7, 7, 71, 3, 6]));
#9

הפונקציה unique היא משהו שאתה צריך לכתוב בתרגיל (כמו שעשית :slight_smile:)

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

#10 
answer 1
function sum(...arr){
    return arr.reduce((a,b)=>a+b)
            }
לייק 1
#11 
answer 2
function onlyUnique(...arr){
    return arr.filter((v,i,a)=>a.indexOf(v)===i)
}
לייק 1
#12

השמות v, i, a לא הכי ברורים… מומלץ לבחור שמות קצת יותר ארוכים אולי value, index ו array

לייק 1
#13

image
image1366×768 152 KB

#14

למה לא עובד לי??
האם הקוד כתוב נכון והבעיה רק בגלל שבכרום?

#15

הי,
שימי לב להודעת השגיאה:

Cannot read property ‘push’ of undefined

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

מה המשתנים בשורה זו? מה הערכים שאת חושבת שצריכים להיות להם? תוכלי להוסיף הודעות הדפסה ולראות מה הערכים האמיתיים שלהם ולשתף?

#16

image
image1366×768 118 KB

#17

שינתי את הפונקציה ורציתי לדעת למה זה לא סוכם.
דבר שני איך אני מקבלת בפונקציה מערך האם ע"י שלוש נקודות לפני המשתנה כפי שרשמתי?

#18

הי,

  1. כן - כתיבת שלוש נקודות לפני משתנה הופכת אותו למערך. אבל שימי לב מה יצא לך עכשיו:
arr.push(anotherArray);

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

// pushing normal items
var arr = [];
arr.push(10, 20, 30);
console.log(arr); // prints: [ 10, 20, 30 ]
console.log(arr.length); // prints: 3

לעומת זאת:

var arr = [];
var items = [10, 20, 30];
arr.push(items);
console.log(arr); // prints: [ [ 10, 20, 30 ] ]
console.log(arr.length); // prints: 1

בעצם המערך השני הוא מערך של איבר יחיד שהוא בעצמו מערך.

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

כדאי מאוד במקרים כאלה להוסיף לקוד הודעות הדפסה כדי לראות את זה לייב על הקוד שכתבת ולהשתכנע.

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

arr.reduce(sum, 0);
#19

תודה על ההסבר המורחב

לייק 1
#20 
function sum(n1,n2){
    return n1+n2;
}

function T5(...arr1)
{
   var sumarr = arr1.reduce(sum,0);
    console.log(sumarr);
}