Home-theater-designers
ES6 מתייחס לגרסה 6 של שפת התכנות ECMA Script. ECMA Script הוא השם הסטנדרטי ל- JavaScript, וגירסה 6 היא הגרסה הבאה לאחר גירסה 5, שיצאה בשנת 2011. היא מהווה שיפור משמעותי בשפת ה- JavaScript, ומוסיפה עוד תכונות רבות שנועדו להקל על פיתוח תוכנה בהיקף נרחב. .
ECMAScript, או ES6, פורסם ביוני 2015. לאחר מכן שונה שמו ל- ECMAScript 2015. התמיכה בדפדפן האינטרנט בשפה המלאה עדיין לא הושלמה, אם כי חלקים גדולים נתמכים. דפדפני אינטרנט מרכזיים תומכים בכמה תכונות של ES6. עם זאת, ניתן להשתמש בתוכנה הידועה בשם שחקן להמיר קוד ES6 ל- ES5, הנתמך טוב יותר ברוב הדפדפנים.
הבה נבחן כעת כמה שינויים מרכזיים ש- ES6 מביא ל- JavaScript.
1. קבועים
לבסוף מושג הקבועים הגיע ל- JavaScript! קבועים הם ערכים שניתן להגדירם פעם אחת בלבד (לפי היקף, היקף המוסבר להלן). הגדרה מחדש בתוך אותו היקף מעוררת שגיאה.
const JOE = 4.0
JOE= 3.5
// results in: Uncaught TypeError: Assignment to constant variable.
אתה יכול להשתמש בקבוע בכל מקום שבו אתה יכול להשתמש במשתנה ( איפה ).
console.log('Value is: ' + joe * 2)
// prints: 8
2. משתנים ותכונות פונקציות
ברוכים הבאים למאה ה -21, JavaScript! עם ES6, משתנים שהוכרזו באמצעות לתת (והקבועים מתארים לעיל) פעלו על פי כללי היקף היקף הבלוק בדיוק כמו ב- Java, C ++ וכו '(למידע נוסף, ראה כיצד להכריז על משתנים ב- JavaScript.)
לפני עדכון זה, משתנים ב- JavaScript היו היקפי פונקציות. כלומר, כאשר היית צריך היקף חדש עבור משתנה, היית צריך להכריז עליו בתוך פונקציה.
משתנים שומרים על הערך עד סוף הבלוק. לאחר החסימה, הערך בבלוק החיצוני (אם קיים) משוחזר.
page_fault_in_nonpaged_area windows 10
{
let x = 'hello';
{
let x = 'world';
console.log('inner block, x = ' + x);
}
console.log('outer block, x = ' + x);
}
// prints
inner block, x = world
outer block, x = hello
אתה יכול להגדיר מחדש קבועים גם בתוך בלוקים כאלה.
{
let x = 'hello';
{
const x = 4.0;
console.log('inner block, x = ' + x);
try {
x = 3.5
} catch(err) {
console.error('inner block: ' + err);
}
}
x = 'world';
console.log('outer block, x = ' + x);
}
// prints
inner block, x = 4
inner block: TypeError: Assignment to constant variable.
outer block, x = world
3. פונקציות חץ
ES6 מציגה פונקציות חץ ל- JavaScript. (אלה דומים לפונקציות מסורתיות, אך יש להם תחביר פשוט יותר.) בדוגמה הבאה, איקס היא פונקציה המקבלת פרמטר שנקרא ל , ומחזיר את התוספת שלו:
var x = a => a + 1;
x(4) // returns 5
באמצעות תחביר זה, תוכל להגדיר ולהעביר ארגומנטים בפונקציות בקלות.
שימוש עם א לכל אחד() :
[1, 2, 3, 4].forEach(a => console.log(a + ' => ' + a*a))
// prints
1 => 1
2 => 4
3 => 9
4 => 16
הגדר פונקציות המקבלות טיעונים מרובים על ידי סגירתן בסוגריים:
[22, 98, 3, 44, 67].sort((a, b) => a - b)
// returns
[3, 22, 44, 67, 98]
4. פרמטרי ברירת מחדל של פונקציות
כעת ניתן להכריז על פרמטרים של פונקציות עם ערכי ברירת מחדל. בהמשך, איקס היא פונקציה עם שני פרמטרים ל ו ב . הפרמטר השני ב ניתן ערך ברירת מחדל של 1 .
var x = (a, b = 1) => a * b
x(2)
// returns 2
x(2, 2)
// returns 4
שלא כמו שפות אחרות כגון C ++ או פייתון, פרמטרים עם ערכי ברירת מחדל עשויים להופיע לפני אלה ללא ברירות מחדל. שים לב שפונקציה זו מוגדרת כבלוק עם a לַחֲזוֹר ערך כמחשה.
var x = (a = 2, b) => { return a * b }
אולם הטיעונים מותאמים משמאל לימין. בפנייה הראשונה להלן, ב יש לו לא מוגדר ערך למרות ל הוכרז עם ערך ברירת מחדל. הטיעון שהועבר תואם ל ולא ב . הפונקציה חוזרת NaN .
x(2)
// returns NaN
x(1, 3)
// returns 3
כשאתה עובר במפורש לא מוגדר כטיעון, ערך ברירת המחדל משמש אם יש כזה.
x(undefined, 3)
// returns 6
5. פרמטרי פונקציית מנוחה
בעת הפעלת פונקציה, לפעמים נוצר צורך להיות מסוגל להעביר מספר שרירותי של ארגומנטים, ולעבד טיעונים אלה בתוך הפונקציה. צורך זה מטופל על ידי פרמטרי פונקציית מנוחה תחביר. הוא מספק דרך ללכוד את שאר הטיעונים לאחר הארגומנטים המוגדרים באמצעות התחביר המוצג להלן. טיעונים נוספים אלה נלכדים במערך.
var x = function(a, b, ...args) { console.log('a = ' + a + ', b = ' + b + ', ' + args.length + ' args left'); }
x(2, 3)
// prints
a = 2, b = 3, 0 args left
x(2, 3, 4, 5)
// prints
a = 2, b = 3, 2 args left
6. תבנית מחרוזת
תבנית מחרוזת מתייחסת לאינטרפולציה של משתנים וביטויים למחרוזות באמצעות תחביר כמו perl או המעטפת. תבנית מחרוזת מוקפת בתווים של סימון גב ( ' ). לעומת זאת ציטוטים בודדים ( ' ) או מרכאות כפולות ( ' ) מציינים מיתרים רגילים. ביטויים בתוך התבנית מסומנים בין $ { ו } . הנה דוגמה:
var name = 'joe';
var x = `hello ${name}`
// returns 'hello joe'
כמובן שאתה יכול להשתמש בביטוי שרירותי להערכה.
// define an arrow function
var f = a => a * 4
// set a parameter value
var v = 5
// and evaluate the function within the string template
var x = `hello ${f(v)}`
// returns 'hello 20'
ניתן להשתמש בתחביר זה להגדרת מחרוזות גם להגדרת מחרוזות מרובות שורות.
var x = `hello world
next line`
// returns
hello world
next line
7. מאפייני אובייקט
ES6 מביא תחביר ליצירת אובייקטים פשוט יותר. תסתכל על הדוגמה שלהלן:
var x = 'hello world', y = 25
var a = { x, y }
// is equivalent to the ES5:
{x: x, y: y}
גם שמות נכסים ממוחשבים הם די מגניבים. עם ES5 ואילך, כדי להגדיר מאפיין אובייקט בעל שם מחשוב, היה עליך לעשות זאת:
var x = 'hello world', y = 25
var a = {x: x, y: y}
a['joe' + y] = 4
// a is now:
{x: 'hello world', y: 25, joe25: 4}
עכשיו אתה יכול לעשות הכל בהגדרה אחת:
var a = {x, y, ['joe' + y]: 4}
// returns
{x: 'hello world', y: 25, joe25: 4}
וכמובן, כדי להגדיר שיטות, אתה יכול פשוט להגדיר אותה בשם:
var a = {x, y, ['joe' + y]: 4, foo(v) { return v + 4 }}
a.foo(2)
// returns
6
8. תחביר הגדרת מחלקה רשמית
הגדרת כיתה
ולבסוף, JavaScript מקבל תחביר הגדרה כיתתי רשמי. הוא אמנם רק סוכר תחבירי על פני המחלקות המבוססות על סוג האבות, אך הוא משמש לשיפור בהירות הקוד. זה אומר שזה כן לֹא הוסף דגם אובייקט חדש או כל דבר מפואר כזה.
class Circle {
constructor(radius) {
this.radius = radius
}
}
// use it
var c = new Circle(4)
// returns: Circle {radius: 4}
שיטות הכרזה
הגדרת שיטה היא גם פשוטה למדי. אין שם הפתעות.
class Circle {
constructor(radius) {
this.radius = radius
}
computeArea() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
c.computeArea()
// returns: 50.26548245743669
גטרס וסטטר
כעת יש לנו גם גטררים וסטרים, עם עדכון פשוט לתחביר. תן לנו להגדיר מחדש את מעגל שיעור עם אֵזוֹר תכונה.
class Circle {
constructor(radius) {
this.radius = radius
}
get area() { return Math.PI * this.radius * this.radius }
}
var c = new Circle(4)
// returns: Circle {radius: 4}
c.area
// returns: 50.26548245743669
הבה נוסיף כעת סתר. כדי להיות מסוגל להגדיר רַדִיוּס כנכס שניתן להגדיר, עלינו להגדיר מחדש את השדה בפועל ל _רַדִיוּס או משהו שלא יתנגש עם המתנחל. אחרת אנו נתקלים בשגיאת הצפת מחסנית.
להלן המחלקה המוגדרת מחדש:
class Circle {
constructor(radius) {
this._radius = radius
}
get area() { return Math.PI * this._radius * this._radius }
set radius(r) { this._radius = r }
}
var c = new Circle(4)
// returns: Circle {_radius: 4}
c.area
// returns: 50.26548245743669
c.radius = 6
c.area
// returns: 113.09733552923255
בסך הכל, זוהי תוספת נחמדה ל- JavaScript מונחה עצמים.
יְרוּשָׁה
בנוסף להגדרת שיעורים באמצעות מעמד מילת המפתח, תוכל גם להשתמש ב משתרע מילת המפתח לרשת משיעורי על. בואו נראה איך זה עובד עם דוגמה.
class Ellipse {
constructor(width, height) {
this._width = width;
this._height = height;
}
get area() { return Math.PI * this._width * this._height; }
set width(w) { this._width = w; }
set height(h) { this._height = h; }
}
class Circle extends Ellipse {
constructor(radius) {
super(radius, radius);
}
set radius(r) { super.width = r; super.height = r; }
}
// create a circle
var c = new Circle(4)
// returns: Circle {_width: 4, _height: 4}
c.radius = 2
// c is now: Circle {_width: 2, _height: 2}
c.area
// returns: 12.566370614359172
c.radius = 5
c.area
// returns: 78.53981633974483
וזו הייתה הקדמה קצרה לכמה מהתכונות של JavaScript ES6.
ההמשך: היכרות עם כמה שיטות מערך JavaScript חשובות ותסריט של אנימציה רובוטית רגישה לקול! כמו כן, גלה אודות מסגרת חזיתית נהדרת בשם Vue.
קרדיט תמונה: micrologia/ פיקדונות
לַחֲלוֹק לַחֲלוֹק צִיוּץ אימייל Canon לעומת ניקון: איזה מותג מצלמות עדיף?קנון וניקון הם שני השמות הגדולים ביותר בתעשיית המצלמות. אבל איזה מותג מציע את המערך הטוב ביותר של מצלמות ועדשות?
כיצד להוריד סרטוני יוטיוב בחינםקרא הבא נושאים קשורים
- תִכנוּת
- JavaScript
הירשם לניוזלטר שלנו
הצטרף לניוזלטר שלנו לקבלת טיפים, סקירות, ספרים אלקטרוניים בחינם ומבצעים בלעדיים!
לחצו כאן להרשמה